/* =========================
   Product Card Image Fix
   (GLOBAL - applies to all screens)
   ========================= */
.sp-product-thumb {
    height: 180px !important;
    overflow: hidden;
}

.sp-product-thumb > a {
    display: block;
    height: 100%;
}

.sp-product-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* =========================
   NAVBAR RESPONSIVE DESIGN
   ========================= */

/* Extra Large Screens (1500px and down) */
@media (max-width: 1500px) {
    .custom-container {
        max-width: 1330px;
    }

    .menu-nav {
        gap: 20px;
    }

    .header-search-wrap {
        max-width: 350px;
    }

    .header-search-wrap form input {
        width: 220px;
    }

    .navbar-wrap ul li a {
        padding: 15px 15px;
    }

    .slider-bg {
        padding: 60px 45px;
        min-height: 440px;
    }

    .slider--area .slider-bg {
        padding: 80px 60px;
    }
}

/* Large Desktops (1200px and down) */
@media (max-width: 1199.98px) {
    .custom-container {
        max-width: 960px;
    }

    .menu-nav {
        gap: 15px;
    }

    .header-search-wrap {
        max-width: 280px;
        margin: 0 10px;
    }

    .header-search-wrap form input {
        width: 180px;
    }

    .navbar-wrap ul li a {
        padding: 12px 12px;
        font-size: 13px;
    }

    .header-action .btn {
        padding: 10px 16px;
        font-size: 12px;
    }

    .header-category a {
        padding: 10px 16px;
        font-size: 13px;
    }

    .header-action > ul li.header-btn {
        display: none;
    }

    .header-shop-cart .minicart {
        right: 0;
    }

    .sp-product-thumb {
        height: 170px !important;
    }

    .slider-bg {
        padding: 40px 40px;
        min-height: 312px;
        background-position: left center;
    }

    .slider-content .sub-title {
        font-size: 24px;
    }

    .slider-content .title {
        font-size: 32px;
    }

    .slider-active .slick-dots {
        bottom: 30px;
    }

    .slider-content .btn {
        font-size: 13px;
        padding: 12px 25px;
    }

    .slider-category-wrap::before,
    .category-item::before {
        display: none;
    }

    .category-item {
        padding-bottom: 0;
    }

    .slider-category-wrap {
        padding: 35px 40px 35px;
    }

    .discount-thumb img {
        min-width: 100%;
    }

    .best-deal-item {
        padding: 22px 20px 28px;
    }

    .special-products-wrap .row .col-3 {
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }

    .special-products-wrap .row .col-9 {
        -ms-flex: 0 0 73%;
        flex: 0 0 73%;
        max-width: 73%;
    }

    .sp-product-content {
        padding: 25px 30px 25px;
    }

    .best-sellers-products .row .col-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .discount-item-two .discount-content {
        width: 41%;
        right: auto;
        left: 30px;
    }

    .discount-item-two .discount-content .title {
        font-size: 20px;
    }

    .discount-item-two .discount-content p {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .discount-item-two .discount-content .btn {
        font-size: 12px;
        padding: 12px 25px;
        font-weight: 600;
    }

    .footer-area.gray-bg .row [class*="col-"]:last-child {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .scroll-top {
        right: 20px;
    }

    .scroll-top.open {
        bottom: 20px;
    }
}

/* =========================================
   MOBILE NAVBAR (992px and down)
   Layout: Logo -> Search -> Cart -> Login -> Hamburger
   ========================================= */
@media (max-width: 991.98px) {
    .custom-container {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .menu-area {
        background: #fff !important;
        padding: 0 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .menu-wrap {
        background: #fff;
    }

    body .menu-nav,
    .menu-area .menu-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        min-height: 56px !important;
    }

    /* 1. Logo */
    body .logo,
    .menu-nav .logo {
        display: flex !important;
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    body .logo img,
    .menu-nav .logo img {
        max-height: 32px !important;
        max-width: 85px !important;
        width: auto !important;
    }

    /* 2. Search */
    body .header-search-wrap,
    .menu-nav .header-search-wrap {
        display: flex !important;
        order: 2 !important;
        flex: 0 1 140px !important; /* Forces it to not grow endlessly */
        width: 140px !important;
        max-width: 140px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body .header-search-wrap form,
    .menu-nav .header-search-wrap form {
        display: flex !important;
        width: 100% !important;
        background: #f6f6f6 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        height: 36px !important;
        margin: 0 !important;
    }

    /* CRITICAL FIX: Kill the hardcoded input width */
    body .header-search-wrap form input[type="text"],
    .menu-nav .header-search-wrap form input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100px !important;
        border: none !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        background: transparent !important;
        color: #363636 !important;
    }

    body .header-search-wrap form button,
    .menu-nav .header-search-wrap form button {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        background: var(--color-primary) !important;
        color: #fff !important;
        border-radius: 0 20px 20px 0 !important;
        line-height: 36px !important;
        padding: 0 !important;
    }

    /* 3. Cart */
    body .header-cart-action,
    .menu-nav .header-cart-action {
        display: flex !important;
        order: 3 !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .header-cart-wrap > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        background: #f0f0f0 !important;
        border-radius: 50% !important;
        color: #363636 !important;
    }

    .header-cart-wrap .item-count {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
        line-height: 16px !important;
        top: -2px !important;
        right: -2px !important;
    }

    /* 4. Login */
    body .header-action,
    .menu-nav .header-action {
        display: flex !important;
        order: 4 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .header-action ul {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .header-action .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        height: 36px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
        margin: 0 !important;
    }

    /* 5. Hamburger */
    body .mobile-nav-toggler,
    .menu-nav .mobile-nav-toggler {
        display: flex !important;
        order: 5 !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        color: var(--color-primary) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    /* HIDE UNNEEDED DESKTOP ELEMENTS */
    .header-category,
    .navbar-wrap.main-menu,
    .header-cart-wrap .minicart,
    .header-search-wrap form::before,
    .header-search-wrap form .custom-select,
    .header-action .header-greeting,
    .header-action .header-wishlist,
    .header-action .btn-orange {
        display: none !important;
    }

    /* ===== OTHER TABLET STYLES ===== */
    .sp-product-thumb {
        height: 160px !important;
    }

    .slider-area .container:first-child .row .col-7 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .slider-area .container:first-child .row .col-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .slider-banner-img img {
        min-width: 100%;
    }

    .slider-active {
        margin-bottom: 20px;
    }

    .header-top-left ul li,
    .header-top-right ul li {
        padding-right: 10px;
        margin-right: 10px;
    }

    .header-top-left ul li::before,
    .header-top-right ul li::before {
        height: 10px;
    }

    .header-top-left .header-top-lang {
        display: none;
    }

    .header-search-area {
        padding: 30px 0;
    }

    .header-super-store {
        margin-right: 30px;
    }

    .slider-content .sub-title {
        font-size: 26px;
    }

    .slider-content .title {
        font-size: 35px;
    }

    .slider-content .btn {
        font-size: 13px;
        padding: 14px 29px;
    }

    .slider-bg {
        padding: 40px 45px;
        min-height: 350px;
        background-position: left center;
    }

    .slider-category-wrap {
        padding: 40px 35px 40px;
    }

    .bd-section-title {
        margin-right: 40px;
    }

    .special-products-wrap .row .col-9 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .best-sellers-products .row .col-3 {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .discount-item-two .discount-content {
        width: 35%;
        right: auto;
        left: 55px;
    }

    .discount-item-two .discount-content .title {
        font-size: 26px;
    }

    .discount-item-two .discount-content p {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .discount-item-two .discount-content .btn {
        font-size: 13px;
        padding: 16px 28px;
        font-weight: 700;
    }

    .footer-area.gray-bg .row [class*="col-"]:last-child {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile Phones (768px and down) */
@media (max-width: 767.98px) {
    .transparent-header {
        top: 0;
    }

    .sp-product-thumb {
        height: 140px !important;
    }

    .best-sellers-products .row .col-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .header-message-wrap {
        display: none;
    }

    .header-top-left .header-top-currency {
        display: none;
    }

    .header-top-left ul {
        justify-content: center;
        margin-bottom: 10px;
    }

    .header-top-right ul {
        justify-content: center;
    }

    .header-search-wrap {
        margin-bottom: 0;
    }

    .best-deal-top-wrap {
        display: block;
    }

    .header-search-area {
        padding: 25px 0;
    }

    .slider-area .container:first-child .row .col-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .slider-banner-img {
        margin-bottom: 20px;
    }

    .slider-bg {
        padding: 40px 30px;
    }

    .slider-content .title {
        line-height: 1;
    }

    .slider-category-wrap {
        margin-top: 10px;
    }

    .discount-content .btn {
        display: none;
    }

    .discount-content {
        right: 25px;
        width: 42%;
    }

    .discount-content > span {
        font-size: 11px;
    }

    .discount-content .title {
        font-size: 17px;
        margin-bottom: 0;
    }

    .discount-item.style-two .discount-content {
        right: auto;
        left: 25px;
        width: 46%;
    }

    .bd-section-title {
        margin-right: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .best-deal-top-wrap .coming-time {
        justify-content: center;
    }

    .section-title .title {
        font-size: 32px;
        margin-bottom: 0;
    }

    .section-btn {
        margin-top: 15px;
    }

    .discount-item-two {
        height: 180px;
        border-radius: 6px;
    }

    .discount-item-two .discount-thumb {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .discount-item-two .discount-thumb img {
        max-width: initial;
        border-radius: 6px;
    }

    .discount-item-two .discount-content {
        right: auto;
        left: 25px;
        width: 60%;
    }

    .discount-item-two .discount-content .title {
        font-size: 20px;
    }

    .discount-item-two .discount-content p {
        font-size: 14px;
        margin-bottom: 0;
    }

    .footer-area.gray-bg .row [class*="col-"]:last-child {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .copyright-text {
        margin-bottom: 13px;
        text-align: center;
    }

    .section-title p {
        padding: 0 0;
    }

    .section-title-two .sub-title {
        font-size: 24px;
    }

    .section-title .title {
        font-size: 30px;
    }

    .newsletter-wrap .title {
        font-size: 28px;
        width: 100%;
        padding-right: 0;
        margin: 0 auto 30px;
    }

    .newsletter-wrap {
        padding: 80px 30px;
    }

    .newsletter-form form {
        display: block;
    }

    .newsletter-form input {
        width: 100%;
        margin-bottom: 15px;
    }

    .newsletter-form button {
        margin-left: 0;
    }
}

/* Extra Small Phones (576px and down) */
@media (max-width: 575.98px) {
    body .menu-nav,
    .menu-area .menu-nav {
        padding: 8px 6px !important;
        gap: 4px !important;
    }

    /* Shrink logo further */
    body .logo img,
    .menu-nav .logo img {
        max-height: 26px !important;
        max-width: 70px !important;
    }

    /* Shrink search wrapper */
    body .header-search-wrap,
    .menu-nav .header-search-wrap {
        flex: 0 1 110px !important;
        width: 110px !important;
        max-width: 110px !important;
    }

    body .header-search-wrap form input[type="text"],
    .menu-nav .header-search-wrap form input {
        max-width: 70px !important;
        padding: 0 8px !important;
    }
}

/* Very Small Phones (420px and down) */
@media (max-width: 420px) {
    body .header-search-wrap,
    .menu-nav .header-search-wrap {
        flex: 0 1 90px !important;
        width: 90px !important;
        max-width: 90px !important;
    }

    body .header-search-wrap form input[type="text"],
    .menu-nav .header-search-wrap form input {
        max-width: 55px !important;
        font-size: 11px !important;
    }

    .header-action .btn {
        padding: 0 8px !important;
        font-size: 10px !important;
    }
}

/* Small Devices (576px to 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .custom-container {
        max-width: 540px;
    }

    .slider-area .container:first-child .row .col-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .slider-bg {
        padding: 40px 40px;
    }

    .header-top-wrap {
        padding: 15px 0;
    }

    .discount-content {
        right: 35px;
        width: 37%;
    }

    .discount-content > span {
        font-size: 12px;
    }

    .discount-content .title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .discount-content .btn {
        display: inline-block;
    }

    .discount-item.style-two .discount-content {
        right: auto;
        left: 40px;
        width: 43%;
    }

    .sp-product-content {
        padding: 25px 40px 25px;
    }

    .best-sellers-products .row .col-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .discount-item-two {
        height: auto;
        border-radius: 6px;
    }

    .discount-item-two .discount-thumb {
        position: initial;
    }

    .discount-item-two .discount-thumb img {
        max-width: 100%;
        border-radius: 6px;
    }

    .discount-item-two .discount-content {
        right: auto;
        left: 35px;
        width: 40%;
    }

    .discount-item-two .discount-content .title {
        font-size: 22px;
    }

    .discount-item-two .discount-content p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .section-title .title {
        font-size: 33px;
    }
}