:root {
    --navy: #020b1d;
    --navy2: #06162d;
    --text: #07142c;
    --muted: #657a97;

    --cyan: #08d0ca;
    --blue: #078fd2;
    --green: #11b87b;
    --red: #ee4753;

    --border: #dce7f3;
    --soft: #f5f9fd;

    --gradient:
        linear-gradient(
            100deg,
            #08d2c7,
            #078fd2
        );
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    color: var(--text);

    background: white;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


/* HEADER */

.store-topbar {
    height: 68px;

    padding:
        0
        52px;

    display: grid;

    grid-template-columns:
        310px
        1fr
        310px;

    align-items: center;

    color: white;

    background:
        linear-gradient(
            90deg,
            #01091a,
            #03132b,
            #01091a
        );
}


.store-topbar.compact {
    grid-template-columns:
        1fr
        auto;
}


.brand {
    display: flex;
    align-items: center;

    gap: 9px;
}


.brand img {
    width: 58px;
    height: 30px;
}


.brand span {
    font-size: 20px;

    letter-spacing: .23em;
}


.brand b {
    color: var(--cyan);

    font-weight: inherit;
}


.store-topbar nav {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 42px;
}


.store-topbar nav a {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;

    font-size: 12px;
}


.store-topbar nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 11px;

    height: 2px;

    border-radius: 99px;

    background: var(--cyan);
}


.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 13px;
}


.top-actions > button {
    width: 34px;
    height: 34px;

    border: 0;

    color: white;

    background: transparent;

    font-size: 22px;
}


.cart-link {
    position: relative;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid
        #33475f;

    border-radius: 7px;

    font-size: 18px;
}


.cart-link span {
    position: absolute;

    right: -6px;
    top: -6px;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background: #08bfb9;

    font-size: 8px;
}


.login-link,
.create-link {
    height: 39px;

    padding:
        0
        20px;

    display: flex;
    align-items: center;

    border-radius: 6px;

    font-size: 10px;
}


.login-link {
    border:
        1px solid
        #33475f;
}


.create-link {
    background: var(--gradient);
}


.logged-user {
    display: flex;
    align-items: center;

    gap: 8px;
}


.logged-user > span {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border:
        2px solid
        #0dcfc8;

    border-radius: 50%;

    color: #0fd0ca;

    background: #10263e;
}


.logged-user strong {
    font-size: 10px;
}


.back-store {
    color: #19cfca;

    font-size: 10px;
}


/* FLASH */

.flash-container {
    position: fixed;

    z-index: 80;

    right: 20px;
    top: 82px;

    width: 320px;
}


.flash {
    margin-bottom: 7px;

    padding:
        11px
        13px;

    border-radius: 8px;

    background: #eef8fd;

    color: #2f5875;

    font-size: 10px;

    box-shadow:
        0 8px 25px
        rgba(10,40,70,.12);
}


.flash.success {
    color: #0b855a;

    background: #ebfaf4;
}


.flash.error {
    color: #bb3440;

    background: #fff1f2;
}


.flash.warning {
    color: #866216;

    background: #fff9e9;
}


/* HERO */

.store-hero {
    min-height: 510px;

    padding:
        54px
        max(
            52px,
            calc(
                (100vw - 1600px)
                / 2
                + 52px
            )
        );

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(7,195,204,.10),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fff,
            #f9fdff
        );
}


.eyebrow {
    color: #079fcf;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;
}


.eyebrow.light {
    color: #19d4cf;
}


.hero-copy h1 {
    margin:
        11px
        0
        16px;

    font-size: 62px;
    line-height: .98;

    letter-spacing: -.05em;
}


.hero-copy h1 span,
.catalog-heading h2 span,
.premium-section h2 span {
    color: transparent;

    background: var(--gradient);

    -webkit-background-clip: text;
    background-clip: text;
}


.hero-copy > p {
    max-width: 560px;

    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.6;
}


