/* =========================================================
   RESPONSIVE BREAKPOINTS 
========================================================= */
@media (max-width: 1300px) {
    .ss9-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ss9-card:nth-child(3n) {
        border-right: 0;
    }

    .ss9-card {
        border-bottom: 1px solid var(--line);
    }

    .ss9-card:nth-last-child(-n+3) {
        border-bottom: 0;
    }

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

@media (max-width: 1200px) {
    .ss-navLinks {
        gap: 18px;
    }

    .ss2-title {
        font-size: 30px;
        width: 325px;
    }

    .ss2-promoCard {
        min-height: 500px
    }

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

    .ep3-grid>.ep3-card:nth-child(4n) {
        border-right: 1px solid #eceef7;
    }

    .ss5-card {
        border-right: 1px solid #eceef7;
        border-bottom: 1px solid #eceef7;
    }

    .ss5-card:nth-child(4n) {
        border-right: none;
    }

    .ss5-card:nth-child(5n) {
        border-bottom: none;
    }

    .ss5-card:nth-child(6n) {
        border-bottom: none;
    }

    .ss5-grid>.ss5-card:last-child {
        border-right: 1px solid #eceef7;
    }

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

    .ep3-card--tall {
        grid-row: auto;
    }

    .ep3-card--big {
        min-height: auto;
    }

    .ss4-grid {
        gap: 20px;
    }

    .ss4-title {
        font-size: 19px;
    }

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

    .ss7-col {
        max-width: max-content;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .ss7-feature {
        display: flex;
    }

    .ss10-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 34px;
    }

    .ss10-desc {
        max-width: 320px;
    }

    .ssf-newsRight {
        min-width: 420px;
    }

    .ssf-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 26px;
    }

    .ssf-app {
        grid-column: 1 / -1;
    }

    .ep3-smRow {
        display: flex;
        flex-direction: column;
    }

    .ep3-bottom {
        display: flex;
        flex-direction: column;
        align-items: unset;
    }

    .ep3-chip {
        width: fit-content;
    }

    .ep3-smMedia {
        margin: 0 auto;
    }

    .ss6-title {
        width: 255px;
    }

    .ss7-miniRow {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 14px;
        align-items: start;
        height: 165px;
    }

    .ss7-mini {
        border-right: 1px solid var(--line);
    }

    .ss7-mini:nth-child(1n) {
        border-bottom: none;
    }

    .ss7-mini:nth-child(3n) {
        border-right: none;
    }

    .ss7-cartBtn {
        width: 100%;
        max-width: max-content;
    }

    .ss6-card--left {
        background-position: right 100% top;
    }

    .ss6-card--right {
        background-position: right 100% center;
    }

    .ss8-card--yellow {
        background-position: right 60% center;
    }

    .ss8-card--pink {
        background-position: right 60% center;
    }

    .ss4-content {
        padding: 18px 4px 18px 18px;
        max-width: 75%;
    }

    .ss4-card--one {
        background-position: right 75% center;
    }
}



@media (max-width: 992px) {
    .ss-brand {
        min-width: auto;
    }

    .ss-catBtn {
        display: none;
    }

    .ss-actionItem__label {
        display: none;
    }

    .ss-actions {
        gap: 10px;
    }

    .ss-search {
        min-width: 220px;
    }

    .ss2-promoGrid {
        grid-template-columns: 1fr
    }

    .ss2-promoCard {
        min-height: 520px
    }

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

    .ss6-grid {
        gap: 20px;
    }

    .ss6-title {
        font-size: 20px;
    }

    .ss6-content {
        max-width: 68%;
    }

    .ss8-grid {
        gap: 18px;
    }

    .ss8-title {
        font-size: 20px;
    }

    .ss8-content {
        max-width: 62%;
    }
}



