/* mobile */
@media (max-width: 767px) {

    :root { 
        --section-pd: 30px 0;
    }

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

    .nav-act-btns {
        padding-right: 10px;
    }

    .search-sidebar {
        width: 100%;
        max-width: 100vw;
    }

    /* sec-head */
    .sec-head-sm-center {
        align-items: center;
    }

    .sec-head-sm-center .eye-brow {
        text-align: center;
    }

    .sec-head-sm-center h2, .sec-head-sm-center h3, .sec-head-sm-center h4, .sec-head-sm-center h5, .sec-head-sm-center h6 {
        text-align: center;
    }

    .sec-head-sm-center .underline::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .breadcrumb {
        gap: 10px;
    }

    .breadcrumb a {
        font-size: 10px;
        gap: 5px;
    }

    .breadcrumb a:not(:last-child)::after {
        font-size: 9px;
    }

    .header-sec {
        padding: 30px 20px;
    }

    .banner {
        min-height: fit-content;
    }

    .hm-product-card .img {
        --height: 150px;
    }

    .hm-product-card .tag {
        font-size: 9px;
        padding: 5px 9px;
        top: 8px;
        right: 8px;
    }

    .hm-product-card .con {
        padding: 15px 10px;
    }

    .hm-product-card .con .det .title {
        font-size: 14px;
    }

    .hm-product-card .con .det .desc {
        font-size: 12px;
    }

    .stat-con {
        transform: translate(2%, 20%);
    }

    .view-toggle {
        display: none;
    }

    .shop-product-grid {
        gap: 11px;
    }

    .shop-product-card .img {
        --height: 150px;
        height: var(--height);
        min-height: var(--height);
    }

    .shop-product-card .badges {
        display: none;
    }

    .shop-product-card .con {
        padding: 20px 10px;
        gap: 10px;
    }

    .shop-product-card .con .con-inner {
        gap: 3px;
    }

    .shop-product-card .category {
        font-size: 9px;
    }

    .shop-product-card .title {
        font-size: 14px;
    }

    .shop-product-card .rating .stars {
        gap: 2px;
    }

    .shop-product-card .rating .stars i {
        font-size: 7px;
    }

    .shop-product-card .rating .count {
        font-size: 9px;
    }

    .shop-product-card .desc {
        font-size: 11px;
    }

    .shop-product-card .pill {
        font-size: 9px;
    }

    .btm {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .btm .cart-btn {
        width: 100%;
        font-size: 12px;
        padding: 6px 13px;
    }

    .cart-btn::before {
        --size: 16px;
    }

    .cart-btn.added::before {
        display: none;
    }

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

    .sort-dropdown {
        flex: 1;
    }

    .sort-dropdown .dropdown-toggle {
        width: 100%;
    }

    /* perks */
    .pdp-perks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pdp-tab-btn {
        font-size: 15px;
        padding: 16px 12px 14px;
    }

    .pdp-tab-panels {
        padding: 26px 18px 30px;
    }

    .pdp-tab-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }

    .pdp-spec-row {
        flex-direction: column;
        gap: 4px;
    }

    .pdp-spec-row .value {
        text-align: left;
    }

    .newsletter-bar {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 22px;
        padding: 36px 26px;
    }

    .newsletter-con h3 {
        font-size: 1.3rem;
    }

    .newsletter-form {
        width: 100%;
    }

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

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

    .blog-featured .img {
        height: 260px;
    }

    .blog-search {
        width: 100%;
    }

    .post-title {
        font-size: 1.8rem;
    }

    .post-related-grid {
        grid-template-columns: 1fr;
    }

    .faq-search {
        max-width: 100%;
    }

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

    .faq-card {
        padding: 15px 11px;
    }

    .faq-cat-head {
        text-align: center;
    }

    .faq-benefits {
        grid-template-columns: repeat(1, 1fr);
    }

    .faq-benf {
        padding: 30px 20px;
    }

    .contact-field-row {
        flex-direction: column;
        gap: 22px;
    }

    .contact-form-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-hours-row {
        font-size: 13px;
    }

    .contact-social-pills {
        width: 100%;
    }

    .contact-social-pill {
        flex: 1;
        justify-content: center;
    }

    .error-code {
        font-size: 5rem;
        text-shadow: 4px 4px 0 var(--sunrise);
    }

    .error-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-actions .btn {
        width: 100%;
    }

    .thank-you-meta-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .thank-you-actions {
        flex-direction: column;
        width: 100%;
    }

    .thank-you-actions .btn {
        width: 100%;
    }

    .cart-item {
        flex-wrap: wrap;
    }

    .cart-item-img {
        width: 70px;
        height: 70px;
    }

    .cart-item-subtotal {
        width: auto;
        margin-left: auto;
    }

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

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

    .cart-coupon input {
        min-width: 0;
    }

    .cross-sells ul,
    .cross-sells .products {
        grid-template-columns: repeat(1, 1fr);
    }

    .checkout-card {
        padding: 22px;
    }

    .checkout-card .form-row-first,
    .checkout-card .form-row-last {
        width: 100%;
        margin-right: 0;
    }

    .checkout-coupon-card .coupon {
        flex-direction: column;
    }

    .checkout-coupon-card .coupon button {
        width: 100%;
    }

    .thank-you-addresses {
        grid-template-columns: 1fr;
    }

    .account-content-card {
        padding: 22px;
    }

    .account-quick-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .account-order-row {
        flex-wrap: wrap;
    }

    .account-content-card .woocommerce-Addresses,
    .account-content-card .u-columns,
    .account-content-card .u-columns.col2-set {
        grid-template-columns: 1fr;
    }

    .account-content-card form .form-row-first,
    .account-content-card form .form-row-last {
        width: 100%;
        margin-right: 0;
    }

    .account-order-row--full {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-order-actions {
        margin-left: 0;
        width: 100%;
    }

    .account-order-actions .btn {
        flex: 1;
    }

    .account-address-grid {
        grid-template-columns: 1fr;
    }

    .account-download-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-download-row .btn {
        margin-left: 0;
        width: 100%;
    }

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

    .testimonials-container {
        padding: 30px 13px;
    }

    .testimonials-container .head-sec {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-card .header {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .testimonial-card {
        padding: 25px 15px;
    }

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

    .brand-logo img {
        width: 125px;
    }

}

/* mobile-tablet */
@media (max-width: 1023px) {

    :root { 
        --section-pd: 50px 0;
    }

    .sec-l {
        padding-bottom: 1rem !important;
    }

    .sec-r {
        padding-top: 1rem !important;
    }

    .navbar, .topbar {
        display: none !important;
    }

    .mob-nav {}

    .mob-nav-con {
        top: 0;
        position: relative !important;
        width: 100%;
        height: var(--mobile-nav);
        background: var(--sand-light);
        transition: 0.5s ease;
        display: flex;
        justify-content: center !important;
        z-index: 999 !important;
    }

    .mob-nav-con.scrolled {
        position: fixed !important;
    }

    .mob-nav-overlay {
        position: fixed;
        width: 100vw;
        height: 87vh;
        transform: translate(-100%, 0);
        display: none;
        transition: 0.8s ease;
        background: rgba(245, 244, 241, 0.8);
        backdrop-filter: blur(12px);
        z-index: 998;
        padding-top: 3rem;
        padding-bottom: var(--mobile-nav);
        overflow-y: scroll;
    }

    .mob-nav-overlay.scrolled {
        top: var(--mobile-nav);
        height: 92vh;
    }

    .mob-nav-overlay .container {
        height: 100% !important;
    }

    .mob-nav button.nav-toggle {
        width: 40px !important;
        height: 40px !important;
        background: transparent;
        border: 3px solid var(--bamboo);
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mob-nav button.nav-toggle i {
        font-size: 25px;
        color: var(--bamboo);
    }

    .mob-nav .mob-nav-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        height: 100% !important;
    }

    .mob-nav-overlay .user-login {
        display: flex;
        gap: 15px;
        align-items: center;
        text-decoration: none;
        align-self: start;
    }

    .mob-nav-overlay .user-login .icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        flex-shrink: 0;
        background-color: var(--spring-bud-dark);
    }

    .mob-nav-overlay .user-login .icon i {
        color: var(--mist);
        font-size: 22px;
    }

    .mob-nav-overlay .user-login .det {
        color: var(--bamboo);
        font-size: 20px;
        font-weight: 500;
    }

    .mob-nav .nav-links {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 0px;
        height: fit-content;
        width: 100% !important;
    }

    ul.sub-menu {
        grid-template-columns: repeat(1, 1fr);
    }

    .mob-nav a.nav-link {
        padding: 15px 2px;
        border: none;
        border-bottom: 2px solid var(--sand);
        width: 100% !important;
        border-radius: 0;
    }

    .mob-nav a.nav-link:hover,
    .mob-nav a.active,
    .mob-dropdown.open > a.nav-link {
        background-color: transparent;
        border-color: var(--bamboo);
        color: var(--bamboo);
    }

    .mob-nav a.nav-link:last-child {
        border-bottom: none;
    }

    .mob-dropdown {
        width: 100%;
    }

    .dropdown-btn {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    .mob-dropdown.open > a.nav-link {
        border-color: #ffffff00;
    }

    .mob-dropdown .dropdown-btn i {
        transform: rotate(0deg);
        transition: 0.3s ease;
    }

    .mob-dropdown.open .dropdown-btn i {
        transform: rotate(180deg);
    }

    .sub-menu {
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-color: var(--mist);
        padding: 0 18px;
        margin-bottom: 0;
        border-radius: 10px;
        transition: max-height 0.35s ease;
    }

    .sub-menu a.nav-link {
        border-color: var(--leaf);
    }

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

    .categories-grid {
        display: flex;
        gap: 25px;
        overflow-x: scroll;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .brands-grid {
        display: grid;
        gap: 20px;
    }

    .cat-card .img {
        width: 138px;
    }

    .mob-filter {
        display: flex;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(16px);
    }

    .shop-filter-toggle {
        margin-bottom: 0px;
    }

    .shop-layout {
        flex-direction: column;
    }

    .shop-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 350px;
        max-width: 85vw;
        height: 100vh;
        background: var(--pure-white);
        z-index: 1050;
        padding: 25px 20px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: 0.4s ease;
    }

    .shop-sidebar.active {
        transform: translateX(0);
    }

    .shop-sidebar-head {
        display: flex;
    }

    .shop-overlay.active {
        display: block;
    }

    .shop-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-layout {
        flex-direction: column-reverse;
    }

    .blog-sidebar {
        width: 100%;
        position: static;
    }

    .blog-cat-card {
        display: flex;
        flex-direction: column;
    }

    .post-layout {
        flex-direction: column;
    }

    .post-sidebar {
        width: 100%;
        position: static;
    }

    .faq-tabs-sec {
        top: var(--mobile-nav);
    }

    .faq-tabs-nav {
        justify-content: flex-start;
    }

    .post-body h2,
    .post-body h3 {
        scroll-margin-top: var(--mobile-nav);
    }

    .cart-layout, .checkout-layout {
        flex-direction: column;
    }

    .cart-sidebar, .checkout-sidebar {
        width: 100%;
        position: static;
    }

    .account-layout {
        flex-direction: column;
    }

}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {

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

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

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

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

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

    .faq-benf {
        padding: 25px;
    }

    .newsletter-bar {
        padding: 45px 35px;
    }

}

/* tablet-desktop */
@media (min-width: 768px) {

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

    .ft-col {
        max-width: fit-content;
    }

    .announcement-bar {
        padding: 7px 1rem;
    }


    .hm-product-card .con {
        height: 100%;
    }

    .blog-layout {
        gap: 60px;
    }

    .blog-grid .blog-featured {
        grid-column: span 2;
    }

    .blog-grid .blog-featured .img {
        height: 380px;
    }

    .blog-grid .blog-featured .blog-title {
        font-size: 1.8rem;
    }

    .cart-item-info {
        flex: 1;
    }

    .cart-toast {
        left: 20px;
        right: 20px;
        transform: translateY(-20px);
        text-align: center;
        white-space: normal;
    }

    .cart-toast.show {
        transform: translateY(0);
    }

}

/* desktop */
@media (min-width: 1024px) {

    :root { 
        --section-pd: 70px 9vh;
    }

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

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

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

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

    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100%;
    }

    .sec-l {
        padding-right: 2rem !important;
    }

    .sec-r {
        padding-left: 2rem !important;
    }

    .ft-col:not(:first-child) {
        padding-left: 0 !important;
    }

    .ft-col:not(:last-child) {
        padding-right: 0 !important;
    }

    /* .shop-layout .shop-sidebar {
        position: sticky;
        top: 90px;
    } */

    .shop-product-grid.more-products {
        grid-template-columns: repeat(4, 1fr);    
    }

    .cta-sec h2 {
        font-size: 50px;
    }

}

/* xl desktop */
@media (min-width: 1800px) {

    .container {
        max-width: 1500px !important;
    }

}