.hero-actions {
    margin-top: 27px;

    display: flex;

    gap: 11px;
}


.hero-actions a {
    height: 47px;

    padding:
        0
        24px;

    display: flex;
    align-items: center;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 700;
}


.hero-actions .primary {
    color: white;

    background: var(--gradient);
}


.hero-actions .secondary {
    border:
        1px solid
        #a8dbe9;

    color: #087cae;

    background: white;
}


.hero-trust {
    margin-top: 27px;

    display: flex;

    gap: 23px;

    color: #607894;

    font-size: 9px;
}


.hero-visual {
    position: relative;

    height: 390px;
}


.hero-circle {
    position: absolute;

    width: 330px;
    height: 330px;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(13,206,201,.25),
            rgba(9,142,199,.08) 50%,
            transparent 70%
        );
}


.hero-book {
    position: absolute;

    width: 170px;
    height: 235px;

    padding: 23px;

    border-radius: 5px;

    color: white;

    box-shadow:
        0 30px 45px
        rgba(0,20,45,.20);
}


.hero-book > span {
    color: #11d6d0;

    font-size: 8px;

    letter-spacing: .18em;
}


.hero-book > strong {
    display: block;

    margin-top: 38px;

    font-size: 25px;
    line-height: 1.05;
}


.hero-book > small {
    position: absolute;

    left: 23px;
    bottom: 20px;

    color: #12d4ce;

    font-size: 8px;

    letter-spacing: .18em;
}


.book-one {
    left: 31%;
    top: 65px;

    z-index: 2;

    transform:
        rotate(-9deg);

    background:
        linear-gradient(
            145deg,
            #06172c,
            #063d5d
        );
}


.book-two {
    left: 52%;
    top: 40px;

    z-index: 1;

    transform:
        rotate(9deg);

    background:
        linear-gradient(
            145deg,
            #08314a,
            #0aa4aa
        );
}


.hero-cup {
    position: absolute;

    left: 64%;
    bottom: 35px;

    z-index: 4;

    width: 115px;
    height: 100px;

    display: grid;
    place-items: center;

    border-radius:
        8px
        8px
        22px
        22px;

    color: #0cd2cc;

    background: #061221;

    font-size: 67px;

    box-shadow:
        0 20px 35px
        rgba(0,20,45,.18);
}


.hero-note {
    position: absolute;

    left: 5%;
    bottom: 17px;

    width: 210px;

    padding: 14px;

    border:
        1px solid
        #d7e8ee;

    border-radius: 9px;

    background:
        rgba(255,255,255,.90);

    transform:
        rotate(-4deg);
}


.hero-note strong {
    display: block;

    color: #164b69;

    font-family:
        Georgia,
        serif;

    font-style: italic;

    font-size: 14px;
}


.hero-note span {
    display: block;

    margin-top: 5px;

    color: #70849b;

    font-size: 8px;
    line-height: 1.4;
}


/* BENEFITS */

.store-benefits {
    min-height: 92px;

    margin:
        0
        52px;

    padding:
        13px
        18px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background: white;
}


.store-benefits article {
    padding:
        0
        22px;

    display: grid;

    grid-template-columns:
        43px
        1fr;

    align-items: center;

    gap: 11px;

    border-right:
        1px solid
        #e5ecf4;
}


.store-benefits article:last-child {
    border-right: 0;
}


.store-benefits article > span {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #079fc7;

    background: #eefafd;

    font-size: 20px;
}


.store-benefits strong {
    display: block;

    font-size: 10px;
}


.store-benefits small {
    display: block;

    margin-top: 3px;

    color: #71839d;

    font-size: 8px;
    line-height: 1.35;
}


/* CATALOG */

.catalog {
    padding:
        58px
        52px
        65px;
}


.catalog-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 30px;
}


.catalog-heading h2 {
    margin:
        7px
        0
        5px;

    font-size: 38px;

    letter-spacing: -.035em;
}


.catalog-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


