/* =========================================================
   RESPONSIVE CSS START
========================================================= */


/* =========================================================
   TABLET RESPONSIVE START
========================================================= */

@media (max-width: 1024px) {

    .store-layout {
        grid-template-columns: 1fr;
    }

    .store-sidebar {
        position: static;
        grid-template-columns: repeat(3, 1fr);
    }

    .store-main {
        max-width: 100%;
    }
}

/* =========================================================
   TABLET RESPONSIVE END
========================================================= */


/* =========================================================
   MOBILE / TABLET RESPONSIVE START
   Single Brand Order:
   1. Header
   2. Coupons
   3. Sidebar Info
   4. Content
   5. Similar Brands
   6. Popular Brands
========================================================= */

@media (max-width: 900px) {

    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .store-layout {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .store-main {
        display: contents;
        max-width: 100%;
    }
    .store-content-wrapper,
.store-content-box {
    order: 3;
}
.store-sidebar {
    order: 4;
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

    .store-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .store-header-box {
        order: 1;
    }

    .store-coupons {
        order: 2;
    }

    .store-content-box {
        order: 4;
    }

    .similar-brands-section {
        order: 5;
    }

    .popular-brands-section {
        order: 6;
    }

    .store-coupon-card {
        grid-template-columns: 95px minmax(0, 1fr);
        grid-template-areas:
            "discount content"
            "action action"
            "meta meta";
        gap: 14px;
        padding: 18px;
    }

    .discount-box {
        width: 95px;
        min-height: 82px;
        padding: 10px;
        border-radius: 12px;
    }

    .discount-box strong {
        font-size: 30px;
    }

    .discount-box small {
        font-size: 12px;
    }

    .coupon-content h3 {
        font-size: 16px;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .details-toggle {
        font-size: 13px;
    }

    .coupon-action {
        grid-area: action;
        padding-top: 0;
    }

    .coupon-action .coupon-button {
        min-height: 46px;
        font-size: 14px;
    }

    .coupon-meta {
        grid-area: meta;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        margin-top: 0;
    }

    .coupon-details {
        max-width: 100%;
        font-size: 13px;
        padding: 12px;
    }

    .similar-brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   MOBILE / TABLET RESPONSIVE END
========================================================= */


/* =========================================================
   MOBILE RESPONSIVE START
========================================================= */

@media (max-width: 768px) {

    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .main-nav.active {
        display: block;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid var(--border);
        padding: 18px;
        z-index: 999;
    }

    .main-nav.active ul {
        flex-direction: column;
        gap: 14px;
    }

    .hero-section {
        padding: 64px 0;
    }

    .hero-inner {
        text-align: left;
    }

    .hero-search {
        flex-direction: column;
    }

    .hero-search button {
        width: 100%;
        border-radius: 0;
    }

    .coupon-card {
        grid-template-columns: 1fr;
    }

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

    .store-header-box h1 {
        font-size: 28px;
    }

    .store-content-box {
        padding: 24px;
    }

    .dp-popup-top {
        padding: 32px 22px;
    }

    .dp-popup-top h2 {
        font-size: 22px;
    }

    .dp-code-row {
        grid-template-columns: 1fr;
    }

    .dp-copy-btn {
        padding: 16px;
    }

    .dp-popup-close {
        width: 42px;
        height: 42px;
        font-size: 28px;
    }

    .dp-newsletter {
        padding: 34px 22px;
    }

    .dp-newsletter-form {
        flex-direction: row;
    }
}

/* =========================================================
   MOBILE RESPONSIVE END
========================================================= */


/* =========================================================
   SMALL MOBILE RESPONSIVE START
========================================================= */

@media (max-width: 520px) {

    .store-page {
        padding: 20px 0 46px;
    }

    .store-header-box,
    .store-content-box,
    .store-coupon-card,
    .similar-brands-section,
    .popular-brands-section,
    .store-logo-card,
    .sidebar-widget {
        padding: 18px;
    }

    .store-header-box h1 {
        font-size: 22px;
        line-height: 1.25;
    }

    .store-header-box p {
        font-size: 14px;
    }

    .store-content-box {
        font-size: 14px;
        line-height: 1.75;
    }

    .store-content-box h2 {
        font-size: 21px;
    }

    .store-content-box h3 {
        font-size: 17px;
    }

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

    .discount-box {
        width: 90px;
        min-height: 78px;
    }

    .discount-box strong {
        font-size: 28px;
    }

    .coupon-meta {
        font-size: 11px;
    }

    .similar-brand-grid {
    grid-template-columns: repeat(2, 1fr);
    }

    .dp-popup-box {
        width: 100%;
        gap: 14px;
    }

    .dp-code-text {
        font-size: 24px;
        padding: 16px;
    }

    .dp-newsletter-form input {
        font-size: 15px;
        padding: 12px 14px;
    }
}

/* =========================================================
   SMALL MOBILE RESPONSIVE END
========================================================= */


/* =========================================================
   EXTRA SMALL MOBILE RESPONSIVE START
========================================================= */

@media (max-width: 480px) {

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

    .container {
        width: min(100% - 24px, 1120px);
    }
}

/* =========================================================
   EXTRA SMALL MOBILE RESPONSIVE END
========================================================= */


/* =========================================================
   HORIZONTAL SCROLL FIX START
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.store-page,
.store-layout,
.store-main,
.store-sidebar,
.store-coupon-card,
.store-content-box,
.store-header-box,
.similar-brands-section,
.popular-brands-section {
    max-width: 100%;
}

.store-coupon-card,
.coupon-content,
.coupon-action,
.coupon-meta {
    min-width: 0;
}

.coupon-content h3 {
    word-break: break-word;
}

.dp-popup-box,
.dp-code-row,
.dp-newsletter-form {
    max-width: 100%;
}

/* =========================================================
   HORIZONTAL SCROLL FIX END
========================================================= */


/* =========================================================
   RESPONSIVE CSS END
========================================================= */