/*
 * Urun listesi - MOBIL duzen.
 *
 * Yalnizca 767px ve alti. Filtre dugmesi ve mobil panel genis ekranda gizli;
 * mobil yerlesim kurallari @media blogunun icinde.
 *
 * GERI ALMA: bu dosya ve products-mobile.js tek basina calisir. Geri almak
 * icin iki satiri silmek yeter:
 *   - site/product/partials/listing-css.blade.php -> products-mobile.css
 *   - site/product/partials/listing-js.blade.php  -> products-mobile.js
 * lang/{tr,en}/site.php'deki 'finder.bar.mobile_filter' satiri yalnizca bu
 * duzende kullaniliyor; kalsa da zarari yok, istenirse o da silinir.
 *
 * Kapsam:
 *   - Arama ve eksenler sayfada yatay cipler olarak durur. Filtre dugmesi
 *     ayni formu sabit baslik/sonuc cubugu olan mobil panelde acar.
 *   - Siralama dugmesi YOK (sitede karsiligi yok).
 *   - Urun kartlarinin icerigi ve hover paneli degismedi; yalnizca izgara
 *     iki kolon ve olculer dar karta gore.
 */

/* Sayac satirindaki "Filtre" dugmesi yalnizca mobilde; pencere
   genisletilirse de gorunmesin. */
.product-result-count__filter {
    display: none;
}

.mobile-filter-sheet {
    display: none;
}

