@media (max-width: 1024px) {

    

    .th-header-row {
        grid-template-columns:
            auto
            minmax(200px,1fr)
            auto;

        gap: 18px;
    }

    .th-header-search {
        max-width: 440px;
    }

    .th-footer-main {
        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 38px;
    }

    .th-footer-column:last-child {
        display: none;
    }
}


@media (max-width: 767px) {

    

    

    

    

    

    

    

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

    .th-section {
        padding-block: 48px;
    }

    .th-topbar-inner {
        justify-content: center;
    }

    .th-topbar-link {
        display: none;
    }

    .th-header-row {
        min-height: 66px;

        grid-template-columns:
            40px 1fr auto;

        gap: 8px;
    }

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

    .th-brand {
        justify-self: center;
    }

    .th-brand-name {
        font-size: 21px;
    }

    .th-brand-bag {
        width: 20px;
        height: 22px;
    }

    .th-header-search {
        display: none;
    }

    .th-header-icon {
        width: 39px;
        height: 39px;
        min-height: 39px;

        padding: 0;

        justify-content: center;
    }

    .th-header-icon > span {
        display: none;
    }

    .th-cart-count {
        position: absolute;

        top: -5px;
        left: -4px;
    }

    .th-nav-bar {
        display: none;
    }

    .th-nav-bar.is-open {
        display: block;
    }

    .th-nav-menu {
        display: block;

        padding-block: 10px;
    }

    .th-nav-menu li {
        display: block;
    }

    .th-nav-menu a {
        display: block;

        padding: 9px 2px;
    }

    .th-home-hero {
        padding-block: 52px 40px;
    }

    .th-hero-content h1 {
        font-size: 39px;

        letter-spacing: -.8px;
    }

    .th-hero-content > p {
        font-size: 13px;
    }

    .th-hero-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;

        width: 100%;
    }

    .th-hero-mini-features {
        gap: 12px;
    }

    .th-category-strip {
        padding-bottom: 40px;
    }

    .th-category-scroll {
        justify-content: flex-start;

        margin-inline:
            -12px;

        padding-inline: 12px;
    }

    .th-category-item {
        flex-basis: 92px;

        min-height: 100px;
    }

    .th-savings-box {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 28px;

        border-radius: 18px;
    }

    .th-savings-copy h3 {
        font-size: 30px;
    }

    .th-saving-stats div {
        min-height: 95px;

        padding: 16px;
    }

    .th-featured-banner {
        grid-template-columns: 1fr;

        padding: 27px;

        text-align: center;
    }

    .th-featured-image {
        order: -1;
    }

    .th-featured-image img {
        max-height: 145px;
    }

    .th-how-grid {
        grid-template-columns: 1fr;
    }

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

    .th-trust-grid article:nth-child(2) {
        border-left: 0;
    }

    .th-trust-grid article:nth-child(-n+2) {
        border-bottom:
            1px solid
            var(--th-border);
    }

    .th-final-cta {
        display: block;

        padding: 28px;
    }

    .th-final-cta h2 {
        margin-bottom: 22px;
    }

    .th-footer-main {
        grid-template-columns: 1fr;

        gap: 30px;

        padding-block: 42px;
    }

    .th-footer-column:last-child {
        display: block;
    }

    .th-footer-bottom-inner {
        display: block;

        padding-block: 18px;

        text-align: center;
    }

    .th-footer-payment {
        margin-top: 12px;

        justify-content: center;
        flex-wrap: wrap;
    }
}


