/* ============================================================
   mobile-fix.css — Ratna Asia
   Override responsif HP & tablet. Dimuat SETELAH all.css
   (lihat layouts/web.blade.php). Aman dihapus tanpa merusak
   theme karena hanya berisi @media max-width.
   v1.0 — 2026-09-18
   ============================================================ */

/* ---------- TABLET (<=1024px) ---------- */
@media only screen and (max-width: 1024px) {
    /* Grid presisi: baris tidak boleh lebih lebar dari layar.
       (Theme memakai margin negatif -15px sementara banyak
       container di-set padding 0 → konten kepotong tepi.) */
    #page .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #page .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .slider-item .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #top-bar .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* Banner: tinggi fixed 811px terlalu besar untuk tablet */
    .slider-style3 .slider-item {
        height: 560px !important;
    }
    .slider-style3 .image-slider3 {
        background-size: cover !important;
        background-position: center center !important;
    }
    .slider-style3 .page-tittle-slider .content-slider {
        padding-top: 110px !important;
        padding-right: 20px !important;
    }
    .page-title.page-title-style3 .slider-item .page-tittle-slider .heading-tittle h1,
    .page-title .slider-item .page-tittle-slider .heading-tittle h1,
    .slider-item .page-tittle-slider .heading-tittle h1 {
        font-size: 42px !important;
        line-height: 52px !important;
        letter-spacing: 0 !important;
    }
    .slider-style3 .page-tittle-slider .content-slider .heading-tittle .heading-description {
        font-size: 1.25rem !important;
    }
    /* Section tidak terlalu renggang */
    .tf-section {
        padding: 60px 0 !important;
    }
    /* Logo brand proporsional */
    .brand-we-trust-section .ps-category__item img {
        width: 170px !important;
    }
    .brand-we-trust-section .brand-trust-carousel {
        justify-content: flex-start !important;
    }
    /* Breadcrumb halaman dalam (FAQ, Produk, dll): theme memakai
       position:absolute + top:216% yang di layar kecil jatuh tepat
       di atas konten (menimpa accordion). Kembalikan ke alur normal. */
    .page-title-inner {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
    .page-title-inner .breadcrumbs {
        position: static !important;
        margin-top: 18px;
    }
    .page-title-inner .breadcrumbs ul {
        width: auto !important;
        max-width: calc(100% - 30px);
        height: auto !important;
        line-height: normal !important;
        padding: 12px 24px;
        display: inline-block;
    }
    .page-title-inner .breadcrumbs ul li {
        font-size: 16px !important;
        line-height: 26px !important;
    }
}

/* ---------- TABLET POTRAIT (<=991px) ----------
   - Grid yang sama presisinya dengan HP (baris tak meluber).
   - PENTING: tombol hamburger (.back-responsive) theme-nya
     display:none di atas 767px, padahal menu desktop sudah
     diganti menu-mobile (main.js, <=991px) → tanpa ini tablet
     TIDAK PUNYA navigasi sama sekali. */
@media only screen and (max-width: 991px) {
    /* Header 2 baris: logo+search, hamburger+marketplace */
    #top-bar .row {
        align-items: center;
    }
    .logo-responsive {
        width: 30% !important;
        padding-left: 5px !important;
        display: flex !important;
        align-items: center;
    }
    .logo-header {
        width: 100% !important;
        max-width: 140px;
        height: auto;
    }
    .search-responsive {
        width: 70% !important;
        padding-right: 5px !important;
        padding-top: 0 !important;
    }
    .back-responsive {
        display: flex !important;
        width: 20% !important;
        margin-top: 10px !important;
        padding-left: 5px !important;
        align-items: center;
    }
    .mp-responsive {
        width: 80% !important;
        margin-top: 10px !important;
        padding-right: 5px !important;
    }
    .icon-marketplace-menu {
        text-align: right !important;
    }
    #search-main {
        font-size: 16px !important;
    }
}