.catalog-search {
    display: flex;

    gap: 8px;
}


.catalog-search label {
    width: 260px;
    height: 39px;

    padding:
        0
        11px;

    display: flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;
}


.catalog-search label span {
    color: #6c87a1;
}


.catalog-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 9px;
}


.catalog-search select,
.catalog-search button {
    height: 39px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    color: #36516e;

    background: white;

    font-size: 9px;
}


.catalog-search button {
    border-color: transparent;

    color: white;

    background: var(--gradient);
}


.category-pills {
    margin:
        25px
        0
        20px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.category-pills a {
    padding:
        7px
        15px;

    border:
        1px solid
        #d7e3ef;

    border-radius: 99px;

    color: #49637e;

    background: white;

    font-size: 9px;
}


.category-pills a.active {
    border-color: transparent;

    color: white;

    background: var(--gradient);
}


.product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 17px;
}


.product-card {
    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background: white;

    transition:
        transform .17s ease,
        box-shadow .17s ease;
}


.product-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(10,45,80,.08);
}


.product-image {
    position: relative;

    height: 245px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f3f7fa,
            #eef5f9
        );
}


.product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.conexya-product {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: #0bd1cc;

    background:
        radial-gradient(
            circle,
            #10364c,
            #04111e 70%
        );

    font-size: 100px;
}


.product-store {
    position: absolute;

    left: 11px;
    top: 11px;

    padding:
        5px
        8px;

    border-radius: 99px;

    color: #426179;

    background:
        rgba(255,255,255,.92);

    font-size: 7px;
}


.digital-pill,
.stock-pill {
    position: absolute;

    right: 11px;
    top: 11px;

    padding:
        5px
        8px;

    border-radius: 99px;

    color: white;

    font-size: 7px;
    font-weight: 800;
}


.digital-pill {
    background: #088ecf;
}


.stock-pill {
    background: #f5a11e;
}


.product-body {
    padding:
        15px;
}


.product-category {
    color: #0794c9;

    font-size: 8px;
    font-weight: 700;
}


.product-body h3 {
    min-height: 38px;

    margin:
        5px
        0
        3px;

    font-size: 15px;
    line-height: 1.25;
}


.product-body > p {
    min-height: 31px;

    margin: 0;

    color: #71839c;

    font-size: 9px;
    line-height: 1.45;
}


.price-row {
    margin-top: 12px;

    display: flex;
    align-items: baseline;

    gap: 5px;
}


.price-row strong {
    font-size: 19px;
}


.price-row small {
    color: #7186a1;

    font-size: 7px;
}


.availability {
    margin-top: 7px;

    min-height: 18px;

    font-size: 8px;
}


.available {
    color: #0b9d6a;
}


.unavailable {
    color: #dc4650;
}


.add-cart {
    width: 100%;
    height: 37px;

    margin-top: 8px;

    border:
        1px solid
        #55cbd9;

    border-radius: 7px;

    color: #0786bc;

    background: white;

    font-size: 9px;
    font-weight: 700;
}


.add-cart:hover:not(:disabled) {
    color: white;

    background: var(--gradient);
}


.add-cart:disabled {
    opacity: .45;

    cursor: default;
}


.empty-products {
    padding:
        45px;

    border:
        1px dashed
        #cbd9e6;

    border-radius: 10px;

    text-align: center;

    color: var(--muted);
}


/* PREMIUM */

.premium-section {
    min-height: 345px;

    margin:
        0
        52px
        50px;

    padding:
        38px
        46px;

    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    align-items: center;

    gap: 50px;

    overflow: hidden;

    border-radius: 16px;

    color: white;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(9,205,205,.24),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #06172b,
            #04304a
        );
}


.premium-mark {
    color: #12d7d1;

    font-size: 57px;
    line-height: 1;
}


.premium-section h2 {
    margin:
        8px
        0
        12px;

    font-size: 37px;
    line-height: 1.05;
}


