/**
 * Mobile app kit. Desktop (783px and up) is untouched.
 * Brand colors stay #ff6b00, #f59e0b, #0f172a, #ffd600, #fafbff.
 * Homepage composition is not restyled; only overflow and dock clearance.
 */

@media (min-width: 783px) {
    .nof-app-innerbar {
        display: none !important;
    }
}

@media (max-width: 782px) {
    html {
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        background: #fafbff;
    }

    img,
    video,
    iframe,
    canvas {
        max-width: 100%;
        height: auto;
    }

    /* ── Dock ─────────────────────────────────────────────── */
    /* width/left/transform must beat style.css's floating pill.
       transition:all on that pill was keeping the used box mid-animation.
       RTL ignores `left` when width and right are both set, so pin both edges
       and kill the translate. */
    body .mobile-app-bottom-bar,
    body.nofnika-app-view .mobile-app-bottom-bar,
    nav#mobileAppBottomBar {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        transform: none !important;
        translate: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid #e8eef5 !important;
        padding: 4px 2px calc(6px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.08) !important;
        z-index: 10000 !important;
        box-sizing: border-box !important;
        transition: none !important;
    }

    /* Plugin ships a second dock. It sits on ours and stretches the page. */
    .nv-app-nav {
        display: none !important;
    }

    /* Desktop phone-simulator is 390px wide inside a fixed layer.
       While closed it still widens the document on a 360px screen. */
    .app-sim-modal-overlay:not(.active) {
        display: none !important;
    }

    .mobile-app-bottom-bar .mab-item {
        min-width: 0;
        min-height: 48px;
        padding: 4px 2px;
        flex: 1 1 0;
        gap: 2px;
    }

    .mobile-app-bottom-bar .mab-label {
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mab-cart-count {
        min-width: 16px;
        min-height: 16px;
    }

    /* ── Inner top bar (not home, not pages that already have one) ── */
    body:not(.home) .nof-mobile-app-bar {
        display: none !important;
    }

    .nof-app-innerbar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 1000;
        min-height: calc(56px + env(safe-area-inset-top));
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
        background: #fff;
        border-bottom: 1px solid #e8eef5;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
        direction: rtl;
    }

    body.home .nof-app-innerbar,
    body.single-product .nof-app-innerbar,
    body.woocommerce-cart .nof-app-innerbar,
    body.woocommerce-checkout .nof-app-innerbar {
        display: none !important;
    }

    .nof-app-inner-title {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 0.95rem;
        font-weight: 900;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .nof-app-innerbar .nof-app-top-btn,
    .nof-app-sp-topbar .nof-app-top-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .nof-app-sp-topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-top: calc(8px + env(safe-area-inset-top));
        min-height: 56px;
    }

    .nof-app-top-title,
    .nof-app-step-pill {
        max-width: 46vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Home: keep the existing header, just stop sideways scroll. */
    body.home .nof-mobile-app-bar {
        max-width: 100%;
        overflow: hidden;
    }

    body.home .mab-pills-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    body.home .nof-homepage-root,
    body.home .nof-hero-modern,
    body.home .swiper,
    body.home .nof-hs-container,
    .nof-hist-hero,
    .nof-hon-hero,
    .nof-nost-hero,
    .nof-page-root,
    article,
    .nof-single-article-card,
    .nof-logo-runway,
    .nof-lr-stage {
        max-width: 100%;
        overflow-x: clip;
    }

    /* Decorative 450–500px glows are position:absolute with a negative
       offset. On a 360px screen that offset is exactly the page's sideways shift. */
    .nof-blog-hero-section::before,
    .nof-sp-header-card::before,
    .nof-blog-hero-section::after,
    .nof-sp-header-card::after {
        width: min(160px, 42vw) !important;
        height: min(160px, 42vw) !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: auto !important;
    }

    .nof-hist-hero,
    .nof-hon-hero,
    .nof-nost-hero,
    .nof-hist-hero__media,
    .nof-hon-hero__media,
    .nof-nost-hero__media {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .nof-hist-hero__media img,
    .nof-hon-hero__media img,
    .nof-nost-hero__media img,
    .nof-history-page img,
    .nof-honours-page img,
    .nof-nostalgic-page img {
        max-width: 100% !important;
        height: auto;
    }

    .nof-hist-hero__media img,
    .nof-hon-hero__media img,
    .nof-nost-hero__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .nof-hist-years__track,
    .nof-hon-filters__track,
    .nof-nost-filters__track,
    .fn-strip,
    .nof-ps-viewport {
        max-width: 100%;
    }

    .nof-ps-viewport,
    .fn-strip,
    .nof-hist-years__track,
    .nof-hon-filters__track,
    .nof-nost-filters__track {
        overflow-x: auto;
    }

    textarea,
    input,
    select {
        max-width: 100%;
        box-sizing: border-box;
    }

    textarea,
    .comment-form textarea,
    #comment {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    article table,
    .entry-content table,
    .nof-single-article-card table,
    .nof-page-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .nof-mini-cart-drawer,
    .app-search-overlay,
    .nof-drawer {
        max-width: 100vw;
    }

    body.home .mab-user-text {
        min-width: 0;
    }

    body.home .mab-app-title,
    body.home .mab-welcome {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Page shell padding was squeezing cart/checkout into a narrow column. */
    body.woocommerce-cart .nof-page-root,
    body.woocommerce-checkout .nof-page-root,
    body.woocommerce-account .nof-page-root,
    body.woocommerce-cart .nof-page-container,
    body.woocommerce-checkout .nof-page-container,
    body.woocommerce-account .nof-page-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    body.woocommerce-cart .nof-page-body,
    body.woocommerce-checkout .nof-page-body,
    body.woocommerce-account .nof-page-body {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* ── Cart cards (the broken flex row) ─────────────────── */
    .nof-cart-v2,
    .nof-checkout-wrapper.nof-co-v2 {
        margin: 0 !important;
        padding: 12px 12px calc(150px + env(safe-area-inset-bottom)) !important;
        max-width: 100% !important;
        box-sizing: border-box;
        background: #fafbff !important;
    }

    .nof-cart-v2 .nof-co-card,
    .nof-co-v2 .nof-co-card {
        padding: 14px !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
    }

    .nof-co-card-head {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .nof-coc-title-text {
        font-size: 1rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .nof-cart-count-chip {
        margin: 4px 0 0;
        display: inline-flex;
    }

    .nof-co-stepper-header {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 18px !important;
    }

    .nof-co-stepper-inner {
        width: 100%;
        gap: 0;
    }

    .nof-cos-label {
        display: none !important;
    }

    .nof-co-step {
        flex: 0 0 auto;
        gap: 0;
    }

    .nof-co-step-line {
        margin: 0 8px !important;
        min-width: 12px;
    }

    .nof-cart-v2 table.shop_table,
    .nof-cart-v2 table.shop_table thead,
    .nof-cart-v2 table.shop_table tbody,
    .nof-cart-v2 table.shop_table tr,
    .nof-cart-v2 table.shop_table th,
    .nof-cart-v2 table.shop_table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    .nof-cart-v2 table.shop_table {
        border-spacing: 0 !important;
        margin: 0 !important;
    }

    .nof-cart-v2 table.shop_table thead {
        display: none !important;
    }

    .nof-cart-v2 .nof-co-card,
    .nof-cart-v2 table.shop_table,
    .nof-cart-v2 table.shop_table tbody {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .nof-cart-v2 table.shop_table tbody tr.cart_item {
        display: grid !important;
        width: 100% !important;
        min-width: 100% !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
        grid-template-areas:
            "thumb name"
            "qty qty"
            "sub sub" !important;
        gap: 10px 12px !important;
        align-items: start !important;
        justify-content: stretch !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 12px !important;
        position: relative !important;
        border-radius: 18px !important;
        overflow: hidden;
    }

    .nof-cart-v2 .product-thumbnail {
        grid-area: thumb;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
    }

    .nof-cart-v2 .shop_table td.product-name {
        grid-area: name;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 0 0 52px !important;
        display: block !important;
        overflow: visible;
    }

    .nof-cart-v2 .product-name a,
    .nof-cart-item-title {
        display: block;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.55;
        font-size: 0.92rem;
    }

    .nof-cart-v2 dl.variation,
    .nof-cart-v2 .variation {
        display: block;
        margin: 6px 0 0;
        font-size: 0.75rem;
        color: #64748b;
    }

    .nof-cart-v2 dl.variation dt,
    .nof-cart-v2 dl.variation dd {
        display: inline;
        margin: 0 0 0 4px;
        float: none;
    }

    .nof-cart-unit-price {
        display: block;
        margin-top: 6px;
        white-space: normal;
    }

    .nof-cart-v2 .product-quantity {
        grid-area: qty;
        width: 100% !important;
    }

    .nof-qty {
        display: inline-flex !important;
        width: auto;
        max-width: 100%;
        justify-content: flex-start;
    }

    .nof-qty-btn {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px;
    }

    .nof-qty input.qty {
        width: 48px !important;
        min-width: 48px !important;
        height: 44px !important;
        flex: 0 0 48px;
    }

    .nof-cart-v2 .product-subtotal {
        grid-area: sub;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: right !important;
        font-size: 1.05rem !important;
        line-height: 1.4;
        white-space: normal !important;
        overflow: visible;
    }

    .nof-cart-v2 .product-quantity {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .nof-cart-v2 .product-remove {
        position: absolute !important;
        top: 8px;
        left: 8px;
        margin: 0 !important;
        width: auto !important;
    }

    .nof-cart-v2 .product-remove .remove,
    .nof-app-remove-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .nof-cart-v2 tr.actions-row,
    .nof-cart-v2 td.actions {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .nof-cart-update-btn {
        width: 100%;
        min-height: 48px;
    }

    .nof-cart-layout,
    .nof-cart-items-col,
    .nof-cart-totals-col {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .nof-cart-totals-content table,
    .nof-cart-totals-content tbody,
    .nof-cart-totals-content tr,
    .woocommerce-checkout-review-order-table,
    .woocommerce-checkout-review-order-table tbody,
    .woocommerce-checkout-review-order-table tr {
        display: block !important;
        width: 100% !important;
    }

    .nof-cart-totals-content tr,
    .woocommerce-checkout-review-order-table tr {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px dashed #e8eef5;
    }

    .nof-cart-totals-content th,
    .nof-cart-totals-content td,
    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td {
        display: block !important;
        width: auto !important;
        border: 0 !important;
        padding: 0 !important;
        text-align: right;
        white-space: normal !important;
    }

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-notice,
    .nofnika-wholesale-notice {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        margin: 0 0 12px !important;
    }

    .woocommerce-message .button,
    .woocommerce-error .button,
    .woocommerce-info .button {
        align-self: stretch;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .nof-cart-wrapper .nof-app-sticky-buy-bar,
    .nof-co-v2 .nof-app-sticky-buy-bar,
    body.single-product .nof-app-sticky-buy-bar {
        display: flex !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 10px 12px !important;
        box-sizing: border-box;
        z-index: 9990 !important;
    }

    .nof-app-sbb-row,
    .nof-app-sbb-actions {
        min-width: 0;
        flex-wrap: wrap;
    }

    .nof-app-sbb-val {
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

    .nof-app-sbb-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nof-app-sbb-warr-pill {
        min-height: 44px;
        font-size: 0.72rem;
        white-space: normal;
        text-align: center;
    }

    /* ── Checkout + account forms ─────────────────────────── */
    .nof-co-v2 .nof-wizard-step.active {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: normal !important;
        opacity: 1 !important;
    }

    .nof-step-fields,
    .nof-co-v2 .woocommerce-billing-fields__field-wrapper {
        display: block !important;
    }

    .nof-co-v2 .form-row,
    .nof-co-v2 .form-row-first,
    .nof-co-v2 .form-row-last,
    .woocommerce-account .form-row,
    .woocommerce-form-login .form-row,
    .woocommerce-form-register .form-row {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .nof-co-v2 input.input-text,
    .nof-co-v2 textarea,
    .nof-co-v2 select,
    .woocommerce-account input.input-text,
    .woocommerce-account textarea,
    .woocommerce-account select,
    .woocommerce form .input-text {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
    }

    .nof-wiz-btn,
    #place_order,
    .woocommerce-account .button,
    .woocommerce-form-login__submit,
    .woocommerce-form-register__submit {
        min-height: 48px;
        width: 100%;
        box-sizing: border-box;
    }

    .woocommerce-account .woocommerce,
    .woocommerce-account .woocommerce-MyAccount-content,
    .woocommerce-account form.login,
    .woocommerce-account form.register,
    .woocommerce-account form.lost_reset_password {
        max-width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e8eef5;
        border-radius: 20px;
        padding: 16px;
        margin-top: 8px;
    }

    .woocommerce-account {
        padding: 12px 12px 24px !important;
    }

    /* ── Catalog cards, 2 columns even at 360 ─────────────── */
    .nof-shop,
    .nof-archive-root,
    .nof-page-root,
    .nof-blog-wrap,
    .nof-404-root {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .nof-shop-grid,
    .nof-archive-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .nof-shop-card,
    .nof-arch-card {
        min-width: 0;
        border-radius: 16px;
        overflow: hidden;
    }

    .nof-shop-card-title,
    .nof-shop-card-title a,
    .nof-arch-card h2,
    .nof-arch-card h3 {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        min-height: 0 !important;
    }

    .nof-shop-card-media {
        height: 120px !important;
    }

    .nof-shop-card-media img,
    .nof-arch-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .nof-shop-card-btn,
    .nof-arch-card a.button {
        min-height: 40px;
    }

    .nof-shop-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nof-shop-order,
    .nof-shop-order select,
    .woocommerce-ordering,
    .woocommerce-ordering select {
        width: 100% !important;
        max-width: 100%;
        min-height: 44px;
    }

    .nof-shop-cats,
    .nof-archive-chips-nav,
    .mab-pills-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Blog, search, static, 404 ────────────────────────── */
    .nof-blog-modern-grid,
    .search .nof-archive-grid {
        grid-template-columns: 1fr !important;
    }

    .nof-blog-hero-section,
    .nof-page-header,
    .nof-archive-header,
    .nof-single-article-card,
    .nof-sp-header-card {
        padding: 16px !important;
        border-radius: 18px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nof-page-title,
    .nof-archive-title,
    .entry-title,
    .nof-blog-hero-section h1 {
        font-size: 1.35rem !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere;
    }

    .entry-content,
    .nof-page-body,
    .nof-single-article-card {
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .entry-content table,
    .nof-page-body table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    .nof-empty-cart-card,
    .nof-404-card,
    .nof-auth-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 12px 0;
        padding: 20px 16px;
        border-radius: 20px;
    }

    /* ── Menus become bottom sheets ───────────────────────── */
    .nof-drawer {
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: min(78vh, 640px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 24px 24px 0 0 !important;
        transform: translateY(110%) !important;
        transition: transform 0.28s ease !important;
        box-shadow: 0 -16px 50px rgba(15, 23, 42, 0.2) !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .nof-drawer.open {
        right: 0 !important;
        transform: translateY(0) !important;
    }

    .app-search-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .app-search-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(82vh, 680px) !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
    }

    .app-search-modal input,
    .asm-input-box input {
        min-height: 48px !important;
        font-size: 16px !important;
    }
}