/* =========================================================
   BRANDO RESPONSIVE
   All responsive rules live in this file only.
========================================================= */


/* =========================================================
   LARGE TABLET
   <= 1100px
========================================================= */

@media (max-width: 1100px) {

    /* =========================
       HEADER
    ========================== */

    .brando-header-inner {
        column-gap: 20px;
    }

    .brando-nav {
        gap: 16px;
    }

    .brando-nav a {
        font-size: 13px;
    }


    /* =========================
       HOME
    ========================== */

    .home-categories-grid,
    .home-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .brando-new-arrival-card {
        flex: 0 0 calc((100% - 36px) / 3);
    }


    /* =========================
       SHOP
    ========================== */

    .shop-layout {
        grid-template-columns:
            190px
            minmax(0, 1fr);

        gap: 16px;
    }

    .shop-products-area ul.products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* =========================
       PRODUCT
    ========================== */

    .brando-product-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 24px;
    }

    .brando-product-title {
        font-size: 27px;
    }


    /* =========================
       RELATED PRODUCTS
    ========================== */

    .brando-related-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* =========================
       CART
    ========================== */

    .woocommerce-cart-form {
        width: 63%;
    }

    .woocommerce-cart .cart-collaterals {
        width: 34%;
    }


    /* =========================
       CHECKOUT
    ========================== */

    .woocommerce-checkout form.checkout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .85fr);

        gap: 18px;
    }


    /* =========================
       ACCOUNT
    ========================== */

    .brando-account-content .woocommerce {
        grid-template-columns:
            minmax(0, 1fr)
            210px !important;

        gap: 18px;
    }


    /* =========================
       ABOUT
    ========================== */

    .about-story-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .8fr);

        gap: 28px;
    }

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


    /* =========================
       CONTACT
    ========================== */

    .contact-layout {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);

        gap: 20px;
    }


    /* =========================
       SPECIAL PAGES
    ========================== */

    .brando-simple-page ul.products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}

 .newsletter-inner {
    margin: 20px;
    border-radius: 10px;
 }



/* =========================================================
   TABLET
   <= 900px
========================================================= */

@media (max-width: 900px) {

    /* =========================
       HEADER
    ========================== */

    .brando-nav {
        gap: 12px;
    }

    .brando-nav a {
        font-size: 12px;
    }

    .brando-logo {
        min-width: 150px;
    }

    .brando-logo-main {
        font-size: 29px;
    }


    /* =========================
       SPRING OFFER
    ========================== */

    .brando-offer-banner {
        grid-template-columns:
            26%
            34%
            40%;
    }

    .brando-offer-features {
        padding-left: 12px;
        padding-right: 10px;
    }


    /* =========================
       SHOP
    ========================== */

    .brando-shop-hero-image {
        width: 60%;
    }

    .brando-shop-hero-content {
        width: 58%;

        padding-right: 4vw;
    }

    .shop-layout {
        display: block;
    }

    .shop-sidebar {
        margin-bottom: 20px;
    }

    .shop-category-list {
        display: grid;

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

        gap: 8px;
    }

    .shop-category-link {
        padding: 8px 10px;

        background: #fafafa;

        border: 1px solid #eee;
        border-radius: 6px;
    }

    .shop-products-area ul.products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* =========================
       PRODUCT
    ========================== */

    .brando-product-layout {
        gap: 18px;
    }

    .brando-product-info {
        padding: 22px;
    }


    /* =========================
       CART
    ========================== */

    .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals {
        width: 100%;

        float: none;
    }

    .woocommerce-cart .cart-collaterals {
        margin-top: 20px;
    }


    /* =========================
       CHECKOUT
    ========================== */

    .woocommerce-checkout form.checkout {
        display: block;
    }

    .woocommerce-checkout #customer_details {
        margin-bottom: 20px;
    }

    .woocommerce-checkout #order_review_heading {
        margin: 0 !important;

        padding: 20px 22px 10px;

        border: 1px solid #e7e7e7;
        border-bottom: 0;

        border-radius: 12px 12px 0 0;
    }

    .woocommerce-checkout #order_review {
        margin: 0 !important;

        border-top: 0;

        border-radius: 0 0 12px 12px;
    }


    /* =========================
       ACCOUNT
    ========================== */

    .brando-account-content .woocommerce {
        display: block !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation {
        margin-bottom: 18px;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation ul {
        display: grid;

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

        gap: 5px;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation li a {
        min-height: 42px;

        padding: 0 8px;

        justify-content: center;

        text-align: center;

        font-size: 10px;
    }

    body.woocommerce-account:not(.logged-in)
    #customer_login {
        grid-template-columns: 1fr !important;
    }


    /* =========================
       ABOUT
    ========================== */

    .about-hero-content {
        width: 70%;
    }


    /* =========================
       CONTACT
    ========================== */

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


    /* =========================
       FOOTER FEATURES
    ========================== */

    .brando-features-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* =========================
       NEWSLETTER
    ========================== */

    .newsletter-inner {
        flex-direction: column;
        align-items: stretch;
      
        gap: 18px;
    }

    .newsletter-copy {
        justify-content: center;

        text-align: center;
    }

    .newsletter-form {
        width: 100%;
    }


    /* =========================
       FOOTER
    ========================== */

    .footer-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 28px;
    }

}

