/* =========================================================
   AURELIA JEWELLERY
   ASAREH ADAPTIVE WEB APP SYSTEM

   File:
   assets/css/asareh-webapp.css

   Purpose:
   - Adaptive Web App Layout
   - Mobile App Experience
   - Tablet Experience
   - iPhone Safe Areas
   - Android Safe Areas
   - Dynamic Viewport
   - Standalone PWA Support
   - Touch Optimized UI
   - Mobile App Navigation Foundation
   - Mobile Bottom Sheets
   - Mobile Shop Experience
   - High DPI / Modern Device Support
========================================================= */


/* =========================================================
   01. DEVICE VARIABLES
========================================================= */

:root {

    --asareh-safe-top:
        env(safe-area-inset-top, 0px);

    --asareh-safe-right:
        env(safe-area-inset-right, 0px);

    --asareh-safe-bottom:
        env(safe-area-inset-bottom, 0px);

    --asareh-safe-left:
        env(safe-area-inset-left, 0px);

    --asareh-app-header-height:
        70px;

    --asareh-app-bottom-nav-height:
        68px;

    --asareh-app-content-gap:
        18px;

    --asareh-app-page-padding:
        16px;

    --asareh-app-card-radius:
        18px;

    --asareh-app-sheet-radius:
        26px;

    --asareh-app-touch-size:
        44px;

    --asareh-app-touch-size-large:
        52px;

}


/* =========================================================
   02. MODERN VIEWPORT FOUNDATION
========================================================= */

html {

    min-height:
        100%;

    min-height:
        100dvh;

    overscroll-behavior-y:
        none;

    -webkit-text-size-adjust:
        100%;

    text-size-adjust:
        100%;

    scroll-padding-top:
        calc(
            var(--asareh-app-header-height)
            +
            var(--asareh-safe-top)
        );
}


body {

    min-width:
        320px;

    min-height:
        100%;

    min-height:
        100dvh;

    margin:
        0;

    overscroll-behavior-x:
        none;

    -webkit-tap-highlight-color:
        transparent;

    -webkit-touch-callout:
        none;
}


/* =========================================================
   03. MEDIA SAFETY
========================================================= */

img,
video,
svg,
canvas {

    max-width:
        100%;

    height:
        auto;
}


img {

    -webkit-user-drag:
        none;

    user-select:
        none;
}


/* =========================================================
   04. TOUCH FOUNDATION
========================================================= */

button,
a,
input,
select,
textarea {

    touch-action:
        manipulation;
}


button,
a {

    -webkit-tap-highlight-color:
        transparent;
}


button,
.asareh-icon-button,
.asareh-button {

    min-height:
        var(--asareh-app-touch-size);
}


/* =========================================================
   05. MOBILE INPUT SAFETY
========================================================= */

input,
textarea,
select {

    max-width:
        100%;
}


@media (max-width: 768px) {

    input,
    textarea,
    select {

        font-size:
            16px !important;
    }

}


/* =========================================================
   06. APP MAIN FOUNDATION
========================================================= */

main {

    width:
        100%;

    overflow:
        clip;
}


/* =========================================================
   07. DESKTOP BEHAVIOR
========================================================= */

@media (min-width: 1201px) {

    body {

        overflow-x:
            hidden;
    }


    .asareh-mobile-only,
    .asareh-app-nav {

        display:
            none !important;
    }

}


/* =========================================================
   08. TABLET MODE
========================================================= */

@media (
    min-width: 769px
) and (
    max-width: 1200px
) {

    :root {

        --asareh-app-page-padding:
            24px;

        --asareh-app-content-gap:
            22px;
    }


    body {

        overscroll-behavior-y:
            auto;
    }


    .asareh-header {

        padding-top:
            var(--asareh-safe-top);
    }


    .asareh-button {

        min-height:
            48px;
    }


    .asareh-icon-button {

        min-width:
            46px;

        min-height:
            46px;
    }

}


/* =========================================================
   09. MOBILE APP MODE
========================================================= */