@media (max-width: 767px) {

    /* ---------------------------------------------- sihirbaz / AI butonlari */

    /* Yan yana, esit genislikte. Buton stili (renk,
       yaricap) sitenin mevcut stili; yalnizca yerlesim degisiyor. */
    .finder-promo {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        margin: 14px 0 0;
    }

    .finder-promo__btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
        gap: 8px;
        padding: 12px 12px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        white-space: normal;
        text-align: left;
    }

    .finder-promo__btn i {
        font-size: 19px;
    }

    /* Sagdaki ">". Projede yuklu Line Awesome'dan, la-angle-right. */
    .finder-promo__btn::after {
        content: "\f105";
        margin-left: auto;
        font-family: 'Line Awesome Free';
        font-size: 14px;
        font-weight: 400;
    }

    /* AI butonunun mobilde ayri bir gorunumu yok: yanardoner renkler
       (product-filter-bar.css, '.finder-promo__btn--ai') mobilde de aynen
       geciyor. */

    /* ------------------------------------------------------------ breadcrumb */

    /* Iz gorselin ALTINDA duz satir: hap zemini, golge ve gorselin
       uzerine binme bu sayfalarda mobilde yok. Bilesenin stili satir
       ici <style>'da; iki sinifli secici onu ezmek icin. */
    .dikkan-breadcrumb.dikkan-breadcrumb--overlap {
        margin-top: 0;
        padding: 14px 0 0;
    }

    .dikkan-breadcrumb.dikkan-breadcrumb--overlap ol {
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Masaustunde butonlar -50px ile urun bolumunun ust boslugunun icine
       biniyor; mobilde iki bolum arasi dogrudan kisa bir bosluk. */
    .product-area.pt-80 {
        padding-top: 16px;
    }

    /* ---------------------------------------------------------- filtre bari */

    /* Acilan panel bu kutuya gore konumlanir ve kartlarin ustunde kalmali
       (kart z-index'leri 1-8). */
    .product-finder-bar {
        position: relative;
        z-index: 20;
        margin-bottom: 8px;
    }

    /* "Urun bulucu" basligi + Tum filtreleri goster / Sifirla satiri
       mobilde gizli: yalnizca sayac satirindaki "Filtre" dugmesiyle acilan
       tam gorunumde (is-all-open) cikar, Sifirla oradan kullanilir. */
    .product-finder-bar__header {
        display: none;
        margin-bottom: 12px;
    }

    .product-finder-bar.is-all-open .product-finder-bar__header {
        display: flex;
    }

    .product-finder-bar__title {
        font-size: 17px;
    }

    .product-finder-bar__subtitle {
        font-size: 12.5px;
    }

    /* Arama seridi ciplerin USTUNDE. Isaretlemede formun
       sonunda duruyor; sira yalnizca gorsel olarak degisiyor. */
    #product-finder-form {
        display: flex;
        flex-direction: column;
    }

    .product-search {
        order: -1;
        margin: 0 0 12px;
        padding: 0 14px;
        border-radius: 8px;
    }

    .product-search__icon {
        color: var(--dikkan-antrasit-color);
    }

    .product-search input {
        padding: 14px 0;
        font-size: 14px;
    }

    /* 4 eksen: yatay kayan cip satiri (cubuk gizli). position BILEREK
       verilmiyor: acilan panel bu kaydirma kutusuna degil bar'a gore
       konumlansin, yoksa kutunun overflow'u paneli keserdi. */
    .product-finder-bar__columns {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .product-finder-bar__columns::-webkit-scrollbar {
        display: none;
    }

    .product-finder-column {
        flex: 0 0 auto;
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    /* Sutun basligi -> cip. Yuvarlak hap, sitedeki .finder-chip ile ayni dil. */
    .product-finder-column__header {
        width: auto;
        gap: 6px;
        padding: 8px 14px;
        background: #fff;
        border: 1px solid #d9dbe0;
        border-radius: 999px;
        color: var(--dikkan-antrasit-color);
        font-size: 13.5px;
        white-space: nowrap;
        transition: border-color .15s, background-color .15s, color .15s;
    }

    .product-finder-column__header i {
        font-size: 13px;
    }

    /* Ekseninde secim olan cip (sinifi products-mobile.js veriyor). */
    .product-finder-column.has-selection .product-finder-column__header {
        background: rgba(255, 65, 0, .08);
        border-color: rgba(255, 65, 0, .22);
        color: var(--dikkan-color);
    }

    /* Secimli cipin basindaki huni, Line Awesome la-filter. */
    .product-finder-column.has-selection .product-finder-column__header::before {
        content: "\f0b0";
        font-family: 'Line Awesome Free';
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
    }

    /* Paneli acik cip. */
    .product-finder-column:not(.is-collapsed) .product-finder-column__header {
        border-color: var(--dikkan-color);
        color: var(--dikkan-color);
    }

    /* Acik panel: cip satirinin altinda, bar genisliginde acilir menu.
       top verilmiyor: panel dikeyde kendi dogal yerinde (cipin hemen altinda)
       kalir, yatayda bar'a yayilir. */
    .product-finder-column__body {
        position: absolute;
        left: 0;
        right: 0;
        margin-top: 8px;
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 12px;
        box-shadow: 0 14px 28px rgba(16, 24, 40, .12);
        overflow: hidden;
    }

    .product-finder-column__body .product-finder-group:last-child {
        border-bottom: 0;
    }

    /* "Tum filtreleri goster": dort panel birden acildiginda ust uste
       binmesinler diye cipler alt alta dizilir ve paneller akisa girer. */
    .product-finder-bar.is-all-open .product-finder-bar__columns {
        flex-direction: column;
        overflow: visible;
    }

    .product-finder-bar.is-all-open .product-finder-column__header {
        width: 100%;
        justify-content: space-between;
    }

    .product-finder-bar.is-all-open .product-finder-column__body {
        position: static;
        box-shadow: none;
    }

    /* ------------------------------------------------ aktif filtre / sayac */

    /* Yalnizca rozetler: "Aktif filtreler" etiketi gizli,
       rozetler kose yuvarlakligi az, cercevesiz acik turuncu kutular. */
    #product-results .finder-active-filters {
        margin: 12px 0 0;
    }

    #product-results .finder-active-filters__label {
        display: none;
    }

    #product-results .finder-active-filters a.finder-chip {
        gap: 6px;
        padding: 6px 10px;
        border: 0;
        border-radius: 4px;
        background: #fdeee6;
        font-size: 13px;
    }

    #product-results .finder-active-filters a.finder-chip i {
        opacity: 1;
    }

    /* Sola yasli, kalin sayi; sagda "Filtre" dugmesi. */
    .product-result-count {
        justify-content: flex-start;
        align-items: center;
        margin: 16px 0 12px;
        font-size: 16px;
    }

    .product-result-count__total {
        font-weight: 700;
    }

    /* Dugmeyi products-mobile.js ekliyor (sayac ajax ile yeniden basildigi
       icin her guncellemede tekrar). */
    .product-result-count .product-result-count__filter {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        padding: 2px 0 2px 14px;
        border: 0;
        border-left: 1px solid #e4e4e7;
        background: none;
        color: var(--dikkan-antrasit-color);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .product-result-count__filter i {
        font-size: 18px;
    }

    /* Aktif filtre varken sag ustte turuncu nokta. */
    .product-result-count__filter.has-active::after {
        content: "";
        position: absolute;
        top: -3px;
        right: -7px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--dikkan-color);
    }

    /* ------------------------------------------------------- kart izgarasi */

    /* Iki kolon, 12px aralik. Kartin kendi 20px ust boslugu (style.css) yerine
       izgaranin dikey araligi kullaniliyor. */
    #product-results .all_products > .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    #product-results .all_products > .row > [class*="col-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    /* Kart kurallari listing-css.blade.php'deki satir ici <style>'da ve o
       blok bu dosyadan SONRA geliyor; esit ozgunlukte o kazanirdi. Bu yuzden
       buradaki secicilerin hepsi #product-results ile baslar. */
    #product-results .all_products_single {
        margin-top: 0;
    }

    /* listing-css izgaranin altina hover paneli icin 320px birakiyor; mobilde
       hover yok, panel yalnizca karsilastirma kipinde acilir. Bosluk o zaman
       birakilir, yoksa son satirla sayfalama arasinda bos alan kaliyordu.
       '.product-items' on eki: listing-css bu dosyadan sonra geliyor. */
    .product-items #product-results .all_products {
        margin-bottom: 0;
    }

    .product-items #product-results .all_products:has(.family-card.is-comparing) {
        margin-bottom: 320px;
    }

    /* Kartlar ayni satirda esit boyda: izgara masaustunde 'align-items-start'
       tasiyor (Bootstrap, !important). Mobilde esit boy + alt satirin karta
       yaslanmasi icin germe; hover paneli mutlak konumlu, etkilenmez. */
    #product-results .all_products > .row {
        align-items: stretch !important;
    }

    /* Gorsel alani sabit yukseklikte: fotograf kutuya sigdirilir, kart
       fotografin oranina gore uzamaz. style.css kutuya 200px en az yukseklik
       veriyor; o kaldirilip alanin tamami gorsele verildi. Urun fotograflari
       kenara kadar kirpilmis ama dik (yaklasik 1:2), bu yuzden yuksekligi
       belirleyen gorselin kendisi: 118px'te cok kucuk kaliyordu. */
    #product-results .family-card .all_product_item_image {
        min-height: 0;
        padding: 10px 6px 0;
    }

    /* Fotograflarin ustunde/altinda fazla beyaz bosluk kalmasin diye kutu
       210px yerine 170px, style.css'ten gelen 20px ic bosluk 10px. Fotografa
       kalan alan 170px yerine 150px - gorsel neredeyse ayni boyda, kaybolan
       kisim bosluk. */
    #product-results .family-card .all_product_item_image img {
        display: block;
        width: 100%;
        height: 170px;
        padding: 10px;
        object-fit: contain;
    }

    /* Karsilastirma dugmesi: yalnizca kutucuk. Yazi ekran
       okuyucu icin aria-label'da duruyor. */
    #product-results .compare-toggle {
        top: 10px;
        right: 10px;
    }

    #product-results .compare-toggle__label {
        display: none;
    }

    #product-results .compare-toggle__box {
        width: 18px;
        height: 18px;
    }

    /* Masaustundeki 124px en az yukseklik (3 satirlik ada yer) mobilde yok;
       ad 2 satirla sinirli. Esit kart boyunu yukaridaki germe sagliyor. */
    #product-results .family-card-info {
        min-height: 0;
        padding: 6px 12px 10px;
    }

    #product-results .family-card .family-card-name a {
        -webkit-line-clamp: 2;
        font-size: 14px;
        line-height: 1.3;
    }

    #product-results .family-card-category,
    #product-results .family-card-figure {
        margin-top: 3px;
        font-size: 12px;
    }

    /* Ok satirin sagina sabitlenir: akista kalinca dar kartta alt satira
       dusup kartı bir satir daha uzatiyordu. */
    #product-results .card-summary {
        flex-wrap: wrap;
        gap: 2px 5px;
        padding: 9px 26px 9px 12px;
        font-size: 11.5px;
    }

    #product-results .card-summary__arrow {
        position: absolute;
        top: 50%;
        right: 10px;
        margin: -7px 0 0;
    }

    #product-results .card-summary:before {
        left: 12px;
        right: 12px;
    }

    #product-results .card-summary__icon {
        font-size: 14px;
    }
}