.shop-sidebar {
    position: static !important;

    max-height: none !important;

    overflow: visible !important;
}



/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

@media (max-width: 782px) {

    body.admin-bar .brando-site-header {
        top: 46px;
    }

}



/* =========================================================
   MOBILE
   <= 768px
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       GLOBAL
    ====================================================== */

    .brando-container {
        width: 92%;
    }


    /* =====================================================
   MOBILE HEADER
===================================================== */

.brando-topbar {
    width: 100%;
    height: 28px;
    min-height: 28px;

    padding: 0 8px;

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

    font-size: 9px;
    text-align: center;

    overflow: hidden;
}

.brando-topbar-inner {
    width: 100%;

    justify-content: center;

    white-space: nowrap;
}

.topbar-separator,
.brando-topbar-inner > span:last-child {
    display: none;
}


/* BLACK HEADER */

.brando-header {
    width: 100%;
    height: 64px;
}


/* IMPORTANT:
   hamburger = right
   logo = exact center
   icons = left
*/

.brando-header-inner {
    width: 92%;
    height: 64px;
    min-height: 64px;

    position: relative;

    margin: 0 auto;

    display: block !important;

    direction: ltr;
}


/* HAMBURGER - RIGHT */

.brando-mobile-menu-toggle {
    width: 34px;
    height: 34px;

    position: absolute;

    top: 50%;
    right: 0;

    z-index: 5;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 6px;

    transform: translateY(-50%);
}

.brando-mobile-menu-toggle span {
    width: 22px;
    height: 2px;

    margin: 3px 0;
}


/* LOGO - EXACT CENTER */

.brando-logo {
    min-width: 0;

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 4;

    margin: 0;

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

    text-align: center;
}

.brando-logo-main {
    font-size: 24px;

    white-space: nowrap;
}

.brando-logo-icon {
    font-size: 26px;
}

.brando-logo-tagline {
    margin-top: 4px;

    font-size: 7px;

    white-space: nowrap;
}


/* ICONS - LEFT */

.brando-actions {
    position: absolute;

    top: 50%;
    left: 0;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 10px;

    transform: translateY(-50%);

    direction: ltr;
}

.header-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;
}

.header-icon svg {
    width: 20px;
    height: 20px;
}


/* COUNTERS */

.cart-count,
.header-wishlist-count {
    min-width: 15px;
    height: 15px;

    top: -7px;
    right: -7px;

    padding: 0 3px;

    font-size: 8px;
}


/* DESKTOP NAV HIDDEN */

