/**

 * Xuan Cuong Handicraft - Module: mobile.css

 * Tinh chỉnh riêng cho mobile (changelog 27/10/26). Import sau responsive.css nên
 * ghi đè các giá trị mobile rải rác trong các module khác.

 */


/* Breadcrumb bài viết: chỉ dùng trên mobile */
/* .article-breadcrumb {
    display: none;
} */


/* ==========================================================================
   TABLET & MOBILE (<= 1024px): khối lọc sản phẩm full width container
   ========================================================================== */
@media (max-width: 1024px) {

    /* aside dùng align-items: center nên form bên trong bị co theo nội dung */
    .shop-sidebar-filter {
        align-items: stretch;
    }

    .shop-sidebar-filter>form {
        width: 100%;
    }

    /* Ô tìm kiếm: nút submit tự đổi thành nút xoá khi có chữ (main.js) → ẩn nút "x" mặc định
       của trình duyệt để không bị 2 nút xoá */
    .mobile-search-form input[type="search"]::-webkit-search-cancel-button,
    .header-search-form input[type="search"]::-webkit-search-cancel-button,
    .error-404-search input[type="search"]::-webkit-search-cancel-button,
    .search-empty-form input[type="search"]::-webkit-search-cancel-button,
    .filter-search-box input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Trang không có kết quả: nút chữ "Tìm kiếm" thành nút icon xoá vuông */
    .search-empty-form.is-clear-mode button {
        padding: 12px 16px;
    }

    /* Ô lọc trang sản phẩm: nút xoá ở cuối ô */
    .filter-search-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        margin: -4px -6px -4px 4px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-black, #1E262B);
        font-size: 16px;
        cursor: pointer;
    }

    .filter-search-clear[hidden] {
        display: none;
    }

    /* Menu mobile: chevron là nút mở submenu (chữ thì chuyển trang) → vùng bấm 44px,
       margin âm để không làm cao thêm dòng menu */
    .main-navigation .nav-menu>li>a .nav-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: -12px -12px -12px 8px;
        flex-shrink: 0;
        font-size: 0.85rem;
        cursor: pointer;
    }
}