.premium-section > div:first-child > p {
    max-width: 470px;

    color: #afc3d3;

    font-size: 11px;
    line-height: 1.55;
}


.premium-section > div:first-child > a {
    display: inline-flex;

    margin-top: 13px;

    padding:
        11px
        17px;

    border:
        1px solid
        #27869a;

    border-radius: 6px;

    color: #17d8d1;

    font-size: 9px;
}


.premium-cards {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;
}


.premium-cards article {
    min-height: 175px;

    padding: 20px;

    border:
        1px solid
        rgba(53,155,174,.30);

    border-radius: 10px;

    background:
        rgba(2,16,30,.35);
}


.premium-cards article > span {
    color: #12d7d1;

    font-size: 31px;
}


.premium-cards strong {
    display: block;

    margin-top: 22px;

    font-size: 11px;
}


.premium-cards small {
    display: block;

    margin-top: 7px;

    color: #a9bdcc;

    font-size: 8px;
    line-height: 1.45;
}


/* CART / CHECKOUT */

.checkout-body {
    background:
        radial-gradient(
            circle at 50% 15%,
            #effcff,
            #f8fbff 35%,
            white 72%
        );
}


.cart-page,
.checkout-page {
    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        0
        auto;

    padding:
        42px
        0
        65px;
}


.checkout-eyebrow {
    color: #079fce;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .13em;
}


.cart-page > h1,
.checkout-page > h1 {
    margin:
        7px
        0
        22px;

    font-size: 40px;
}


.checkout-intro {
    max-width: 620px;

    margin:
        -12px
        0
        25px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}


.cart-layout,
.checkout-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        340px;

    gap: 24px;
}


.cart-items,
.cart-summary,
.checkout-form-card,
.checkout-summary {
    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background: white;
}


.cart-items {
    padding:
        8px
        18px
        18px;
}


.cart-item {
    min-height: 115px;

    display: grid;

    grid-template-columns:
        80px
        minmax(0,1fr)
        80px
        100px
        30px;

    align-items: center;

    gap: 13px;

    border-bottom:
        1px solid
        #e9eff5;
}


.cart-thumb {
    width: 73px;
    height: 80px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: #eff4f7;
}


.cart-thumb img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.cart-thumb span {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: #0bd0ca;

    background: #051220;

    font-size: 45px;
}


.cart-product small {
    color: #078fc9;

    font-size: 8px;
}


.cart-product strong {
    display: block;

    margin-top: 4px;

    font-size: 13px;
}


.cart-product span {
    display: block;

    margin-top: 4px;

    color: #7588a0;

    font-size: 8px;
}


.qty-control span {
    display: block;

    margin-bottom: 4px;

    color: #73869e;

    font-size: 7px;
}


.qty-control input {
    width: 63px;
    height: 32px;

    padding:
        0
        8px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;
}


.cart-price {
    text-align: right;

    font-size: 12px;
}


.remove-item {
    border: 0;

    color: #db5961;

    background: transparent;

    font-size: 19px;
}


.update-cart {
    margin-top: 17px;

    padding:
        9px
        16px;

    border:
        1px solid
        #8ad6e1;

    border-radius: 6px;

    color: #087da9;

    background: white;

    font-size: 9px;
}


.cart-summary,
.checkout-summary {
    padding: 21px;
}


.cart-summary > strong,
.checkout-summary > strong {
    font-size: 15px;
}


.summary-row {
    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        #e9eff5;

    color: #657b96;

    font-size: 9px;
}