/* ---------- HP (<=767px) ---------- */
@media only screen and (max-width: 767px) {
    /* Background fixed bikin lag & glitch di HP */
    body {
        background-attachment: scroll !important;
    }

    /* Grid presisi: baris tidak boleh lebih lebar dari layar.
       (Theme memakai margin negatif -15px sementara banyak
       container di-set padding 0 → konten kepotong tepi.) */
    #page .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #page .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* Kecuali slider: teks butuh padding, bukan full-bleed container */
    .slider-item .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #top-bar .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ----- Header / top-bar 2 baris rapi ----- */
    #top-bar .row {
        align-items: center;
    }
    .logo-responsive {
        width: 32% !important;
        padding-left: 5px !important;
        display: flex !important;
        align-items: center;
    }
    .logo-header {
        width: 100% !important;
        max-width: 120px;
        height: auto;
    }
    .search-responsive {
        width: 68% !important;
        padding-right: 5px !important;
        padding-top: 0 !important;
    }
    /* font 16px mencegah auto-zoom iOS saat ketuk search */
    #search-main {
        font-size: 16px !important;
        height: 42px !important;
    }
    #search-product-form .btn-yellow-ingco {
        height: 42px !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    .back-responsive {
        width: 20% !important;
        margin-top: 10px !important;
        padding-left: 5px !important;
        display: flex !important;
        align-items: center;
    }
    .mobile-button {
        margin-left: 5px !important;
    }
    .mp-responsive {
        width: 80% !important;
        margin-top: 10px !important;
        padding-right: 5px !important;
    }
    .icon-marketplace-menu {
        text-align: right !important;
    }
    .icon-marketplace {
        height: 22px !important;
    }

    /* ----- Banner HP: pendek & teks terbaca ----- */
    .page-title {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .slider-style3 .slider-item {
        height: 440px !important;
    }
    .slider-style3 .page-tittle-slider .content-slider {
        padding-top: 70px !important;
        padding-right: 0 !important;
    }
    .page-title.page-title-style3 .slider-item .page-tittle-slider .heading-tittle h1,
    .page-title-style2 .slider-item .page-tittle-slider .heading-tittle h1,
    .page-title .slider-item .page-tittle-slider .heading-tittle h1,
    .slider-item .page-tittle-slider .heading-tittle h1 {
        font-size: 30px !important;
        line-height: 38px !important;
        letter-spacing: 0 !important;
        margin-bottom: 10px !important;
    }
    .page-title .slider .swiper-button-next,
    .page-title .slider .swiper-button-prev {
        width: 34px;
        height: 34px;
    }
    .page-title .slider .swiper-button-next::after,
    .page-title .slider .swiper-button-prev::after {
        font-size: 16px;
    }

    /* ----- Judul section proporsional ----- */
    .tf-section {
        padding: 40px 0 !important;
    }
    /* Judul banner halaman dalam (FAQ, Produk, ...) */
    .page-title-inner {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }
    .page-title-inner .page-title-heading .heading {
        font-size: 36px !important;
        line-height: 44px !important;
    }
    .tf-heading .tf-title {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    h2 {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    .faq-title {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* ----- Kategori: geser halus + snap, tanpa scrollbar ----- */
    #category_section .component__content.category-list {
        display: block !important;
        overflow: visible !important;
    }
    #category_section .component__content.category-list ul {
        display: flex !important;
        gap: 4px;
        margin: 0 !important;
        padding: 5px 15px 12px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #category_section .component__content.category-list ul::-webkit-scrollbar {
        display: none;
    }
    #category_section .ps-category__item {
        scroll-snap-align: start;
        margin: 0 4px !important;
    }
    #category_section .ps-category__item img {
        width: 92px !important;
    }
    #category_section .ps-categories__name {
        white-space: normal !important;
        line-height: 1.35;
    }

    /* ----- Brand: kecil & rata kiri ----- */
    .brand-we-trust-section .brand-trust-carousel {
        justify-content: flex-start !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .brand-we-trust-section .ps-category__item {
        margin: 0 8px !important;
    }
    .brand-we-trust-section .ps-category__item img {
        width: 130px !important;
    }

    /* ----- Kartu produk: gambar penuh, tombol bisa diklik ----- */
    .category-inner .image img {
        width: 100% !important;
        height: auto;
        object-fit: cover;
    }
    .category-inner-title .heading {
        font-size: 16px !important;
        line-height: 24px !important;
    }
    .tf-section .swiper-button-next,
    .tf-section .swiper-button-prev {
        width: 34px;
        height: 34px;
    }
    .tf-section .swiper-button-next::after,
    .tf-section .swiper-button-prev::after {
        font-size: 16px;
    }

    /* ----- Footer & modal ----- */
    #footer .widget {
        text-align: center;
    }
    #footer .widget_socials {
        justify-content: center;
    }
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    #back-to-top {
        right: 15px !important;
        bottom: 70px !important;
    }
}

/* ---------- HP KECIL (<=490px) ---------- */
@media only screen and (max-width: 490px) {
    .slider-style3 .slider-item {
        height: 380px !important;
    }
    .slider-style3 .page-tittle-slider .content-slider {
        padding-top: 55px !important;
    }
    .page-title.page-title-style3 .slider-item .page-tittle-slider .heading-tittle h1,
    .page-title-style2 .slider-item .page-tittle-slider .heading-tittle h1,
    .page-title .slider-item .page-tittle-slider .heading-tittle h1,
    .slider-item .page-tittle-slider .heading-tittle h1 {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    .slider-style3 .page-tittle-slider .content-slider .heading-tittle .heading-description {
        font-size: 0.95rem !important;
    }
    .tf-button {
        padding: 10px 22px !important;
        font-size: 13px !important;
    }
    #search-main {
        font-size: 16px !important;
    }
    .brand-we-trust-section .ps-category__item img {
        width: 110px !important;
    }
    .breadcrumbs ul {
        width: auto !important;
        max-width: 100%;
    }
}