@media (max-width: 768px) {

    :root {

        --asareh-app-header-height:
            66px;

        --asareh-app-page-padding:
            16px;

        --asareh-app-content-gap:
            16px;
    }


    html {

        background:
            var(
                --asareh-bg-main,
                #f5efe9
            );
    }


    body {

        position:
            relative;

        width:
            100%;

        min-height:
            100svh;

        min-height:
            100dvh;

        background:
            var(
                --asareh-bg-main,
                #f5efe9
            );

        overscroll-behavior-y:
            auto;
    }


    main {

        min-height:
            calc(
                100dvh
                -
                var(
                    --asareh-app-header-height
                )
            );
    }

}


/* =========================================================
   10. MOBILE HEADER
========================================================= */

@media (max-width: 768px) {

    .asareh-header {

        height:
            calc(
                var(
                    --asareh-app-header-height
                )
                +
                var(
                    --asareh-safe-top
                )
            );

        padding-top:
            var(
                --asareh-safe-top
            );
    }


    .asareh-header.is-sticky {

        height:
            calc(
                var(
                    --asareh-app-header-height
                )
                +
                var(
                    --asareh-safe-top
                )
            );

        background:
            rgba(
                28,
                19,
                13,
                0.93
            );

        backdrop-filter:
            blur(24px)
            saturate(145%);

        -webkit-backdrop-filter:
            blur(24px)
            saturate(145%);
    }


    .asareh-header__container {

        height:
            var(
                --asareh-app-header-height
            );
    }


    .asareh-header__logo {

        touch-action:
            manipulation;
    }

}


/* =========================================================
   11. MOBILE HERO
========================================================= */

@media (max-width: 768px) {

    .asareh-hero {

        min-height:
            100svh;

        min-height:
            100dvh;
    }


    .asareh-hero__content {

        min-height:
            100svh;

        min-height:
            100dvh;

        padding-top:
            calc(
                var(
                    --asareh-app-header-height
                )
                +
                var(
                    --asareh-safe-top
                )
                +
                38px
            );

        padding-bottom:
            calc(
                72px
                +
                var(
                    --asareh-safe-bottom
                )
            );
    }


    .asareh-hero__actions {

        width:
            100%;
    }


    .asareh-hero__actions
    .asareh-button {

        min-height:
            var(
                --asareh-app-touch-size-large
            );
    }

}


/* =========================================================
   12. MOBILE HERO TYPOGRAPHY SAFETY
========================================================= */

@media (max-width: 768px) {

    .asareh-hero__title {

        text-wrap:
            balance;

        overflow-wrap:
            normal;
    }


    .asareh-hero__description {

        text-wrap:
            pretty;
    }

}


/* =========================================================
   13. APP-LIKE MOBILE MENU
========================================================= */

