/*
 * Tool Devil storefront — tablet and phone layout.
 * Loaded after every template stylesheet. Desktop (≥ 1200px) is untouched; below that the
 * template's fixed widths are relaxed so nothing runs off the screen.
 */

img {
    max-width: 100%;
}

html,
body {
    overflow-x: hidden;
}

/* ───────── ≤ 1199px: laptops / small desktops ───────── */
@media (max-width: 1199.98px) {
    .productsCard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ───────── ≤ 991px: tablets ───────── */
@media (max-width: 991.98px) {

    /* Header: logo + account/cart on one line, search underneath */
    .header-top-section {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo actions"
            "search search";
        align-items: center;
        gap: 12px 16px;
    }

    .header-top-section .logo {
        grid-area: logo;
        width: 120px;
    }

    .header-top-section .search-section {
        grid-area: search;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .header-top-section .contact-section {
        grid-area: actions;
        flex-direction: row !important;
        justify-content: flex-end;
        align-items: center;
        gap: 14px !important;
        width: auto !important;
    }

    /* Phone and email stay in the footer; the header keeps account and cart */
    .contact-section .contact-item:nth-child(1),
    .contact-section .contact-item:nth-child(2) {
        display: none !important;
    }

    .contact-section .contact-item::after,
    .contact-section .contact-item::before {
        display: none !important;
    }

    .search-section .categories-dropdown {
        max-width: 42%;
    }

    /* Home: content first, then promotions, then manufacturers */
    .homepage-content>.row {
        display: flex;
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
        width: 100% !important;
    }

    .homepageLeft,
    .homepageRight,
    .homepageCenter {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .homepageCenter {
        order: 1;
    }

    .homepageRight {
        order: 2;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1em;
        padding-top: 1.5rem;
    }

    .homepageLeft {
        order: 3;
        margin-top: 1.5rem;
    }

    .manufacturers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .share-container {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* Hero slider */
    .slide-content {
        padding: 2rem 2rem 2.5rem !important;
        min-height: 400px;
    }

    .slider-heading {
        font-size: 2.1rem;
    }

    .slider-description {
        font-size: 1.1rem;
    }

    /* Grids */
    .productsCard,
    section.brandProducts .cardsWrapper,
    .blogwrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Category: filters above the products */
    .categoryPage .row>.col-md-4,
    .categoryPage .row>.col-md-8 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .filter-container {
        position: static;
        margin-bottom: 1.25rem;
    }

    /* Product page: gallery above the buy box */
    .gallery-row {
        flex-direction: column;
        gap: 24px;
    }

    .gallery-left,
    .gallery-right {
        width: 100% !important;
    }

    section.innerBanner {
        padding: 3.5rem 1.25rem !important;
    }

    h2.pageTitle {
        font-size: 2.25rem !important;
    }

    .contentWrapper {
        padding: 2.5rem 0;
    }

    .row.w-100 {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ───────── ≤ 767px: phones ───────── */
@media (max-width: 767.98px) {

    .top-banner {
        font-size: 0.72rem;
        padding: 7px 10px;
        line-height: 1.35;
    }

    .header-top-section .logo {
        width: 96px;
    }

    .contact-section .contact-info-text .label {
        display: none;
    }

    .contact-section .contact-info-text .value,
    .cart-label {
        font-size: 0.78rem !important;
    }

    .search-section .form-select,
    .search-section .form-control {
        font-size: 0.85rem;
    }

    /* Hero: text over a smaller product cluster */
    .slide-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: 0;
        padding: 1.5rem 1.25rem 2.5rem !important;
        gap: 0.5rem;
    }

    .slide-left-content {
        width: 100%;
    }

    .badge-label {
        margin-bottom: 12px;
        font-size: 0.75rem;
        padding: 0.35rem 1rem;
    }

    .slider-heading {
        font-size: 1.65rem;
        margin-bottom: 12px;
    }

    .slider-description {
        font-size: 0.98rem;
        margin-bottom: 18px;
    }

    .product-circle-container {
        width: 100%;
        height: 230px;
        flex: 0 0 auto;
    }

    .product-circle.small,
    .product-circle.medium {
        width: 92px;
        height: 92px;
    }

    .product-circle.main {
        width: 160px;
        height: 160px;
        bottom: 0;
    }

    /* Promotions: one column, smaller watermark text */
    .homepageRight {
        grid-template-columns: 1fr;
    }

    .promoBox .textWrapper h4 {
        font-size: 5rem;
        line-height: 4.5rem;
    }

    .manufacturers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 1em;
    }

    .headTxt {
        font-size: 1.05rem;
        padding: 0.9rem 1.2rem;
    }

    /* Product grids: two compact cards per row */
    .productsCard,
    section.brandProducts .cardsWrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75em;
    }

    .product-card {
        padding: 0.75rem;
        margin: 0 4px;
    }

    .product-card .product-name {
        font-size: 0.85rem;
    }

    .product-price-section,
    .brandProducts .pricing-section>div {
        flex-wrap: wrap;
        gap: 6px;
    }

    .blogwrapper {
        grid-template-columns: 1fr;
    }

    /* Category controls */
    .filter-container {
        padding: 1.25rem;
    }

    .sorting-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    .sorting-left,
    .sorting-right {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination-container {
        justify-content: center;
    }

    /* Inner pages */
    section.innerBanner {
        padding: 2.25rem 1rem !important;
        border-radius: 0 0 8px 8px;
    }

    h2.pageTitle {
        font-size: 1.6rem !important;
        line-height: 1.25;
    }

    .contentWrapper {
        padding: 1.75rem 0;
    }

    .hamburger ul {
        flex-wrap: wrap;
        gap: 0.4em 0.8em;
        margin-bottom: 1.4rem;
        font-size: 0.85rem;
    }

    /* Product page */
    .main-image-container {
        height: 300px;
    }

    .detail-row {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .detail-label {
        min-width: 96px;
        font-size: 0.92rem;
    }

    .detail-value.quantity-row {
        flex-wrap: wrap;
    }

    .buttons-section {
        flex-direction: column;
        gap: 10px;
    }

    .buttons-section .btn-action {
        width: 100%;
    }

    /* Footer */
    .footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* ───────── ≤ 420px: small phones ───────── */
@media (max-width: 420px) {

    .productsCard,
    section.brandProducts .cardsWrapper {
        gap: 0.6em;
    }

    .slider-heading {
        font-size: 1.45rem;
    }

    .manufacturers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}