@media(max-width:1199px) {
    /* Sign In and Cart stay in the header; only their text labels go. Before
       this the whole block was hidden below 1200px, so there was no way to
       reach sign-in or the cart from a phone at all. */
    .header-utilities .util-info {
        display: none;
    }

    /* Wishlist is dropped here to keep the row short - it is still in the
       account area and on every product card. */
    .header-utilities ul li:has(a[href$="/wishlist"]) {
        display: none;
    }

    .header-utilities ul {
        gap: 6px;
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
    }

    /* the desktop rule is ".header-utilities ul li+li { margin-left: 15px }",
       which stacked on top of the flex gap and left the icons 23px apart. It
       has to be matched selector-for-selector to be overridden. */
    .header-utilities ul li + li {
        margin-left: 0;
    }

    .header-utilities .util-icon {
        height: 34px;
        width: 34px;
        line-height: 34px;
    }

    .header-utilities .util-icon i {
        font-size: 19px;
        line-height: 34px;
    }

    /* the search button is the third circle in this row - the util icons are
       34px, so it is 34px too, and the input is 40px to hold it with the same
       3px inset. */
    .th-wrap .search button {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .th-wrap .search .form-control {
        height: 40px;
        padding-right: 44px;
    }

    /* the search had a fixed width, which left no room for the icons */
    .th-wrap .search {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 12px;
    }

    .header-menus>ul {
        display: none;
    }

    .header-right {
        display: none;
    }

    .mobile-utl {
        display: block;
    }

    .header-wrap {
        padding: 10px 0;
    }

    .cart-popup {
        right: -7px;
    }.best-selling .row .col-lg-3 {
        width: 25%;
    }

    .best-selling .row .col-lg-3:nth-child(9) {
        display: none;
    }

    .best-selling .row .col-lg-3:nth-child(10) {
        display: none;
    }

    .best-selling .row .col-lg-3:nth-child(4) .product-wrap {
        border-right: none;
    }

    .best-selling .row .col-lg-3:nth-child(5) .product-wrap {
        border-right: 1px solid var(--border-color);
    }

    .best-selling .row .col-lg-3:nth-child(8) .product-wrap {
        border-right: none;
    }
}






@media(max-width:991px) {
    /* --- service products ------------------------------------------------ */

    /* this column is full width once the three columns stack, so two cards
       fit on a line instead of one card per screenful */
    .ss-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
        row-gap: 26px;
    }

    .ss-grid .ss-main {
        padding-bottom: 22px;
    }

    /* a uniform image box so the titles below line up across a row. 3/2 rather
       than 4/3: the taller box made the picture most of the card. */
    .ss-grid .ss-main-img {
        aspect-ratio: 3 / 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin-bottom: 14px;
        background: #F6F7F9;
        border-radius: 8px;
    }

    .ss-grid .ss-main-img img {
        width: 100%;
        height: 100%;
        /* contain, not cover: these are catalogue photos and cropping cuts the
           part of the fitting that identifies it */
        object-fit: contain;
    }

    .ss-grid .ss-main-img.is-empty {
        min-height: 0;
    }

    /* title and button sat side by side at 68%/32%, which leaves the button
       about 50px wide once the card is half a phone screen */
    .ss-grid .top_ss_content_title {
        display: block;
    }

    .ss-grid .top_ss_content_title div:first-of-type {
        width: 100%;
    }

    /* the two actions share one line on a 165px card, so both have to be
       trimmed to fit without wrapping */
    .ss-grid .ss-card-footer {
        gap: 8px;
        padding-top: 12px;
    }

    .ss-grid .ss-details-btn {
        font-size: 12px;
    }

    .ss-grid .product-btn button {
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .ss-grid .ss-main h3 {
        font-size: 14px;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .ss-grid .ss-main ul li {
        font-size: 11px;
        letter-spacing: .2px;
    }

    .ss-grid .ss-price span {
        font-size: 15px;
    }

    .ss-grid .ss-price del {
        font-size: 12px;
    }

    .ss-grid .ss-card-description {
        font-size: 12.5px;
        line-height: 1.55;

        /* the excerpt is capped at 120 characters server-side, which is two
           lines wide and five lines narrow - clamp it where it is rendered */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    .information-wrap {
        margin-top: 25px;
    }

    .information.mt1 {
        margin-top: 5px;
    }.additional-cat .col-lg-4:nth-child(3) {
        display: none;
    }

    .category-option-col {
        margin-bottom: 25px;
    }

    .category-option.mb {
        margin-bottom: 25px;
    }

    .offer-walls-wrap {
        height: 100%;
    }

    .best-selling .row .col-lg-3 {
        width: 33.3333%;
    }

    .best-selling .row .col-lg-3:nth-child(9) {
        display: block;
    }

    .best-selling .product-wrap {
        padding: 30px;
    }

    .best-selling .row .col-lg-3:nth-child(3) .product-wrap {
        border-right: none;
    }

    .best-selling .row .col-lg-3:nth-child(4) .product-wrap {
        border-right: 1px solid var(--border-color);
    }

    .best-selling .row .col-lg-3:nth-child(6) .product-wrap {
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }

    .best-selling .row .col-lg-3:nth-child(8) .product-wrap {
        border-right: 1px solid var(--border-color);
    }

    .best-selling .row .col-lg-3:nth-child(9) .product-wrap {
        border-right: none;
    }

    .thumbnail-product-wrap {
        min-height: 168px;
    }

    .footer .row .col-lg-3 {
        width: 25%;
    }

    .footer-head {
        flex-wrap: wrap;
    }

    .social-media {
        width: 50%;
    }

    .store {
        width: 50%;
        justify-content: flex-end;
    }

    .newsletter {
        margin-top: 20px;
    }

    /* .details-page-slide {
        display: none;
    } */

    .details-mobile-slide {
        display: block;
    }

    .details-mobile-slide .carousel-item {
        border-radius: 10px;
        height: auto;
        border: 1px solid var(--border-color);
        cursor: pointer;
    }

    .details-page-info {
        padding-left: 0;
        margin-top: 30px;
    }

    .category-filter-wrap {
        position: fixed;
        top: 0;
        left: -320px;
        z-index: 1022;
        border-radius: 0;
        width: 320px;
        height: 100%;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-top: 50px;
        opacity: 0;
        visibility: hidden;
        transition: ease-in-out .5s;
    }

    .category-filter-wrap.active {
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    .category-filter-wrap::-webkit-scrollbar {
        width: 8px;
    }

    .category-filter-wrap::-webkit-scrollbar-track {
        background: #fff;
    }

    .category-filter-wrap::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 50px;
    }

    .cat-filter-close {
        display: block;
    }

    .category-page .row .col-lg-9 {
        width: 100%;
    }

    .filter-tog {
        display: block;
    }

    .category-sidebar h3 {
        display: none;
    }

    .cart-page-sidebar {
        margin-top: 25px;
    }

    .bd-sidebar {
        position: static;
        margin-top: 20px;
    }

    .dashboard_sidebar {
        position: fixed;
        top: 0;
        left: -270px;
        bottom: 0;
        height: 100%;
        z-index: 1022;
        border-radius: 0;
        opacity: 0;
        visibility: hidden;
    }

    .dashboard_sidebar.active {
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    .dashboard-main-wrapper {
        width: 100%;
    }

    .dash-toggle {
        display: block;
    }

    .dash-close {
        display: block;
    }
}






@media(max-width:767px) {
    /* --- blog post ------------------------------------------------------- */

    /* the stored post HTML was pasted out of Word and carries inline
       "text-align: justify". Over a 350px column that opens rivers of
       whitespace between words, so it has to be beaten with !important. */
    .bd-content [style*="justify"] {
        text-align: left !important;
    }

    /* the paste also left list items at 13-14px against the paragraphs' 15px */
    .bd-content p,
    .bd-content li {
        font-size: 15px;
        line-height: 1.7;
    }

    .bd-content ol,
    .bd-content ul {
        padding-left: 22px;
    }

    .bd-content img,
    .bd-content iframe,
    .bd-content table {
        max-width: 100%;
        height: auto;
    }

    .bd-share__btn {
        width: 40px;
        height: 40px;
    }

    .video-gallery__grid > [class*="col-"] {
        margin-bottom: 18px;
    }

    .video-gallery__item h4 {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* the Word paste ends in two empty paragraphs, which left a dead 60px gap
       above the share row */
    .bd-content p:empty {
        display: none;
    }

    .bd-content > *:last-child {
        margin-bottom: 0;
    }

    /* eight "Latest Blogs" is ~900px of scrolling tacked onto the end of an
       article; four is still a read-next list without being a second page */
    .popular-post ul li:nth-child(n + 5) {
        display: none;
    }

    /* "Why Choose Quickfix?" was 25px against every other section heading's
       17px, and its cards were 20px against 12-16px elsewhere - the section
       read as if it belonged to a different site. Direct child so it does not
       also hit the card headings inside. */
    .choose-us-wrap > h3 {
        font-size: 17px;
        margin-bottom: 14px;
    }

    /* the per-category group headings were 18px against 17px everywhere else;
       one size for every section-level heading on the page */
    .category-option .inner-title h3 {
        font-size: 17px;
    }

    .feature-card h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .feature-card p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* the three "Starting from Rs.25500" category banners stack full width on a
       phone and take ~490px between the Flash Sale and the category listing */
    .additional-cat {
        display: none;
    }

    .search {
        width: 380px;
    }

    .carousel-item {
        /* was height:400px - a fixed height letterboxes the banner again, the
           same problem the 16/7 ratio caused on desktop */
        height: auto;
    }

    .information .col-lg-3 {
        width: 50%;
    }.additional-cat .col-lg-4 {
        width: 50%;
    }

    .best-selling .row .col-lg-3 {
        width: 50%;
    }

    .best-selling .row .col-lg-3:nth-child(2) .product-wrap {
        border-right: none;
    }

    .best-selling .row .col-lg-3:nth-child(3) .product-wrap {
        border-right: 1px solid var(--border-color);
    }

    .best-selling .row .col-lg-3:nth-child(4) .product-wrap {
        border-right: none;
    }

    .best-selling .row .col-lg-3:nth-child(8) .product-wrap {
        border-right: none;
    }

    .best-selling .row .col-lg-3:nth-child(9) {
        display: none;
    }

    .offer-walls-wrap {
        margin-bottom: 25px;
        height: auto;
    }

    .footer .row .col-lg-3 {
        width: 33.3333%;
    }

    .footer-logo {
        order: 1;
    }

    .payment-list {
        order: 2;
    }

    .copyright {
        order: 3;
        width: 100%;
        border-top: 1px solid #414142;
        margin-top: 15px;
        padding-top: 15px;
    }

    .footer-bottom-wrap {
        flex-wrap: wrap;
    }

    .checkout-page .check-row {
        flex-direction: column-reverse;
    }

    .checkout-main {
        margin-top: 30px;
    }

    .details-additional-right {
        margin-top: 20px;
    }

    .details-add-review-col {
        display: block;
    }

    .customer-reviews-right {
        margin-left: 0;
        margin-top: 30px;
    }




}

@media (min-width: 769px) {
    .feature-card {
        padding: 15px;
    }

    .feature-card h3 {
        font-size: 21px;
    }

    .feature-card p {
        font-size: 0.9rem;
    }
}






@media(max-width:575px) {
    .logo img {
        height: 22px;
    }

    .search .form-control {
        font-size: 13px;
        padding-left: 10px;
    }

    .search {
        width: 240px;
    }

    .th-wrap {
        padding: 12px 0;
    }

    .header-wrap {
        padding: 7px 0;
    }

    .mobile-logo img {
        height: 27px;
    }

    .mobile-menu-head {
        height: 60px;
        padding: 10px 20px;
    }

    .mobile-utl ul li a {
        font-size: 20px;
    }

    .cart-popup b {
        height: 15px;
        width: 15px;
        line-height: 15px;
        font-size: 10px;
    }

    .cart-popup {
        top: 0px;
    }

    .carousel-control-prev {
        left: 15px;
    }

    .carousel-control-next {
        right: 15px;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        height: 30px;
        width: 30px;
        line-height: 32px;
    }

    .carousel-control-prev-icon::before {
        font-size: 14px;
    }

    .carousel-control-next-icon::before {
        font-size: 14px;
    }

    .carousel-item {
        height: auto;
    }

    .cart-popup-head {
        padding: 10px 20px;
        height: 60px;
        margin-top: -20px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 20px;
    }

    .cart-popups {
        padding: 20px;
        width: 100%;
    }

    .cart-popup-head h3 {
        font-size: 18px;
    }

    .cart-empty img {
        /* empty-cart.jpg is square: a fixed height flattened it to 2:1 */
        width: 150px;
        max-width: 55%;
        height: auto;
        margin-bottom: 12px;
    }

    .cart-empty h3 {
        font-size: 18px;
        margin-top: 15px;
    }

    .cart-empty {
        padding-top: 10px;
    }

    p {
        font-size: 15px;
    }

    .mobile-menu {
        width: 100%;
    }

    .bars img {
        height: 16px;
    }

    .information-wrap {
        display: block;
        border: 1px solid var(--border-color);
        padding: 15px 10px;
        border-radius: var(--border-radius);
        text-align: center;
        margin-top: 10px;
    }

    .information-icon i {
        font-size: 28px;
    }

    .information-content {
        padding-left: 0;
    }

    .information-content b {
        font-size: 16px;
    }

    .information-content span {
        font-size: 14px;
        margin-top: 10px;
    }

    .information .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .information .col-lg-3 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .information.mt1 {
        margin-top: 25px;
    }

    .main-title h3 {
        font-size: 17px;
        order: 1;
    }

    .main-title a {
        order: 2;
    }

    #countdown {
        order: 3;
        padding-right: 0;
        margin-top: 15px;
    }

    .main-title {
        margin-bottom: 20px;
    }.deals-product .owl-theme .owl-nav {
        display: none;
    }

    .deals-product .main-title {
        flex-wrap: wrap;
    }

    #countdown h3 {
        white-space: nowrap;
        order: 0;
    }

    .product-wrap {
        padding: 20px;
    }

    .product-img img {
        margin: auto;
    }

    .deals-product .product-wrap {
        /* card content measures 335-369px on a 375px screen, so 430px left
           ~60-95px of dead space under every product. 380 keeps the cards
           level without the gap. */
        min-height: 380px;
    }

    .mt {
        margin-top: 40px;
    }

    .mb {
        margin-bottom: 40px;
    }

    .pt {
        padding-top: 40px;
    }

    .pb {
        padding-bottom: 40px;
    }

    .additional-cat .col-lg-4 {
        width: 100%;
    }

    .additional-cat .col-lg-4:nth-child(2) .add-cat-wrap {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .additional-cat .col-lg-4:nth-child(3) {
        display: block;
    }

    .add-cat-wrap {
        padding: 25px 20px;
        min-height: 150px;
    }

    .add-cat-content h3 {
        font-size: 18px;
    }

    .add-cat-content a {
        font-size: 13px;
        padding: 5px 15px;
        margin-top: 15px;
    }

    .add-cat-img {
        width: 100px;
        height: 100px;
    }

    .add-cat-content {
        width: calc(100% - 100px);
    }

    .category-option-col {
        border: none;
        padding: 0;
        margin-bottom: 40px;
    }

    .inner-title h3 {
        font-size: 18px;
    }

    .category-option-col .col-lg-6 {
        width: 50%;
    }

    .category-option-info h3 {
        font-size: 15px;
    }

    .category-option-img {
        height: 120px;
        padding: 10px;
    }

    .category-option.mb {
        margin-bottom: 0;
    }

    .main-title a {
        font-size: 13px;
    }

    /* no sliding: a plain wrapping grid, two products per row */
    .best-selling .row {
        flex-wrap: wrap;
        margin-left: -4px;
        margin-right: -4px;
        overflow: visible;
    }

    /* blog: two per row instead of one full-width card each */
    .blog-page .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .blog-page .row > div {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* the card is ~178px wide here, so the body comes down a size */
    .blog-page .bp-content {
        padding: 10px 10px 12px;
    }

    .blog-page .bp-content ul li {
        font-size: 10.5px;
    }

    .blog-page .bp-content ul li i {
        font-size: 12px;
    }

    /* 18px between date and read-time pushed the pair onto two lines */
    .blog-page .bp-content ul li + li {
        margin-left: 8px;
    }

    .blog-page .bp-content h3 {
        font-size: 13px;
    }

    .blog-page .bp-content p {
        font-size: 12px;
        margin-top: 6px;
    }

    .blog-page .bp-more {
        font-size: 12px;
    }

    /* three per row on /products, /products/{slug} and the search results */
    #product-grid {
        margin-left: -4px;
        margin-right: -4px;
    }

    #product-grid > [class*="col-"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        width: 33.3333%;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* three per row */
    .best-selling .row .col-lg-3 {
        padding-left: 4px;
        padding-right: 4px;
        width: 33.3333%;
    }

    .border-section {
        border: none;
    }

    /* borderless, like the /products grid - the border and 20px padding (plus a
       397px min-height) belonged to the old one-card-per-swipe layout */
    .best-selling .product-wrap {
        border: none !important;
        padding: 0;
        min-height: 0;
    }

    /* nth-child(9) and (10) are hidden at the wider breakpoints to keep the
       grid rows even. This row is a horizontal scroller, so hiding them just
       dropped two products off the end of the carousel. */
    .best-selling .row .col-lg-3:nth-child(9),
    .best-selling .row .col-lg-3:nth-child(10) {
        display: block;
    }

    /* "Top selling products": owl is not initialised at this width (see
       custom.js), so the plain .item children lay out as a scroller here -
       same two-and-a-half-card treatment as "Daily discover" above. */
    .clearance-products {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        margin-left: -6px;
        margin-right: -6px;
        padding-left: 6px;
        padding-right: 6px;
        scroll-snap-type: x proximity;
    }

    .clearance-products::-webkit-scrollbar {
        display: none;
    }

    .clearance-products > .item {
        flex: 0 0 33.3333%;
        /* flex items default to min-width:auto, so the card's min-content width
           (230px here) overrode the basis and only 1.5 cards fitted */
        min-width: 0;
        scroll-snap-align: start;
    }

    /* both sliders: borderless, and without the 380px min-height that was
       meant for a much wider card */
    .clearance-products .product-wrap,
    .deals-products .product-wrap {
        border: none;
        padding: 0;
        min-height: 0;
    }

    /* the card's own padding leaves ~143px for the price row, and
       "Rs.2,000 Rs.1,879 -6%" wanted 156px - it wrapped the discount pill onto
       a second line on 10 of the 18 cards */
    .best-selling .product-card .both-price,
    #product-grid .product-card .both-price,
    .deals-products .product-card .both-price,
    .clearance-products .product-card .both-price,
    .related-grid .product-card .both-price {
        gap: 3px;
    }

    /* At three per row the card is ~109px wide. "Rs.2,000 Rs.1,879 -6%" cannot
       fit that, so the struck-through original price gives way and the badge
       carries the discount. */
    .best-selling .product-card .prev-price,
    #product-grid .product-card .prev-price,
    .deals-products .product-card .prev-price,
    .clearance-products .product-card .prev-price,
    .related-grid .product-card .prev-price {
        display: none;
    }

    .best-selling .product-card .product-content h3,
    #product-grid .product-card .product-content h3,
    .deals-products .product-card .product-content h3,
    .clearance-products .product-card .product-content h3,
    .related-grid .product-card .product-content h3 {
        font-size: 12.5px;
        line-height: 1.35;
        min-height: calc(2 * 1.35 * 12.5px);
    }

    .best-selling .product-card .product-rating i,
    #product-grid .product-card .product-rating i,
    .deals-products .product-card .product-rating i,
    .clearance-products .product-card .product-rating i,
    .related-grid .product-card .product-rating i {
        font-size: 11.5px;
    }

    .best-selling .product-card .rating-count,
    #product-grid .product-card .rating-count,
    .deals-products .product-card .rating-count,
    .clearance-products .product-card .rating-count,
    .related-grid .product-card .rating-count {
        margin-left: 3px;
        font-size: 10px;
    }

    .best-selling .product-card .icon-btn,
    #product-grid .product-card .icon-btn,
    .deals-products .product-card .icon-btn,
    .clearance-products .product-card .icon-btn,
    .related-grid .product-card .icon-btn {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    /* the shared rule reserves 60px for the icon rail, which was sized for
       32px buttons; the rail is 26px here, so "New Arrival" was truncating to
       "New Ar..." on a 112px card */
    .best-selling .product-card .badge-tag,
    #product-grid .product-card .badge-tag,
    .deals-products .product-card .badge-tag,
    .clearance-products .product-card .badge-tag,
    .related-grid .product-card .badge-tag {
        padding: 2px 5px;
        font-size: 9px;
        max-width: calc(100% - 38px);
    }

    .best-selling .product-card .new-price span,
    #product-grid .product-card .new-price span,
    .deals-products .product-card .new-price span,
    .clearance-products .product-card .new-price span,
    .related-grid .product-card .new-price span {
        font-size: 13px;
    }

    .best-selling .product-card .price-off,
    #product-grid .product-card .price-off,
    .deals-products .product-card .price-off,
    .clearance-products .product-card .price-off,
    .related-grid .product-card .price-off {
        padding: 1px 4px;
        font-size: 10px;
    }

    /* The banners are 5:1 to 12.3:1 artwork, but this box was a fixed 150px
       tall with object-fit: cover - at 351px wide that is a 2.34:1 window, so
       53-81% of each image was cropped away and the headline text fell outside
       it. Letting the banner keep its own ratio shows all of it. */
    .product-ads-img {
        margin-bottom: 20px;
        height: auto;
    }

    .product-ads-img a {
        height: auto;
    }

    .product-ads-img img {
        height: auto;
        object-fit: contain;
    }

    .product-ads.mb {
        margin-bottom: 20px;
    }

    .thumbnail-product .main-title {
        margin-bottom: 5px;
    }

    .thumbnail-product-wrap {
        padding: 15px;
    }

    .thumbnail-product-img {
        width: 80px;
        height: 80px;
    }

    .thumbnail-product-content {
        width: calc(100% - 80px);
    }

    .thumbnail-product-content h3 {
        font-size: 15px;
    }

    .thumbnail-product-wrap .product-util {
        right: 15px;
        bottom: 20px;
    }

    .product-content h3 {
        font-size: 13px;
        /* font-size: 15px; */
    }

    .offer-walls-wrap {
        display: block;
        padding: 25px;
        text-align: center;
        margin-bottom: 20px;
    }

    .offer-walls-left {
        width: 100%;
    }

    .offer-walls-right {
        width: 100%;
        margin-top: 30px;
    }

    .offer-walls-right img {
        margin: auto;
        height: 120px;
        width: 120px;
    }

    .offer-walls-left span {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .offer-walls-left h3 {
        font-size: 25px;
    }

    .offer-walls-left a {
        padding: 7px 15px;
    }

    .offer-walls.mb {
        margin-bottom: 20px;
    }

    .footer {
        padding: 40px 0 10px;
    }

    .social-media {
        order: 1;
        width: 100%;
    }

    /* hidden on phones - About Us and Our Professionals are still in the
       footer's "Quickfix" column, and everything is in the mobile menu */
    .store {
        display: none;
    }

    .newsletter {
        order: 2;
        width: 100%;
        margin-top: 14px;
    }

    /* 28px was a small tap target on a phone */
    .social-media ul li a {
        height: 36px;
        width: 36px;
        line-height: 36px;
    }

    .social-media ul li a i {
        line-height: 36px;
    }

    .social-media ul li + li a {
        margin-left: 6px;
    }

    .footer-head {
        text-align: center;
    }

    .social-media ul {
        justify-content: center;
    }

    .newsletter button {
        padding: 5px 10px;
    }

    .footer .row .col-lg-3 {
        width: 50%;
    }

    .footer-wrap {
        margin-bottom: 30px;
    }

    .footer-wrap h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer-wrap ul li a {
        font-size: 13px;
        line-height: 1.4;
    }

    .footer-logo img {
        height: 25px;
    }

    .payment-list img {
        height: 18px;
    }

    .copyright {
        text-align: center;
    }

    .copyright p {
        font-size: 13px;
    }

    .footer-bottom {
        padding: 15px 0 15px;
    }

    .mobile-utl ul li+li a {
        margin-left: 20px;
    }

    .cart-popup-img img {
        height: 70px;
        width: 70px;
    }

    .cart-popup-content h3 {
        font-size: 14px;
    }

    .cart-footer a {
        font-size: 14px;
    }

    .cart-popup-content {
        width: calc(100% - 70px);
    }

    .auth-page {
        padding: 0;
    }

    .auth-card-body {
        padding: 30px 20px;
    }

    .auth-card-head h3 {
        font-size: 20px;
    }

    .other-login-btn a {
        font-size: 13px;
        padding: 10px 7px;
    }

    .other-login-btn a img {
        height: 15px;
        width: 15px;
        margin-right: 7px;
    }

    .other-login-btn a+a {
        margin-left: 5px;
    }

    .auth-card-head {
        margin-bottom: 20px;
    }

    .auth-card-footer p {
        margin-top: 20px;
    }

    .checkout-product-left h3 {
        font-size: 15px;
    }

    .grand-total span {
        font-size: 16px;
    }

    .grand-total b {
        font-size: 16px;
    }

    .checkout-sidebar>h3 {
        font-size: 20px;
    }

    .checkout-main h3 {
        font-size: 20px;
    }

    .checkout-form {
        padding: 20px;
    }

    .payment-utl .form-check {
        margin-top: 10px;
    }

    .common-btn .btn {
        padding: 10px 20px;
        font-size: 15px;
    }

    .payment-utl {
        padding-bottom: 10px;
    }

    .payment-utl h3 {
        margin-bottom: 15px;
    }

    .breadcrumb {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        margin-bottom: 20px;
    }

    .details-mobile-slide .carousel-indicators .active::before {
        background: #fe0000;
        height: 9px;
        width: 9px;
    }

    .details-page-info h3 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .details-footer {
        margin-top: 20px;
    }

    .details-footer-head button {
        margin-right: 5px;
        font-size: 15px;
    }

    .details-footer-head a {
        margin-right: 5px;
        font-size: 15px;
    }

    .additional-list ul li i {
        font-size: 20px;
        margin-right: 12px;
    }

    .additional-list ul li span {
        font-size: 14px;
    }

    .details-page-head form {
        margin-bottom: 0;
    }

    .nav-tabs .nav-link {
        margin-right: 25px;
        font-size: 17px;
        padding-bottom: 3px;
    }

    .nav-tabs .nav-link:last-child {
        margin-right: 0;
    }

    .avg-rating-btn a {
        padding: 10px 10px;
        font-size: 15px;
        display: block;
        text-align: center;
    }

    .avg-rating-btn {
        display: block;
    }

    .avg-rating-btn button {
        width: 100%;
        padding: 10px 10px;
        font-size: 15px;
        margin-left: 0;
        margin-top: 10px;
    }

    .main-review {
        margin-top: 30px;
    }

    .main-review-list {
        display: block;
    }

    .main-review-content {
        padding-left: 0;
        width: 100%;
        margin-top: 15px;
    }

    .main-review-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .main-review h5 {
        margin-bottom: 25px;
    }

    .main-review-icon img {
        height: 50px;
        width: 50px;
        border-radius: var(--border-radius);
    }

    /* 442px was sized for the old owl carousel, where this section showed one
       or two wide cards. It is a plain grid now, so it forced ~190px of dead
       space inside every card. */
    .related-product .product-wrap {
        min-height: 0;
    }

    /* Buy bar pinned to the bottom of the screen. On a phone these buttons sit
       right under the gallery, near the top of a ~4400px page, so they scroll
       away long before the visitor has finished reading the spec. */
    .details-page-slide .details-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        margin-top: 0;
        padding: 10px 12px;
        gap: 10px;
        background: var(--white-color);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
    }

    .details-page-slide .details-footer-head {
        gap: 10px;
    }

    /* the pair shared a border-radius pair meant for two joined buttons */
    .details-page-slide .details-footer-head button,
    .details-page-slide .details-footer-head a {
        border-radius: var(--border-radius);
    }

    /* keeps the page's own footer clear of the fixed bar */
    body:has(.details-page-slide .details-footer) {
        padding-bottom: 66px;
    }

    /* the add-to-cart toast sits at the bottom of the screen, which is exactly
       where the buy bar now is - lift it clear so it does not cover the very
       button that triggered it */
    body:has(.details-page-slide .details-footer) .toast-stack {
        bottom: 78px;
    }

    /* 25px steppers are a small target on a touch screen */
    .details-qty .qty button {
        width: 34px;
        height: 34px;
        line-height: 34px;
    }

    .details-qty .qty .count {
        height: 34px;
    }

    /* three per row, matching /products and the home grids */
    .related-grid {
        margin-left: -4px;
        margin-right: -4px;
    }

    .related-grid > [class*="col-"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        width: 33.3333%;
        padding-left: 4px;
        padding-right: 4px;
    }

    .related-product .owl-theme .owl-nav {
        display: none;
    }

    .filter-tog {
        order: 1;
    }

    .category-main-head .form-control {
        order: 2;
        width: 250px;
    }

    .category-main-head h3 {
        order: 3;
        width: 100%;
        font-size: 16px;
        margin-top: 15px;
    }

    .category-main-head {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .filter-tog h2 {
        height: 36px;
        font-size: 15px;
        padding: 10px 12px;
    }

    .category-filter-wrap {
        width: 100%;
    }

    .category-page.mb {
        margin-bottom: 15px;
    }

    .cart-sidebar-col {
        padding: 20px;
    }

    .cart-page-list {
        padding: 20px;
    }

    .cart-page-col {
        display: block;
        text-align: center;
    }

    .cart-page-content {
        width: 100%;
        padding-left: 0;
    }

    .cart-page-main {
        margin-right: 0;
    }

    .cart-page-content h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .cart-page-util-left .prev-price {
        margin-right: 10px;
    }

    .qty span {
        margin-right: 10px;
    }

    .cart-page-util {
        display: block;
    }

    .cart-page-util-left {
        justify-content: center;
    }

    .cart-page-util .qty {
        justify-content: center;
        margin-top: 10px;
    }

    .cart-page-util .qty .form-control {
        width: 20% !important;
    }

    .prev-price del {
        font-size: 15px;
    }

    .new-price span {
        font-size: 15px;
    }

    .cart-page-main h3 {
        font-size: 20px;
    }

    .car-page-img img {
        height: 100px;
        width: 100px;
    }

    .cart-page-sidebar h3 {
        font-size: 20px;
    }

    .cart-sidebar-col ul li span {
        font-size: 15px;
    }

    .bp-content h3 {
        font-size: 18px;
    }

    .bp-content p {
        margin-top: 10px;
    }

    .bp-content {
        padding: 15px;
        min-height: auto;
    }

    .bp-wrap {
        margin-bottom: 25px;
    }

    .blog-page.mb {
        margin-bottom: 15px;
    }

    .bd-main-img {
        height: auto;
    }

    .bd-main h3 {
        font-size: 20px;
        line-height: 1.4;
    }

    .bd-meta li {
        font-size: 13px;
        padding-right: 14px;
    }

    .bd-meta li i {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }

    .bd-sidebar h3 {
        font-size: 18px;
    }

    .contact-us-list-wrap {
        padding: 20px;
    }

    .contact-us-list-wrap h3 {
        padding: 12px 20px;
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 20px;
    }

    .contact-us-list-wrap ul li a {
        font-size: 15px;
    }

    .contact-us-form h3 {
        font-size: 20px;
    }

    .contact-us-form {
        margin-top: 0;
        padding: 20px;
    }

    .contact-us-form label {
        font-size: 14px;
    }

    .contact-us-form .form-control {
        height: 42px;
    }

    .contact-us-form button {
        font-size: 15px;
    }

    .cta-content {
        padding: 20px;
    }

    .cta-content h3 {
        font-size: 20px;
    }

    .call-us a {
        font-size: 20px;
    }

    .cta-btn a {
        font-size: 15px;
    }

    .dashboard_sidebar {
        width: 100%;
    }

    .graph-row .col-lg-3 {
        width: 50%;
    }

    .visit_graph {
        margin-bottom: 14px;
    }

    .main-dashboard {
        margin-top: 10px;
    }

    .graph_art i {
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 25px;
    }

    .graph_art {
        margin-right: 12px;
    }

    .visit_graph h5 {
        font-size: 15px;
    }

    .in_dp_flex span {
        font-size: 20px;
    }

    .data_tables td {
        white-space: nowrap;
    }

    .payment-option-dashboard ul {
        flex-wrap: wrap;
    }

    .payment-option-dashboard ul li {
        width: 50%;
        text-align: center;
    }

    .payment-option-dashboard ul li+li {
        margin-left: 0;
    }

    .data_tables .table thead th {
        white-space: nowrap;
    }

    .otp-form {
        margin-top: 0;
        margin-bottom: 0;
        padding: 30px 20px;
    }

    .u-columns p {
        max-width: 100%;
    }

    .otp-img img {
        height: 150px;
    }

    .u-columns h2 {
        font-size: 22px;
    }

    .u-column2 h3 {
        font-size: 18px;
    }

    /* for Membership */
    @media (max-width: 768px) {
        .pricing-container {
            flex-direction: column;
            align-items: center;
        }
    }
}
/* Featured category grid: only the column count changes per breakpoint */
@media (max-width: 1199px) {
    .featured-category ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .featured-category ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .featured-category-img { height: 70px; }
    .featured-category-img img { max-height: 70px; }
}

@media (max-width: 767px) {
    .featured-category ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .featured-category ul li a { padding: 16px 8px 14px; }
    .featured-category-img { height: 58px; }
    .featured-category-img img { max-height: 58px; }
    .featured-category-info { margin-top: 10px; }
    .featured-category-info h3 { font-size: 12px; }
}

@media (max-width: 575px) {
    .featured-category ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .featured-category-info h3 { font-size: 11.5px; }
}

/* The Free Delivery / Online Support / Flexible Payment / Money Guarantee
   strip is hidden on phones: it pushed the actual content a long way down and
   repeats what the footer already says. 767px is where the section reflows to
   two per row, so that is the point it stops earning its space.

   It must be .information--usp, not .information: the hero row that holds the
   category sidebar and the slider carries .information too, so the bare class
   hid the slider along with the cards. */
@media (max-width: 767px) {
    .information--usp { display: none; }

    /* The heading above the service grid is hidden on phones too: the tiles
       are self-explanatory and it cost a full line of screen. Scoped to this
       section - .main-title is used by six sections on the page. */
    .featured-category .main-title { display: none; }

    /* that heading was what separated the grid from the slider, so the gap it
       used to provide is put back here */
    .featured-category ul { margin-top: 18px; }
}