@media (max-width: 768px) {

    .asareh-mobile-menu {

        width:
            100%;

        height:
            100svh;

        height:
            100dvh;

        max-width:
            none;

        padding:
            calc(
                16px
                +
                var(
                    --asareh-safe-top
                )
            )
            calc(
                20px
                +
                var(
                    --asareh-safe-right
                )
            )
            calc(
                24px
                +
                var(
                    --asareh-safe-bottom
                )
            )
            calc(
                20px
                +
                var(
                    --asareh-safe-left
                )
            );

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .asareh-mobile-menu__header {

        position:
            sticky;

        z-index:
            5;

        top:
            0;

        background:
            var(
                --asareh-color-espresso-950,
                #120c08
            );
    }


    .asareh-mobile-menu__nav {

        padding-top:
            26px;
    }


    .asareh-mobile-menu__link {

        min-height:
            54px;

        display:
            flex;

        align-items:
            center;

        font-size:
            17px;
    }


    .asareh-mobile-menu__footer {

        padding-bottom:
            var(
                --asareh-safe-bottom
            );
    }

}


/* =========================================================
   14. SEARCH AS MOBILE APP SCREEN
========================================================= */

@media (max-width: 768px) {

    .asareh-search-drawer {

        height:
            100svh;

        height:
            100dvh;

        padding:
            calc(
                18px
                +
                var(
                    --asareh-safe-top
                )
            )
            calc(
                18px
                +
                var(
                    --asareh-safe-right
                )
            )
            calc(
                24px
                +
                var(
                    --asareh-safe-bottom
                )
            )
            calc(
                18px
                +
                var(
                    --asareh-safe-left
                )
            );

        overflow-y:
            auto;

        overscroll-behavior:
            contain;
    }


    .asareh-search-drawer__header {

        min-height:
            52px;
    }


    .asareh-search-form {

        margin-top:
            26px;
    }


    .asareh-search-form__input {

        height:
            64px;

        font-size:
            18px !important;
    }

}


/* =========================================================
   15. MOBILE CATEGORY EXPERIENCE
========================================================= */

@media (max-width: 768px) {

    .asareh-category-grid {

        scroll-snap-type:
            y proximity;
    }


    .asareh-category-card {

        scroll-snap-align:
            start;
    }

}


/* =========================================================
   16. TOUCH CARDS
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .asareh-product-card,
    .asareh-category-card,
    .asareh-journal-card {

        -webkit-tap-highlight-color:
            transparent;
    }


    .asareh-product-card {

        transform:
            none !important;
    }


    .asareh-product-card__wishlist {

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            none !important;

        min-width:
            42px;

        min-height:
            42px;
    }

}


/* =========================================================
   17. MOBILE PRODUCT GRID
========================================================= */

@media (max-width: 768px) {

    .asareh-products-grid {

        align-items:
            start;
    }


    .asareh-product-card__media {

        border-radius:
            0;
    }


    .asareh-product-card__content {

        min-height:
            92px;
    }


    .asareh-product-card__title {

        line-height:
            1.5;
    }


    .asareh-product-card__price {

        white-space:
            nowrap;
    }

}


/* =========================================================
   18. MOBILE HORIZONTAL SCROLLER FOUNDATION
========================================================= */

.asareh-app-horizontal-scroll {

    display:
        flex;

    gap:
        14px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


.asareh-app-horizontal-scroll::-webkit-scrollbar {

    display:
        none;
}


.asareh-app-horizontal-scroll > * {

    flex:
        0 0 auto;

    scroll-snap-align:
        start;
}


/* =========================================================
   19. SHOP CATEGORY APP SCROLLER
========================================================= */

@media (max-width: 768px) {

    .asareh-shop-categories {

        position:
            relative;

        overflow:
            hidden;
    }


    .asareh-shop-categories__inner {

        display:
            flex !important;

        grid-template-columns:
            none !important;

        gap:
            0;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        -ms-overflow-style:
            none;

        scroll-snap-type:
            x proximity;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .asareh-shop-categories__inner::-webkit-scrollbar {

        display:
            none;
    }


    .asareh-shop-category {

        flex:
            0 0 auto;

        min-width:
            145px;

        scroll-snap-align:
            start;
    }

}


/* =========================================================
   20. SHOP MOBILE TOOLBAR
========================================================= */

@media (max-width: 768px) {

    .asareh-shop-toolbar {

        position:
            sticky;

        z-index:
            50;

        top:
            calc(
                var(
                    --asareh-app-header-height
                )
                +
                var(
                    --asareh-safe-top
                )
            );

        margin-right:
            calc(
                var(
                    --asareh-app-page-padding
                )
                * -1
            );

        margin-left:
            calc(
                var(
                    --asareh-app-page-padding
                )
                * -1
            );

        padding:
            10px
            var(
                --asareh-app-page-padding
            );

        background:
            rgba(
                248,
                244,
                239,
                0.94
            );

        border-top:
            1px solid
            rgba(
                74,
                52,
                37,
                0.07
            );

        border-bottom:
            1px solid
            rgba(
                74,
                52,
                37,
                0.10
            );

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }


    .asareh-shop-toolbar__filter {

        min-height:
            46px;
    }


    .asareh-shop-toolbar__sort select {

        min-height:
            46px;
    }

}


/* =========================================================
   21. MOBILE FILTER = BOTTOM SHEET
========================================================= */

@media (max-width: 768px) {

    .asareh-shop-filter {

        position:
            fixed;

        z-index:
            4200;

        right:
            0;

        bottom:
            0;

        left:
            0;

        top:
            auto;

        width:
            100%;

        max-width:
            none;

        max-height:
            min(
                88svh,
                88dvh
            );

        padding:
            0
            var(
                --asareh-app-page-padding
            )
            calc(
                20px
                +
                var(
                    --asareh-safe-bottom
                )
            );

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        border-radius:
            var(
                --asareh-app-sheet-radius
            )
            var(
                --asareh-app-sheet-radius
            )
            0
            0;

        background:
            var(
                --asareh-color-ivory-50,
                #f8f4ef
            );

        box-shadow:
            0
            -20px
            70px
            rgba(
                18,
                12,
                8,
                0.22
            );

        transform:
            translateY(105%);

        visibility:
            hidden;

        transition:
            transform
            520ms
            cubic-bezier(.16, 1, .3, 1),

            visibility
            520ms
            cubic-bezier(.16, 1, .3, 1);
    }


    .asareh-shop-filter.is-open {

        transform:
            translateY(0);

        visibility:
            visible;
    }


    .asareh-shop-filter::before {

        display:
            block;

        width:
            44px;

        height:
            4px;

        margin:
            10px
            auto
            2px;

        content:
            "";

        border-radius:
            20px;

        background:
            rgba(
                28,
                19,
                13,
                0.18
            );
    }


    .asareh-shop-filter__mobile-header {

        position:
            sticky;

        z-index:
            3;

        top:
            0;

        display:
            flex;

        min-height:
            62px;

        align-items:
            center;

        justify-content:
            space-between;

        background:
            var(
                --asareh-color-ivory-50,
                #f8f4ef
            );

        border-bottom:
            1px solid
            rgba(
                74,
                52,
                37,
                0.10
            );
    }

}


/* =========================================================
   22. FILTER BACKDROP
========================================================= */

.asareh-filter-backdrop {

    position:
        fixed;

    z-index:
        4100;

    inset:
        0;

    background:
        rgba(
            12,
            8,
            5,
            0.58
        );

    opacity:
        0;

    visibility:
        hidden;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    transition:
        opacity
        350ms
        ease,

        visibility
        350ms
        ease;
}


.asareh-filter-backdrop.is-visible {

    opacity:
        1;

    visibility:
        visible;
}


/* =========================================================
   23. MOBILE BOTTOM NAV FOUNDATION
========================================================= */

.asareh-app-nav {

    display:
        none;
}


@media (max-width: 768px) {

    .asareh-app-nav {

        position:
            fixed;

        z-index:
            1500;

        right:
            10px;

        bottom:
            calc(
                8px
                +
                var(
                    --asareh-safe-bottom
                )
            );

        left:
            10px;

        display:
            grid;

        min-height:
            var(
                --asareh-app-bottom-nav-height
            );

        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );

        align-items:
            center;

        overflow:
            hidden;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );

        border-radius:
            20px;

        background:
            rgba(
                28,
                19,
                13,
                0.94
            );

        box-shadow:
            0
            14px
            50px
            rgba(
                10,
                6,
                4,
                0.28
            );

        backdrop-filter:
            blur(22px)
            saturate(150%);

        -webkit-backdrop-filter:
            blur(22px)
            saturate(150%);
    }


    .asareh-app-nav__item {

        position:
            relative;

        display:
            flex;

        min-width:
            0;

        min-height:
            60px;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            4px;

        color:
            rgba(
                255,
                255,
                255,
                0.52
            );

        font-family:
            var(
                --asareh-font-ui
            );

        font-size:
            9px;

        transition:
            color
            220ms
            ease;
    }


    .asareh-app-nav__item svg {

        width:
            21px;

        height:
            21px;
    }


    .asareh-app-nav__item.is-active,
    .asareh-app-nav__item:hover {

        color:
            var(
                --asareh-color-champagne-400,
                #dbc7b2
            );
    }


    .asareh-app-nav__badge {

        position:
            absolute;

        top:
            6px;

        right:
            calc(
                50%
                -
                19px
            );

        display:
            flex;

        min-width:
            15px;

        height:
            15px;

        padding:
            0
            4px;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            20px;

        color:
            #1c130d;

        background:
            #dbc7b2;

        font-size:
            8px;

        font-weight:
            700;
    }

}


/* =========================================================
   24. PAGE PADDING WHEN BOTTOM APP NAV EXISTS
========================================================= */

@media (max-width: 768px) {

    body:has(.asareh-app-nav)
    main {

        padding-bottom:
            calc(
                var(
                    --asareh-app-bottom-nav-height
                )
                +
                var(
                    --asareh-safe-bottom
                )
                +
                28px
            );
    }

}


/* =========================================================
   25. MOBILE STICKY CTA FOUNDATION
========================================================= */

.asareh-app-sticky-action {

    display:
        none;
}


@media (max-width: 768px) {

    .asareh-app-sticky-action {

        position:
            fixed;

        z-index:
            1400;

        right:
            0;

        bottom:
            0;

        left:
            0;

        display:
            flex;

        gap:
            10px;

        padding:
            10px
            calc(
                var(
                    --asareh-app-page-padding
                )
                +
                var(
                    --asareh-safe-right
                )
            )
            calc(
                10px
                +
                var(
                    --asareh-safe-bottom
                )
            )
            calc(
                var(
                    --asareh-app-page-padding
                )
                +
                var(
                    --asareh-safe-left
                )
            );

        background:
            rgba(
                248,
                244,
                239,
                0.95
            );

        border-top:
            1px solid
            rgba(
                74,
                52,
                37,
                0.10
            );

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }


    .asareh-app-sticky-action
    .asareh-button {

        flex:
            1;

        min-height:
            54px;
    }

}


/* =========================================================
   26. MOBILE MODAL / SHEET FOUNDATION
========================================================= */

.asareh-app-sheet {

    position:
        fixed;

    z-index:
        5000;

    right:
        0;

    bottom:
        0;

    left:
        0;

    max-height:
        90dvh;

    padding:
        18px
        var(
            --asareh-app-page-padding
        )
        calc(
            20px
            +
            var(
                --asareh-safe-bottom
            )
        );

    overflow-y:
        auto;

    border-radius:
        var(
            --asareh-app-sheet-radius
        )
        var(
            --asareh-app-sheet-radius
        )
        0
        0;

    background:
        var(
            --asareh-color-ivory-50,
            #f8f4ef
        );

    box-shadow:
        0
        -25px
        80px
        rgba(
            18,
            12,
            8,
            0.24
        );

    transform:
        translateY(105%);

    visibility:
        hidden;

    transition:
        transform
        520ms
        cubic-bezier(.16, 1, .3, 1),

        visibility
        520ms
        cubic-bezier(.16, 1, .3, 1);
}


.asareh-app-sheet.is-open {

    transform:
        translateY(0);

    visibility:
        visible;
}


/* =========================================================
   27. MOBILE FORMS
========================================================= */

@media (max-width: 768px) {

    .asareh-app-form-row {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .asareh-app-input {

        width:
            100%;

        min-height:
            52px;

        padding:
            0
            14px;

        border:
            1px solid
            rgba(
                74,
                52,
                37,
                0.14
            );

        border-radius:
            12px;

        background:
            rgba(
                255,
                255,
                255,
                0.52
            );
    }


    textarea.asareh-app-input {

        min-height:
            130px;

        padding-top:
            14px;

        resize:
            vertical;
    }

}


/* =========================================================
   28. MOBILE BUTTONS
========================================================= */

@media (max-width: 768px) {

    .asareh-button {

        min-height:
            52px;

        border-radius:
            2px;
    }


    .asareh-button:active {

        transform:
            scale(0.985);
    }


    .asareh-icon-button:active {

        transform:
            scale(0.92);
    }

}


/* =========================================================
   29. IOS STANDALONE
========================================================= */

@media (
    display-mode: standalone
) {

    html,
    body {

        overscroll-behavior:
            none;
    }


    body {

        user-select:
            none;

        -webkit-user-select:
            none;
    }


    input,
    textarea {

        user-select:
            text;

        -webkit-user-select:
            text;
    }


    .asareh-header {

        padding-top:
            var(
                --asareh-safe-top
            );
    }


    .asareh-app-nav {

        bottom:
            max(
                8px,
                var(
                    --asareh-safe-bottom
                )
            );
    }

}


/* =========================================================
   30. FULLSCREEN DISPLAY MODE
========================================================= */

@media (
    display-mode: fullscreen
) {

    body {

        min-height:
            100dvh;
    }

}


/* =========================================================
   31. iOS DETECTION VIA SUPPORTS
========================================================= */

@supports (
    -webkit-touch-callout:
    none
) {

    body {

        min-height:
            -webkit-fill-available;
    }


    input,
    textarea,
    select {

        font-size:
            16px !important;
    }

}


/* =========================================================
   32. LANDSCAPE MOBILE
========================================================= */

@media (
    max-width: 950px
) and (
    orientation: landscape
) {

    :root {

        --asareh-app-header-height:
            58px;
    }


    .asareh-mobile-menu {

        padding-top:
            calc(
                8px
                +
                var(
                    --asareh-safe-top
                )
            );
    }


    .asareh-app-nav {

        min-height:
            58px;
    }


    .asareh-app-nav__item {

        min-height:
            54px;
    }

}


/* =========================================================
   33. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    :root {

        --asareh-app-page-padding:
            14px;
    }


    .asareh-app-nav {

        right:
            7px;

        left:
            7px;

        border-radius:
            18px;
    }


    .asareh-app-nav__item {

        font-size:
            8px;
    }

}


/* =========================================================
   34. VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    :root {

        --asareh-app-page-padding:
            12px;
    }


    .asareh-app-nav {

        right:
            5px;

        left:
            5px;
    }

}


/* =========================================================
   35. HIGH DPI SCREENS
========================================================= */

@media (
    min-resolution: 2dppx
) {

    img {

        image-rendering:
            auto;
    }

}


/* =========================================================
   36. HOVER DEVICE
========================================================= */

@media (
    hover: hover
) and (
    pointer: fine
) {

    .asareh-touch-only {

        display:
            none !important;
    }

}


/* =========================================================
   37. TOUCH DEVICE
========================================================= */

@media (
    hover: none
) and (
    pointer: coarse
) {

    .asareh-desktop-hover-only {

        display:
            none !important;
    }


    a:hover,
    button:hover {

        -webkit-tap-highlight-color:
            transparent;
    }

}


/* =========================================================
   38. KEYBOARD / FOCUS ACCESSIBILITY
========================================================= */

:focus {

    outline:
        none;
}


:focus-visible {

    outline:
        2px solid
        var(
            --asareh-color-champagne-500,
            #ccb299
        );

    outline-offset:
        3px;
}


/* =========================================================
   39. REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    html {

        scroll-behavior:
            auto !important;
    }


    .asareh-shop-filter,
    .asareh-app-sheet {

        transition-duration:
            0.01ms !important;
    }

}


/* =========================================================
   40. DARK SYSTEM PREFERENCE
   Brand remains controlled by Aurelia theme.
========================================================= */

@media (
    prefers-color-scheme:
    dark
) {

    :root {

        color-scheme:
            light;
    }

}


/* =========================================================
   41. FORCED COLORS ACCESSIBILITY
========================================================= */

@media (
    forced-colors:
    active
) {

    button,
    a,
    input,
    select,
    textarea {

        forced-color-adjust:
            auto;
    }

}


/* =========================================================
   42. PRINT
========================================================= */

@media print {

    .asareh-app-nav,
    .asareh-app-sticky-action,
    .asareh-app-sheet,
    .asareh-filter-backdrop {

        display:
            none !important;
    }


    body,
    main {

        padding:
            0 !important;

        min-height:
            auto !important;
    }

}