@media (max-width: 430px) {

    .th-saving-stats {
        grid-template-columns: 1fr 1fr;
    }

    .th-section-heading {
        display: block;
    }

    .th-section-heading > a {
        display: inline-block;

        margin-top: 10px;
    }
}

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }

    .th-hero-label {
        font-size: 11px;
    }

    .th-section-heading h2 {
        font-size: 29px;
        line-height: 1.35;
    }

    .th-section-heading p {
        font-size: 14px;
        line-height: 1.9;
    }

    .th-how-grid article {
        min-height: auto;
        padding: 24px;
    }

    .th-how-grid h3 {
        font-size: 18px;
    }

    .th-how-grid p {
        font-size: 13px;
    }

    .th-site-footer {
        margin-top: 24px;
    }

    .th-footer-main {
        padding-block: 38px 30px;
        gap: 28px;
    }

    .th-footer-brand {
        text-align: center;
    }

    .th-brand-footer {
        justify-content: center;
        margin-bottom: 12px;
    }

    .th-footer-brand p {
        max-width: 320px;
        margin: 14px auto;
        font-size: 13px;
        line-height: 2;
    }

    .th-footer-dev {
        display: block;
        margin-top: 10px;
        font-size: 11px;
    }

    .th-footer-column {
        text-align: center;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .th-footer-column h4 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .th-footer-column li {
        margin: 9px 0;
    }

    .th-footer-column a {
        font-size: 13px;
    }

    .th-footer-bottom-inner {
        padding-block: 20px;
        font-size: 11px;
        line-height: 1.8;
    }

    .th-footer-payment span {
        padding: 5px 8px;
        font-size: 9px;
    }
}

/* =========================================
   Footer mobile 2x2 layout
   ========================================= */
@media (max-width: 767px) {

    .th-footer-main {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px !important;
        padding: 24px 14px !important;
        align-items: start;
    }

    .th-footer-brand,
    .th-footer-column {
        margin: 0 !important;
        padding: 16px 14px !important;
        min-height: 100%;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        background: rgba(255,255,255,.02);
        text-align: center !important;
    }

    .th-footer-brand {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
    }

    .th-brand-footer {
        justify-content: center !important;
        margin-bottom: 6px !important;
    }

    .th-footer-brand p {
        font-size: 12px !important;
        line-height: 1.9 !important;
        margin: 0 auto 6px !important;
        max-width: none !important;
    }

    .th-footer-dev {
        font-size: 10px !important;
        margin-top: 4px !important;
    }

    .th-footer-column {
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }

    .th-footer-column h4 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .th-footer-column ul,
    .th-footer-column li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .th-footer-column li + li {
        margin-top: 8px !important;
    }

    .th-footer-column a {
        font-size: 12px !important;
        line-height: 1.8 !important;
    }

    .th-site-footer .th-footer-bottom,
    .th-site-footer .th-footer-bottom-inner {
        text-align: center !important;
    }

    .th-footer-bottom-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 16px 14px 20px !important;
        font-size: 10px !important;
    }

    .th-footer-payment {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .th-footer-payment span {
        font-size: 9px !important;
        padding: 4px 8px !important;
    }
}

/* very small mobiles */
@media (max-width: 420px) {
    .th-footer-main {
        gap: 12px !important;
        padding: 20px 12px !important;
    }

    .th-footer-brand,
    .th-footer-column {
        padding: 14px 10px !important;
        border-radius: 12px !important;
    }

    .th-footer-column h4 {
        font-size: 13px !important;
    }

    .th-footer-column a,
    .th-footer-brand p {
        font-size: 11px !important;
    }
}

@media (max-width: 767px) {

    .th-footer-main {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 26px 12px !important;
    }

    .th-footer-brand {
        grid-column: 1 / -1 !important;
        padding: 18px 14px !important;
        text-align: center !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.02) !important;
    }

    .th-brand-footer {
        justify-content: center !important;
    }

    .th-footer-brand p {
        max-width: 330px !important;
        margin: 12px auto 6px !important;
        font-size: 12px !important;
        line-height: 1.9 !important;
    }

    .th-footer-dev {
        display: block !important;
        margin-top: 5px !important;
        font-size: 10px !important;
    }

    .th-footer-column {
        padding: 14px 7px !important;
        margin: 0 !important;
        text-align: center !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.02) !important;
    }

    .th-footer-column h4 {
        margin: 0 0 9px !important;
        font-size: 13px !important;
    }

    .th-footer-column ul,
    .th-footer-column li {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .th-footer-column li + li {
        margin-top: 7px !important;
    }

    .th-footer-column a {
        font-size: 10.5px !important;
        line-height: 1.7 !important;
    }

    .th-footer-bottom-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 16px 12px 20px !important;
        text-align: center !important;
    }

    .th-footer-payment {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}