.brando-nav {
    display: none !important;
}


    /* =====================================================
       SEARCH OVERLAY
    ====================================================== */

    .brando-search-overlay {
        padding: 95px 15px 20px;
    }

    .brando-search-overlay-inner {
        width: 100%;

        padding: 20px;
    }


    /* =====================================================
       HOME HERO
    ====================================================== */

    .home-hero {
        height: 430px;

        background: #050505;
    }

    .home-hero-media {
        width: 100%;
        height: 58%;

        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
    }

    .home-hero-slide {
        background-position: center;
    }

    .home-hero::after {
        background:
            linear-gradient(
                to bottom,
                rgba(5,5,5,.05) 0%,
                rgba(5,5,5,.18) 32%,
                rgba(5,5,5,.58) 52%,
                #050505 72%,
                #050505 100%
            );
    }

    .home-hero-layout {
        height: 365px;

        align-items: flex-end;
    }

    .home-hero-content {
        width: 100%;

        margin: 0;

        padding: 0 18px 72px;

        text-align: center;
    }

    .home-hero-title {
        font-size: 32px;
    }

    .home-hero-text {
        max-width: 100%;

        margin-right: auto;
        margin-left: auto;

        font-size: 12px;
    }

    .home-primary-button {
        margin: 0 auto;
    }

    .hero-slider-dots {
        left: 50%;
        bottom: 62px;

        transform: translateX(-50%);
    }

    .home-hero-benefits {
        width: 100%;
        height: 55px;

        padding: 0 12px;
    }

    .hero-benefit-item {
        gap: 4px;

        font-size: 8px;
    }

    .hero-benefit-icon {
        font-size: 15px;
    }

    .hero-benefit-divider {
        height: 20px;
    }


    /* =====================================================
       HOME SECTION HEADINGS
    ====================================================== */

    .home-section {
        padding: 32px 0;
    }

    .home-section-heading {
        margin-bottom: 18px;

        gap: 10px;
    }

    .home-section-title,
    .brando-new-arrivals-head h2 {
        font-size: 20px;
    }

    .home-section-link,
    .brando-new-arrivals-viewall {
        font-size: 10px;
    }


    /* =====================================================
       HOME CATEGORIES
    ====================================================== */

    .home-categories-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .home-category-card {
        padding: 8px 8px 12px;
    }

    .home-category-card h3 {
        font-size: 12px;
    }


    /* =====================================================
       HOME PRODUCTS
    ====================================================== */

    .home-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .home-product-image {
        height: 130px;
    }


    /* =====================================================
       SPRING OFFER
    ====================================================== */

    .home-spring-offer {
        padding: 12px 0 18px;
    }

    .brando-offer-banner {
        height: auto;
        min-height: 0;

        display: grid;

        grid-template-columns: 1fr;

        border-radius: 8px;

        direction: rtl;
    }

    .brando-offer-content {
        min-height: 125px;

        order: 1;

        padding: 16px;

        background: #050505;
    }

    .offer-label {
        font-size: 11px;
    }

    .brando-offer-content h2 {
        font-size: 19px;
    }

    .brando-offer-content h2 strong {
        font-size: 24px;
    }

    .brando-offer-content p {
        white-space: normal;

        font-size: 9px;
    }

    .brando-offer-image {
        height: 150px;

        order: 2;
    }

    .brando-offer-image::before {
        background:
            linear-gradient(
                to bottom,
                #050505 0%,
                rgba(5,5,5,.45) 16%,
                rgba(5,5,5,0) 45%
            );
    }

    .brando-offer-features {
        order: 3;

        padding: 12px;

        display: grid;

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

        gap: 6px;

        background: var(--brando-orange);
    }

    .offer-feature-item {
        justify-content: center;

        gap: 5px;
    }

    .offer-feature-icon {
        width: 16px;
        height: 16px;

        flex: 0 0 16px;

        font-size: 11px;
    }

    .offer-feature-item strong {
        font-size: 9px;
    }

    .offer-feature-item small {
        font-size: 7px;
    }


    /* =====================================================
       NEW ARRIVALS
    ====================================================== */

    .brando-new-arrivals-section {
        padding: 20px 0 28px;
    }

    .brando-new-arrivals-grid {
        gap: 12px;
    }

    .brando-new-arrival-card {
        flex:
            0 0
            calc((100% - 12px) / 2);
    }

    .brando-arrivals-arrow {
        display: none;
    }

    .brando-new-arrival-image {
        height: 135px;
    }

    .brando-new-arrival-title {
        min-height: 38px;

        font-size: 12px;
    }

    .brando-new-arrival-price {
        font-size: 14px;
    }


    /* =====================================================
       SHOP HERO
    ====================================================== */

    .brando-shop-hero {
        height: 350px;
        min-height: 350px;
    }

    .brando-shop-hero-inner {
        height: 100%;
        min-height: 350px;
    }

    .brando-shop-hero-image {
        width: 100%;
        height: 60%;

        top: 0;
        left: 0;
    }

    .brando-shop-hero-image::before {
        background:
            linear-gradient(
                to bottom,
                rgba(8,8,8,0) 0%,
                rgba(8,8,8,.08) 45%,
                rgba(8,8,8,.62) 75%,
                #080808 100%
            );
    }

    .brando-shop-hero-content {
        width: 100%;
        height: 100%;

        margin: 0;

        padding:
            195px
            20px
            25px;

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

        text-align: center;
    }

    .brando-shop-hero-label {
        font-size: 10px;
    }

    .brando-shop-hero-content h1 {
        margin-bottom: 8px;

        font-size: 30px;
    }

    .brando-shop-hero-content p {
        max-width: 500px;

        margin: 0 auto;

        font-size: 10px;
    }


    /* =====================================================
       SHOP
    ====================================================== */

    .shop-content-section {
        padding: 22px 0 35px;
    }

    .shop-topbar {
        padding: 12px;

        flex-direction: column;
        align-items: stretch;

        gap: 12px;
    }

    .shop-heading {
        justify-content: space-between;
    }

    .shop-heading h2 {
        font-size: 18px;
    }

    .shop-sort,
    .shop-sort .woocommerce-ordering {
        width: 100%;
    }

    .shop-sort select {
        width: 100%;
    }

    .shop-category-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .shop-products-area ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .shop-products-area
    ul.products
    li.product
    a img {
        height: 145px;
    }


    /* =====================================================
       PRODUCT DETAILS
    ====================================================== */

    .brando-single-product {
        padding: 22px 0 38px;
    }

    .brando-product-layout {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .brando-product-gallery,
    .brando-product-info {
        padding: 14px;
    }

    .brando-product-gallery
    .woocommerce-product-gallery__image img {
        max-height: 400px;
    }

    .brando-product-title {
        font-size: 25px;
    }

    .brando-product-price .price {
        font-size: 22px !important;
    }

    .brando-product-benefits {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 5px;
    }


    /* =====================================================
       RELATED PRODUCTS
    ====================================================== */

    .brando-related-products {
        padding: 35px 0 45px;
    }

    .brando-related-heading {
        align-items: center;
    }

    .brando-related-heading h2 {
        font-size: 22px;
    }

    .brando-related-heading span {
        font-size: 10px;
    }

    .brando-related-view-all {
        font-size: 10px;
    }

    .brando-related-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .brando-related-card {
        padding: 8px;
    }

    .brando-related-image {
        height: 155px;
    }

    .brando-related-title {
        min-height: 38px;

        font-size: 12px;
    }

    .brando-related-price {
        font-size: 13px;
    }

    .brando-related-card
    .shop-product-wishlist {
        width: 32px;
        height: 32px;

        top: 14px;
        right: 14px;

        font-size: 18px;
    }


    /* =====================================================
       CART
    ====================================================== */

    .woocommerce-cart .woocommerce {
        width: 92%;

        padding: 25px 0 40px;
    }

    .woocommerce-cart-form {
        padding: 10px;
    }

    .woocommerce-cart table.shop_table {
        display: block;
    }

    .woocommerce-cart table.shop_table tbody,
    .woocommerce-cart table.shop_table tr,
    .woocommerce-cart table.shop_table td {
        width: 100%;

        display: block;
    }

    .woocommerce-cart table.shop_table thead {
        display: none;
    }

    .woocommerce-cart
    table.shop_table
    tr.cart_item {
        position: relative;

        margin-bottom: 14px;
        padding: 12px;

        background: #fafafa;

        border: 1px solid #eee;
        border-radius: 8px;
    }

    .woocommerce-cart
    table.shop_table td {
        padding: 7px 5px !important;

        border: 0 !important;

        text-align: right !important;
    }

    .woocommerce-cart .product-thumbnail {
        width: 100%;
    }

    .woocommerce-cart
    .product-thumbnail img {
        width: 90px !important;
        height: 90px !important;
    }

    .woocommerce-cart .product-remove {
        position: absolute;

        top: 8px;
        left: 8px;
    }

    .woocommerce-cart td.actions {
        padding-top: 15px !important;
    }

    .woocommerce-cart .coupon {
        flex-direction: column;
    }

    .woocommerce-cart
    .coupon
    .input-text {
        width: 100% !important;
    }

    .woocommerce-cart
    .coupon button,
    .woocommerce-cart
    td.actions > button {
        width: 100%;
    }

    .woocommerce-cart .cart_totals {
        padding: 16px;
    }


    /* =====================================================
       CHECKOUT
    ====================================================== */

    .brando-checkout-page {
        padding: 25px 0 40px;
    }

    .brando-checkout-heading h1 {
        font-size: 26px;
    }

    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        padding: 16px;
    }

    .woocommerce-checkout
    #order_review_heading {
        padding-right: 16px;
        padding-left: 16px;
    }

    .woocommerce-checkout
    .form-row-first,
    .woocommerce-checkout
    .form-row-last {
        width: 100% !important;

        float: none !important;
    }

    .thankyou-order-info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .thankyou-order-info > div:nth-child(2) {
        border-left: 0;
    }

    .thankyou-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .thankyou-primary-button,
    .thankyou-secondary-button {
        width: 100%;
    }


    /* =====================================================
       ACCOUNT
    ====================================================== */

    .brando-account-page {
        padding: 25px 0 40px;
    }

    .brando-account-heading h1 {
        font-size: 26px;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation ul {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .woocommerce-account
    .woocommerce-MyAccount-content {
        min-height: 0;

        padding: 17px;
    }

    .brando-account-quick-links {
        grid-template-columns: 1fr;
    }

    .woocommerce-account
    .woocommerce-Addresses {
        display: grid;

        grid-template-columns: 1fr;
    }

    .brando-order-meta {
        grid-template-columns: 1fr;
    }

    .brando-order-meta > div {
        min-height: 65px;

        border-left: 0;
        border-bottom: 1px solid #eee;
    }

    .brando-order-meta > div:last-child {
        border-bottom: 0;
    }

    .brando-order-product {
        grid-template-columns:
            65px
            minmax(0, 1fr);
    }

    .brando-order-product-total {
        grid-column: 1 / -1;

        padding-right: 79px;
    }

    .brando-order-summary {
        width: 100%;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about-hero {
        min-height: 230px;
    }

    .about-hero-content {
        width: 100%;

        padding: 0 10px;

        text-align: center;
    }

    .about-hero-content h1 {
        font-size: 31px;
    }

    .about-story {
        padding: 35px 0;
    }

    .about-story-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .about-story-content {
        text-align: center;
    }

    .about-story-content h2 {
        margin-right: auto;
        margin-left: auto;

        font-size: 25px;
    }

    .about-orange-box {
        min-height: 190px;
    }

    .about-values {
        padding: 35px 0 45px;
    }

    .about-values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact-hero {
        min-height: 220px;
    }

    .contact-hero-content {
        width: 100%;

        padding: 0 10px;

        text-align: center;
    }

    .contact-hero-content h1 {
        font-size: 31px;
    }

    .contact-main {
        padding: 35px 0 45px;
    }

    .contact-info,
    .contact-form-card {
        padding: 18px;
    }

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

    .contact-submit-button {
        width: 100%;
    }


    /* =====================================================
       SEARCH
    ====================================================== */

    .brando-search-page {
        padding: 28px 0 45px;
    }

    .brando-search-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .brando-search-image {
        height: 150px;
    }

    .brando-search-heading h1 {
        font-size: 23px;
    }


    /* =====================================================
       SPECIAL PAGES
    ====================================================== */

    .brando-simple-page {
        padding: 28px 0 45px;
    }

    .brando-page-heading {
        margin-bottom: 20px;
    }

    .brando-page-heading h1 {
        font-size: 25px;
    }

    .brando-page-heading span {
        font-size: 11px;
    }

    .brando-simple-page ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .brando-simple-page
    ul.products
    li.product,
    .brando-simple-page
    ul.products
    li.product-category {
        padding: 8px !important;
    }

    .brando-simple-page
    ul.products
    li.product img,
    .brando-simple-page
    ul.products
    li.product-category img {
        height: 150px !important;
    }

    .brando-simple-page
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height: 38px;

        font-size: 12px !important;
    }

    .brando-simple-page
    ul.products
    li.product-category
    .woocommerce-loop-category__title {
        font-size: 13px !important;
    }

    .brando-simple-page
    ul.products
    li.product
    .price {
        font-size: 13px !important;
    }

    .brando-simple-page
    ul.products
    li.product
    .button {
        min-height: 36px;

        font-size: 10px !important;
    }


    /* =====================================================
       FOOTER FEATURES
    ====================================================== */

    .brando-features {
        padding: 20px 0;
    }

    .brando-features-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .brando-feature {
        min-height: 80px;

        padding: 14px 10px;
    }

    .brando-feature:nth-child(2n) {
        border-left: 0;
    }

    .feature-icon {
        font-size: 22px;
    }

    .brando-feature strong {
        font-size: 12px;
    }

    .brando-feature small {
        font-size: 9px;
    }


    /* =====================================================
       NEWSLETTER
    ====================================================== */

    .brando-newsletter {
        padding: 8px 0 20px;
    }

    .newsletter-inner {
        min-height: 0;

        padding: 16px;

        flex-direction: column;
        align-items: stretch;

        gap: 14px;

        border-radius: 10px;
    }

    .newsletter-copy {
        justify-content: center;

        text-align: center;
    }

    .newsletter-icon {
        font-size: 28px;
    }

    .newsletter-copy strong {
        font-size: 13px;
    }

    .newsletter-copy small {
        font-size: 9px;
    }

    .newsletter-form {
        width: 100%;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-grid {
        padding-top: 28px;
        padding-bottom: 25px;

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

        gap: 28px 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-logo {
        font-size: 27px;
    }

    .footer-logo span {
        font-size: 29px;
    }

    .footer-contact {
        margin-top: 18px;
    }

    .footer-column h3,
    .footer-social h3 {
        margin-bottom: 12px;

        font-size: 13px;
    }

    .footer-column a,
    .footer-contact li {
        font-size: 11px;
    }

    .footer-bottom {
        padding: 14px;

        font-size: 10px;
    }

}



/* =========================================================
   SMALL MOBILE
   <= 600px
========================================================= */

@media (max-width: 600px) {

    /* =========================
       FOOTER FEATURES
    ========================== */

    .brando-features-grid {
        grid-template-columns: 1fr;
    }

    .brando-feature {
        border-left: 0;

        border-bottom:
            1px solid var(--brando-border);
    }

    .brando-feature:last-child {
        border-bottom: 0;
    }


    /* =========================
       NEWSLETTER
    ========================== */

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }

    .newsletter-form button {
        min-width: 0;
    }


    /* =========================
       FOOTER
    ========================== */

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

        text-align: center;
    }

    .footer-brand {
        grid-column: auto;

        text-align: center;
    }

    .footer-logo,
    .social-icons,
    .payment-methods {
        justify-content: center;
    }

}



/* =========================================================
   EXTRA SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

    /* =====================================================
       GLOBAL
    ====================================================== */

    .brando-container {
        width: 92%;
    }


    /* =====================================================
       HEADER
    ====================================================== */

    .brando-header-inner {
    width: 94%;

    height: 60px;
    min-height: 60px;
}

.brando-header {
    height: 60px;
}

.brando-mobile-menu-toggle {
    width: 31px;
    height: 31px;
}

.brando-mobile-menu-toggle span {
    width: 20px;
}

.brando-logo-main {
    font-size: 21px;
}

.brando-logo-icon {
    font-size: 23px;
}

.brando-logo-icon-img {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
}

.brando-logo-tagline {
    font-size: 6px;
}

.brando-actions {
    gap: 7px;
}

.header-icon {
    width: 18px;
    height: 18px;

    flex-basis: 18px;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}


    /* =====================================================
       SEARCH OVERLAY
    ====================================================== */

    .brando-header-search-form {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .brando-header-search-form
    button[type="submit"] {
        width: 100%;
    }


    /* =====================================================
       HOME HERO
    ====================================================== */

    .home-hero-title {
        font-size: 28px;
    }

    .home-hero-text {
        font-size: 11px;
    }

    .hero-benefit-item {
        font-size: 7px;
    }


    /* =====================================================
       HOME CATEGORIES
    ====================================================== */

    .home-category-image {
        height: 120px;

        aspect-ratio: auto;
    }

    .home-category-card h3 {
        font-size: 11px;
    }


    /* =====================================================
       HOME PRODUCTS
    ====================================================== */

    .home-product-image {
        height: 115px;
    }

    .home-product-title {
        font-size: 11px;
    }

    .home-product-price {
        font-size: 12px;
    }


    /* =====================================================
       SPRING OFFER
    ====================================================== */

    .brando-offer-content {
        min-height: 120px;

        padding: 14px 10px;
    }

    .brando-offer-content h2 {
        font-size: 17px;
    }

    .brando-offer-content h2 strong {
        font-size: 22px;
    }

    .brando-offer-image {
        height: 135px;
    }

    .brando-offer-features {
        padding: 10px 6px;
    }

    .offer-feature-item {
        gap: 3px;
    }

    .offer-feature-item strong {
        font-size: 8px;
    }

    .offer-feature-item small {
        font-size: 6px;
    }


    /* =====================================================
       SHOP
    ====================================================== */

    .brando-shop-hero {
        height: 330px;
        min-height: 330px;
    }

    .brando-shop-hero-inner {
        min-height: 330px;
    }

    .brando-shop-hero-content {
        padding:
            180px
            15px
            20px;
    }

    .brando-shop-hero-content h1 {
        font-size: 26px;
    }

    .shop-category-list {
        grid-template-columns: 1fr;
    }

    .shop-products-area
    ul.products
    li.product {
        padding: 8px !important;
    }

    .shop-products-area
    ul.products
    li.product
    a img {
        height: 120px;
    }


    /* =====================================================
       PRODUCT
    ====================================================== */

    .brando-product-title {
        font-size: 22px;
    }

    .brando-product-buy form.cart {
        flex-wrap: wrap;
    }

    .brando-product-buy .quantity,
    .brando-product-buy .qty,
    .brando-product-buy
    .single_add_to_cart_button {
        width: 100%;
    }

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


    /* =====================================================
       RELATED PRODUCTS
    ====================================================== */

    .brando-related-heading {
        margin-bottom: 18px;
    }

    .brando-related-heading h2 {
        font-size: 19px;
    }

    .brando-related-image {
        height: 125px;
    }

    .brando-related-title {
        font-size: 11px;
    }

    .brando-related-button {
        min-height: 36px;

        font-size: 10px;
    }


    /* =====================================================
       CHECKOUT / THANK YOU
    ====================================================== */

    .thankyou-order-info {
        grid-template-columns: 1fr;
    }

    .thankyou-order-info > div {
        border-left: 0;
        border-bottom: 1px solid #eee;
    }

    .thankyou-order-info > div:last-child {
        border-bottom: 0;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about-values-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       SEARCH
    ====================================================== */

    .brando-search-products {
        grid-template-columns: 1fr;
    }

    .brando-search-image {
        height: 220px;
    }


    /* =====================================================
       SPECIAL PAGES
    ====================================================== */

    .brando-simple-page ul.products {
        gap: 8px !important;
    }

    .brando-simple-page
    ul.products
    li.product img,
    .brando-simple-page
    ul.products
    li.product-category img {
        height: 125px !important;
    }

    .brando-page-heading h1 {
        font-size: 22px;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-grid {
        gap: 24px;
    }

    .footer-contact {
        margin-top: 15px;
    }

    .footer-contact li {
        margin-bottom: 8px;
    }

}

/* =========================================================
   FINAL MOBILE HEADER FIX
========================================================= */

@media (max-width: 768px) {

    .brando-header {
        height: 66px !important;
    }

    .brando-header-inner {
        width: 94% !important;
        height: 66px !important;
        min-height: 66px !important;

        position: relative !important;

        display: block !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Hamburger = right */
    .brando-mobile-menu-toggle {
        width: 34px !important;
        height: 34px !important;

        position: absolute !important;

        top: 50% !important;
        right: 0 !important;
        left: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }

    .brando-mobile-menu-toggle span {
        width: 22px !important;
        height: 2px !important;

        margin: 3px 0 !important;
    }


    /* Logo = exact center */
    .brando-logo {
        width: auto !important;
        min-width: 0 !important;

        position: absolute !important;

        top: 50% !important;
        left: 50% !important;
        right: auto !important;

        margin: 0 !important;

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

        z-index: 4 !important;
    }

    .brando-logo-main {
        font-size: 23px !important;
    }

    .brando-logo-icon {
        font-size: 25px !important;
    }

    .brando-logo-icon-img {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }

    .brando-logo-tagline {
        margin-top: 4px !important;

        font-size: 7px !important;
    }


    /* Icons = left */
    .brando-actions {
        position: absolute !important;

        top: 50% !important;
        left: 0 !important;
        right: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 9px !important;

        margin: 0 !important;

        transform:
            translateY(-50%) !important;

        direction: ltr !important;
    }

    .header-icon {
        width: 20px !important;
        height: 20px !important;

        flex: 0 0 20px !important;
    }

    .header-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .brando-nav {
        display: none !important;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-hero-slide,
    .home-hero-title,
    .home-hero-text,
    .home-primary-button {
        animation: none !important;
        transition: none !important;
    }

    .home-hero-slide {
        transition: none !important;
    }

    .home-hero-slide.is-active {
        transform: none !important;
        opacity: 1 !important;
    }

    .home-hero-title,
    .home-hero-text,
    .home-primary-button {
        opacity: 1 !important;
        transform: none !important;
    }
}