.summary-total,
.checkout-summary-total {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.summary-total strong,
.checkout-summary-total strong {
    font-size: 21px;
}


.checkout-button,
.continue-payment {
    width: 100%;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 7px;

    color: white;

    background: var(--gradient);

    font-size: 10px;
    font-weight: 800;
}


.cart-summary > p {
    margin:
        14px
        0
        0;

    color: #778ba5;

    font-size: 8px;
    line-height: 1.5;
}


.empty-cart {
    max-width: 500px;

    margin:
        60px
        auto;

    padding: 45px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    text-align: center;

    background: white;
}


.empty-cart > span {
    color: #08bfc1;

    font-size: 52px;
}


.empty-cart h2 {
    margin:
        13px
        0
        7px;
}


.empty-cart p {
    color: var(--muted);

    line-height: 1.5;
}


.empty-cart a {
    display: inline-flex;

    margin-top: 15px;

    padding:
        11px
        18px;

    border-radius: 7px;

    color: white;

    background: var(--gradient);
}


/* CHECKOUT FORM */

.checkout-form-card {
    padding: 24px;
}


.checkout-section-title {
    margin:
        4px
        0
        16px;

    display: grid;

    grid-template-columns:
        34px
        1fr;

    align-items: center;

    gap: 9px;
}


.checkout-section-title:not(:first-child) {
    margin-top: 28px;
}


.checkout-section-title > span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background: var(--gradient);

    font-size: 10px;
    font-weight: 800;
}


.checkout-section-title strong {
    display: block;

    font-size: 12px;
}


.checkout-section-title small {
    display: block;

    margin-top: 2px;

    color: #7488a0;

    font-size: 8px;
}


.form-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        12px
        14px;
}


.checkout-field {
    display: block;
}


.checkout-field.full {
    grid-column:
        1 /
        -1;
}


.checkout-field > span {
    display: block;

    margin-bottom: 5px;

    color: #334963;

    font-size: 9px;
    font-weight: 700;
}


.checkout-field input,
.checkout-field select {
    width: 100%;
    height: 40px;

    padding:
        0
        11px;

    border:
        1px solid
        #d7e3ef;

    border-radius: 7px;

    outline: 0;

    background: white;

    color: var(--text);

    font-size: 10px;
}


.checkout-field input:focus,
.checkout-field select:focus {
    border-color: #39cad7;

    box-shadow:
        0 0 0 3px
        rgba(8,205,201,.08);
}


.purchase-confirm {
    margin:
        18px
        0
        11px;

    display: flex;

    gap: 8px;

    color: #5f7591;

    font-size: 9px;
}


.purchase-confirm input {
    accent-color: #0797ca;
}


.checkout-error {
    margin-top: 5px;

    color: #d84853;

    font-size: 8px;
}


.checkout-summary article {
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid
        #e9eff5;
}


.checkout-summary article > div:first-child {
    display: flex;

    gap: 7px;
}


.checkout-summary article > div:first-child > span {
    color: #078dc7;

    font-size: 9px;
}


.checkout-summary article strong {
    display: block;

    font-size: 9px;
}


.checkout-summary article small,
.checkout-summary article > b {
    display: block;

    margin-top: 3px;

    color: #71849d;

    font-size: 8px;
}


.secure-payment {
    margin-top: 15px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        28px
        1fr;

    gap: 8px;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #eefbfa,
            #f3faff
        );
}


.secure-payment > span {
    color: #0aafa9;

    font-size: 19px;
}


.secure-payment strong {
    font-size: 9px;
}


.secure-payment p {
    margin:
        4px
        0
        0;

    color: #71849d;

    font-size: 8px;
    line-height: 1.45;
}


/* PENDING */

.payment-pending {
    width:
        min(
            600px,
            calc(
                100% - 35px
            )
        );

    margin:
        80px
        auto;

    padding: 40px;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background: white;

    text-align: center;

    box-shadow:
        0 20px 55px
        rgba(10,45,80,.08);
}


.payment-mark {
    color: #08c9c4;

    font-size: 69px;
}


.payment-pending h1 {
    margin:
        10px
        0;
}


.payment-pending > p {
    color: var(--muted);

    line-height: 1.55;
}


.pending-total {
    margin:
        24px
        0;

    padding:
        14px;

    display: flex;
    justify-content: space-between;

    border-radius: 8px;

    background: #f5f9fd;
}