/* Filtre dugmesinin actigi panel: baslik ve sonuc cubugu sabit, filtreler
   arada kayar. Mevcut form panel acilinca buraya tasinir. */
@media (max-width: 767px) {
    body.mobile-filter-sheet-open {
        overflow: hidden;
    }

    .mobile-filter-sheet[open] {
        position: fixed;
        inset: auto 0 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 540px;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
        margin: 0 auto;
        padding: 0;
        border: 0;
        border-radius: 20px 20px 0 0;
        background: #fff;
        color: #152338;
        font: inherit;
        box-shadow: 0 -12px 48px rgba(15, 23, 42, .12);
        overflow: hidden;
    }

    .mobile-filter-sheet::backdrop {
        background: rgba(18, 26, 38, .45);
    }

    .mobile-filter-sheet button {
        font-family: inherit;
        cursor: pointer;
    }

    .mobile-filter-sheet button:focus-visible {
        outline: 2px solid var(--dikkan-color);
        outline-offset: 2px;
    }

    .mobile-filter-sheet__handle {
        flex: 0 0 4px;
        width: 36px;
        margin: 12px auto 4px;
        border-radius: 999px;
        background: #c8cbd0;
    }

    /* Baslik altinda ayirici cizgi yok, basliktan
       sonra dogrudan arama kutusu gelir. */
    .mobile-filter-sheet__header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 20px 16px;
    }

    .mobile-filter-sheet__header h2 {
        margin: 0 auto 0 0;
        color: #152338;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
    }

    .mobile-filter-sheet__reset {
        padding: 6px 0;
        border: 0;
        background: none;
        color: var(--dikkan-color);
        font-size: 15px;
        white-space: nowrap;
    }

    .mobile-filter-sheet__close {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 48px;
        width: 48px;
        height: 34px;
        padding: 0;
        border: 0;
        border-left: 1px solid #e4e7ec;
        background: none;
        color: #152338;
        font-size: 24px;
    }

    .mobile-filter-sheet__body {
        flex: 1;
        min-height: 0;
        padding: 4px 20px 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-filter-sheet .product-finder-bar {
        margin: 0;
    }

    .mobile-filter-sheet .product-finder-bar__header {
        display: none;
    }

    .mobile-filter-sheet .product-finder-bar__columns {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
        overflow: visible;
    }

    .mobile-filter-sheet .product-finder-column {
        flex: none;
        width: 100%;
    }

    .mobile-filter-sheet .product-finder-column .product-finder-column__header {
        width: 100%;
        min-height: 64px;
        gap: 16px;
        padding: 18px 18px;
        border: 0;
        border-radius: 14px;
        background: #f6f7f9;
        color: #152338;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        white-space: normal;
    }

    .mobile-filter-sheet .product-finder-column .product-finder-column__header::before {
        content: none;
    }

    /* Sagdaki ok: cipteki 13px yerine iri, ince ok. Kapali
       kartta asagi bakar (product-filter-bar.css'teki 180 derece donus). */
    .mobile-filter-sheet .product-finder-column__header > i {
        font-size: 20px;
        color: #152338;
    }

    /* Acik kartin basligi ve govdesi tek kutu: govde ayni zemini alir. */
    .mobile-filter-sheet .product-finder-column:not(.is-collapsed) {
        border-radius: 14px;
        background: #f6f7f9;
    }

    .mobile-filter-sheet .product-finder-column:not(.is-collapsed) .product-finder-column__header {
        color: #152338;
    }

    /* Kartlar kapali acildigi icin secim olan eksen basliktaki turuncu
       noktadan anlasilir (sinifi products-mobile.js markSelected veriyor). */
    .mobile-filter-sheet .product-finder-column.has-selection .product-finder-column__header > span:not(.mobile-filter-icon)::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 8px;
        border-radius: 50%;
        background: var(--dikkan-color);
        vertical-align: middle;
    }

    .mobile-filter-sheet .product-finder-column__header > span:not(.mobile-filter-icon),
    .mobile-filter-sheet .product-finder-group__header > span:not(.mobile-filter-icon) {
        flex: 1;
    }

    .mobile-filter-sheet .product-finder-column .product-finder-column__header .mobile-filter-icon i,
    .mobile-filter-sheet .product-finder-group .product-finder-group__header .mobile-filter-icon i {
        transform: none;
        color: inherit;
        font-size: 24px;
    }

    .mobile-filter-sheet .mobile-filter-icon {
        display: inline-flex;
        justify-content: center;
        flex: 0 0 24px;
    }

    .mobile-filter-sheet .product-finder-column__body {
        position: static;
        margin: 0;
        padding: 0 10px 12px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .mobile-filter-sheet .product-finder-group {
        border-bottom: 1px solid #edf0f4;
    }

    .mobile-filter-sheet .product-finder-group__header {
        gap: 12px;
        padding: 14px 10px;
        color: #344054;
        font-size: 14px;
    }

    .mobile-filter-sheet .product-finder-group__header > i {
        color: #667085;
        font-size: 14px;
    }

    .mobile-filter-sheet .product-finder-group__body {
        padding: 0 0 12px;
    }

    .mobile-filter-sheet [data-column="usage-area"] .product-finder-group,
    .mobile-filter-sheet [data-column="product"] .product-finder-group,
    .mobile-filter-sheet [data-column="standards"] .product-finder-group {
        border: 0;
    }

    .mobile-filter-sheet [data-column="usage-area"] .product-finder-group__header,
    .mobile-filter-sheet [data-column="product"] .product-finder-group__header,
    .mobile-filter-sheet [data-column="standards"] .product-finder-group__header {
        display: none;
    }

    .mobile-filter-sheet [data-column="usage-area"] .product-finder-group .product-finder-group__body,
    .mobile-filter-sheet [data-column="product"] .product-finder-group .product-finder-group__body,
    .mobile-filter-sheet [data-column="standards"] .product-finder-group .product-finder-group__body {
        display: block;
        padding-bottom: 0;
    }

    .mobile-filter-sheet .product-finder-group__body ul {
        max-height: none;
        overflow: visible;
    }

    .mobile-filter-sheet .product-finder-group__body:not(.is-options-expanded) .is-extra-option {
        display: none;
    }

    .mobile-filter-sheet .product-finder-group__body label {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 40px;
        margin: 0;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: #475467;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
    }

    .mobile-filter-sheet .product-finder-group__body label::before {
        content: "";
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-right: 14px;
        border: 1px solid #98a2b3;
        border-radius: 3px;
        background: #fff;
    }

    .mobile-filter-sheet .product-finder-group__body input:checked + label {
        padding-right: 10px;
        border-color: rgba(255, 65, 0, .6);
        background: rgba(255, 65, 0, .05);
        color: #344054;
        font-weight: 400;
    }

    .mobile-filter-sheet .product-finder-group__body input:checked + label::before {
        border-color: var(--dikkan-color);
        background: var(--dikkan-color);
    }

    .mobile-filter-sheet .product-finder-group__body input:checked + label::after {
        content: "\2713";
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-filter-sheet [data-column="usage-area"] label::before {
        border-radius: 50%;
    }

    .mobile-filter-sheet [data-column="usage-area"] input:checked + label {
        border-color: transparent;
        background: none;
    }

    .mobile-filter-sheet [data-column="usage-area"] input:checked + label::after {
        content: "";
        left: 17px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
    }

    .mobile-filter-sheet .finder-bar-count {
        margin-left: auto;
        padding-left: 8px;
        color: #667085;
        font-size: 13px;
        white-space: nowrap;
    }

    .mobile-filter-sheet [data-column="product"] .finder-bar-count {
        margin-left: 4px;
        padding: 0;
    }

    .mobile-filter-sheet .product-finder-group__body input[type="radio"]:checked ~ .finder-option__clear {
        display: none;
    }

    .mobile-filter-sheet .mobile-filter-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 10px;
        border: 0;
        background: none;
        color: var(--dikkan-color);
        font-size: 14px;
    }

    .mobile-filter-sheet .is-options-expanded .mobile-filter-more i {
        transform: rotate(180deg);
    }

    /* Arama kutusu kartlarin ustunde tek basina. Formdaki yeri
       zaten 'order: -1' ile en ust; burada yalnizca olculeri. */
    .mobile-filter-sheet .product-search {
        margin: 0 0 16px;
        padding: 0 16px;
        border: 1px solid #e4e7ec;
        border-radius: 12px;
    }

    .mobile-filter-sheet .product-search:focus-within {
        border-color: var(--dikkan-color);
    }

    .mobile-filter-sheet .product-search__icon {
        color: #475467;
        font-size: 22px;
    }

    .mobile-filter-sheet .product-search input {
        padding: 16px 0;
        font-size: 16px;
    }

    .mobile-filter-sheet__footer {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #edf0f4;
        background: #fff;
    }

    .mobile-filter-sheet__summary {
        display: flex;
        flex: 0 0 34%;
        flex-direction: column;
        gap: 2px;
        color: #667085;
        font-size: 13px;
        line-height: 1.4;
    }

    .mobile-filter-sheet__summary strong {
        color: #101828;
        font-size: 14px;
    }

    .mobile-filter-sheet__apply {
        display: inline-flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        min-height: 56px;
        padding: 14px 16px;
        border: 0;
        border-radius: 7px;
        background: var(--dikkan-color);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
    }

    .mobile-filter-sheet__apply i {
        flex-shrink: 0;
        font-size: 22px;
    }

    .mobile-filter-sheet__apply:disabled {
        opacity: .55;
        cursor: default;
    }
}

@media (max-width: 767px) and (max-height: 520px) {
    .mobile-filter-sheet[open] {
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }
}