/* Goldendeer Mobile Fix v1.5.0
 * Target chính xác Goldendeer Kadence Storefront v1.7.0.
 * Không có rule thay đổi desktop ngoài media query 767px.
 */

@media (max-width: 767px) {
    /* =========================================================
       1) HEADER: Danh mục -> Logo -> Search -> Cart
       DOM gốc v1.7.0:
       .gd-header-inner > .gd-brand
                        > .gd-category-dropdown
                        > .gd-search-form
                        > .gd-header-actions
       ========================================================= */

    body.gmf-header-order-enabled .gd-header .gd-header-inner {
        position: relative !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px auto !important;
        gap: 6px !important;
        align-items: center !important;
    }

    body.gmf-header-order-enabled .gd-header .gd-header-inner > .gd-category-dropdown {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 1 !important;
        justify-self: start !important;
    }

    body.gmf-header-order-enabled .gd-header .gd-header-inner > .gd-brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 170px !important;
        justify-self: start !important;
    }

    body.gmf-header-order-enabled .gd-header .gd-header-inner > .gd-brand img {
        width: 100% !important;
        max-width: 170px !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    body.gmf-header-order-enabled .gd-header .gd-header-inner > .gd-search-form {
        grid-column: 3 !important;
        grid-row: 1 !important;
        order: 3 !important;
        justify-self: center !important;
    }

    body.gmf-header-order-enabled .gd-header .gd-header-inner > .gd-header-actions {
        grid-column: 4 !important;
        grid-row: 1 !important;
        order: 4 !important;
        justify-self: end !important;
    }

    /* =========================================================
       2) SEARCH: bình thường chỉ còn kính lúp.
          Bấm kính lúp -> mở chính form tìm kiếm gốc phía dưới header.
       ========================================================= */

    body.gmf-icon-search-enabled .gd-header .gd-header-inner {
        position: relative !important;
    }

    /* Trường hợp chỉ bật Search nhưng tắt đổi thứ tự header. */
    body.gmf-icon-search-enabled:not(.gmf-header-order-enabled) .gd-header .gd-header-inner {
        grid-template-columns: minmax(112px, 150px) 42px 42px auto !important;
        gap: 6px !important;
    }

    body.gmf-icon-search-enabled .gd-header form.gd-search-form {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    body.gmf-icon-search-enabled .gd-header form.gd-search-form > input[type="search"] {
        display: none !important;
    }

    /* Trạng thái đóng: chỉ còn icon kính lúp, không có ô nền xanh.
       Kích thước/cách hiển thị được đưa về gần giống icon giỏ hàng gốc. */
    body.gmf-icon-search-enabled .gd-header form.gd-search-form > button[type="submit"] {
        display: grid !important;
        place-items: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 2px auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--gd-navy, #073252) !important;
        box-shadow: none !important;
    }

    body.gmf-icon-search-enabled .gd-header form.gd-search-form:not(.gmf-search-open) > button[type="submit"]:hover,
    body.gmf-icon-search-enabled .gd-header form.gd-search-form:not(.gmf-search-open) > button[type="submit"]:focus {
        background: transparent !important;
        color: var(--gd-blue, #0b5f96) !important;
        box-shadow: none !important;
    }

    body.gmf-icon-search-enabled .gd-header form.gd-search-form > button[type="submit"] svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Khi JS mở search: form mở NGAY TRONG HÀNG HEADER.
       Với thứ tự mobile Danh mục -> Logo -> Search -> Cart, form span cột 2-3,
       tức vùng từ sau nút Danh mục đến trước khu vực giỏ hàng. Nó phủ lên logo. */
    body.gmf-header-order-enabled.gmf-icon-search-enabled .gd-header form.gd-search-form.gmf-search-open {
        position: relative !important;
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        align-self: center !important;
        z-index: 500 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #d4e0e9 !important;
        border-radius: 10px !important;
        background: #fff !important;
        overflow: hidden !important;
        box-shadow: 0 6px 16px rgba(7, 50, 82, .12) !important;
        transform: none !important;
        inset: auto !important;
    }

    /* Đảm bảo logo nằm dưới form khi search mở, không chen lên trên ô tìm kiếm. */
    body.gmf-header-order-enabled.gmf-icon-search-enabled .gd-header .gd-header-inner > .gd-brand {
        z-index: 1 !important;
    }

    body.gmf-header-order-enabled.gmf-icon-search-enabled .gd-header form.gd-search-form.gmf-search-open > input[type="search"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #173f60 !important;
        font-size: 14px !important;
    }

    body.gmf-header-order-enabled.gmf-icon-search-enabled .gd-header form.gd-search-form.gmf-search-open > button[type="submit"] {
        width: 42px !important;
        min-width: 42px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: var(--gd-navy, #073252) !important;
        color: #fff !important;
    }

    /* Fallback nếu người dùng tắt tính năng đổi thứ tự header: vẫn mở search trong header,
       nhưng dùng toàn vùng giữa cạnh trái/phải để không rơi xuống hàng dưới. */
    body.gmf-icon-search-enabled:not(.gmf-header-order-enabled) .gd-header form.gd-search-form.gmf-search-open {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 500 !important;
        width: 100% !important;
        max-width: none !important;
        height: 42px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        border: 1px solid #d4e0e9 !important;
        border-radius: 10px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    /* Giữ giỏ hàng gọn như giao diện gốc; tài khoản đã được storefront ẩn ở <=560px. */
    body.gmf-header-order-enabled .gd-header .gd-header-actions {
        gap: 0 !important;
    }

    /* =========================================================
       3) BỎ “CHỌN TÙY CHỌN” TRÊN CARD SẢN PHẨM MOBILE
       .gd-product-options là class thật trong storefront v1.7.0.
       ========================================================= */
    body.gmf-hide-variation-button-enabled:not(.single-product) a.gd-product-options,
    body.gmf-hide-variation-button-enabled:not(.single-product) .gd-product-card a.gd-product-options,
    body.gmf-hide-variation-button-enabled:not(.single-product) .gmf-hidden-choose-options,
    body.gmf-hide-variation-button-enabled:not(.single-product) a.button.product_type_variable,
    body.gmf-hide-variation-button-enabled:not(.single-product) a.product_type_variable.add_to_cart_button {
        display: none !important;
    }

    /* =========================================================
       4) TRANG CHI TIẾT SẢN PHẨM MOBILE
       ========================================================= */
    body.gmf-product-layout-enabled.single-product .woocommerce-product-details__short-description {
        display: none !important;
    }

    body.gmf-product-layout-enabled.single-product form.cart.gmf-mobile-purchase-area {
        margin-top: 12px !important;
    }
}

/* =========================================================
   5) BANNER RIÊNG CHO MOBILE
   Khi có ảnh mobile, JS đổi đúng src của .gd-banner-static img.
   Parent và img dùng chiều cao tự nhiên để không crop ảnh mobile.
   ========================================================= */
@media (max-width: 767px) {
    body.gmf-mobile-banner-enabled .gd-hero .gd-banner-static.gmf-has-mobile-banner {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        background: transparent !important;
    }

    body.gmf-mobile-banner-enabled .gd-hero .gd-banner-static.gmf-has-mobile-banner > a,
    body.gmf-mobile-banner-enabled .gd-hero .gd-banner-static.gmf-has-mobile-banner > img {
        height: auto !important;
        min-height: 0 !important;
    }

    body.gmf-mobile-banner-enabled .gd-hero .gd-banner-static.gmf-has-mobile-banner img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}