.pending-total strong {
    font-size: 20px;
}


.pending-orders article {
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        #e8eef5;

    text-align: left;
}


.pending-orders article > div:last-child {
    text-align: right;
}


.pending-orders strong {
    display: block;

    font-size: 10px;
}


.pending-orders span {
    display: block;

    margin-top: 3px;

    color: #7589a0;

    font-size: 8px;
}


.payment-security {
    margin-top: 20px;

    padding: 11px;

    border-radius: 7px;

    color: #0a8165;

    background: #ecfaf5;

    font-size: 9px;
}


.pending-back {
    display: inline-flex;

    margin-top: 20px;

    padding:
        11px
        17px;

    border-radius: 7px;

    color: white;

    background: var(--gradient);

    font-size: 9px;
}


/* MOBILE CART */

.mobile-cart {
    display: none;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .store-topbar {
        padding:
            0
            25px;
    }

    .store-hero,
    .catalog {
        padding-left: 30px;
        padding-right: 30px;
    }

    .store-benefits,
    .premium-section {
        margin-left: 30px;
        margin-right: 30px;
    }

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

}


@media (max-width: 980px) {

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

    .store-topbar nav {
        display: none;
    }

    .store-hero {
        grid-template-columns: 1fr;

        padding-top: 40px;
    }

    .hero-visual {
        margin-top: 25px;
    }

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

    .store-benefits article:nth-child(2) {
        border-right: 0;
    }

    .catalog-heading {
        display: block;
    }

    .catalog-search {
        margin-top: 18px;
    }

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

    .premium-section {
        grid-template-columns: 1fr;
    }

    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .store-topbar {
        height: 62px;

        padding:
            0
            13px;
    }

    .brand img {
        width: 45px;
    }

    .brand span {
        font-size: 14px;
    }

    .top-actions > button,
    .login-link {
        display: none;
    }

    .create-link {
        padding:
            0
            11px;
    }

    .store-hero {
        min-height: auto;

        padding:
            35px
            15px;
    }

    .hero-copy h1 {
        font-size: 43px;
    }

    .hero-trust {
        flex-direction: column;

        gap: 7px;
    }

    .hero-visual {
        height: 320px;

        transform: scale(.86);
    }

    .store-benefits {
        margin:
            0
            15px;

        grid-template-columns: 1fr;
    }

    .store-benefits article {
        min-height: 70px;

        border-right: 0;

        border-bottom:
            1px solid
            #e5ecf4;
    }

    .catalog {
        padding:
            45px
            15px;
    }

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

    .catalog-search label {
        width: 100%;
    }

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

    .premium-section {
        margin:
            0
            15px
            70px;

        padding:
            28px
            22px;
    }

    .premium-cards {
        grid-template-columns: 1fr;
    }

    .mobile-cart {
        position: fixed;

        z-index: 60;

        left: 15px;
        right: 15px;
        bottom: 13px;

        display: block;
    }

    .mobile-cart a {
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 9px;

        border-radius: 9px;

        color: white;

        background: var(--gradient);

        box-shadow:
            0 10px 25px
            rgba(0,90,140,.22);
    }

    .mobile-cart strong {
        width: 20px;
        height: 20px;

        display: grid;
        place-items: center;

        border-radius: 50%;

        background: white;

        color: #0789bd;

        font-size: 8px;
    }

    .cart-page,
    .checkout-page {
        width:
            calc(
                100% - 25px
            );

        padding-top: 30px;
    }

    .cart-item {
        grid-template-columns:
            65px
            1fr
            60px;

        padding:
            12px
            0;
    }

    .cart-thumb {
        width: 60px;
        height: 65px;
    }

    .qty-control {
        grid-column: 2;
    }

    .cart-price {
        grid-column: 3;
        grid-row: 1;
    }

    .remove-item {
        grid-column: 3;
        grid-row: 2;
    }

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

    .checkout-field.full {
        grid-column: auto;
    }

}