@media (max-width: 820px) {
    .ep3-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ep3-card {
        padding: 16px;
    }

    .ep3-smRow {
        grid-template-columns: 140px 1fr;
    }

    .ep3-smMedia img {
        width: 250px;
        height: 195px;
    }

    .ss2-title {
        font-size: 30px;
        width: 445px;
    }

    .ep3-bigMedia img {
        width: 190px;
        height: 190px;
    }

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

    .ss5-card {
        border-right: 1px solid #eceef7;
        border-bottom: 1px solid #eceef7;
    }

    .ss5-grid>.ss5-card:nth-child(3n) {
        border-right: 0;
    }

    .ss5-viewAll {
        align-self: flex-end;
        width: 140px;
    }

    .ss7-col {
        max-width: max-content;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .ss7-mini:nth-child(3n) {
        border-right: 1px solid var(--line);
    }

    .ss7-col .ss7-mini:nth-child(1n) {
        border-bottom: 1px solid var(--line);
    }

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

    .ss5-grid>.ss5-card:nth-child(3n) {
        border-right: 1px solid #eceef7;
    }

    .ss5-grid>.ss5-card:nth-child(2n) {
        border-right: 0;
    }

    .ss9-card:nth-child(3n) {
        border-right: 1px solid var(--line);
    }

    .ss9-card:nth-child(2n) {
        border-bottom: 1px solid var(--line);
    }


    .ep3-cartBtn {
        width: max-content;
        min-width: fit-content;
    }

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

    .ss9-card:nth-child(2n) {
        border-right: 0;
    }

    .ss9-card {
        border-bottom: 1px solid var(--line);
    }

    .ss9-card:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .ss-topbar__right {
        justify-content: flex-end;
    }
}




@media screen and (max-width:900px) and (min-width: 768px) {
    .ss-topbar__inner {
        flex-direction: unset;
        align-items: flex-start;
        gap: 4px;
    }

    .ss-topbar__left,
    .ss-topbar__right {
        width: 100%;
        gap: 4px;
    }

    .ss-topbar__dd {
        gap: 4px;
        font-size: 10px;
    }

    .ss-topbar__left,
    .ss-topbar__right {
        width: 100%;
        gap: 12px;
    }

    .ss-badge {
        min-width: 14px;
        height: 14px;
        padding: 0 2px;
        font-size: 10px;
        top: -5px;
        right: -7px;
    }

    .ss2-cats {
        justify-content: flex-start;
        gap: 6px;
        padding: 0px 0px 10px;
    }

    .ss2-catItem img {
        width: 100px;
        height: auto;
        display: block;
    }

    .ss-topbar__inner {
        align-items: center;
    }

    .ss-topbar__right {
        justify-content: flex-end;
    }

    .ss-topbar__link {
        font-size: 10px;
    }

    .ss-topbar__msg {
        display: none;
    }

    .ss-topbar__pipe {
        display: none;
    }

    .ss-header__inner {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        grid-template-areas:
            "ham brand actions"
            "search search search";
        gap: 12px;
        padding: 12px 0;
    }

    .ss-hamburger {
        display: flex;
        grid-area: ham;
    }

    .ss-brand {
        grid-area: brand;
    }

    .ss-actions {
        grid-area: actions;
        justify-self: end;
    }

    .ss-locBtn {
        display: none;
    }

    .ss-search {
        grid-area: search;
        min-width: 0;
        width: 100%;
    }

    .ss-nav {
        display: none;
    }

    .ss2-fade {
        opacity: 1
    }

    .ss2-cats {
        justify-content: flex-start;
        gap: 18px;
        padding: 8px 6px 10px;
    }

    .ss2-catItem {
        min-width: 132px
    }

    .ss2-promoCard {
        min-height: 460px;
        background-position: center bottom;
    }

    .ss2-promoCard--yellow {
        background-position: center bottom
    }

    .ss2-promoCard--purple {
        background-position: center bottom
    }

    .ss2-promoContent {
        padding: 28px 22px;
        max-width: 100%;
    }

    .ss2-title {
        font-size: 34px
    }

    .ssf-news {
        flex-direction: column;
        gap: 18px;
    }

    .ssf-newsRight {
        min-width: 100%;
        max-width: 100%;
    }

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

@media (max-width: 720px) {
    .ss6-grid {
        grid-template-columns: 1fr;
    }

    .ss6-card {
        height: 180px;
    }

    .ss6-content {
        max-width: 75%;
    }

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

    .ss8-card {
        height: 180px;
    }

    .ss8-content {
        max-width: 70%;
    }
}

@media (max-width: 620px) {
    .ssf-news {
        flex-direction: column;
        gap: 18px;
    }

    .ssf-newsRight {
        min-width: 100%;
        max-width: 100%;
    }

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

    .ss-topbar__inner {
        flex-direction: unset;
        align-items: flex-start;
        gap: 4px;
    }

    .ss-topbar__left,
    .ss-topbar__right {
        width: 100%;
        gap: 4px;
    }

    .ss-topbar__dd {
        gap: 4px;
        font-size: 10px;
    }

    .ss-topbar__left,
    .ss-topbar__right {
        width: 100%;
        gap: 12px;
    }

    .ss-badge {
        min-width: 14px;
        height: 14px;
        padding: 0 2px;
        font-size: 10px;
        top: -5px;
        right: -7px;
    }

    .ss2-cats {
        justify-content: flex-start;
        gap: 6px;
        padding: 0px 0px 10px;
    }

    .ss2-catItem img {
        width: 100px;
        height: auto;
        display: block;
    }

    .ss-topbar__inner {
        align-items: center;
    }

    .ss-topbar__right {
        justify-content: flex-end;
    }

    .ss-topbar__link {
        font-size: 10px;
    }

    .ss-topbar__msg {
        display: none;
    }

    .ss-topbar__pipe {
        display: none;
    }

    .ss-header__inner {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        grid-template-areas:
            "ham brand actions"
            "search search search";
        gap: 12px;
        padding: 12px 0;
    }

    .ss-hamburger {
        display: flex;
        grid-area: ham;
    }

    .ss-brand {
        grid-area: brand;
    }

    .ss-actions {
        grid-area: actions;
        justify-self: end;
    }

    .ss-locBtn {
        display: none;
    }

    .ss-search {
        grid-area: search;
        min-width: 0;
        width: 100%;
    }

    .ss-nav {
        display: none;
    }

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

    .ss4-card {
        height: 160px;
    }

    .ss4-content {
        max-width: 70%;
    }

    .ss7-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ss7-viewAll {
        align-self: flex-end;
    }

    .ss7-col {
        max-width: 860px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .ss7-miniMedia {
        height: 150px;
    }

    .ss7-miniMedia img {
        width: 170px;
        height: 170px;
    }

    .ss7-featureMedia img {
        width: 245px;
        height: auto;
    }

    .ss10-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ss10-item {
        padding: 8px 0;
    }
}



@media (max-width: 576px) {
    .ss-header__inner {
        grid-template-columns: 42px 1fr auto;
        gap: 10px;
    }

    .ep3-smMedia img {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .ss-container {
        width: 100%;
    }

    .ss-header__inner {
        padding: 12px 15px !important;
    }

    .ss-hamburger {
        width: 40px;
        height: 40px;
    }

    .ss-iconBtn {
        width: 38px;
        height: 38px;
    }

    .ss-search {
        height: 40px;
    }

    .ss-search__input {
        height: 40px;
        font-size: 13px;
        padding: 0 12px;
    }

    .ss-search__btn {
        width: 48px;
        height: 40px;
    }

    .ss-brand__text {
        font-size: 20px;
    }

    .ss-actions {
        gap: 8px;
        grid-area: brand;
    }

    .ss-topbar__left,
    .ss-topbar__right {
        gap: 6px;
    }

    .ss2-title {
        font-size: 28px;
        width: 300px;
        line-height: 38px;
    }

    .ss2-desc {
        font-size: 13.5px;
        width: 300px;
    }

    .ss2-promoCard {
        min-height: 420px
    }

    .ss2-promoCard--yellow {
        background-position: right 100% bottom;
    }

    .ss2-section {
        padding: 0px 0 10px;
    }

    .ss2-promoCard--purple {
        background-position: right 100% center;
    }

    .ss2-catItem {
        min-width: 105px;
    }

    .ss2-cats {
        gap: 6px;
    }

    .ep3-head {
        align-items: flex-start;
    }

    .ep3-viewAll {
        align-self: center;
        width: 165px;
        padding: 10px;
    }

    .ep3-smRow {
        grid-template-columns: 1fr;
    }

    .ep3-cartBtn {
        max-width: 100%;
    }

    .ep3-headLeft {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
    }

    .ep3-card {
        border-right: 1px solid #eceef7;
    }

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

    .ep3-card--big {
        min-height: auto;
        width: auto;
    }

    .ep3-bigMedia img {
        width: 165px;
        height: auto;
    }

    .ep3-card {
        padding: 12px;
    }

    .ss4-content {
        max-width: 65%;
        padding: 18px;
    }

    .ss4-title {
        font-size: 18px;
    }

    .ss4-card {
        height: 190px;
    }

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

    .ss5-card {
        border-right: 1px solid #eceef7;
        border-bottom: 0;
    }

    .ss5-headLeft {
        gap: 6px;
    }

    .ss6-card {
        height: 220px;
    }

    .ss6-content {
        max-width: 69%;
        padding: 18px;
    }

    .ss6-title {
        font-size: 19px;
    }

    .ss6-card--left {
        background-position: right 80% center;
    }

    .ss6-card--right {
        background-position: right 80% center;
    }

    .ss8-card {
        height: 210px;
    }

    .ss8-content {
        max-width: 78%;
        padding: 18px;
    }

    .ss8-title {
        font-size: 19px;
    }

    .ss8-card--yellow {
        background-position: right 70% center;
    }

    .ss8-card--pink {
        background-position: right 70% center;
    }

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

    .ss9-card {
        border-bottom: 1px solid var(--line);
    }

    .ss9-card:nth-child(3n) {
        border-right: 1px solid var(--line);
    }

    .ss9-card:nth-child(2n) {
        border-bottom: 1px solid var(--line);
    }

    .ss9-card:last-child {
        border-bottom: 0;
    }

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

    .ssf-form {
        flex-direction: unset;
    }

    .ssf-send {
        width: 100px;
        height: 44px;
    }

    .ssf-appRow {
        grid-template-columns: 1fr;
    }

    .ssf-badge {
        width: 100%;
        max-width: 220px;
    }

    .ssf-badge img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .ssf-appNotes {
        display: none
    }

    .ssf-badge {
        height: 56px;
    }

    .ss7-miniMedia {
        width: 160px;
        height: auto;
    }

    .ss7-miniRow {
        grid-template-columns: 175px 1fr;
    }

    .ss7-feature {
        display: flex;
        flex-direction: column;
    }

    .ss5-viewAll {
        align-self: flex-end;
        width: 265px;
    }
}


@media (max-width: 420px) {
    .ss-brand__text {
        font-size: 18px;
    }

    .ss-badge {
        top: -6px;
        right: -9px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        padding: 0 5px;
    }
}

@media screen and (max-width:390px) and (min-width:300px){
    .ss7-miniMedia img {
        width: 140px;
        height: 150px;
    }

    .ss7-miniRow {
        grid-template-columns: 145px 1fr;
    }

    .ss5-head {
        display: flex;
        flex-direction: column;
    }

    .ep3-smMedia img {
        width: 125px;
        height: 125px;
        object-fit: contain;
    }

    .ss-topbar__inner {
        gap: 0px;
    }

    .ss-topbar__right {
        gap: 4px;
    }

    .ss2-title {
        font-size: 25px;
        width: 300px;
        line-height: 35px;
    }
}