/* ==========================================================================
   MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --------------------------------------------------------------------------
       1. Cỡ chữ mobile chỉ có 3 bậc: tiêu đề section/trang 24px, chữ script 20px, còn lại 16px.
       body:not(#_) mang độ ưu tiên ID để thắng mọi cỡ chữ (kể cả !important) đặt theo class ở các module khác.
       Không áp 16px cho icon, chữ watermark trang trí và tiêu đề bài tiếp theo (.next-title, mục 6).
       -------------------------------------------------------------------------- */
    body:not(#_) :is(h1, h2,
        .section-title, .materialstitle, .materials-title, .curated-title, .workshop-title, .workshop-vtv-title,
        .partners-heading, .rfq-headline, .rfq-main-heading, .journal-title, .process-heading, .corporate-heading,
        .corporate-banner-title, .story-main-title, .team-title, .projects-title, .split-title, .care-title,
        .reviews-title, .reviews-main-title, .favorite-title, .sale-main-title, .sale-section-title,
        .logo-bulk-heading, .achievements-title, .invitation-title, .cobranded-title, .partners-hero-title,
        .artisan-main-heading, .custom-process-heading, .space-slider-title, .faq-main-heading, .faq-support-heading,
        .herotitle, .hero-title-main, .hero-headline, .about-hero-title, .shop-hero-title, .contact-brand-title,
        .journal-hero-title, .order-hero-title, .order-hero-heading, .page-title, .article-main-title,
        .product-name-heading, .search-page-title, .legal-title, .error-404-title, .blog-title,
        .featured-post-title, .vip-slide-title) {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    body:not(#_) :is(.section-subtitle, .script-accent-gold, .script-accent-dark, .script-accent-brown, .script-accent-journal,
        .reviews-script, .faq-support-script, .invitation-script, .artisan-section-script) {
        font-size: 20px !important;
    }

    body:not(#_) *:not( :is(h1, h2,
            .section-title, .materialstitle, .materials-title, .curated-title, .workshop-title, .workshop-vtv-title,
            .partners-heading, .rfq-headline, .rfq-main-heading, .journal-title, .process-heading, .corporate-heading,
            .corporate-banner-title, .story-main-title, .team-title, .projects-title, .split-title, .care-title,
            .reviews-title, .reviews-main-title, .favorite-title, .sale-main-title, .sale-section-title,
            .logo-bulk-heading, .achievements-title, .invitation-title, .cobranded-title, .partners-hero-title,
            .artisan-main-heading, .custom-process-heading, .space-slider-title, .faq-main-heading, .faq-support-heading,
            .herotitle, .hero-title-main, .hero-headline, .about-hero-title, .shop-hero-title, .contact-brand-title,
            .journal-hero-title, .order-hero-title, .order-hero-heading, .page-title, .article-main-title,
            .product-name-heading, .search-page-title, .legal-title, .error-404-title, .blog-title,
            .featured-post-title, .vip-slide-title),
        :is(h1, h2,
            .section-title, .materialstitle, .materials-title, .curated-title, .workshop-title, .workshop-vtv-title,
            .partners-heading, .rfq-headline, .rfq-main-heading, .journal-title, .process-heading, .corporate-heading,
            .corporate-banner-title, .story-main-title, .team-title, .projects-title, .split-title, .care-title,
            .reviews-title, .reviews-main-title, .favorite-title, .sale-main-title, .sale-section-title,
            .logo-bulk-heading, .achievements-title, .invitation-title, .cobranded-title, .partners-hero-title,
            .artisan-main-heading, .custom-process-heading, .space-slider-title, .faq-main-heading, .faq-support-heading,
            .herotitle, .hero-title-main, .hero-headline, .about-hero-title, .shop-hero-title, .contact-brand-title,
            .journal-hero-title, .order-hero-title, .order-hero-heading, .page-title, .article-main-title,
            .product-name-heading, .search-page-title, .legal-title, .error-404-title, .blog-title,
            .featured-post-title, .vip-slide-title) *,
        :is(.section-subtitle, .script-accent-gold, .script-accent-dark, .script-accent-brown, .script-accent-journal,
            .reviews-script, .faq-support-script, .invitation-script, .artisan-section-script),
        :is(.section-subtitle, .script-accent-gold, .script-accent-dark, .script-accent-brown, .script-accent-journal,
            .reviews-script, .faq-support-script, .invitation-script, .artisan-section-script) *,
        i, svg, svg *, [class*="fa-"],
        .watermark-handicraft, .watermark-handicraft *, .order-hero-watermark, .order-hero-watermark *,
        .next-title, .next-title *) {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .section-title br,
    .materialstitle br,
    .workshop-vtv-title br,
    .partners-heading br,
    .rfq-main-heading br,
    .corporate-banner-title br,
    .faq-main-heading br {
        display: none;
    }

    /* --------------------------------------------------------------------------
       2. Bỏ hiệu ứng hover (zoom, nhấc card) & transition của card;
       panel trên card luôn hiện
       -------------------------------------------------------------------------- */
    .material-card,
    .material-card-bg,
    .material-card-overlay,
    .material-card-content,
    .material-slide-panel,
    .corporate-box-card,
    .team-member-card,
    .achievement-card,
    .achievement-panel,
    .cobranded-card,
    .sale-product-card,
    .sale-slider-viewport.swiper .sale-product-card.swiper-slide,
    .catalog-product-item .item-thumb-link img,
    .review-slide-card .review-card-media img,
    .related-product-card .related-product-thumb img,
    .gift-product-card .gift-card-media img,
    .featured-post-thumb-wrap img,
    .journal-article-card .article-card-thumb-wrap img,
    .next-article-card .next-thumb img,
    .space-slide-item .space-slide-img,
    .space-slider-outer.swiper .space-slide-img,
    .search-product-item .search-item-thumb img,
    .achievement-card .achievement-image-box img,
    .curated-product-card .curated-thumb-wrap img,
    .sale-product-card .sale-card-thumb-wrap img,
    .favorite-thumb-wrap .fav-img,
    .favorite-product-title,
    .favorite-view-arrow {
        transition: none;
    }

    .material-card:hover,
    .corporate-box-card:hover,
    .team-member-card:hover,
    .achievement-card:hover,
    .cobranded-card:hover,
    .sale-product-card:hover,
    .catalog-product-item:hover .item-thumb-link img,
    .review-slide-card:hover .review-card-media img,
    .related-product-card:hover .related-product-thumb img,
    .gift-product-card:hover .gift-card-media img,
    .featured-post-thumb-wrap:hover img,
    .journal-article-card:hover .article-card-thumb-wrap img,
    .next-article-card:hover .next-thumb img,
    .space-slide-item:hover .space-slide-img,
    .space-slider-outer.swiper .space-slide-item:hover .space-slide-img,
    .search-product-item:hover .search-item-thumb img,
    .achievement-card:hover .achievement-image-box img,
    .curated-product-card:hover .curated-thumb-wrap img,
    .sale-product-card:hover .sale-card-thumb-wrap img,
    .favorite-card:hover .favorite-view-arrow {
        transform: none;
    }

    .corporate-box-card:hover,
    .achievement-card:hover {
        box-shadow: none;
    }

    .favorite-card:hover .favorite-product-title {
        color: var(--text-black, #1E262B);
    }

    .material-card-overlay,
    .material-card:hover .material-card-overlay {
        opacity: 0.85;
        visibility: visible;
    }

    .material-card-content,
    .material-card:hover .material-card-content,
    .material-slide-panel,
    .material-slide-card:hover .material-slide-panel,
    .achievement-panel,
    .achievement-card:hover .achievement-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    /* --------------------------------------------------------------------------
       3. Hero trang chủ: cao 2/3 màn hình
       -------------------------------------------------------------------------- */
    .herosection {
        min-height: 66.667vh;
        min-height: calc(100svh * 2 / 3);
        padding-top: 3rem;
        padding-bottom: 48px;
    }

    .hero-scroll-indicator {
        margin-top: 28px;
    }

    /* --------------------------------------------------------------------------
       4. Nút back to top & liên hệ: tối thiểu 40px
       -------------------------------------------------------------------------- */
    .floating-items-group .float-btn,
    .site-floating-contacts .back-to-top {
        width: 48px;
        height: 44px;
    }

    .site-floating-contacts .back-to-top.is-visible {
        max-height: 48px;
    }

    .site-floating-contacts .back-to-top-icon,
    .site-floating-contacts .back-to-top i {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }

    /* --------------------------------------------------------------------------
       5. Nút solid: đồng bộ theo nút "Xem toàn bộ câu chuyện" (.btn-story-red)
       (!important để thắng các override padding/font-size !important trong pages.css)
       -------------------------------------------------------------------------- */
    .btn-story-red,
    .btn-hero-red,
    .btn-submit-gold,
    .btn-rfq-submit,
    .btn-rfq-submit-gold,
    .btn-brief-gold,
    .btn-artisan-more,
    .btn-apply-filters,
    .btn-about-cta,
    .btn-cobranded-all,
    .btn-card-directions,
    .btn-invitation-gold,
    .btn-detail-rfq,
    .btn-detail-custom,
    .main-navigation .mobile-nav-cta .btn-cta-gold {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        height: 44px;
        min-height: 44px;
        padding: 0 1.4rem !important;
        border-radius: var(--radius-sm, 4px);
        font-family: var(--font-sans);
        font-size: 16px !important;
        font-weight: 500;
        line-height: 1.2;
        box-sizing: border-box;
    }

    /* --------------------------------------------------------------------------
       6. Trang chính sách: tăng padding dọc phần nội dung
       -------------------------------------------------------------------------- */
    .legal-container {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .legal-layout {
        gap: 40px;
    }

    /* Tiêu đề bài viết tiếp theo (chi tiết bài viết & nghệ nhân) */
    .next-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* --------------------------------------------------------------------------
       7. Footer: cột Sản phẩm & Thương hiệu chung 1 hàng
       -------------------------------------------------------------------------- */
    .footer-columns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }

    .footer-col-brand,
    .footer-col-contact {
        grid-column: 1 / -1;
    }

    /* --------------------------------------------------------------------------
       8. Lưới 3 cột bài viết → 1 hàng cuộn ngang, sát lề phải
       (danh sách sản phẩm .catalog-grid-three & bài viết .journal-articles-grid có phân trang nên giữ dạng lưới)
       -------------------------------------------------------------------------- */
    .page-shop {
        padding-bottom: 48px;
    }

    .section-journal-articles {
        padding: 40px 0 56px;
    }

    /* Bài nổi bật trang Journal: thu gọn khoảng cách & cỡ chữ */
    .journal-featured-post {
        gap: 16px;
        margin-bottom: 40px;
    }

    .featured-post-title {
        margin-bottom: 12px;
    }

    .featured-post-desc {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .featured-post-readmore {
        font-size: 16px;
        line-height: 24px;
    }

    .shop-container {
        padding: 0 var(--page-gutter);
    }

    .journal-cards-grid,
    .section-artisan-press .journal-cards-grid {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 80%;
        gap: 16px;
        max-width: none;
        margin: 0 calc(-1 * var(--page-gutter)) 0 0;
        /* padding-right = khoảng trống sau card cuối khi cuộn hết (margin-right trên card cuối
           sẽ nằm trong track 80% làm card cuối hẹp hơn các card khác) */
        padding: 0 1rem 8px 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .journal-cards-grid::-webkit-scrollbar {
        display: none;
    }

    .journal-cards-grid>*,
    .journal-cards-grid> :last-child {
        grid-column: auto;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Sản phẩm liên quan: banner đỏ ở trên, 3 card sản phẩm thành hàng cuộn ngang */
    .related-products-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .related-products-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 72%;
        gap: 12px;
        min-width: 0;
        margin-right: calc(-1 * var(--page-gutter));
        padding-bottom: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .related-products-track::-webkit-scrollbar {
        display: none;
    }

    .related-products-track>.related-product-card {
        min-width: 0;
        scroll-snap-align: start;
    }

    /* --------------------------------------------------------------------------
       9. Các slider cuộn ngang: bỏ padding/margin phải để sát lề phải màn hình
       -------------------------------------------------------------------------- */
    .materials-slider-section-wrap,
    .achievements-slider-section-wrap {
        padding-left: var(--page-gutter);
        padding-right: 0;
    }

    .achievements-slider-track {
        padding-right: 0;
    }

    .sale-slider-wrapper {
        justify-content: flex-start;
    }

    .sale-slider-viewport.swiper {
        flex: 0 0 auto;
        width: calc(100% + var(--page-gutter)) !important;
        max-width: none !important;
        margin: 0 calc(-1 * var(--page-gutter)) 0 0 !important;
    }

    .reviews-cards-slider.swiper {
        width: calc(100% + var(--page-gutter)) !important;
        margin-right: calc(-1 * var(--page-gutter));
    }

    .cobranded-slider-track {
        margin-right: calc(-1 * var(--page-gutter));
        padding-right: 0;
    }

    /* --------------------------------------------------------------------------
       10. Trang Đặt hàng: giãn padding, gap phần Đặt hàng sẵn & Chế tác theo yêu cầu
       -------------------------------------------------------------------------- */
    .section-ready-order {
        padding: 56px 0;
    }

    .ready-order-layout {
        gap: 32px;
    }

    .ready-order-contact {
        gap: 12px;
    }

    .ready-steps-grid {
        column-gap: 20px;
        row-gap: 28px;
    }

    .section-custom-process {
        padding: 56px 0;
    }

    .custom-process-header {
        margin-bottom: 24px;
    }

    .custom-process-grid {
        gap: 24px;
    }

    .custom-process-card {
        padding: 32px 20px !important;
    }

    .process-steps-list {
        column-gap: 20px;
        row-gap: 28px;
    }

    .process-card-action {
        margin-top: 32px;
    }

    /* Form chế tác theo yêu cầu riêng: khoảng cách đều, gọn giữa các ô nhập */
    .bespoke-order-form {
        gap: 12px;
    }

    .bespoke-order-form .form-row-two {
        gap: 12px;
    }

    .bespoke-order-form .form-group {
        margin-bottom: 0;
    }

    /* --------------------------------------------------------------------------
       12. FAQ: giảm gap, padding giữa các câu hỏi
       -------------------------------------------------------------------------- */
    .faq-layout-grid {
        gap: 24px;
    }

    .order-faq-layout {
        gap: 20px;
    }

    .faq-accordion-item {
        padding: 14px 0;
    }

    .faq-question-bar {
        gap: 12px;
        padding: 0;
    }

    .order-faq-bottom-link {
        margin-top: 1.25rem;
    }

    .page-faq {
        padding: 2.5rem 0;
    }

    .section-faq-support {
        padding: 56px 0 64px;
    }

    .faq-support-right,
    .ready-order-contact {
        width: 100%
    }

    .section-faq-support .social-pills-row,
    .ready-order-contact .social-pills-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .section-faq-support .social-pill-btn,
    .ready-order-contact .social-pill-btn {
        flex: 1 1 auto !important;
        padding: 10px 16px !important;
        gap: 8px !important;
    }

    .section-faq-support .social-pill-btn span,
    .ready-order-contact .social-pill-btn span {
        font-size: 15px !important;
        line-height: 22px !important;
    }

    /* --------------------------------------------------------------------------
       13. Kết quả tìm kiếm: ảnh card dạng ngang
       -------------------------------------------------------------------------- */
    .search-item-thumb {
        aspect-ratio: 3 / 2;
    }

    .page-search {
        padding: 2.5rem 0 3.5rem;
    }

    .search-header-bar {
        margin-bottom: 2rem;
    }

    /* Trạng thái không có kết quả (trang tìm kiếm & danh sách sản phẩm) */
    .catalog-empty-state {
        padding: 32px 0;
        gap: 16px;
        font-size: 15px;
        line-height: 1.55;
    }

    /* Giữ chữ ô nhập 16px để iOS không tự phóng to khi focus */
    .search-empty-form input[type="search"] {
        padding: 10px 14px;
    }

    .search-empty-form button {
        padding: 10px 16px;
        font-size: 15px;
    }

    .search-empty-form.is-clear-mode button {
        padding: 10px 14px;
    }

    .search-empty-state .btn-favorite-all {
        font-size: 16px;
        line-height: 24px;
    }

    .search-item-price {
        font-size: 16px;
        line-height: 24px;
    }

    /* --------------------------------------------------------------------------
       14. Chi tiết bài viết: breadcrumb (dùng chung style .product-breadcrumb
       của trang chi tiết sản phẩm trong pages.css, chỉ hiện trên mobile)
       -------------------------------------------------------------------------- */
    .article-breadcrumb {
        display: flex;
    }

    /* --------------------------------------------------------------------------
       15. Nút lọc trang Journal: chiều cao ôm nội dung
       (flex-basis 200px ở <= 991px biến thành chiều cao khi xếp dọc ở <= 640px)
       -------------------------------------------------------------------------- */
    .journal-tab-btn,
    .journal-tab-btn.is-active {
        flex: 1 1 auto;
        padding: 12px 20px;
        gap: 12px;
    }

    /* --------------------------------------------------------------------------
       16. Badge trên ảnh sản phẩm: rộng theo nội dung
       (responsive.css đặt cả left & right nên badge bị kéo full chiều ngang)
       -------------------------------------------------------------------------- */
    .sale-badge-pill,
    .product-card-badge,
    .product-badge {
        left: 12px;
        right: auto;
        width: auto;
        max-width: calc(100% - 24px);
    }

    .sale-badge-pill.badge-right {
        left: auto;
        right: 12px;
    }

    /* --------------------------------------------------------------------------
       17. Sản phẩm được yêu thích: vuốt ngang để đổi ảnh (thay cho hover ở desktop)
       -------------------------------------------------------------------------- */
    .favorite-thumb-wrap {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .favorite-thumb-wrap::-webkit-scrollbar {
        display: none;
    }

    .favorite-thumb-wrap .fav-img,
    .favorite-card:hover .fav-img-primary,
    .favorite-card:hover .fav-img-secondary {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        transform: none;
        scroll-snap-align: start;
    }
}