.card {
background-color: #f9f9f9 !important;
}

 div.sb-icon {
 background-color: #184D45 !important; 
}
.ec-checkout-quantity input{
line-height:30px !important;
}

.list-group .list-group-item{
border-bottom:1px solid #dee2e6 !important;

}
.benefits-section, .ingredient-section, .why2x2-section, .cta-section, .routine-section p{
    text-align:center;
    padding:0 0 20px 0;
    margin:0px !important;
}
.table-newwidth{
width:800px !important;

}

.cta-section{
    padding:0px;
}

.benefits-section, .ingredient-section, .why2x2-section, .routine-section {
    margin: 0 auto;
    padding: 2rem 1rem;
}
.routine-section .table{
/*width:fit-content !important;*/
}
.why2x2-section table{
border:0px !important;
}
.benefits-section, .ingredient-section, .why2x2-section h2{
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    letter-spacing: 1px !important
}

.routine-section h2{
	font-size: 2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
	margin-bottom: 0px !important;
    letter-spacing: 1px !important
}

.ck-content .table{
    margin: 0px !important;
    display: block !important;
}
.product-detail .shop_info_tab.entry-main-content #Description table td, .ck-content .table table td {
 border:none ;
}

.benefits-title {
    font-size: 2rem;
    text-shadow: 0 1px 0 #fff
}

.ingredient-title {
    font-size: 2.2rem;
    font-weight: 700
}

.benefits-columns {
    display: flex;
    gap: 38px;
    justify-content: center
}

.benefits-col {
    flex: 1 1 0
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.benefit-item {
    display: flex;
    align-items: flex-start !important;
    gap: 14px;
    margin-bottom: 26px;
    background: linear-gradient(90deg,#fff4e6 80%,#ffe1c1 100%);
    border-radius: 14px;
    border: 1px solid #ecd3be;
    box-shadow: 0 2px 12px rgba(180,110,41,0.05);
    padding: 18px 16px;
    transition: box-shadow .25s;
text-align:left !important;
}

    .benefit-item:hover {
        box-shadow: 0 4px 28px rgba(180,110,41,0.15)
    }

    .benefit-item:last-child {
        margin-bottom: 0
    }

.benefit-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#184D45 50%,#f4f6fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(230,133,43,0.15)
}



.ingredient-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px
}

.ingredient-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(180,110,41,0.11);
    padding: 24px 16px 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow .22s;
    border: 1.5px solid #ffe6c2
}

    .ingredient-card:hover {
        box-shadow: 0 8px 32px rgba(180,110,41,0.19);
        border-color: #ecb570
    }

.ingredient-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fbe0b2 60%,#ffe1c1 100%);
    box-shadow: 0 2px 9px rgba(236,181,112,0.10);
    font-size: 2rem;
    margin-bottom: 12px;
    color: #d4973b
}

.ingredient-name {
    font-size: 1.11rem;
    font-weight: 700;
    color: #ad6512;
    margin-bottom: 3px;
    letter-spacing: .02em
}

.ingredient-scientific {
    font-size: .96rem;
    font-weight: 500;
    color: #784c1e;
    font-style: italic;
    margin-bottom: 10px;
    opacity: .82
}

.ingredient-desc {
    margin-bottom: 0;
    min-height: 48px
}

.why2x2-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    table-layout: fixed
}

    .why2x2-table td {
        vertical-align: middle !important;
        text-align: center !important;
        padding: 38px 22px 30px 22px !important;
        border-bottom: 1.5px solid #f5dcb0 !important;
        border-right: 1.5px solid #f5dcb0 !important;
        min-width: 170px !important
    }

    .why2x2-table tr:last-child td {
        border-bottom: none !important
    }

    .why2x2-table td:last-child, .why2x2-table tr td:last-child {
        border-right: none !important
    }

.why2x2-icon {
    font-size: 2.1rem;
    margin-bottom: 13px;
    color: #c69a54;
    display: block
}

.why2x2-mini-title {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #ad6512;
    margin-bottom: 10px !important;
    letter-spacing: .02em
}

.routine-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0 auto;
    text-align: left;
}

.routine-table {
    background: #fff;
    border-radius: 20px;
	border:0px !important;
    box-shadow: 0 6px 30px rgba(20,70,140,0.08);
    overflow: hidden;
    width: 400px !important;
    min-width: 320px !important;
    border-collapse: separate !important;
    border-spacing: 0
}

    .routine-table th {
        background: linear-gradient(90deg,#185adb 60%,#35d8a6 100%) !important;
        color: #fff;
        height:30px !important;
        font-size: 1.25rem !important;
        padding: 18px 24px !important;
        letter-spacing: 1px !important;
        text-align: left !important;
        border-bottom: 1px solid #eee !important;
    }

    .routine-table td {
        font-size: 1.05rem !important;
        color: #212b36;
        padding: 14px 24px !important;
        border-bottom: 1px solid #f1f1f1 !important;
    }

    .routine-table tr:last-child td {
        border-bottom: none !important
    }

.emoji {
    font-size: 1.5rem;
    margin-right: 8px
}



.cta-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #b46e29;
    margin-bottom: 14px;
    letter-spacing: .02em;
    font-family: 'Montserrat','Segoe UI',Arial,sans-serif
}

.cta-btn {
    display: inline-block;
    padding: 15px 38px;
    background: linear-gradient(90deg,#c98c3c 25%,#b46e29 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.16rem;
    border-radius: 36px;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(180,110,41,0.14);
    transition: background .18s,transform .18s,box-shadow .18s;
    margin-top: 5px
}

    .cta-btn:hover {
        background: linear-gradient(90deg,#b46e29 30%,#c98c3c 100%);
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 8px 32px rgba(180,110,41,0.22);
        text-decoration: none;
        color: #fff
    }

@media(max-width:900px) {
    .benefits-columns {
        flex-direction: column;
        gap: 16px
    }

    .benefits-section {
        padding: 24px 8px 18px 8px
    }

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

    .routine-container {
        flex-direction: column;
        align-items: center;
        gap: 24px
    }

    .routine-table {
        width: 95%;
        min-width: unset
    }

    .why2x2-section {
        max-width: 99vw
    }

    .why2x2-table, .why2x2-table tbody, .why2x2-table tr {
        display: block;
        width: 100%
    }

        .why2x2-table tr {
            display: flex;
            flex-direction: row;
            width: 100%
        }

        .why2x2-table td {
            flex: 1;
            border-bottom: 1.5px solid #f5dcb0 ;
border-top: 1.5px solid #f5dcb0 ;
border-left: 1.5px solid #f5dcb0 ;
            border-right: 1.5px solid #f5dcb0 ;
            padding: 22px 8px 18px 8px;
            min-width: unset
        }

        .why2x2-table tr:last-child td {
            border-bottom: none !important
        }

        .why2x2-table tr td:last-child {
            border-right: none !important
        }
}

@media(max-width:700px) {
    .cta-section {
        padding: 24px 8px 18px 8px;
        max-width: 98vw
    }

    .cta-title {
        font-size: 1.45rem
    }

    .cta-desc {
        font-size: 1.01rem
    }

    .cta-btn {
        padding: 12px 22px;
        font-size: 1rem
    }
}

@media(max-width:650px) {
    .why2x2-table tr {
        flex-direction: column
    }

    .why2x2-table td {
        border-right: none;
        border-bottom: 1.5px solid #f5dcb0;
        padding: 16px 8px 14px 8px
    }

    .why2x2-table tr:last-child td {
        border-bottom: none
    }
}

@media(max-width:600px) {
    .ingredient-grid {
        grid-template-columns: 1fr
    }

    .ingredient-card {
        padding: 18px 10px 14px 10px
    }
}

@media screen and (max-width:768px) {
    .landing-section h2 {
        font-size: 1.5rem
    }

    .landing-section p {
        font-size: 1rem
    }

    .landing-features {
        grid-template-columns: 1fr
    }

    .landing-feature {
        padding: 1rem;
        margin-bottom: 1.5rem
    }

        .landing-feature h3 {
            font-size: 1.25rem
        }
}

@media screen and (max-width:480px) {
    .landing-section h2 {
        font-size: 1.25rem
    }

    .landing-feature h3 {
        font-size: 1.125rem
    }

    .landing-feature p {
        font-size: .9rem
    }

    .landing-cta {
        font-size: .9rem;
        padding: .75rem 1.5rem
    }
}


.desc {
    font-family: 'Segoe UI', 'Montserrat', Arial, sans-serif !important;
    font-size: 1.06rem !important;
    color: #68420c !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 0 !important;
  	
}

.table-newwidth{
width:800px !important;
}



.routine-add-pad-top{
padding-top:20px !important;
}


/*diwali offer landing page*/



.diwali_root {
--brand:#5b8c3a; /* herbal green */
--accent:#f5c06a; /* festive gold */
--muted:#6b6b6b;
--card-bg:#fffaf6;
--radius:12px;
font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.diwali_body{ color:#222; margin:0; display:flex; justify-content:center}


.diwali_container{width:100%;}


/* Section base */
.diwali_section{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,246,0.98)); border-radius:var(--radius); padding:26px; box-shadow:0 8px 30px rgba(16,24,40,0.06); margin-bottom:20px}
.diwali_section h3{margin:0 0 10px 0; font-size:20px; color:var(--brand)}
.diwali_lead{font-size:15px; color:var(--muted); margin-bottom:14px}


/* Why choose */
.diwali_features{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.diwali_feature-card{background:var(--card-bg); padding:14px; border-radius:10px; display:flex; gap:12px; align-items:flex-start}
.diwali_feature-card .diwali_icon{width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg, rgba(91,140,58,0.12), rgba(245,192,106,0.08)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--brand); flex-shrink:0}
.diwali_feature-card h4{margin:0 0 4px 0; font-size:15px}
.diwali_feature-card p{margin:0; font-size:13px; color:var(--muted)}


/* Offer */
.diwali_offer{display:flex; gap:18px; align-items:center; justify-content:space-between}
.diwali_offer-left{flex:1}
.diwali_price-box{background:linear-gradient(90deg, #fff7e6, #fffaf0); padding:16px; border-radius:10px; text-align:center; min-width:190px}
.diwali_price-box .diwali_price{font-size:22px; font-weight:800; color:var(--brand)}
.diwali_price-box .diwali_tag{font-size:13px; color:var(--muted); margin-top:6px}
.diwali_badge{display:inline-block; background:var(--accent); color:#fff; padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px}


/* How to use */
.diwali_steps{display:flex; gap:12px; flex-wrap:wrap}
.diwali_step{flex:1 1 220px; background:#fff; padding:12px; border-radius:10px; border:1px solid rgba(91,140,58,0.06)}
.diwali_step h5{margin:0 0 8px 0; font-size:14px; color:var(--brand)}
.diwali_step p{margin:0; font-size:13px; color:var(--muted)}


/* Testimonials */
.diwali_testimonials{display:flex; gap:12px; flex-direction:column}
.diwali_testimonial{background:#fff; padding:14px; border-radius:10px; border-left:4px solid rgba(91,140,58,0.12)}
.diwali_testimonial p{margin:0 0 10px 0; font-size:14px}
.diwali_author{font-size:13px; color:var(--muted)}


/* CTA */
.diwali_cta-wrap{display:flex; gap:12px; align-items:center; margin-top:14px}
.diwali_btn-primary{background:var(--brand); color:#fff; border:none; padding:12px 18px; border-radius:10px; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(91,140,58,0.18)}
.diwali_btn-ghost{background:transparent; color:var(--brand); border:1px solid rgba(91,140,58,0.18); padding:10px 14px; border-radius:10px; cursor:pointer}


/* Responsive */
@media (max-width:760px){
.diwali_features{grid-template-columns:1fr}
.diwali_offer{flex-direction:column; align-items:flex-start}
.diwali_price-box{width:100%}
.diwali_steps{flex-direction:column}
}

/* customized code from header */

.header-wrap{
            min-height: 0px !important;
        }

        @media only screen and (max-width: 768px) {
    .header-bottom {
        padding: 30px 0px !important;
    }
}

 .header_a, .header_a:hover, .header_a:active {
            font-size: 14px; 
            letter-spacing: 1px; 
            margin-top: 5px; 
            font-family: 'Montserrat', sans-serif; 
            color: #184a44 !important;
        }


 .deals-container, .store-container, .career-container, .contactus-container, .about-container, .bestseller-container, .categories-section, .products-section,.footer-container, .routines-container, .testimonial-section{
     max-width: 1600px;
     margin: 0 auto;
     padding: 0 0.5rem;
     padding-bottom: 80px;
}

/* .landing-container{*/
/*     max-width: 1200px;*/
/*}*/

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

  @media (max-width: 992px) {
   .testimonial-section{
         padding: 0 1.5rem;
    }
}

.footer-container{
padding-bottom: 0px !important;
}

        body {
            background-color: #f9f9f9 !important;
        }

        /*slider section coding starts here*/

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;


        }

        .slide.active {
            opacity: 1;

        }

        .slide-1 {            
            background-image: linear-gradient(89.88deg, rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0.7) 90%);
            background-blend-mode: normal;
            background-size: cover;
            background-repeat: no-repeat;
        }
     
    
     
        .banner-text {
            position: absolute;
            bottom: 30px;
            right: 5%;
            z-index: 2;
            color: white;
            text-align: center;
            max-width: 500px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            padding: 20px;
            width: 100%;
        }

        .banner-title {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 6px;
            line-height: 1.2;
        }

        .banner-subtitle {
            font-size: 1.1rem;
            font-weight: 300;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        .highlighted-text {
            color: #e6d0b1;
            font-style: italic;
        }

        .explore-btn {
            display: inline-block;
            background-color: #0e5c50;
            color: white;
            padding: 8px 20px;
            font-size: 0.9rem;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            letter-spacing: 1px;
        }

        
        @media (max-width: 480px) {
            .hero-slider-1 .single-hero-slider{
                height: 75vh !important;
                max-height: 75vh !important;
            }
            .banner-title {
                font-size: 1.3rem;
                margin-bottom: 4px;
            }

            .banner-subtitle {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }

            .banner-text {
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                max-width: 100%;
                width: 100%;
                padding: 12px;
                margin-bottom: 30px
            }


            .explore-btn {
                padding: 5px 12px;
                font-size: 0.7rem;
            }

        }

/*slider section coding ends here*/

/*ticker code starts here*/
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: #f5f3ee;
    padding: 10px 0;
    border-top: 1px solid #efe8db;
    border-bottom: 1px solid #efe8db;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
}

.ticker {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.ticker__track {
    display: flex;
    animation: ticker 30s linear infinite;
    width: max-content;
}

.ticker__item {
    display: inline-block;
    padding: 0 40px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Smooth infinite animation */
@keyframes ticker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-35%);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .ticker__item {
        padding: 0 20px;
        font-size: 14px;
    }
}

/*ticker code ends here*/


/*categories ection coding starts*/
.categories-section {
        margin-top: 60px;
    }

.categories-heading,.products-heading,.bestsellers-heading,.deals-heading,.routine-title,.testimonial-section-title {
    color: #184D45;
    text-align: center;
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: 900;
}


.categories {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.9rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.categories::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.category-card {
    flex: 0 0 auto;
    width: calc(33.333% - 20px);
    min-width: 300px;
    max-width: 502px;
    aspect-ratio: 502 / 685;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}


.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background-color: #184D45;
    border-radius: 15px;
    padding: 0 20px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                background-color 0.4s ease;
}

.overlay-content{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    align-content: center;
    border-radius: 15px;
    padding: 0 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Entrance animation */
@keyframes overlayIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover effect: slight slide-up */
.overlay:hover {
    transform: translateY(-7px);
}

.category-content {
    color: white;
}

.category-title {
    font-size: 27px;
    margin-bottom: 5px;
    color: white;
}

.shop-now {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 1px solid white;
    display: inline-block;
    color:#fff;
}

 .categories-wrapper {
 position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
 }
 /* Navigation Buttons */
 .nav-btn {
     width: 50px;
     height: 50px;
     border: none;
     border-radius: 50%;
     background: #184D45;
     color: white;
     font-size: 20px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
 }

     .nav-btn:hover {
         background: #2a6b63;
     }

     .nav-btn:disabled {
         background: #ccc;
         cursor: not-allowed;
     }

 .category-prev-btn {
     left: -25px;
 }

 .category-next-btn {
     right: -25px;
 }
 /* Hide arrows on desktop, show only on mobile */
.mobile-only {
    display: none;
}

 
@media (max-width: 768px) {
    
 .mobile-only {
        display: flex;
    }
     .category-prev-btn {
         left: 10px;
     }

     .category-next-btn {
         right: 10px;
     }
 }

@media (max-width: 1100px) and (min-width: 769px) {
    .category-card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .categories {
        /*flex-direction: column;*/
        /*align-items: center;*/
    }

    .category-card {
        width: 100%;
        max-width: 400px;
    }
}
        
@media only screen and (max-width: 480px) {
    .mb-sm-5 {
     margin-bottom: 0rem !important; 
    }
}
@media (max-width: 768px) {

    .deals-container, .store-container, .career-container, .contactus-container, .about-container, .bestseller-container, .categories-section, .products-section,.footer-container,.testimonial-section, .routines-container, .video-section{
     padding-bottom: 40px !important;
    }
    
    .footer-container{
    padding-bottom: 60px !important;
    }
    
    .categories-heading,.products-heading,.bestsellers-heading,.deals-heading,.routine-title,.testimonial-section-title {
        font-size: 36px !important;
        margin-bottom: 25px;
    }
       
    .banner-title {
        font-size: 1.6rem;
    }
    
    .banner-subtitle {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    .banner-text {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: 90%;
        width: 500px;
        padding: 15px;
        margin-bottom: 30px
    }
    
    
    .explore-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
    }
}
        
        

/*categories section coding ends*/




/*product section coding starts*/
        .row {
            --bs-gutter-x: 0.9rem !important;
            
        }
        
        

        .products-grid {
            flex:0 0 calc(50% - 10px);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .product-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
    
            background-color: white;
            border:1px solid #ececec;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            /*margin-bottom: 0.9rem;*/
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #184D45;
            
        }

        .product-image-container {
            background-color: #E5E5E5;
            height: 250px;
            overflow: hidden;
            position: relative;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .product-details {
            padding: 15px;
            text-align: center;
            
    
        }

        .product-title {
            font-weight: 700;
            margin-bottom: 5px;
            font-size: clamp(14px, 2.5vw, 20px);
            line-height: 1.4;
            word-wrap: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

        }
        .product-title a {
            color: #184D45 !important;
       } 

        .product-category {
            margin-bottom: 10px;
            font-size: clamp(14px, 2.5vw, 18px);
            
        }

        .product-category a {
            color: #999;

        }

        .product-rating {
            color: #FFD700;
            font-size: 16px;
            margin-bottom: 10px;
        }

        .product-price {
            font-weight: 600;
            font-size: clamp(16px, 3vw, 20px);
            margin-bottom: 0.9rem;
        }

        .add-to-cart-btn {
            background-color: #184D45;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 15px;
            width: 100%;
            font-weight: 700;
            font-size: clamp(12px, 2.5vw, 18px);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .add-to-cart-btn:hover {
            background-color: #b46e29;
        }


.product-img-action-wrap {
    position: relative;
    overflow: hidden;
}

.product-action-1 {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-img-action-wrap:hover .product-action-1 {
    opacity: 1;
}

.product-action-1 .action-btn {
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.product-action-1 .action-btn:hover {
    background-color: #d9ad77;
    color: #fff;
    transform: scale(1.1);
}
        @media (max-width: 768px) {
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
         
        }

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

            .product-image-container {
                height: 180px;
            }



        }

/*product section coding ends*/


/*footer section coding starts*/

 .footer {
            
            position: relative;
            background-color: #184D45; 
            /*#0e5c50*/
            color: white;
            padding: 0px 0;
            background-image: url("/storage/footer/footer-pattern.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: bottom center;

        }

       

        /* Top Features Section */
        .features {
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .feature {
            display: flex;
            align-items: center;
            flex: 1;
            padding: 0 15px;
            max-width: 33.333%;
            position: relative;
        }

        .feature:not(:last-child):after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 90%;
            width: 1.5px;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            margin-right: 15px;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-icon img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }


        .feature-text h3 {
            font-size: 16px;
            margin-bottom: 5px;
            font-weight: 500;
            color: white;

        }

        .feature-text p {
            font-size: 12px;
            opacity: 0.8;
            color: white;
        }

        /* Main Footer Content */
        .footer-content {
            display: flex;
            justify-content: space-between;
            padding: 30px 0;
            flex-wrap: wrap;
        }

        /* Logo and About Section */
        .footer-about {
            width: 20%;
            min-width: 220px;
            margin-bottom: 20px;
        }

        .footer-logo img {
            margin-bottom: 15px;
            width: 100%;
            max-width: 140px;
            /* Maximum width, but will scale down if needed */
        }

        .footer-about p {
            font-size: 13px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .connect-label {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 500;
        }

        .social-links {
            display: flex;
            gap: 15px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .social-links a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* Footer Columns */
        .footer-columns {
            display: flex;
            flex: 1;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        .footer-column {
            flex: 1;
            min-width: 120px;
            margin-bottom: 20px;
            padding: 0 15px;
            text-align: left;
        }

        .footer-column h3 {
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 600;
            position: relative;
            padding-bottom: 8px;
               color: white;
        }

        .footer-column ul {
            list-style: none;
        }

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

        .footer-column ul li a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            opacity: 0.8;
            transition: opacity 0.3s;
            display: inline-block;
        }

        .footer-column ul li a:hover {
            opacity: 1;
        }

        /* Contact Info */
        .contact-info {
            flex: 0 0 22%;
            min-width: 240px;
            padding: 0 15px;
        }

        .contact-info h3 {
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 600;
            position: relative;
            padding-bottom: 8px;
               color: white;
        }

        .contact-info p {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            font-size: 14px;
            line-height: 1.5;
        }

        .contact-info i {
            margin-right: 10px;
            min-width: 20px;
            color: #fff;
        }

        .contact-info .address {
            max-width: 250px;
        }

        /* Payment and Shipping Partners Section */
        .partners-section {
            padding: 15px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            /* White border at top */
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .partner-group {
            display: flex;
            align-items: center;
        }

        .partner-label {
            margin-right: 10px;
            font-size: 13px;
            opacity: 0.9;
        }

        .partner-logo {
            height: 20px;
            margin-left: 5px;
        }

        .partner-divider {
            margin: 0 15px;
            height: 20px;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.5);
        }

        /* Bottom Footer */
        .footer-botto {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            flex-wrap: wrap;
            font-size: 13px;
        }

        .footer-bottom-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }

        .footer-divider {
            height: 15px;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 15px;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .features {
                flex-direction: column;
            }

            .feature {
                max-width: 100%;
                margin-bottom: 20px;
            }

            .feature:not(:last-child):after {
                display: none;
            }

            .footer-content {
                flex-wrap: wrap;
            }

            .footer-columns {
                flex-wrap: wrap;
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            .footer-about {
                width: 100%;
                min-width: 200px;
                margin-bottom: 30px;
            }

            .footer-logo {
                max-width: 120px;
                /* Adjust for tablet view */
            }

            .footer-column {
                width: 50%;
                min-width: 180px;
                flex: 0 0 auto;
                text-align: left;
            }

            .contact-info {
                width: 100%;
                min-width: 200px;
                margin-top: 20px;
            }

            .partners-section {
                flex-direction: column;
                gap: 10px;
            }

            .partner-divider {
                height: 0px;
                width: 0%;
                margin: 0px 0;
            }

            .footer-botto {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }

            .footer-divider {
                display: none;
            }
        }

        @media (max-width: 768px) {

            .footer-content {
                flex-direction: column;
            }

            .footer-about {
                width: 100%;
                text-align: center;
                margin-bottom: 30px;
            }

            .footer-logo {
                margin: 0 auto 15px;
                max-width: 130px;
                /* Centered but still reasonable size for mobile */
            }

            .footer-about h3:after,
            .contact-info h3:after {
                left: 50%;
                transform: translateX(-50%);
            }

            .social-links {
                justify-content: center;
            }

            .footer-columns {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .footer-column {
                width: 50%;
                min-width: unset;
                padding: 0 15px;
                margin-bottom: 25px;
                text-align: left;
            }

            .footer-column h3:after {
                left: 50%;
                transform: translateX(-50%);
            }

            .contact-info {
                width: 100%;
                min-width: unset;
                padding: 0;
                margin-bottom: 30px;
                text-align: center;
            }

            .contact-info p {
                justify-content: center;
                text-align: center;
            }

            .contact-info .address {
                max-width: 100%;
            }

            .partners-section {
                padding: 15px 0;
            }

            .partner-group {
                width: 100%;
                justify-content: center;
            }

            .footer-botto {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .footer-bottom-item {
                justify-content: center;
            }

            .footer-divider {
                display: none;
            }
        }

        /* Extra styles for single line on larger screens */
        @media (min-width: 1200px) {
            .footer-content {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
            }

            .footer-about {
                width: 18%;
            }

            .footer-logo {
                max-width: 85%;
                /* Adjust logo size based on container width */
            }

            .footer-columns {
                width: 60%;
                flex-wrap: nowrap;
            }

            .footer-column {
                padding: 0 10px;
            }

            .contact-info {
                width: 22%;
            }
        }

/*footer section coding ends*/

/*best seller section starts*/
.featured-product{flex:0 0 calc(50% - 10px);position:relative;border-radius:12px;overflow:hidden;min-width:49%;height: 448px;}
.featured-product img{width:100%;object-fit:cover;display:block;height:448px}
.bestsellers-container{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;min-height:520px}
.ads-vertical-container{display:grid;flex-wrap:wrap;gap:10px;align-items:stretch;min-height:520px;width:49%}
.featured-content{position:absolute;bottom:0;left:0;right:0;padding:30px;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);color:#333}
.featured-title{font-size:2.5rem;font-weight:bold;margin-bottom:5px;text-align:center;color:#fff}
.featured-subtitle{font-size:16px;margin-bottom:15px;text-align:center;color:#fff}
.shop-now-btn{background-color:#184D45;color:#fff;border:none;border-radius:4px;padding:10px 20px;font-size:16px;cursor:pointer;transition:background-color .3s ease;display:block;text-align:center;width:fit-content;margin:0 auto}
.shop-now-btn:hover{background-color:#b46e29}
.view-all-container{display:flex;justify-content:center;margin-top:30px}
.view-all-btn{background-color:#fff;color:#184D45;border:2px solid #184D45;border-radius:4px;padding:12px 50px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease}
.view-all-btn:hover{background-color:#184D45;color:#fff}
@media(max-width:992px){
.bestsellers-container{flex-direction:column;min-height:auto;gap:15px}
.featured-product{width:100%;max-width:500px;height:500px;position:relative;margin-bottom:15px;flex:auto}
.featured-product img{top:0;left:0;width:100%;height:100%}
.bestsellers-section{margin-bottom:40px}
.bestsellers-heading{margin-bottom:25px}
}
@media(max-width:768px){
.view-all-container{margin-top:20px}
.ads-vertical-container{display:flex;flex-wrap:nowrap;overflow-x:auto;min-height:auto;width:auto;}
.featured-product{min-width:100%;height:400px}
}

@media(max-width:480px){
.ads-vertical-container{display:flex;flex-wrap:nowrap;overflow-x:auto;min-height:auto;width:auto;}
.featured-product{min-width:100%;height:400px}

}
.products-grid-2{flex:0 0 calc(50% - 10px);display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-gap:10px;min-width:300px}
/*best seller section ends here*/


/*About us page styling starts*/
.header {
    background-color: #d4b08b;
    padding: 30px 0;
    text-align: center;
    margin-bottom: 20px;
}



.intro {
    padding: 30px 15px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 20px;
}

.section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30px 15px;
    gap: 60px;
    margin-bottom: 30px;
}

.section:nth-child(even) {
    flex-direction: row-reverse;
}

.section-content {
    flex: 1;
    min-width: 0;
}

.section-image {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.section-image img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 10px;
    aspect-ratio: 643/750;
    object-fit: cover;
}

.section-title {
    font-size: 28px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 2px;
    background-color: #d4b08b;
    bottom: -5px;
    left: 0;
}

.team-section {
    padding: 30px 15px;
    text-align: center;
    margin-bottom: 30px;
}

.team-members {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
    gap: 30px;
}

.team-member {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.team-member-text {
    margin-bottom: 15px;
}

.team-member-image {
    width: 100%;
    aspect-ratio: 643/750;
    border-radius: 8px;
    overflow: hidden;
}

.team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-description {
    margin-top: 40px;
    text-align: left;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

/* Responsive design */
@media (max-width: 1200px) {
    .team-members {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .section {
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .team-members {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .about-container {
        padding: 15px;
    }

    .intro {
        padding: 25px 15px;
    }

    .section {
        padding: 25px 15px;
        gap: 30px;
    }
}

@media (max-width: 768px) {

    .section,
    .section:nth-child(even) {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 20px 10px;
    }

    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

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

    .header {
        padding: 20px 0;
    }

    .intro {
        padding: 20px 10px;
    }

    .team-section {
        padding: 20px 10px;
    }
}

@media (max-width: 600px) {
    .team-members {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .about-container {
        padding: 10px;
    }

    .container {
        padding: 0 10px;
    }

    .section-title {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .team-members {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .team-member {
        max-width: 100%;
    }

    .intro {
        padding: 15px 10px;
    }

    .section {
        padding: 15px 10px;
        margin-bottom: 20px;
    }

    .team-description {
        padding: 0 10px;
    }
}
        
        
        
/*about us page styling ends*/

/*career page styling starts*/

        .card-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        .main-card {
            background-color: #ffefd5;
            border-radius: 10px;
            padding: 30px;
            margin: 50px auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* Equal space for both containers */
            gap: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .card-content {
            padding: 15px;
        }

        .card-image-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }

        .image-heading {
            color: #004d40;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }

        .reasons-list {
            list-style-type: none;
            margin-top: 10px;
            margin-bottom: 15px;
            text-align: left;
        }

        .reasons-list li {
            margin-bottom: 8px;
            color: #004d40;
            padding-left: 15px;
            position: relative;
        }

        .reasons-list li::before {
            content: "●";
            position: absolute;
            left: 0;
            color: #004d40;
        }

        h3 {
            color: #065f46;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .bullet-list {
            list-style-type: none;
        }

        .bullet-list li {
            margin-bottom: 8px;
            line-height: 1.5;
            padding-left: 20px;
            position: relative;
            font-size: 14px;
        }

        .bullet-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #000;
        }

        .person-img {
            width: 100%;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        }

        /* Alternate card layout */
        .card:nth-child(even) {
            direction: rtl;
            /* Reverse the order for even cards */
        }

        .card:nth-child(even) .card-content,
        .card:nth-child(even) .card-image-container {
            direction: ltr;
            /* Reset text direction inside containers */
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            .card {
                grid-template-columns: 1fr;
                /* Stack vertically on smaller screens */
                padding: 20px;
            }

            .card:nth-child(even) {
                direction: ltr;
                /* Reset direction on mobile */
            }

            .card-image-container {
                margin: 15px 0;
            }

            .card-content {
                padding: 10px 0;
            }

            .person-img {
                max-width: 140px;
            }
        }

        @media (max-width: 480px) {
/*            .header {
                padding: 10px 0;
            }*/

            .career-container {
                padding: 10px;
            }

            .card {
                padding: 15px;
            }

            h3 {
                font-size: 20px;
            }

            .image-heading {
                font-size: 16px;
            }
        }
        
        
        /*career page styling ends*/
        :root {
  --body-font-size: 1rem !important;
  --bs-body-font-weight: 500 !important;
}

.header-style-1 .header-middle-ptb-1{
    background-color: #fff !important;
}

.product-cart-wrap:hover{
border: 1px solid #184D45 !important;
}

.single-flash > .product-cart-wrap:hover{
border: 0px solid !important;
}

.product-cart-wrap .product-content-wrap .product-price span{
color:var(--color-brand-dark) !important;
}



.header-style-1 .header-middle-ptb-1 {
    padding: 10px 0 !important;
}

.hero-slider-1 .single-hero-slider{
	height:76vh !important;
	max-height:76vh !important;

}

.header-top-ptb-1, .header-top-ptb-1 #news-flash 
 {
    font-size: 12px !important;
}

iframe{
	width: -webkit-fill-available;
 
}

p{
font-weight: 500 !important;
}

@media only screen and (max-width: 480px) {
    .mobile-promotion {
        background: #184a44 !important;
        color: #fff;
        display: block;
        padding: 7px 0;
        text-align: center;
        font-size: 12px;
    }
.header .container h1{
    font-size: 28px;
	}
}

@media only screen and (max-width: 768px) {
.header .container h1{
    font-size: 28px;
	}


}

.header-style-1 .header-top-ptb-1{
background-color:#184a44 !important;
}

.main-menu>nav>ul>li>a {
    font-size: 20px !important;
    font-weight: 700;
}

.header-info>ul>li a {
    color: white !important;
}

#news-flash{
color:white !important;
}

button.submit, button[type=submit] {   
    border: none !important;
    /* border: 1px solid var(--color-brand-dark); */
}





/* ── policy & legal document styling ──────────────────────────────
   Scoped to .policy-doc so it only affects the policy pages and
   never the shortcode-driven pages that share .ck-content.
   Palette follows the site's existing Ayurvedic scheme: deep forest
   green (#0d463c / #184D45) with warm sand (#f5dcb0 / #d4b08b).
   ----------------------------------------------------------------- */

.policy-doc {
    --pd-green: #184D45;
    --pd-green-soft: #0d463c;
    --pd-sand: #f5dcb0;
    --pd-sand-soft: #fdf7ec;
    --pd-line: #e6e3db;
    --pd-body: #4a4a4a;

    max-width: 1610px;
    margin: 0 auto;
    color: var(--pd-body);
    font-family: var(--font-text), "Lato", sans-serif;
    font-size: 16.5px;
    line-height: 1.75;
}

/* ── headings ── */
.policy-doc h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--pd-green);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    margin: 46px 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pd-sand);
}

.policy-doc h2:first-child {
    margin-top: 0;
}

.policy-doc h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--pd-green-soft);
    font-size: 18.5px;
    font-weight: 700;
    margin: 30px 0 10px;
}

/* ── body copy ── */
.policy-doc p {
    margin: 0 0 16px;
}

.policy-doc strong {
    color: var(--pd-green);
    font-weight: 700;
}

/* the "Last updated:" line that opens every document */
.policy-doc > p:first-child {
    display: inline-block;
    background: var(--pd-sand-soft);
    border: 1px solid var(--pd-sand);
    border-radius: 6px;
    padding: 7px 16px;
    margin-bottom: 30px;
    font-size: 14.5px;
}

.policy-doc > p:first-child strong {
    font-weight: 600;
}

/* ── links ── */
.policy-doc a {
    color: var(--pd-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--pd-sand);
    transition: color .2s, text-decoration-color .2s;
}

.policy-doc a:hover {
    color: #b46e29;
    text-decoration-color: #b46e29;
}

/* ── lists ── */
.policy-doc ul,
.policy-doc ol {
    margin: 0 0 18px;
    padding-left: 0;
}

.policy-doc ul {
    list-style: none;
}

.policy-doc ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
}

.policy-doc ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .68em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pd-green);
}

.policy-doc ol {
    counter-reset: pd-step;
    list-style: none;
}

.policy-doc ol li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 11px;
}

.policy-doc ol li::before {
    counter-increment: pd-step;
    content: counter(pd-step);
    position: absolute;
    left: 0;
    top: .18em;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--pd-green);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 23px;
    text-align: center;
}

/* ── tables ── */
.policy-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 24px;
    font-size: 15.5px;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    overflow: hidden;
}

.policy-doc thead th {
    background: var(--pd-sand-soft);
    color: var(--pd-green);
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-align: left;
    padding: 13px 16px;
    border-bottom: 2px solid var(--pd-sand);
}

.policy-doc tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--pd-line);
    vertical-align: top;
}

.policy-doc tbody tr:last-child td {
    border-bottom: none;
}

.policy-doc tbody tr:nth-child(even) td {
    background: #fcfbf8;
}

/* ── mobile ── */
@media (max-width: 767px) {
    .policy-doc {
        font-size: 16px;
        line-height: 1.7;
    }

    .policy-doc h2 {
        font-size: 21px;
        margin-top: 36px;
    }

    .policy-doc h3 {
        font-size: 17px;
    }

    /* let wide tables scroll instead of breaking the layout */
    .policy-doc table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        border-radius: 6px;
    }

    .policy-doc thead th,
    .policy-doc tbody td {
        padding: 11px 13px;
    }
}

/* ── policies hub: card grid ─────────────────────────────────────── */

/* the hub needs more room than a single-column legal document */
.policy-doc.policy-hub {
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
    margin: 30px 0 50px;
}

.policy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 26px 24px 22px;
    box-shadow: 0 1px 3px rgba(24, 75, 69, .05);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.policy-card:hover {
    transform: translateY(-4px);
    border-color: var(--pd-sand);
    box-shadow: 0 10px 26px -12px rgba(24, 75, 69, .28);
}

.policy-card > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--pd-sand-soft);
    border: 1px solid var(--pd-sand);
    color: var(--pd-green);
    font-size: 19px;
}

.policy-card h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--pd-green);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 9px;
}

.policy-card p {
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 18px;
    flex-grow: 1;
}

.policy-card p strong {
    color: var(--pd-green);
}

/* stretched link - makes the whole card clickable without nesting
   block elements inside an <a>, which the content sanitiser rewrites */
.policy-card-link {
    align-self: flex-start;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pd-green);
    text-decoration: none;
}

.policy-card-link::after {
    content: "\00a0\2192";
    transition: margin-left .2s ease;
}

.policy-card:hover .policy-card-link {
    color: #b46e29;
}

.policy-card:hover .policy-card-link::after {
    margin-left: 4px;
}

.policy-card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

@media (max-width: 575px) {
    .policy-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px 0 40px;
    }

    .policy-card {
        padding: 22px 20px 18px;
    }
}

/* ── order tracking page ─────────────────────────────────────────────
   Botble ships a complete but neutral-grey bb-order-* skin in
   front-ecommerce.css. These rules re-skin it to the Aabhaveda palette
   (deep forest green + warm sand) and are scoped to .order-tracking-page
   so no other ecommerce screen is affected. The extra class in each
   selector also wins on specificity over the plugin's own rules.
   ------------------------------------------------------------------ */

.order-tracking-page {
    --ot-green: #184D45;
    --ot-green-soft: #0d463c;
    --ot-sand: #f5dcb0;
    --ot-sand-soft: #fdf7ec;
    --ot-line: #e6e3db;
    --ot-muted: #7d8480;
}

/* ── lookup form card ──
   One uniform surface. The markup previously relied on Nest demo classes
   (login_wrap / background-white / padding_eight_all) that have no CSS in
   this build, so the card painted transparent over the #f9f9f9 body while
   an inner Bootstrap .bg-white painted a solid white block inside it. */
.order-tracking-page .ot-form-card {
    background: #fff;
    border: 1px solid var(--ot-line);
    border-radius: 12px;
    padding: 34px 32px;
    box-shadow: 0 4px 22px -14px rgba(24, 75, 69, .35);
}

.order-tracking-page .ot-form-heading {
    margin-bottom: 26px;
}

.order-tracking-page .ot-form-heading h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--ot-green);
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 8px;
}

.order-tracking-page .ot-form-heading p {
    color: var(--ot-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
}

.order-tracking-page .ot-form-card .form-label {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ot-green);
    margin-bottom: 6px;
}

.order-tracking-page .ot-form-card .form-control {
    height: auto;
    padding: 12px 16px;
    font-size: 15.5px;
    border: 1px solid var(--ot-line);
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.order-tracking-page .ot-form-card .form-control:focus {
    border-color: var(--ot-green);
    box-shadow: 0 0 0 3px rgba(24, 75, 69, .10);
    outline: none;
}

.order-tracking-page .ot-form-card .btn-primary {
    background: var(--ot-green);
    border-color: var(--ot-green);
    border-radius: 8px;
    padding: 13px 20px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    transition: background-color .2s, transform .15s;
}

.order-tracking-page .ot-form-card .btn-primary:hover {
    background: #b46e29;
    border-color: #b46e29;
    transform: translateY(-1px);
}

.order-tracking-page .ot-form-card .invalid-feedback {
    font-size: 13.5px;
}

/* ── result panels ── */
.order-tracking-page .ot-result .card {
    border: 1px solid var(--ot-line);
    border-radius: 12px;
    box-shadow: 0 2px 14px -10px rgba(24, 75, 69, .3);
    overflow: hidden;
}

.order-tracking-page .ot-result .card-body {
    padding: 26px 28px;
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-section-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ot-green);
    padding-bottom: 11px;
    border-bottom: 2px solid var(--ot-sand);
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-info-item {
    padding: 9px 0;
    border-bottom: 1px dashed var(--ot-line);
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-info-item:last-child {
    border-bottom: none;
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-info-item .label {
    color: var(--ot-muted);
    font-size: 14.5px;
    font-weight: 500;
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-info-item .value {
    color: #2f3a35;
    font-size: 14.5px;
    font-weight: 600;
}

/* ── products ── */
:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-product-card {
    border: 1px solid var(--ot-line);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-product-card:hover {
    border-color: var(--ot-sand);
    box-shadow: 0 6px 18px -12px rgba(24, 75, 69, .3);
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-product-card-name a {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--ot-green);
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-product-card-name a:hover {
    color: #b46e29;
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-product-card-price-item.total .value {
    color: var(--ot-green);
}

/* ── totals ── */
:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-totals {
    background: var(--ot-sand-soft);
    border: 1px solid var(--ot-sand);
    border-radius: 10px;
    padding: 8px 18px;
    margin-top: 22px;
}

:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-totals .bb-order-total-item.grand-total .label,
:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-totals .bb-order-total-item.grand-total .value {
    color: var(--ot-green);
    font-family: var(--font-heading), "Quicksand", sans-serif;
}

/* ── status badges ── */
:is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .value .badge {
    padding: .38rem .7rem;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ── "order could not be found" ── */
.order-tracking-page .ot-result .alert-danger {
    background: #fdf1ee;
    border: 1px solid #f0c9bf;
    color: #8c3520;
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 15px;
}

.order-tracking-page .ot-result .alert-danger svg {
    flex: 0 0 auto;
    color: #b7482c;
}

@media (max-width: 767px) {
    .order-tracking-page {
        padding-top: 50px !important;
        padding-bottom: 60px !important;
    }

    .order-tracking-page .ot-form-card {
        padding: 26px 20px;
    }

    .order-tracking-page .ot-result .card-body {
        padding: 20px 18px;
    }

    :is(.order-tracking-page, .customer-page) .bb-order-detail-wrapper .bb-order-totals {
        padding: 6px 14px;
    }
}

/* ── FAQ shortcode ───────────────────────────────────────────────────
   Moved out of partials/shortcodes/faqs.blade.php so it is cached with
   the rest of the site CSS instead of being inlined on every render.
   The .distributor-* / .faq-* block below is the original distributor
   layout, preserved verbatim; .av-faq-* below it is the accordion used
   on /faq.
   ------------------------------------------------------------------ */

/* ── distributor / trade enquiries (/distributor-queries) ────────────
   The bespoke layout for the "Distributor Queries" FAQ category. Keeps
   the page's warm cream character but harmonised with the site palette
   (#184D45 green, #b46e29 bronze, sand). Two fixes carried in here:

     * the header used to show three avatar images from /customer/Ellipse
       33.png, a path that does not exist - it rendered three broken
       images beside an unsubstantiated "5k Reviews" claim, on a page
       aimed at trade buyers. Both are gone.
     * .faq-answer animated on max-height:500px, which clipped longer
       answers. It now animates grid-template-rows against an inner
       wrapper, so any length opens fully.
   ------------------------------------------------------------------ */

.distributor-container {
    --dq-green: #184D45;
    --dq-green-deep: #0d463c;
    --dq-bronze: #b46e29;
    --dq-cream: #fef2e6;
    --dq-sand: #f0dcc2;
    --dq-muted: #7a6f63;

    max-width: 1610px;
    margin: 60px auto 70px;
    padding: 44px 48px;
    background-color: var(--dq-cream);
    border: 1px solid var(--dq-sand);
    border-radius: 20px;
}

.distributor-container .faq-container {
    max-width: 100%;
    margin: 0;
}

/* ── header ── */
.distributor-container .faq-header {
    display: block;
    margin-bottom: 30px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--dq-sand);
}

.distributor-container .faq-subtitle {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dq-bronze);
    background: #fff;
    border: 1px solid var(--dq-sand);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 14px;
}

.distributor-container .faq-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dq-green);
    margin: 0 0 10px;
}

.distributor-container .faq-lede {
    font-size: 16px;
    line-height: 1.65;
    color: var(--dq-muted);
    margin: 0;
    max-width: 60ch;
}

/* ── accordion ── */
.distributor-container .faq-item {
    background: #fff;
    border: 1px solid var(--dq-sand);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.distributor-container .faq-item:last-of-type {
    margin-bottom: 0;
}

.distributor-container .faq-item:hover {
    border-color: var(--dq-bronze);
}

.distributor-container .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    padding: 17px 20px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dq-green);
    transition: background-color .2s ease;
}

.distributor-container .faq-question:hover {
    background: #fffaf3;
}

.distributor-container .faq-question:focus-visible {
    outline: 2px solid rgba(24, 75, 69, .35);
    outline-offset: -2px;
}

/* arrow becomes a sand disc that rotates on open */
.distributor-container .faq-arrow {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dq-cream);
    border: 1px solid var(--dq-sand);
    color: var(--dq-green);
    font-size: 9px;
    line-height: 1;
    transition: transform .3s ease, background-color .2s ease;
}

.distributor-container .faq-arrow.active {
    transform: rotate(180deg);
    background: var(--dq-sand);
}

/* ── answer: animates on grid rows, so no fixed max-height to clip it ── */
.distributor-container .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
    max-height: none;
    padding: 0;
    overflow: hidden;
}

.distributor-container .faq-answer.active {
    grid-template-rows: 1fr;
}

.distributor-container .faq-answer-inner {
    overflow: hidden;
    min-height: 0;
}

.distributor-container .faq-answer.active .faq-answer-inner {
    padding: 0 20px 18px;
}

.distributor-container .faq-answer p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0 0 11px;
}

.distributor-container .faq-answer p:last-child {
    margin-bottom: 0;
}

.distributor-container .faq-answer a {
    color: var(--dq-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--dq-sand);
}

.distributor-container .faq-answer a:hover {
    color: var(--dq-bronze);
    text-decoration-color: var(--dq-bronze);
}

/* ── closing call to action ── */
.distributor-container .contact-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 22px 24px;
    background: var(--dq-green);
    border: none;
    border-radius: 14px;
}

.distributor-container .contact-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 15px;
    color: #fff;
}

.distributor-container .contact-text strong {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.distributor-container .contact-text span {
    color: rgba(255, 255, 255, .82);
    font-size: 14.5px;
    line-height: 1.5;
}

.distributor-container .contact-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.distributor-container .contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: var(--dq-green);
    border: 1px solid #fff;
    padding: 11px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s, transform .15s;
}

.distributor-container .contact-btn:hover {
    background-color: var(--dq-bronze);
    border-color: var(--dq-bronze);
    color: #fff;
    transform: translateY(-1px);
}

.distributor-container .contact-btn-ghost {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.distributor-container .contact-btn-ghost:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--dq-green);
}

@media (max-width: 991px) {
    .distributor-container {
        margin: 40px auto 50px;
        padding: 32px 28px;
    }

    .distributor-container .faq-title {
        font-size: 25px;
    }
}

@media (max-width: 575px) {
    .distributor-container {
        margin: 28px auto 40px;
        padding: 24px 18px;
        border-radius: 14px;
    }

    .distributor-container .faq-title {
        font-size: 22px;
    }

    .distributor-container .faq-lede {
        font-size: 15px;
    }

    .distributor-container .faq-question {
        font-size: 15.5px;
        padding: 15px 16px;
    }

    .distributor-container .faq-answer.active .faq-answer-inner {
        padding: 0 16px 15px;
    }

    .distributor-container .contact-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 18px;
    }

    .distributor-container .contact-actions {
        width: 100%;
    }

    .distributor-container .contact-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ── /faq accordion ── */

.av-faqs {
    --av-green: #184D45;
    --av-green-soft: #0d463c;
    --av-sand: #f5dcb0;
    --av-sand-soft: #fdf7ec;
    --av-line: #e6e3db;
    --av-muted: #7d8480;

    max-width: 1610px;
    margin: 0 auto;
}

.av-faq-group + .av-faq-group {
    margin-top: 46px;
}

.av-faq-group-head {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--av-sand);
}

.av-faq-group-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: var(--av-green);
    margin: 0 0 5px;
}

.av-faq-group-desc {
    font-size: 15px;
    color: var(--av-muted);
    margin: 0;
    line-height: 1.6;
}

/* accordion shell - Bootstrap 5 paints its own borders/backgrounds, so reset first */
.av-faqs .av-faq-accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
    background: transparent;
}

.av-faqs .av-faq-item {
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.av-faqs .av-faq-item:last-child {
    margin-bottom: 0;
}

.av-faqs .av-faq-item:hover {
    border-color: var(--av-sand);
}

.av-faqs .av-faq-item:has(.av-faq-question:not(.collapsed)) {
    border-color: var(--av-sand);
    box-shadow: 0 8px 22px -16px rgba(24, 75, 69, .45);
}

.av-faqs .av-faq-header {
    margin: 0;
}

.av-faqs .av-faq-question {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--av-green);
    background: #fff;
    padding: 17px 20px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    text-align: left;
    transition: background-color .2s ease, color .2s ease;
}

.av-faqs .av-faq-question:not(.collapsed) {
    background: var(--av-sand-soft);
    color: var(--av-green);
    box-shadow: none;
}

.av-faqs .av-faq-question:hover {
    background: var(--av-sand-soft);
}

.av-faqs .av-faq-question:focus {
    box-shadow: none;
    outline: 2px solid rgba(24, 75, 69, .25);
    outline-offset: -2px;
}

/* replace Bootstrap's blue chevron with a sand circle + green chevron */
.av-faqs .av-faq-question::after {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-left: 14px;
    background-color: var(--av-sand-soft);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23184b45'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--av-sand);
    border-radius: 50%;
    transition: transform .25s ease, background-color .2s ease;
}

.av-faqs .av-faq-question:not(.collapsed)::after {
    background-color: var(--av-sand);
    transform: rotate(-180deg);
}

.av-faqs .av-faq-answer {
    padding: 4px 20px 20px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #4a4a4a;
}

.av-faqs .av-faq-answer p {
    margin: 0 0 12px;
}

.av-faqs .av-faq-answer p:last-child {
    margin-bottom: 0;
}

.av-faqs .av-faq-answer strong {
    color: var(--av-green);
    font-weight: 700;
}

.av-faqs .av-faq-answer a {
    color: var(--av-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--av-sand);
}

.av-faqs .av-faq-answer a:hover {
    color: #b46e29;
    text-decoration-color: #b46e29;
}

.av-faqs .av-faq-answer ul {
    margin: 0 0 12px;
    padding-left: 0;
    list-style: none;
}

.av-faqs .av-faq-answer ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
}

.av-faqs .av-faq-answer ul li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .68em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--av-green);
}

/* ── "still need help" ── */
.av-faq-help {
    margin-top: 46px;
    padding: 30px 28px;
    background: var(--av-sand-soft);
    border: 1px solid var(--av-sand);
    border-radius: 12px;
    text-align: center;
}

.av-faq-help h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--av-green);
    margin: 0 0 7px;
}

.av-faq-help > p {
    color: var(--av-muted);
    font-size: 15px;
    margin: 0 0 20px;
}

.av-faq-help-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
}

.av-faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 19px;
    border-radius: 8px;
    background: var(--av-green);
    border: 1px solid var(--av-green);
    color: #fff;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, color .2s, transform .15s;
}

.av-faq-btn:hover {
    background: #b46e29;
    border-color: #b46e29;
    color: #fff;
    transform: translateY(-1px);
}

.av-faq-btn-ghost {
    background: #fff;
    color: var(--av-green);
}

.av-faq-btn-ghost:hover {
    background: var(--av-green);
    border-color: var(--av-green);
    color: #fff;
}

.av-faq-help-note {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--av-muted);
}

@media (max-width: 767px) {
    .av-faq-group-title {
        font-size: 20px;
    }

    .av-faqs .av-faq-question {
        font-size: 15.5px;
        padding: 15px 16px;
    }

    .av-faqs .av-faq-answer {
        padding: 4px 16px 17px;
        font-size: 15px;
    }

    .av-faq-help {
        padding: 24px 18px;
    }

    .av-faq-help-actions {
        flex-direction: column;
    }

    .av-faq-btn {
        justify-content: center;
    }
}

/* ── customer account area ───────────────────────────────────────────
   Surface hierarchy, which is what was going wrong before:

     .dashboard-content
       > .card                          structural only - NO surface
           > .bb-customer-content-wrapper   container only - NO surface
               > .card / .bb-customer-card     THE surfaces, one level deep

   Botble's master template wraps @yield('content') in a Bootstrap .card,
   which carries its own white background and 1px border, and each page then
   adds its own cards inside; front-ecommerce.css additionally paints
   .bb-customer-content-wrapper grey (#f9fafb). Three stacked surfaces meant
   borders inside borders and white-on-grey-on-white. Every page's content is
   already a card list or card panel, so the two outer levels are stripped and
   the cards alone carry the surface.

   front-ecommerce.css is also written for a different Botble theme and calls
   custom properties Nest never defines (--tp-theme-primary, --primary-rgb,
   --text-color, --bb-secondary, --bb-font-weight-light, --bb-rating-size,
   plus two Bootstrap 5.3 vars this build predates). A var() with no fallback
   invalidates the whole declaration, so those rules were dropped silently.
   ------------------------------------------------------------------ */

.customer-page {
    --cust-green: #184D45;
    --cust-green-deep: #0d463c;
    --cust-bronze: #b46e29;
    --cust-sand: #f5dcb0;
    --cust-sand-soft: #fdf7ec;
    --cust-line: #e6e3db;
    --cust-line-soft: #f0eee9;
    --cust-muted: #7d8480;
    --cust-ink: #2f3a35;

    /* remap Bootstrap's themed utilities off stock blue */
    --bs-primary: #184D45;
    --bs-primary-rgb: 24, 75, 69;
    --bs-link-color: #184D45;
    --bs-link-hover-color: #b46e29;

    /* properties front-ecommerce.css expects but Nest never defines */
    --tp-theme-primary: #184D45;
    --primary-rgb: 24, 75, 69;
    --text-color: #4a4a4a;
    --bb-secondary: #7d8480;
    --bb-font-weight-light: 400;
    --bb-rating-size: 15px;
    --bs-emphasis-color: #16201b;
    --bs-border-radius: .5rem;
}

/* Bootstrap 5.1.3 ships bg-opacity-10/25/50/75/100; the templates ask for
   bg-opacity-20, so those icon circles were rendering at full opacity. */
.customer-page .bg-opacity-20 {
    --bs-bg-opacity: .2;
}

/* ── 1. structural wrapper: no surface of its own ── */
.customer-page .dashboard-content > .tab-pane > .card,
.customer-page .tab-content > .tab-pane > .card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ── 2. content wrapper: a container, not a panel ──
   front-ecommerce.css paints it grey (#f9fafb) with padding. Every page's
   content is already a list of cards, so a panel here would only wrap boxes
   in another box. Strip it and let the cards be the surfaces. */
.customer-page .bb-customer-content-wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* overview has no content wrapper - its own blocks are the surfaces */
.customer-page .bb-customer-profile-wrapper {
    background: var(--cust-sand-soft);
    border: 1px solid var(--cust-sand);
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 24px;
}

.customer-page .bb-customer-profile-info h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--cust-green);
    font-weight: 700;
}

.customer-page .bb-customer-profile-info h2 strong {
    color: var(--cust-bronze);
}

.customer-page .bb-customer-profile-info p {
    color: var(--cust-muted);
}

.customer-page .bb-customer-profile-avatar-img {
    border: 3px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 16px -8px rgba(24, 75, 69, .5);
}

/* ── 3. the surfaces: one level, never nested ── */
.customer-page .bb-customer-content-wrapper > * > .card,
.customer-page .bb-order-detail-wrapper > .card {
    background: #fff;
    border: 1px solid var(--cust-line);
    border-radius: 14px;
    box-shadow: 0 2px 18px -14px rgba(24, 75, 69, .4);
    margin-bottom: 18px;
}

.customer-page .bb-order-detail-wrapper > .card:last-child {
    margin-bottom: 0;
}

/* ── sidebar ── */
.customer-page .dashboard-menu ul li {
    border: 1px solid var(--cust-line);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}

.customer-page .dashboard-menu ul li a {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 600;
    color: var(--cust-ink);
    transition: background-color .18s ease, color .18s ease;
}

.customer-page .dashboard-menu ul li a:hover {
    background-color: var(--cust-sand-soft);
    color: var(--cust-green);
}

.customer-page .dashboard-menu ul li a.active {
    background-color: var(--cust-green);
    color: #fff;
}

.customer-page .dashboard-menu ul li a.active i,
.customer-page .dashboard-menu ul li a.active svg,
.customer-page .dashboard-menu ul li a.active .icon {
    color: #fff;
}

/* ── typography ── */
.customer-page h1,
.customer-page h2,
.customer-page h3,
.customer-page h4,
.customer-page h5,
.customer-page .card-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: var(--cust-green);
    font-weight: 700;
}

.customer-page .text-muted {
    color: var(--cust-muted) !important;
}

/* ── quick-action cards (overview only) ── */
.customer-page .card.bg-primary.bg-opacity-10,
.customer-page .card.bg-success.bg-opacity-10,
.customer-page .card.bg-warning.bg-opacity-10 {
    border: 1px solid var(--cust-line) !important;
    border-radius: 12px;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.customer-page .card.bg-primary.bg-opacity-10:hover,
.customer-page .card.bg-success.bg-opacity-10:hover,
.customer-page .card.bg-warning.bg-opacity-10:hover {
    transform: translateY(-3px);
    border-color: var(--cust-sand) !important;
    box-shadow: 0 10px 26px -16px rgba(24, 75, 69, .45);
}

.customer-page .card.bg-primary.bg-opacity-10 { background-color: rgba(24, 75, 69, .05) !important; }
.customer-page .card.bg-success.bg-opacity-10 { background-color: rgba(180, 110, 41, .06) !important; }
.customer-page .card.bg-warning.bg-opacity-10 { background-color: rgba(13, 70, 60, .05) !important; }

/* Two kinds of icon circle, and they must not be styled alike:
     bg-opacity-20 (overview)  - solid fill, white glyph
     bg-opacity-10 (address,
       edit-account)           - faint tint, COLOURED glyph
   Forcing every circle solid with a white glyph makes the tinted ones
   invisible, so each is handled separately. */
.customer-page .rounded-circle.bg-opacity-20.bg-primary { background-color: var(--cust-green) !important; }
.customer-page .rounded-circle.bg-opacity-20.bg-success { background-color: var(--cust-bronze) !important; }
.customer-page .rounded-circle.bg-opacity-20.bg-warning { background-color: var(--cust-green-deep) !important; }

.customer-page .rounded-circle.bg-opacity-20 svg,
.customer-page .rounded-circle.bg-opacity-20 .icon {
    color: #fff;
}

.customer-page .rounded-circle.bg-opacity-10.bg-primary { background-color: rgba(24, 75, 69, .10) !important; }
.customer-page .rounded-circle.bg-opacity-10.bg-warning { background-color: rgba(180, 110, 41, .13) !important; }

.customer-page .rounded-circle.bg-opacity-10 .text-primary { color: var(--cust-green) !important; }
.customer-page .rounded-circle.bg-opacity-10 .text-warning { color: var(--cust-bronze) !important; }
/* bg-danger keeps Bootstrap red - it marks the delete-account action */

/* ── order / address cards ── */
.customer-page .bb-customer-card {
    background: #fff;
    border: 1px solid var(--cust-line) !important;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.customer-page .bb-customer-card:last-child {
    margin-bottom: 0;
}

.customer-page .bb-customer-card:hover {
    border-color: var(--cust-sand) !important;
    box-shadow: 0 8px 22px -16px rgba(24, 75, 69, .4);
}

.customer-page .bb-customer-card .bb-customer-card-header {
    background: var(--cust-sand-soft);
    border-bottom: 1px solid var(--cust-line-soft);
}

.customer-page .bb-customer-card .bb-customer-card-title .label {
    color: var(--cust-muted);
}

.customer-page .bb-customer-card .bb-customer-card-title .value {
    color: var(--cust-green);
    font-weight: 700;
}

.customer-page .bb-customer-card .bb-customer-card-footer {
    border-top: 1px solid var(--cust-line-soft);
    background: #fff;
}

/* ── buttons ── */
.customer-page .btn {
    border-radius: 8px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
}

.customer-page .btn-primary {
    background-color: var(--cust-green);
    border-color: var(--cust-green);
    color: #fff;
}

.customer-page .btn-primary:hover,
.customer-page .btn-primary:focus {
    background-color: var(--cust-bronze);
    border-color: var(--cust-bronze);
    color: #fff;
}

.customer-page .btn-primary:active,
.customer-page .btn-primary:focus-visible {
    background-color: var(--cust-green-deep);
    border-color: var(--cust-green-deep);
    box-shadow: 0 0 0 3px rgba(24, 75, 69, .18);
}

/* "Print invoice" / "Download invoice" - neutral actions, not success states */
.customer-page .btn-success {
    background-color: var(--cust-bronze);
    border-color: var(--cust-bronze);
    color: #fff;
}

.customer-page .btn-success:hover,
.customer-page .btn-success:focus {
    background-color: #9a5d22;
    border-color: #9a5d22;
    color: #fff;
}

.customer-page .btn-warning {
    background-color: var(--cust-green-deep);
    border-color: var(--cust-green-deep);
    color: #fff;
}

.customer-page .btn-warning:hover,
.customer-page .btn-warning:focus {
    background-color: var(--cust-bronze);
    border-color: var(--cust-bronze);
    color: #fff;
}

.customer-page .btn-outline-primary {
    color: var(--cust-green);
    border-color: var(--cust-green);
}

.customer-page .btn-outline-primary:hover {
    background-color: var(--cust-green);
    border-color: var(--cust-green);
    color: #fff;
}

/* ── forms ── */
.customer-page .form-label {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--cust-green);
    margin-bottom: 6px;
}

.customer-page .form-control,
.customer-page .form-select {
    border: 1px solid var(--cust-line);
    border-radius: 8px;
    padding: 11px 15px;
}

.customer-page .form-control:focus,
.customer-page .form-select:focus {
    border-color: var(--cust-green);
    box-shadow: 0 0 0 3px rgba(24, 75, 69, .10);
}

/* ── links ── */
.customer-page a:not(.btn):not(.nav-link) {
    color: var(--cust-green);
}

.customer-page a:not(.btn):not(.nav-link):hover {
    color: var(--cust-bronze);
}

.customer-page .text-primary {
    color: var(--cust-green) !important;
}

/* ── empty state ── */
.customer-page .bb-customer-content-wrapper svg[id="Layer_1"] {
    max-width: 300px;
    height: auto;
}

/* ── status badges ──
   The markup pairs bg-* with Tabler's text-*-fg helpers, which this build
   never loads, and Bootstrap's .badge falls back to color:#fff - so
   bg-warning (#ffc107) and bg-info (#0dcaf0) rendered white-on-light.
   bg-danger keeps Bootstrap red: cancelled orders should stay red. */
:is(.order-tracking-page, .customer-page) .badge {
    padding: .4rem .75rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

:is(.order-tracking-page, .customer-page) .badge.bg-warning {
    background-color: #f5dcb0 !important;
    color: #6b4410 !important;
}

:is(.order-tracking-page, .customer-page) .badge.bg-info {
    background-color: #dceceb !important;
    color: #14504a !important;
}

:is(.order-tracking-page, .customer-page) .badge.bg-success {
    background-color: #184D45 !important;
    color: #fff !important;
}

:is(.order-tracking-page, .customer-page) .badge.bg-secondary {
    background-color: #eceae4 !important;
    color: #55605a !important;
}

.customer-page .badge.bg-primary {
    background-color: var(--cust-green) !important;
    color: #fff !important;
}

.customer-page .bb-order-detail-wrapper .card-body {
    padding: 24px 26px;
}

/* ── responsive ──
   .pl-50 is a hard 50px !important from the theme; at the md breakpoint the
   3/9 column split plus that padding squeezes the panel badly. */
@media (max-width: 1199px) {
    .customer-page .dashboard-content.pl-50 {
        padding-left: 26px !important;
    }
}

@media (max-width: 991px) {
    .customer-page .dashboard-content.pl-50 {
        padding-left: 0 !important;
        margin-top: 28px;
    }

    .customer-page .bb-customer-content-wrapper,
    .customer-page .bb-customer-profile-wrapper {
        padding: 20px 18px;
    }
}

@media (max-width: 767px) {
    .customer-page {
        padding-top: 30px !important;
        padding-bottom: 60px !important;
    }

    .customer-page .bb-customer-content-wrapper,
    .customer-page .bb-customer-profile-wrapper {
        padding: 18px 16px;
        border-radius: 12px;
    }

    .customer-page .bb-customer-profile-wrapper .col-auto {
        margin-bottom: 14px;
    }
}

/* ── "Need another address?" prompt (address page) ──
   Ships as .card.border-0.bg-light, i.e. Bootstrap grey. Make it a sand
   prompt panel so it reads as a call to action, not a data card. */
.customer-page .card.bg-light {
    background-color: var(--cust-sand-soft) !important;
    border: 1px solid var(--cust-sand) !important;
    border-radius: 14px;
    box-shadow: none;
}

/* ── sticky footer ───────────────────────────────────────────────────
   The layouts render header / <main> / <footer> as siblings inside <body>
   with nothing making the page fill the viewport, so on short pages - an
   empty cart, an empty wishlist, a thin CMS page - the footer stopped
   partway up the screen with blank space beneath it.

   Make <body> a flex column and let <main> absorb the slack. flex-shrink:0
   on every child keeps natural heights so nothing sized by content gets
   squashed. Everything rendered after </footer> (the quick-view modal, the
   mobile bottom bar, the floating buttons, the cookie notice) is
   fixed-positioned or empty, so it is out of flow and unaffected; the
   sticky header is .sticky-bar *inside* <header>, not a body child.
   ------------------------------------------------------------------ */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > * {
    flex-shrink: 0;
}

body > main,
body > #main-section {
    flex: 1 0 auto;
}

body > footer,
body > .footer {
    margin-top: auto;
}

/* ── /distributor-queries page content (above the FAQ block) ─────────
   Matches the .distributor-container width so intro and FAQ line up.
   ------------------------------------------------------------------ */

.dq-page {
    --dq-green: #184D45;
    --dq-green-deep: #0d463c;
    --dq-bronze: #b46e29;
    --dq-cream: #fef2e6;
    --dq-sand: #f0dcc2;
    --dq-line: #e6e3db;
    --dq-muted: #6f7a74;

    max-width: 1610px;
    margin: 0 auto;
}

.dq-intro {
    text-align: center;
    padding: 6px 0 34px;
}

.dq-eyebrow {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dq-bronze);
    background: var(--dq-cream);
    border: 1px solid var(--dq-sand);
    border-radius: 999px;
    padding: 5px 14px;
    margin: 0 0 16px;
}

.dq-intro h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--dq-green);
    margin: 0 0 16px;
    text-wrap: balance;
}

.dq-lede {
    font-size: 16.5px;
    line-height: 1.72;
    color: #4a4a4a;
    max-width: 68ch;
    margin: 0 auto 12px;
}

.dq-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 24px;
}

.dq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--dq-green);
    border: 1px solid var(--dq-green);
    color: #fff;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}

.dq-btn:hover {
    background: var(--dq-bronze);
    border-color: var(--dq-bronze);
    color: #fff;
    transform: translateY(-1px);
}

.dq-btn-ghost {
    background: #fff;
    color: var(--dq-green);
}

.dq-btn-ghost:hover {
    background: var(--dq-green);
    border-color: var(--dq-green);
    color: #fff;
}

/* ── the four cards ── */
.dq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}

.dq-card {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 14px;
    padding: 26px 24px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dq-card:hover {
    transform: translateY(-3px);
    border-color: var(--dq-sand);
    box-shadow: 0 10px 26px -16px rgba(24, 75, 69, .42);
}

.dq-card > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: var(--dq-cream);
    border: 1px solid var(--dq-sand);
    color: var(--dq-green);
    font-size: 18px;
}

.dq-card h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 17.5px;
    font-weight: 700;
    color: var(--dq-green);
    margin: 0 0 9px;
}

.dq-card p {
    font-size: 15px;
    line-height: 1.66;
    color: #4a4a4a;
    margin: 0;
}

/* ── commercial-terms note ── */
.dq-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 20px 22px;
    background: var(--dq-cream);
    border: 1px solid var(--dq-sand);
    border-radius: 14px;
}

.dq-note > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--dq-bronze);
    font-size: 17px;
}

.dq-note p {
    margin: 0;
    font-size: 15px;
    line-height: 1.68;
    color: #4a4a4a;
}

.dq-note strong {
    color: var(--dq-green);
}

@media (max-width: 575px) {
    .dq-intro {
        padding: 0 0 26px;
    }

    .dq-intro h2 {
        font-size: 24px;
    }

    .dq-lede {
        font-size: 15.5px;
    }

    .dq-actions {
        flex-direction: column;
    }

    .dq-btn {
        justify-content: center;
    }

    .dq-card {
        padding: 22px 18px;
    }

    .dq-note {
        padding: 17px 16px;
    }
}

/* ── contact us page ─────────────────────────────────────────────────
   Moved out of partials/shortcodes/contact-form.blade.php. Two rules in
   that inline block were unscoped and leaking across the whole page:
   ".icon { width:24px; height:24px; margin-right:15px }" caught every
   Tabler icon including the floating WhatsApp button, and
   ".map-section, iframe {...}" was a bare iframe selector. Everything
   here is scoped to .contactus-container or .google-map-iframe.
   Six dead selectors (.location-card, .map-section, .rating, .stars,
   .reviews, .submit-btn) were dropped - nothing renders them.
   ------------------------------------------------------------------ */

.contactus-container {
    --cu-green: #184D45;
    --cu-green-deep: #0d463c;
    --cu-bronze: #b46e29;
    --cu-cream: #fef2e6;
    --cu-sand: #f0dcc2;
    --cu-line: #e6e3db;
    --cu-muted: #6f7a74;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 34px;
    padding-bottom: 1.5rem;
}

/* ── left: office details ── */
.contactus-container .info-section {
    flex: 1 1 340px;
    min-width: 300px;
}

.contactus-container .small-header {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cu-bronze);
    background: var(--cu-cream);
    border: 1px solid var(--cu-sand);
    border-radius: 999px;
    padding: 5px 14px;
    margin: 0 0 14px;
}

.contactus-container .info-section h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cu-green);
    margin-bottom: 8px;
}

.contactus-container .office-info {
    margin-bottom: 0;
}

.contactus-container .info-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    margin: 22px 0 18px;
    color: var(--cu-muted);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* each contact row is a card rather than a bare flex row */
.contactus-container .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cu-line);
    border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.contactus-container .contact-item:last-child {
    margin-bottom: 0;
}

.contactus-container .contact-item:hover {
    transform: translateY(-2px);
    border-color: var(--cu-sand);
    box-shadow: 0 10px 24px -18px rgba(24, 75, 69, .5);
}

/* scoped - the old rule styled every .icon on the page */
.contactus-container .contact-item .icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cu-cream);
    border: 1px solid var(--cu-sand);
    border-radius: 50%;
    color: var(--cu-green);
}

.contactus-container .contact-item .icon svg {
    width: 20px;
    height: 20px;
}

.contactus-container .contact-details {
    flex: 1;
    min-width: 0;
}

.contactus-container .contact-details h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 16.5px;
    margin-bottom: 5px;
    font-weight: 700;
    color: var(--cu-green);
}

.contactus-container .contact-details p {
    font-size: 15px;
    line-height: 1.62;
    color: #4a4a4a;
    margin-bottom: 0;
}

.contactus-container .contact-details a {
    color: var(--cu-green);
    text-decoration: none;
    transition: color .2s ease;
}

.contactus-container .contact-details a:hover {
    color: var(--cu-bronze);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contactus-container .office-hours {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--cu-line);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cu-muted);
}

/* ── right: the form ── */
.contactus-container .form-section {
    flex: 1 1 380px;
    min-width: 300px;
    background-color: var(--cu-cream);
    border: 1px solid var(--cu-sand);
    padding: 34px 32px;
    border-radius: 20px;
}

.contactus-container .form-section h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 26px;
    color: var(--cu-green);
    margin-bottom: 6px;
    font-weight: 700;
}

.contactus-container .form-section > .text-muted {
    color: var(--cu-muted) !important;
    font-size: 15px;
    margin-bottom: 24px !important;
}

.contactus-container .form-group {
    margin-bottom: 18px;
    flex: 1;
}

.contactus-container .form-row {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
}

.contactus-container .form-group label {
    display: block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    margin-bottom: 7px;
    color: var(--cu-green);
    font-weight: 700;
}

.contactus-container .form-group input,
.contactus-container .form-group textarea,
.contactus-container .form-control {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--cu-sand);
    border-radius: 9px;
    font-size: 15.5px;
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contactus-container .form-group input:focus,
.contactus-container .form-group textarea:focus,
.contactus-container .form-control:focus {
    border-color: var(--cu-green);
    box-shadow: 0 0 0 3px rgba(24, 75, 69, .10);
    outline: none;
}

.contactus-container .form-group input::placeholder,
.contactus-container .form-group textarea::placeholder,
.contactus-container .form-control::placeholder {
    opacity: 1;
    color: #9aa29d;
}

.contactus-container .form-group textarea,
.contactus-container textarea.form-control {
    height: 150px;
    resize: vertical;
}

.contactus-container .form-section button[type="submit"],
.contactus-container .form-section .submit {
    min-width: 200px;
    padding: 13px 26px;
    background-color: var(--cu-green);
    color: #fff;
    border: 1px solid var(--cu-green);
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    transition: background-color .2s, border-color .2s, transform .15s;
}

.contactus-container .form-section button[type="submit"]:hover,
.contactus-container .form-section .submit:hover {
    background-color: var(--cu-bronze);
    border-color: var(--cu-bronze);
    transform: translateY(-1px);
}

/* ── the map below the form ── */
.google-map-iframe {
    margin-top: 10px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6e3db;
    line-height: 0;
}

.google-map-iframe iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
}

@media (max-width: 991px) {
    .contactus-container {
        gap: 26px;
    }

    .contactus-container .info-section h2 {
        font-size: 27px;
    }

    .contactus-container .form-section {
        padding: 28px 22px;
    }
}

@media (max-width: 575px) {
    .contactus-container .info-section h2 {
        font-size: 23px;
    }

    .contactus-container .contact-item {
        padding: 16px;
        gap: 13px;
    }

    .contactus-container .form-row {
        flex-direction: column;
        gap: 0;
    }

    .contactus-container .form-section button[type="submit"],
    .contactus-container .form-section .submit {
        width: 100%;
    }

    .google-map-iframe iframe {
        height: 320px;
    }
}

/* ── sitemap (tree) ──────────────────────────────────────────────────
   Moved out of views/sitemap.blade.php. The old inline version drew a
   horizontal connector on every .sitemap_li, including top-level ones
   that had no parent line to connect to, so those rendered as orphan
   dashes. Here the vertical rail is drawn per item and trimmed at the
   last child, which is what makes it read as a real tree.
   ------------------------------------------------------------------ */

.av-sitemap {
    --sm-green: #184D45;
    --sm-bronze: #b46e29;
    --sm-cream: #fef2e6;
    --sm-sand: #f0dcc2;
    --sm-line: #d9dcd6;
    --sm-muted: #6f7a74;

    padding: 8px 0 60px;
}

.av-sitemap-lede {
    font-size: 16px;
    line-height: 1.7;
    color: var(--sm-muted);
    margin-bottom: 30px;
}

.av-sitemap-lede a {
    color: var(--sm-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--sm-sand);
}

.av-sitemap-lede a:hover {
    color: var(--sm-bronze);
}

/* ── section ── */
.av-sitemap-branch {
    margin-bottom: 34px;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid #e6e3db;
    border-radius: 16px;
}

.av-sitemap-branch:last-child {
    margin-bottom: 0;
}

.av-sitemap-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--sm-green);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--sm-sand);
}

.av-sitemap-title i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sm-cream);
    border: 1px solid var(--sm-sand);
    color: var(--sm-green);
    font-size: 15px;
}

.av-sitemap-count {
    margin-left: auto;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sm-bronze);
    background: var(--sm-cream);
    border: 1px solid var(--sm-sand);
    border-radius: 999px;
    padding: 4px 12px;
}

/* ── the tree itself ── */
.av-sitemap .av-tree {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* nested levels indent and inherit the rail */
.av-sitemap .av-tree .av-tree {
    padding-left: 18px;
    margin-top: 4px;
}

.av-sitemap .av-tree li {
    position: relative;
    padding: 3px 0 3px 26px;
    line-height: 1.55;
}

/* vertical rail */
.av-sitemap .av-tree li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--sm-line);
}

/* trim the rail at the last child so the branch ends cleanly */
.av-sitemap .av-tree li:last-child::before {
    bottom: auto;
    height: 15px;
}

/* horizontal elbow */
.av-sitemap .av-tree li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 17px;
    border-top: 1px solid var(--sm-line);
}

.av-sitemap .av-tree a {
    color: #33403a;
    font-size: 15.5px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.av-sitemap .av-tree a:hover {
    color: var(--sm-bronze);
    border-bottom-color: var(--sm-sand);
}

/* a top-level branch item reads as a heading for its children */
.av-sitemap .av-tree > li > a {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--sm-green);
    font-size: 16px;
}

.av-sitemap .av-tree > li > a:hover {
    color: var(--sm-bronze);
}

.av-tree-label {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--sm-green);
    font-size: 16px;
}

.av-tree-count {
    display: inline-block;
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sm-muted);
    background: #f4f2ee;
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: 1px;
}

@media (max-width: 575px) {
    .av-sitemap-branch {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .av-sitemap-title {
        font-size: 18px;
        gap: 9px;
    }

    .av-sitemap-count {
        margin-left: 0;
        flex-basis: 100%;
    }

    .av-sitemap .av-tree li {
        padding-left: 22px;
    }

    .av-sitemap .av-tree .av-tree {
        padding-left: 14px;
    }
}

/* ── careers (plugin: digitechminer/careers) ─────────────────────────
   Grid of open positions, detail page and application form.
   ------------------------------------------------------------------ */

.av-careers {
    --cr-green: #184D45;
    --cr-green-deep: #0d463c;
    --cr-bronze: #b46e29;
    --cr-cream: #fef2e6;
    --cr-sand: #f0dcc2;
    --cr-line: #e6e3db;
    --cr-muted: #6f7a74;

    padding: 10px 0 70px;
}

.av-careers-intro {
    text-align: center;
    margin-bottom: 34px;
}

.av-careers-eyebrow {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cr-bronze);
    background: var(--cr-cream);
    border: 1px solid var(--cr-sand);
    border-radius: 999px;
    padding: 5px 14px;
    margin: 0 0 15px;
}

.av-careers-intro h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--cr-green);
    margin: 0 0 14px;
    text-wrap: balance;
}

.av-careers-lede {
    font-size: 16.5px;
    line-height: 1.7;
    color: #4a4a4a;
    max-width: 68ch;
    margin: 0 auto 10px;
}

.av-careers-count {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--cr-muted);
    font-size: 14.5px;
    margin: 0;
}

/* ── grid ── */
.av-careers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.av-career-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cr-line);
    border-radius: 16px;
    padding: 26px 24px 22px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.av-career-card:hover {
    transform: translateY(-4px);
    border-color: var(--cr-sand);
    box-shadow: 0 14px 30px -20px rgba(24, 75, 69, .5);
}

.av-career-flag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cr-bronze);
    background: var(--cr-cream);
    border: 1px solid var(--cr-sand);
    border-radius: 999px;
    padding: 3px 10px;
}

.av-career-card h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--cr-green);
    margin: 0 0 12px;
    padding-right: 70px;
    line-height: 1.35;
}

.av-career-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 13px;
}

.av-career-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--cr-muted);
}

.av-career-meta i {
    color: var(--cr-bronze);
    font-size: 12.5px;
}

.av-career-summary {
    font-size: 15px;
    line-height: 1.65;
    color: #4a4a4a;
    margin: 0 0 18px;
    flex-grow: 1;
}

.av-career-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid var(--cr-line);
}

.av-career-openings {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cr-muted);
    background: #f4f2ee;
    border-radius: 999px;
    padding: 3px 10px;
}

.av-career-link {
    margin-left: auto;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cr-green);
    text-decoration: none;
}

.av-career-link::after {
    content: "\00a0\2192";
    transition: margin-left .2s ease;
}

.av-career-card:hover .av-career-link {
    color: var(--cr-bronze);
}

.av-career-card:hover .av-career-link::after {
    margin-left: 4px;
}

/* whole card clickable, without nesting blocks in an anchor */
.av-career-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}

/* ── empty state ── */
.av-careers-empty {
    text-align: center;
    padding: 52px 24px;
    background: var(--cr-cream);
    border: 1px solid var(--cr-sand);
    border-radius: 16px;
    margin-bottom: 32px;
}

.av-careers-empty i {
    font-size: 30px;
    color: var(--cr-bronze);
    margin-bottom: 14px;
}

.av-careers-empty h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--cr-green);
    margin: 0 0 8px;
}

.av-careers-empty p {
    color: var(--cr-muted);
    margin: 0;
    max-width: 56ch;
    margin-inline: auto;
}

/* ── speculative banner ── */
.av-careers-speculative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 24px 26px;
    background: var(--cr-green);
    border-radius: 16px;
    margin-bottom: 34px;
}

.av-careers-speculative h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
}

.av-careers-speculative p {
    color: rgba(255, 255, 255, .82);
    font-size: 14.5px;
    margin: 0;
    max-width: 62ch;
}

.av-careers-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #fff;
    color: var(--cr-green);
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s, transform .15s;
}

.av-careers-btn:hover {
    background: var(--cr-bronze);
    border-color: var(--cr-bronze);
    color: #fff;
    transform: translateY(-1px);
}

.av-careers-btn-solid {
    background: var(--cr-green);
    border-color: var(--cr-green);
    color: #fff;
    cursor: pointer;
}

.av-careers-btn-solid:hover {
    background: var(--cr-bronze);
    border-color: var(--cr-bronze);
    color: #fff;
}

/* ── detail ── */
.av-career-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--cr-green);
    text-decoration: none;
    margin-bottom: 20px;
}

.av-career-back:hover {
    color: var(--cr-bronze);
}

.av-career-head {
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--cr-sand);
}

.av-career-head h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 31px;
    font-weight: 700;
    color: var(--cr-green);
    margin: 0 0 14px;
    line-height: 1.22;
}

.av-career-closing {
    margin: 12px 0 0;
    font-size: 14.5px;
    color: var(--cr-bronze);
    font-weight: 600;
}

.av-career-body section {
    margin-bottom: 26px;
}

.av-career-body h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--cr-green);
    margin: 0 0 11px;
}

.av-career-body p {
    font-size: 16px;
    line-height: 1.72;
    color: #4a4a4a;
    margin: 0 0 13px;
}

.av-career-body ul {
    margin: 0 0 14px;
    padding-left: 0;
    list-style: none;
}

.av-career-body ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
}

.av-career-body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cr-green);
}

/* ── application form ── */
.av-careers-form-wrap {
    margin-top: 34px;
    padding: 32px 30px;
    background: var(--cr-cream);
    border: 1px solid var(--cr-sand);
    border-radius: 18px;
}

.av-careers-form h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--cr-green);
    margin: 0 0 22px;
}

.av-careers-form-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.av-careers-form-row .av-careers-field {
    flex: 1 1 240px;
}

.av-careers-field {
    margin-bottom: 18px;
}

.av-careers-field label {
    display: block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cr-green);
    margin-bottom: 7px;
}

.av-careers-field label span {
    color: #b03a2e;
}

.av-careers-field input,
.av-careers-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--cr-sand);
    border-radius: 9px;
    background: #fff;
    font-size: 15.5px;
    transition: border-color .2s, box-shadow .2s;
}

.av-careers-field input:focus,
.av-careers-field textarea:focus {
    border-color: var(--cr-green);
    box-shadow: 0 0 0 3px rgba(24, 75, 69, .10);
    outline: none;
}

.av-careers-field input[type="file"] {
    padding: 10px 12px;
    background: #fff;
}

.av-careers-field small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--cr-muted);
}

.av-careers-referral {
    border: 1px dashed var(--cr-sand);
    border-radius: 12px;
    padding: 18px 18px 2px;
    margin-bottom: 20px;
}

.av-careers-referral legend {
    float: none;
    width: auto;
    padding: 0 8px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cr-muted);
}

/* ── alerts ── */
.av-careers-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px 18px;
    border-radius: 11px;
    margin-bottom: 22px;
    font-size: 15px;
}

.av-careers-alert ul {
    margin: 0;
    padding-left: 18px;
}

.av-careers-alert-ok {
    background: #e6f2ec;
    border: 1px solid #b9dbc9;
    color: #14513a;
}

.av-careers-alert-error {
    background: #fdf1ee;
    border: 1px solid #f0c9bf;
    color: #8c3520;
}

@media (max-width: 575px) {
    .av-careers-intro h2 { font-size: 24px; }
    .av-career-head h2 { font-size: 24px; }
    .av-careers-grid { grid-template-columns: 1fr; }
    .av-careers-form-wrap { padding: 22px 17px; border-radius: 14px; }
    .av-careers-speculative { padding: 20px 18px; }
    .av-careers-btn { width: 100%; justify-content: center; }
    .av-career-card h3 { padding-right: 0; }
    .av-career-flag { position: static; display: inline-block; margin-bottom: 10px; }
}

/* ── careers: apply button + popup ───────────────────────────────────
   The grid's "Apply now" opens a modal; "View details" remains the
   card-wide stretched link, so the popup never blocks the full job
   description. The button must sit above that stretched ::before.
   ------------------------------------------------------------------ */

.av-career-apply {
    position: relative;
    z-index: 2;
    margin-left: auto;
    padding: 9px 17px;
    border-radius: 8px;
    background: var(--cr-green);
    border: 1px solid var(--cr-green);
    color: #fff;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s, border-color .2s, transform .15s;
}

.av-career-apply:hover {
    background: var(--cr-bronze);
    border-color: var(--cr-bronze);
    transform: translateY(-1px);
}

/* "View details" keeps the stretched link, but no longer grows an arrow */
.av-career-foot .av-career-link {
    margin-left: 0;
}

.av-career-foot .av-career-link::after {
    content: none;
}

/* the speculative banner trigger is a button now, not an anchor */
button.av-careers-btn {
    cursor: pointer;
    font-family: var(--font-heading), "Quicksand", sans-serif;
}

/* ── the popup itself ── */
.av-apply-modal .modal-content {
    border: 1px solid #f0dcc2;
    border-radius: 18px;
    overflow: hidden;
    background: #fef2e6;
}

.av-apply-modal .modal-header {
    background: #184D45;
    border-bottom: none;
    padding: 20px 26px;
}

.av-apply-modal .modal-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.av-apply-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .8;
}

.av-apply-modal .btn-close:hover {
    opacity: 1;
}

.av-apply-modal .modal-body {
    padding: 26px;
}

.av-apply-modal .av-careers-form h3 {
    display: none;
}

.av-apply-modal .av-careers-field:last-of-type {
    margin-bottom: 18px;
}

.av-apply-modal .av-careers-alert {
    margin-bottom: 18px;
}

@media (max-width: 575px) {
    .av-career-foot {
        flex-wrap: wrap;
        gap: 10px;
    }

    .av-career-apply {
        width: 100%;
        margin-left: 0;
    }

    .av-apply-modal .modal-header { padding: 16px 18px; }
    .av-apply-modal .modal-title { font-size: 17px; }
    .av-apply-modal .modal-body { padding: 18px 16px; }
}

/* ── about us ────────────────────────────────────────────────────────
   The page uses the full-width template, so each section carries its own
   .container. Everything here is scoped to .av-about.
   ------------------------------------------------------------------ */

.av-about {
    --ab-green: #184D45;
    --ab-green-deep: #0d463c;
    --ab-bronze: #b46e29;
    --ab-cream: #fef2e6;
    --ab-sand: #f0dcc2;
    --ab-line: #e6e3db;
    --ab-muted: #6f7a74;

    padding-bottom: 70px;
}

.av-about .container {
    max-width: 1610px;
}

.av-about-eyebrow {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ab-bronze);
    background: var(--ab-cream);
    border: 1px solid var(--ab-sand);
    border-radius: 999px;
    padding: 5px 14px;
    margin: 0 0 16px;
}

.av-about h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--ab-green);
    line-height: 1.2;
    text-wrap: balance;
}

.av-about h3 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--ab-green);
}

.av-about p {
    color: #4a4a4a;
    line-height: 1.72;
}

/* ── hero ── */
.av-about-hero {
    text-align: center;
    padding: 18px 0 44px;
}

.av-about-hero h2 {
    font-size: 38px;
    margin: 0 0 16px;
}

.av-about-lede {
    font-size: 17px;
    max-width: 76ch;
    margin: 0 auto 24px;
}

.av-about-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.av-about-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ab-line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ab-green);
}

.av-about-chips i {
    color: var(--ab-bronze);
}

/* ── vision / mission ── */
.av-about-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.av-about-card {
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.av-about-card:hover {
    transform: translateY(-3px);
    border-color: var(--ab-sand);
    box-shadow: 0 16px 34px -24px rgba(24, 75, 69, .5);
}

.av-about-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.av-about-card-body {
    padding: 24px 26px 26px;
}

.av-about-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    margin: 0 0 10px;
}

.av-about-card h3 i {
    color: var(--ab-bronze);
    font-size: 17px;
}

.av-about-card p {
    margin: 0;
    font-size: 15.5px;
}

/* ── section heads ── */
.av-about-block {
    margin-bottom: 62px;
}

.av-about-head {
    text-align: center;
    margin-bottom: 30px;
}

.av-about-head h2 {
    font-size: 29px;
    margin: 0 0 9px;
}

.av-about-head p {
    color: var(--ab-muted);
    font-size: 16px;
    margin: 0;
    max-width: 62ch;
    margin-inline: auto;
}

/* ── values ── */
.av-about-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.av-value {
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 16px;
    padding: 26px 24px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.av-value:hover {
    transform: translateY(-3px);
    border-color: var(--ab-sand);
    box-shadow: 0 12px 28px -20px rgba(24, 75, 69, .45);
}

.av-value > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: var(--ab-cream);
    border: 1px solid var(--ab-sand);
    color: var(--ab-green);
    font-size: 19px;
}

.av-value h3 {
    font-size: 18px;
    margin: 0 0 9px;
}

.av-value p {
    font-size: 15px;
    margin: 0;
}

/* ── founder ── */
.av-about-founder {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) 1.2fr;
    gap: 42px;
    align-items: center;
    margin-bottom: 62px;
    padding: 40px;
    background: var(--ab-cream);
    border: 1px solid var(--ab-sand);
    border-radius: 22px;
}

.av-about-founder-media img {
    width: 100%;
    border-radius: 18px;
    display: block;
    box-shadow: 0 18px 40px -26px rgba(24, 75, 69, .6);
}

.av-about-founder-body h2 {
    font-size: 30px;
    margin: 0 0 16px;
}

.av-about-founder-body p {
    font-size: 16px;
    margin: 0 0 14px;
}

.av-about-quote {
    margin: 20px 0;
    padding: 18px 22px;
    background: #fff;
    border-left: 4px solid var(--ab-bronze);
    border-radius: 0 12px 12px 0;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    font-style: italic;
    color: var(--ab-green);
    line-height: 1.6;
}

/* ── timeline ── */
.av-about-timeline {
    counter-reset: ab-step;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 860px;
}

.av-about-timeline li {
    position: relative;
    padding: 0 0 26px 62px;
}

.av-about-timeline li::before {
    counter-increment: ab-step;
    content: counter(ab-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ab-green);
    color: #fff;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* connecting rail, stopped at the last step */
.av-about-timeline li::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 46px;
    bottom: 0;
    border-left: 2px dashed var(--ab-sand);
}

.av-about-timeline li:last-child {
    padding-bottom: 0;
}

.av-about-timeline li:last-child::after {
    content: none;
}

.av-about-timeline h3 {
    font-size: 18.5px;
    margin: 8px 0 7px;
}

.av-about-timeline p {
    font-size: 15.5px;
    margin: 0;
}

/* ── ranges ── */
.av-about-ranges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.av-range {
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.av-range:hover {
    transform: translateY(-4px);
    border-color: var(--ab-sand);
    box-shadow: 0 16px 34px -24px rgba(24, 75, 69, .5);
}

.av-range > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: var(--ab-cream);
    border: 1px solid var(--ab-sand);
    color: var(--ab-green);
    font-size: 24px;
    transition: background-color .2s ease, color .2s ease;
}

.av-range:hover > i {
    background: var(--ab-green);
    color: #fff;
}

.av-range h3 {
    font-size: 19px;
    margin: 0 0 8px;
}

.av-range p {
    font-size: 15px;
    margin: 0 0 16px;
}

.av-about-link {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ab-green);
    text-decoration: none;
    border-bottom: 2px solid var(--ab-sand);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}

.av-about-link:hover {
    color: var(--ab-bronze);
    border-bottom-color: var(--ab-bronze);
}

/* ── formulation notes ── */
.av-about-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.av-note {
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 16px;
    padding: 24px;
}

.av-note h3 {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 17.5px;
    margin: 0 0 10px;
    line-height: 1.4;
}

.av-note h3 i {
    color: var(--ab-bronze);
    font-size: 16px;
    margin-top: 3px;
    flex: 0 0 auto;
}

.av-note p {
    font-size: 15px;
    margin: 0;
}

.av-about-fineprint {
    text-align: center;
    margin: 22px 0 0;
    font-size: 15px;
    color: var(--ab-muted);
}

.av-about-fineprint a {
    color: var(--ab-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--ab-sand);
}

.av-about-fineprint a:hover {
    color: var(--ab-bronze);
}

/* ── team: two portraits, not a grid of stock faces ── */
.av-about-team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    max-width: 680px;
    margin: 0 auto;
}

.av-about-team figure {
    margin: 0;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.av-about-team figure:hover {
    transform: translateY(-4px);
    border-color: var(--ab-sand);
    box-shadow: 0 16px 34px -24px rgba(24, 75, 69, .5);
}

.av-about-team img {
    width: 100%;
    aspect-ratio: 643 / 750;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.av-about-team figcaption {
    padding: 16px 18px 18px;
    text-align: center;
    border-top: 1px solid var(--ab-line);
}

.av-about-team figcaption strong {
    display: block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ab-green);
    margin-bottom: 3px;
}

.av-about-team figcaption span {
    display: block;
    font-size: 14px;
    color: var(--ab-muted);
}

.av-about-team-note {
    text-align: center;
    max-width: 68ch;
    margin: 24px auto 0;
    font-size: 15.5px;
    color: var(--ab-muted);
}

/* ── closing cta ── */
.av-about-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding: 34px 38px;
    background: var(--ab-green);
    border-radius: 22px;
}

.av-about-cta h2 {
    color: #fff;
    font-size: 26px;
    margin: 0 0 8px;
}

.av-about-cta p {
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 62ch;
    font-size: 15.5px;
}

.av-about-cta-actions {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

.av-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #fff;
    color: var(--ab-green);
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s, transform .15s;
}

.av-about-btn:hover {
    background: var(--ab-bronze);
    border-color: var(--ab-bronze);
    color: #fff;
    transform: translateY(-1px);
}

.av-about-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.av-about-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ab-green);
}

@media (max-width: 991px) {
    .av-about-founder {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 28px 24px;
    }

    .av-about-hero h2 { font-size: 30px; }
    .av-about-founder-body h2 { font-size: 25px; }
}

@media (max-width: 575px) {
    .av-about-hero { padding: 10px 0 32px; }
    .av-about-hero h2 { font-size: 25px; }
    .av-about-lede { font-size: 16px; }
    .av-about-head h2 { font-size: 23px; }
    .av-about-block { margin-bottom: 44px; }
    .av-about-card img { height: 190px; }
    .av-about-timeline li { padding-left: 52px; }
    .av-about-team { grid-template-columns: 1fr; gap: 18px; max-width: 340px; }
    .av-about-cta { padding: 26px 20px; }
    .av-about-cta-actions { width: 100%; }
    .av-about-btn { flex: 1 1 auto; }
}

/* ── lift the container ceiling on the long-form pages ───────────────
   .policy-doc / .av-faqs / .dq-page / .distributor-container each carry
   max-width: 1610px, but they sit inside Bootstrap's .container, which
   tops out at 1320px — so the inner cap could never bind and the pages
   stayed at 1320px. Raise the container on just those pages so 1610px
   becomes the real measure. Scoped with :has() so no other page moves.
   ------------------------------------------------------------------ */

.container:has(.policy-doc),
.container:has(.av-faqs),
.container:has(.dq-page) {
    max-width: 1610px;
}

/* ── homepage additions ──────────────────────────────────────────────
   The hero slider and its ticker are deliberately untouched. This covers
   the H1, the brand-story band, and a consistent vertical rhythm between
   the product sections, which previously each set their own spacing.
   ------------------------------------------------------------------ */

/* the slider carries no heading, so the page had no H1 once the section
   titles were levelled to h2. Present for assistive tech and search, with
   no effect on the layout. */
.av-home-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── brand story band ── */
.av-home-story {
    --hs-green: #184D45;
    --hs-bronze: #b46e29;
    --hs-cream: #fef2e6;
    --hs-sand: #f0dcc2;

    padding: 56px 0;
    margin: 10px 0 0;
    background: var(--hs-cream);
}

.av-home-story-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 46px;
    align-items: center;
}

.av-home-eyebrow {
    display: inline-block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hs-bronze);
    background: #fff;
    border: 1px solid var(--hs-sand);
    border-radius: 999px;
    padding: 5px 14px;
    margin: 0 0 14px;
}

.av-home-story-text h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.24;
    color: var(--hs-green);
    margin: 0 0 14px;
    text-wrap: balance;
}

.av-home-story-text p {
    font-size: 16px;
    line-height: 1.72;
    color: #4a4a4a;
    margin: 0 0 13px;
}

.av-home-story-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 13px 24px;
    border-radius: 9px;
    background: var(--hs-green);
    border: 1px solid var(--hs-green);
    color: #fff;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, transform .15s;
}

.av-home-story-btn:hover {
    background: var(--hs-bronze);
    border-color: var(--hs-bronze);
    color: #fff;
    transform: translateY(-1px);
}

.av-home-story-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.av-home-point {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fff;
    border: 1px solid var(--hs-sand);
    border-radius: 14px;
    padding: 20px 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.av-home-point:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -20px rgba(24, 75, 69, .5);
}

.av-home-point i {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hs-cream);
    border: 1px solid var(--hs-sand);
    color: var(--hs-green);
    font-size: 15px;
}

.av-home-point strong {
    display: block;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--hs-green);
    margin-bottom: 3px;
}

.av-home-point span {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: #6f7a74;
}

@media (max-width: 991px) {
    .av-home-story-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .av-home-story-text h2 { font-size: 25px; }
}

@media (max-width: 575px) {
    .av-home-story { padding: 38px 0; }
    .av-home-story-points { grid-template-columns: 1fr; }
    .av-home-story-btn { width: 100%; justify-content: center; }
}

/* ── homepage vertical rhythm ──
   The product sections all settle on padding-bottom: 80px. The video block
   used 100px and the testimonial block declared none at all, so the spacing
   drifted at the bottom of the page. Bring both onto the same rhythm.
   (The testimonial shortcode is used on the homepage only.) */
.video-section {
    padding-bottom: 80px;
}


/* ── homepage: video section ─────────────────────────────────────────
   The partial asked RvMedia for the 'medium' thumbnail, which is an
   800x800 SQUARE crop of a 1920x670 banner, then stretched it across a
   full-width panel - that was the blur. It also used object-fit: fill on
   the <video>, which distorts playback. Both fixed in the partial; the
   height is set here instead of a hard 450px so it scales with the width.
   ------------------------------------------------------------------ */

.video-section .video-wrapper {
    height: auto;
    aspect-ratio: 1920 / 670;
    max-height: 620px;
    border-radius: 20px;
    box-shadow: 0 26px 54px -34px rgba(24, 75, 69, .55);
}

.video-section #video-thumbnail {
    object-fit: cover;
    object-position: center;
}

.video-section .video-container {
    padding: 0 12px;
}

@media (max-width: 991px) {
    .video-section .video-wrapper {
        aspect-ratio: 16 / 9;
        border-radius: 14px;
    }
}

@media (max-width: 575px) {
    .video-section .video-wrapper {
        aspect-ratio: 4 / 3;
    }
}

/* ── homepage: section headings, bestsellers, deals, testimonials ────
   Refinements only - the layout and grid of each section are the theme's
   and are left as they are. This adds a consistent heading treatment and
   a common card language (border, radius, hover) across the two product
   sections, which previously each looked slightly different.
   ------------------------------------------------------------------ */

.categories-heading,
.products-heading,
.bestsellers-heading,
.deals-heading,
.testimonial-section-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    color: #184D45;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* a small sand rule under each section title, as used elsewhere on the site */
.bestsellers-heading,
.deals-heading {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 26px;
}

.bestsellers-heading::after,
.deals-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 74px;
    height: 3px;
    border-radius: 3px;
    background: #f0dcc2;
}

/* ── Our Bestsellers ── */
.bestseller-container .products-grid-2 {
    gap: 18px;
}

.bestseller-container .product-card {
    background: #fff;
    border: 1px solid #e6e3db;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bestseller-container .product-card:hover {
    transform: translateY(-4px);
    border-color: #f0dcc2;
    box-shadow: 0 16px 32px -24px rgba(24, 75, 69, .55);
}

.bestseller-container .product-image-container {
    background: #fdfbf7;
    overflow: hidden;
}

.bestseller-container .product-image {
    transition: transform .35s ease;
}

.bestseller-container .product-card:hover .product-image {
    transform: scale(1.05);
}

.bestseller-container .product-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: #253d4e;
}

.bestseller-container .product-title a:hover {
    color: #b46e29;
}

.bestseller-container .product-category {
    color: #7d8480;
    font-size: 13px;
}

.bestseller-container .featured-product {
    border-radius: 16px;
    overflow: hidden;
}

.bestseller-container .shop-now-btn {
    border-radius: 8px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    transition: background-color .2s, transform .15s;
}

.bestseller-container .shop-now-btn:hover {
    background-color: #b46e29;
    transform: translateY(-1px);
}

/* ── Deals Of The Day ── */
.deals-container .product-cart-wrap {
    background: #fff;
    border: 1px solid #e6e3db;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.deals-container .product-cart-wrap:hover {
    transform: translateY(-4px);
    border-color: #f0dcc2;
    box-shadow: 0 16px 32px -24px rgba(24, 75, 69, .55);
}

.deals-container .product-img-action-wrap {
    background: #fdfbf7;
}

.deals-container .product-img img {
    transition: transform .35s ease;
}

.deals-container .product-cart-wrap:hover .product-img img {
    transform: scale(1.05);
}

.deals-container .deals-content h2 a,
.deals-container .deals-content h2 {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: #253d4e;
}

.deals-container .deals-content h2 a:hover {
    color: #b46e29;
}

.deals-container .product-price span:not(.old-price) {
    color: #184D45;
    font-weight: 700;
}

.deals-container .product-price .old-price {
    color: #9aa29d;
}

/* the countdown reads as a deadline, so give it the bronze accent */
.deals-container .deals-countdown-wrap {
    background: #fdf7ec;
    border-top: 1px solid #f0dcc2;
    border-bottom: 1px solid #f0dcc2;
}

.deals-container .deals-countdown .countdown-section {
    color: #184D45;
}

.deals-container .add-cart .action-btn {
    border-radius: 8px;
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    transition: background-color .2s, border-color .2s, transform .15s;
}

.deals-container .add-cart .action-btn:hover {
    background-color: #184D45;
    border-color: #184D45;
    color: #fff;
    transform: translateY(-1px);
}

/* ── testimonials: breathing room above the block ── */
.testimony-main {
    padding: 70px 0 80px;
}

/* ── homepage: blog / featured news ──────────────────────────────────
   The section hides itself when nothing is published (see the guard in
   partials/shortcodes/featured-news.blade.php), so this only shows once
   posts exist. All 11 posts are drafts at time of writing.
   ------------------------------------------------------------------ */

.av-home-news {
    padding: 10px 0 80px;
}

.av-home-news .section-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #184D45;
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 28px;
}

.av-home-news .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 74px;
    height: 3px;
    border-radius: 3px;
    background: #f0dcc2;
}

.av-home-news article {
    margin-bottom: 22px;
}

.av-home-news article > .d-md-flex {
    background: #fff;
    border: 1px solid #e6e3db;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.av-home-news article > .d-md-flex:hover {
    transform: translateY(-3px);
    border-color: #f0dcc2;
    box-shadow: 0 16px 32px -24px rgba(24, 75, 69, .55);
}

.av-home-news .post-thumb {
    flex: 0 0 190px;
    margin-right: 0 !important;
    overflow: hidden;
}

.av-home-news .post-thumb img {
    width: 190px;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .35s ease;
}

.av-home-news article:hover .post-thumb img {
    transform: scale(1.05);
}

.av-home-news .post-content {
    padding: 18px 20px;
    flex: 1;
    min-width: 0;
}

.av-home-news .post-in {
    color: #b46e29 !important;
    font-weight: 700;
    letter-spacing: .06em;
}

.av-home-news .post-title {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px !important;
}

.av-home-news .post-title a {
    color: #184D45;
}

.av-home-news .post-title a:hover {
    color: #b46e29;
}

.av-home-news .entry-meta.meta-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px dashed #e6e3db;
    padding-top: 11px;
}

.av-home-news .entry-meta.meta-1 a {
    font-family: var(--font-heading), "Quicksand", sans-serif;
    font-weight: 700;
    color: #184D45;
    white-space: nowrap;
}

.av-home-news .entry-meta.meta-1 a:hover {
    color: #b46e29;
}

@media (max-width: 767px) {
    .av-home-news .post-thumb,
    .av-home-news .post-thumb img {
        width: 100%;
        flex: none;
        height: 190px;
    }
}

/* ── heading weight ──────────────────────────────────────────────────
   The AABHAVEDA wordmark is a heavy geometric sans in caps, so the
   heading face is Montserrat to match its letterforms. At 700 across a
   whole page that reads blocky, so display headings sit at 600 and keep
   700 for small labels and buttons, where the extra weight aids legibility.
   ------------------------------------------------------------------ */

.av-about h2,
.av-about-head h2,
.av-about-hero h2,
.av-about-founder-body h2,
.av-home-story-text h2,
.av-careers-intro h2,
.av-career-head h2,
.policy-doc h2,
.av-faq-group-title,
.distributor-container .faq-title,
.dq-intro h2,
.av-sitemap-title,
.contactus-container .info-section h2,
.contactus-container .form-section h2,
.categories-heading,
.products-heading,
.bestsellers-heading,
.deals-heading,
.testimonial-section-title,
.av-home-news .section-title {
    font-weight: 600;
    letter-spacing: -.015em;
}

/* ── brand colour alignment: menu + active states ────────────────────
   Sampled from the AABHAVEDA wordmark, the brand green is #184D45.
   The theme shipped the header menu in --color-heading (#253D4E navy)
   with --color-brand (#3BB77E mint) on hover, so neither matched the
   logo. Menu text is now the logo green, and every selected / active /
   hover accent uses the golden-bronze (#b46e29) and sand (#f0dcc2)
   already used in the page headers, instead of the mint green.
   ------------------------------------------------------------------ */

/* ── desktop menu ── */
.main-menu > nav > ul > li > a,
.main-menu nav > ul > li > a {
    color: #184D45;
    font-weight: 600;
}

.main-menu > nav > ul > li:hover > a,
.main-menu > nav > ul > li > a.active,
.main-menu > nav > ul > li.current > a,
.main-menu > nav > ul > li.active > a,
.main-menu > nav > ul > li > a:hover {
    color: #b46e29;
}

/* submenu items */
.main-menu > nav > ul > li ul.sub-menu li a:hover,
.main-menu > nav > ul > li ul.mega-menu li ul li a:hover {
    color: #b46e29;
}

/* the small underline/indicator some themes draw under the active item */
.main-menu > nav > ul > li.current > a::before,
.main-menu > nav > ul > li:hover > a::before {
    background-color: #b46e29;
}

/* ── header utility links (Support Now, account, etc.) ── */
.header-info > ul > li > a {
    color: #184D45;
}

.header-info > ul > li > a:hover {
    color: #b46e29;
}

/* ── mobile menu ── */
.mobile-menu-wrap .mobile-menu li a,
.mobile-header-info-wrap .single-mobile-header-info a {
    color: #184D45;
}

.mobile-menu-wrap .mobile-menu li a:hover,
.mobile-menu-wrap .mobile-menu li.active > a,
.mobile-header-info-wrap .single-mobile-header-info a:hover {
    color: #b46e29;
}

/* ── selected / active accents that were mint green ── */
.dot-style-1 ul li.slick-active button,
.slick-dots li.slick-active button {
    background-color: #b46e29 !important;
    border-color: #b46e29 !important;
}

.slider-arrow .slider-btn:hover,
.carousel-3-columns-cover .slider-btn:hover {
    background-color: #b46e29 !important;
    border-color: #b46e29 !important;
    color: #fff !important;
}

/* category / product links that hovered mint */
.card-1:hover a,
.card-2:hover a,
.section-title a.show-all:hover {
    color: #b46e29 !important;
}

/* breadcrumb + page-header links */
.header_a,
.breadcrumb a {
    color: #184D45;
}

.header_a:hover,
.breadcrumb a:hover {
    color: #b46e29;
}

/* ── buttons: same combination as the header menu ────────────────────
   Brand green #184D45 at rest, golden-bronze #b46e29 on hover / focus /
   active. The theme shipped a mix that matched none of it: generic
   .btn:hover used --color-brand-2 (#FDC040 amber), .btn-brand and submit
   buttons used --color-brand-dark (#29A56C mint), and the comment form
   hovered --color-primary (#5a97fa blue). Semantic buttons (danger,
   outline-danger) deliberately keep their own colours.
   ------------------------------------------------------------------ */

.btn:hover,
.button:hover,
.btn-brand:hover,
button.submit:hover,
button[type="submit"]:hover,
.btn:focus-visible,
.button:focus-visible,
.contact-from-area .contact-form-style button:hover,
.comment-form button:hover,
.product-action-1 .action-btn:hover,
.action-btn.add-to-cart-button:hover,
.deals-container .add-cart .action-btn:hover,
.nav-btn:hover {
    background-color: #b46e29 !important;
    border-color: #b46e29 !important;
    color: #fff !important;
}

/* keep destructive actions red - they are not brand accents */
.btn.btn-danger:hover,
.btn.btn-outline-danger:hover,
.customer-page button.btn.btn-outline-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: #fff !important;
}

/* resting state for the theme's primary buttons */
.btn-brand,
button.submit,
button[type="submit"]:not(.btn-danger):not(.btn-outline-danger) {
    background-color: #184D45;
    border-color: #184D45;
    color: #fff;
}

/* ghost / outline buttons invert to the brand green rather than mint */
.btn-outline-brand,
.view-all-btn {
    color: #184D45;
    border-color: #184D45;
}

.btn-outline-brand:hover,
.view-all-btn:hover {
    background-color: #184D45 !important;
    border-color: #184D45 !important;
    color: #fff !important;
}

/* selected states that were mint or amber */
.dot-style-1 ul li button:hover,
.slick-dots li button:hover {
    background-color: rgba(180, 110, 41, .45) !important;
}

/* pagination + filter chips */
.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background-color: #b46e29 !important;
    border-color: #b46e29 !important;
    color: #fff !important;
}

/* ── testimonials: the centre card ───────────────────────────────────
   The partial ships its own <style> inline in the page body, so it wins
   on load order. These selectors carry .testimony-main in front, giving
   them higher specificity, which wins regardless of order.
   ------------------------------------------------------------------ */

.testimony-main .testimonial-card {
    background-color: #fff;
    border: 1px solid #f0dcc2;
    border-radius: 20px;
    padding: 44px 52px 38px;
    box-shadow: 0 22px 50px -34px rgba(24, 77, 69, .5);
    min-height: 320px;
    max-width: 880px;
    position: relative;
}

/* a quote glyph sitting behind the text, not competing with it */
.testimony-main .testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 30px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 96px;
    line-height: 1;
    color: #f0dcc2;
    pointer-events: none;
    user-select: none;
}

.testimony-main .testimonial-text {
    position: relative;
    font-size: 17.5px;
    line-height: 1.78;
    color: #3a443f;
    margin-bottom: 26px;
    max-width: 68ch;
    transition: opacity .3s ease;
}

.testimony-main .customer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid #f2efe9;
}

.testimony-main .customer-name {
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #184D45;
    margin-right: 0;
}

.testimony-main .customer-name::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #b46e29;
    vertical-align: middle;
    margin-right: 10px;
}

.testimony-main .customer-position {
    font-size: 13.5px;
    color: #7d8480;
    letter-spacing: .01em;
}

/* section title + nav controls onto the brand palette */
.testimony-main .testimonial-section-title {
    margin-bottom: 34px;
}

.testimony-main .nav-button {
    background-color: #184D45;
    border: 1px solid #184D45;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.testimony-main .nav-button:hover {
    background-color: #b46e29;
    border-color: #b46e29;
    box-shadow: 0 8px 18px -8px rgba(180, 110, 41, .65);
}

.testimony-main .pagination-dot {
    background-color: #e6e0d6;
    transition: background-color .2s ease, width .2s ease;
}

.testimony-main .pagination-dot.active {
    background-color: #b46e29;
    width: 34px;
}

/* the floating avatars: ring them in the brand palette */
.testimony-main .avatar-circle {
    border: 3px solid #fff;
    box-shadow: 0 4px 14px -6px rgba(24, 77, 69, .45);
}

.testimony-main .avatar-tooltip {
    background: rgba(24, 77, 69, .96);
}

.testimony-main .avatar-tooltip::after {
    border-color: rgba(24, 77, 69, .96) transparent transparent transparent;
}

@media (max-width: 767px) {
    .testimony-main .testimonial-card {
        padding: 34px 22px 28px;
        border-radius: 16px;
        min-height: 0;
    }

    .testimony-main .testimonial-card::before {
        font-size: 68px;
        left: 16px;
    }

    .testimony-main .testimonial-text {
        font-size: 16px;
    }
}

/* ── homepage: promise bar and starter combos ───────────────────────
   Two sections added to the page-1 content as raw HTML. They reuse
   .av-home-eyebrow from the story band so the brand voice stays one
   family. Palette: green #184D45, bronze #b46e29, sand #f0dcc2.
   ------------------------------------------------------------------ */

/* --- the promise bar, directly under the hero -------------------- */

.av-home-promise {
    background: #f7f4ee;
    border-top: 1px solid #ece5d8;
    border-bottom: 1px solid #ece5d8;
    padding: 26px 0;
    margin-bottom: 10px;
}

.av-promise-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.av-promise-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    position: relative;
}

.av-promise-list li + li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #e2d9c8;
}

.av-promise-list i {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.35;
    color: #b46e29;
}

.av-promise-list span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #6d746f;
}

.av-promise-list strong {
    display: block;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #184D45;
    margin-bottom: 2px;
}

/* --- "not sure where to start" starter combos -------------------- */

.av-home-start {
    padding: 62px 0 58px;
}

.av-start-intro {
    max-width: 640px;
    margin: 0 0 36px;
}

.av-start-intro h2 {
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #184D45;
    margin: 0 0 12px;
}

.av-start-intro p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #5f6763;
    margin: 0;
}

.av-start-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.av-start-card {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 1px solid #ece5d8;
    border-radius: 18px;
    padding: 22px;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.av-start-card:hover {
    border-color: #e0cfb4;
    box-shadow: 0 20px 44px -30px rgba(24, 77, 69, .55);
    transform: translateY(-3px);
}

.av-start-media {
    background: #f7f4ee;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.av-start-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.av-start-body h3 {
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #184D45;
    margin: 0 0 8px;
}

.av-start-body p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #6d746f;
    margin: 0 0 12px;
}

.av-start-price {
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 21px !important;
    font-weight: 600;
    color: #b46e29 !important;
    margin: 0 0 16px !important;
}

.av-start-btn {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 999px;
    background: #184D45;
    color: #fff;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.av-start-btn:hover,
.av-start-btn:focus {
    background: #b46e29;
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(180, 110, 41, .7);
}

/* --- responsive --------------------------------------------------- */

@media (max-width: 1199px) {
    .av-start-cards { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
    .av-promise-list { grid-template-columns: repeat(2, 1fr); }
    .av-promise-list li:nth-child(odd)::before { display: none; }
}

@media (max-width: 767px) {
    .av-home-promise { padding: 20px 0; }
    .av-promise-list { grid-template-columns: 1fr; gap: 14px; }
    .av-promise-list li::before { display: none; }

    .av-home-start { padding: 42px 0 38px; }

    .av-start-intro h2 { font-size: 24px; }

    .av-start-card { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
    .av-start-media { max-width: 240px; }

}

/* ── header search ───────────────────────────────────────────────────
   A toggle in both the desktop and the mobile header action rows opens
   one shared panel under the header. The form carries the ecommerce
   plugin's .bb-form-quick-search class so the plugin's delegated
   live-results handler binds to it.

   The panel animates open with grid-template-rows 0fr -> 1fr, which is
   the only way to transition to an auto height without hard-coding one.
   It stays in the document flow rather than overlaying, so a long list
   of live results can never end up clipped behind the page content.
   ------------------------------------------------------------------ */

.av-search-action a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    position: relative;
}

.av-search-action a i {
    color: #184d45;
    font-size: 19px;
    line-height: 1;
    transition: color .2s ease, transform .25s ease, opacity .18s ease;
}

.av-search-action a:hover i {
    color: #b46e29;
}

/* when the panel is open the glyph rotates away and an x fades in */
.av-search-action a[aria-expanded="true"] i {
    color: #b46e29;
    opacity: 0;
    transform: rotate(90deg) scale(.7);
}

.av-search-action a::after {
    color: #b46e29;
    content: "/* ── header search ───────────────────────────────────────────────────
   A toggle in both the desktop and the mobile header action rows opens
   one shared full-width panel that sits just under the header. The form
   carries the ecommerce plugin's .bb-form-quick-search class so the
   plugin's delegated live-results handler binds to it.
   ------------------------------------------------------------------ */

.av-search-action a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.av-search-action a i {
    color: #184d45;
    font-size: 19px;
    line-height: 1;
    transition: color .2s ease;
}

.av-search-action a:hover i,
.av-search-action a[aria-expanded="true"] i {
    color: #b46e29;
}

/* the mobile header sits on the dark bar, so the glyph flips to white */
.header-bottom .av-search-action a i {
    color: #fff;
}

.header-bottom .av-search-action a:hover i,
.header-bottom .av-search-action a[aria-expanded="true"] i {
    color: #f0dcc2;
}

.av-search-panel {
    background: #fff;
    border-bottom: 1px solid #ece5d8;
    box-shadow: 0 18px 40px -30px rgba(24, 77, 69, .55);
    left: 0;
    padding: 18px 0;
    position: relative;
    right: 0;
    z-index: 1001;
}

.av-search-panel[hidden] {
    display: none;
}

.av-search-form {
    align-items: center;
    background: #f7f4ee;
    border: 1px solid #e2d9c8;
    border-radius: 999px;
    display: flex;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    position: relative;
}

.av-search-form:focus-within {
    border-color: #b46e29;
    box-shadow: 0 0 0 3px rgba(180, 110, 41, .12);
}

.av-search-icon {
    color: #8d9490;
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
}

.av-search-input {
    background: transparent;
    border: 0;
    color: #253d4e;
    flex: 1 1 auto;
    font-size: 15px;
    min-width: 0;
    outline: 0;
    padding: 10px 0;
}

.av-search-input::placeholder {
    color: #9aa19d;
}

/* kill the UA clear button so it doesn't collide with our close button */
.av-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.av-search-submit {
    background: #184d45;
    border: 0;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 26px;
    transition: background-color .2s ease;
}

.av-search-submit:hover {
    background: #b46e29;
}

.av-search-close {
    background: transparent;
    border: 0;
    color: #7d8480;
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    padding: 0 12px 0 2px;
}

.av-search-close:hover {
    color: #b46e29;
}

/* the plugin drops its live results into this node inside the form */
.av-search-form .bb-quick-search-results {
    background: #fff;
    border: 1px solid #ece5d8;
    border-radius: 14px;
    box-shadow: 0 20px 44px -28px rgba(24, 77, 69, .55);
    left: 0;
    margin-top: 8px;
    max-height: 60vh;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
}

.av-search-form .bb-quick-search-results:empty {
    display: none;
}

@media (max-width: 767px) {
    .av-search-panel {
        padding: 12px 0;
    }

    .av-search-form {
        padding: 4px 4px 4px 14px;
    }

    .av-search-input {
        font-size: 16px; /* stops iOS zooming the page on focus */
        padding: 9px 0;
    }

    .av-search-submit {
        font-size: 0;
        padding: 10px 14px;
    }

    .av-search-submit::after {
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-size: 14px;
        font-weight: 900;
    }
}

d7";
    font-size: 26px;
    left: 50%;
    line-height: 1;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg) scale(.7);
    transition: opacity .18s ease .06s, transform .25s ease .06s;
}

.av-search-action a[aria-expanded="true"]::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
}

/* the mobile header sits on the dark bar, so the glyph flips to white */
.header-bottom .av-search-action a i {
    color: #fff;
}

.header-bottom .av-search-action a:hover i {
    color: #f0dcc2;
}

.header-bottom .av-search-action a::after {
    color: #f0dcc2;
}

/* --- the panel ---------------------------------------------------- */

.av-search-panel {
    background: #fff;
    border-bottom: 1px solid transparent;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows .3s cubic-bezier(.4, 0, .2, 1),
        opacity .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        visibility 0s linear .3s;
    visibility: hidden;
    position: relative;
    z-index: 1001;
}

.av-search-panel.is-open {
    border-bottom-color: #ece5d8;
    box-shadow: 0 16px 34px -28px rgba(24, 77, 69, .6);
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows .3s cubic-bezier(.4, 0, .2, 1),
        opacity .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        visibility 0s;
    visibility: visible;
}

/* the 0fr/1fr track only collapses if the row's content can shrink */
.av-search-panel > .container {
    min-height: 0;
    overflow: hidden;
}

.av-search-panel .av-search-inner {
    padding: 20px 0;
    transform: translateY(-6px);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.av-search-panel.is-open .av-search-inner {
    transform: translateY(0);
}

/* --- the form ------------------------------------------------------ */

.av-search-form {
    align-items: center;
    background: #f7f4ee;
    border: 1px solid #e2d9c8;
    border-radius: 999px;
    display: flex;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.av-search-form:focus-within {
    background: #fff;
    border-color: #b46e29;
    box-shadow: 0 0 0 3px rgba(180, 110, 41, .12);
}

.av-search-icon {
    color: #8d9490;
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    transition: color .2s ease;
}

.av-search-form:focus-within .av-search-icon {
    color: #b46e29;
}

.av-search-input {
    background: transparent;
    border: 0;
    color: #253d4e;
    flex: 1 1 auto;
    font-size: 15px;
    min-width: 0;
    outline: 0;
    padding: 10px 0;
}

.av-search-input::placeholder {
    color: #9aa19d;
}

.av-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.av-search-submit {
    background: #184d45;
    border: 0;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 26px;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.av-search-submit:hover {
    background: #b46e29;
    box-shadow: 0 8px 18px -8px rgba(180, 110, 41, .65);
}

/* --- live results -------------------------------------------------- */

.av-search-form .bb-quick-search-results {
    background: #fff;
    border: 1px solid #ece5d8;
    border-radius: 14px;
    box-shadow: 0 20px 44px -28px rgba(24, 77, 69, .55);
    left: 0;
    margin-top: 10px;
    max-height: 62vh;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
}

.av-search-form .bb-quick-search-results:empty {
    display: none;
}

/* a small hint row under the field while the panel is open */
.av-search-hint {
    color: #8d9490;
    font-size: 12.5px;
    margin: 10px 0 0;
    padding-left: 20px;
}

.av-search-hint kbd {
    background: #f0ece3;
    border: 1px solid #e2d9c8;
    border-radius: 4px;
    color: #6d746f;
    font-family: inherit;
    font-size: 11px;
    padding: 1px 6px;
}

@media (max-width: 767px) {
    .av-search-panel .av-search-inner {
        padding: 14px 0;
    }

    .av-search-form {
        padding: 4px 4px 4px 14px;
    }

    .av-search-input {
        font-size: 16px; /* stops iOS zooming the page on focus */
        padding: 9px 0;
    }

    .av-search-submit {
        font-size: 0;
        padding: 10px 15px;
    }

    .av-search-submit::after {
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-size: 14px;
        font-weight: 900;
    }

    .av-search-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .av-search-panel,
    .av-search-panel .av-search-inner,
    .av-search-action a i,
    .av-search-action a::after {
        transition-duration: .01ms;
    }
}
/* ── bottom bar menu: search moves up into the header ────────────────
   The plugin view is left untouched so a plugin update cannot clobber
   the change; the Search item is hidden here instead. Its <a> is the
   only one in that bar carrying data-menu="menu".
   ------------------------------------------------------------------ */

.footer-mobile .menu--footer li:has(> a[data-menu="menu"]) {
    display: none;
}

/* ── cart: header dropdown and the /cart page ────────────────────────
   Both were still on the stock Nest mint (--color-brand #3BB77E) with
   generic greys (#9b9b9b, dimgray, #f3f3f3). This puts them on the
   Aabhaveda palette and gives the two footer buttons an actual
   hierarchy - checkout is the primary action, view cart is not.
   ------------------------------------------------------------------ */

.cart-dropdown-wrap,
.section--shopping-cart {
    --cart-green: #184d45;
    --cart-green-dark: #0f342e;
    --cart-bronze: #b46e29;
    --cart-sand: #f0dcc2;
    --cart-cream: #f7f4ee;
    --cart-line: #ece5d8;
    --cart-ink: #3a443f;
    --cart-muted: #6d746f;
}

/* --- the header dropdown ------------------------------------------- */

.cart-dropdown-wrap {
    border: 1px solid var(--cart-line);
    border-radius: 16px;
    box-shadow: 0 24px 54px -32px rgba(24, 77, 69, .55);
    padding: 22px 20px 20px;
    width: 344px;
}

.cart-dropdown-wrap ul {
    margin: 0;
    max-height: 330px;
    overflow-y: auto;
    padding: 0;
}

.cart-dropdown-wrap ul li {
    align-items: flex-start;
    border-bottom: 1px solid var(--cart-line);
    margin: 0;
    padding: 14px 0;
}

.cart-dropdown-wrap ul li:first-child {
    padding-top: 0;
}

.cart-dropdown-wrap ul li:last-child {
    border-bottom: 0;
}

.cart-dropdown-wrap ul li .shopping-cart-img {
    flex: 0 0 62px;
    margin-right: 14px;
}

.cart-dropdown-wrap ul li .shopping-cart-img a {
    background: var(--cart-cream);
    border: 1px solid var(--cart-line);
    border-radius: 10px;
    display: block;
    overflow: hidden;
}

.cart-dropdown-wrap ul li .shopping-cart-img a img {
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    width: 100%;
}

.cart-dropdown-wrap ul li .shopping-cart-title {
    margin: 0;
}

.cart-dropdown-wrap ul li .shopping-cart-title h4 {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 6px;
}

.cart-dropdown-wrap ul li .shopping-cart-title h4 a {
    color: var(--cart-green);
}

.cart-dropdown-wrap ul li .shopping-cart-title h4 a:hover {
    color: var(--cart-bronze);
}

.cart-dropdown-wrap ul li .shopping-cart-title h3 {
    color: var(--cart-bronze);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.cart-dropdown-wrap ul li .shopping-cart-title h3 span {
    color: var(--cart-muted);
    font-size: 14px;
}

.cart-dropdown-wrap ul li .shopping-cart-title h3 small del {
    color: #a8aeaa;
    font-size: 12.5px;
}

.cart-dropdown-wrap ul li .shopping-cart-delete a {
    align-items: center;
    border-radius: 50%;
    color: #a8aeaa;
    display: inline-flex;
    font-size: 16px;
    height: 24px;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
    width: 24px;
}

.cart-dropdown-wrap ul li .shopping-cart-delete a:hover {
    background: #fbeceb;
    color: #c0392b;
}

/* --- dropdown footer ----------------------------------------------- */

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-total {
    border-top: 1px solid var(--cart-sand);
    margin: 16px 0 0;
    padding: 14px 0 0;
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-total h4,
.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-total h5 {
    color: var(--cart-muted);
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-total h4 {
    font-size: 15px;
    font-weight: 600;
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-total h4 span {
    color: var(--cart-green);
    font-size: 19px;
    font-weight: 700;
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-total h5 span {
    color: var(--cart-ink);
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button {
    gap: 10px;
    margin-top: 16px;
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a {
    border-radius: 999px;
    flex: 1 1 0;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* first button is "View cart" - secondary, so it reads as the quieter one */
.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:first-child {
    background-color: transparent;
    border: 2px solid var(--cart-line);
    color: var(--cart-green);
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:first-child:hover {
    background-color: var(--cart-cream);
    border-color: var(--cart-sand);
    color: var(--cart-green);
}

/* the checkout button, when present, is the primary action */
.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:last-child {
    background-color: var(--cart-green);
    border: 2px solid var(--cart-green);
    color: #fff;
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:last-child:hover {
    background-color: var(--cart-bronze);
    border-color: var(--cart-bronze);
    color: #fff;
}

/* only one button (no checkout token yet) - let it fill and stay primary */
.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:only-child {
    background-color: var(--cart-green);
    border-color: var(--cart-green);
    color: #fff;
}

.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:only-child:hover {
    background-color: var(--cart-bronze);
    border-color: var(--cart-bronze);
}

/* empty dropdown */
.cart-dropdown-wrap > span {
    color: var(--cart-muted);
    display: block;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
}

/* --- the /cart page ------------------------------------------------- */

.section--shopping-cart h1.heading-2 {
    color: var(--cart-green);
    letter-spacing: -.01em;
}

.section--shopping-cart .text-brand {
    color: var(--cart-bronze) !important;
}

/* line-items table */

.section--shopping-cart .shopping-summery {
    background: #fff;
    border: 1px solid var(--cart-line);
    border-radius: 16px;
    overflow: hidden;
}

.section--shopping-cart .table--cart {
    margin: 0;
}

.section--shopping-cart .table--cart thead .main-heading th {
    background: var(--cart-cream);
    border-bottom: 1px solid var(--cart-line);
    color: var(--cart-green);
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 16px 12px;
    text-transform: uppercase;
}

.section--shopping-cart .table--cart tbody td {
    border-bottom: 1px solid var(--cart-line);
    padding: 18px 12px;
    vertical-align: middle;
}

.section--shopping-cart .table--cart tbody tr:last-child td {
    border-bottom: 0;
}

.section--shopping-cart .table--cart .product-thumbnail img {
    aspect-ratio: 1 / 1;
    background: var(--cart-cream);
    border: 1px solid var(--cart-line);
    border-radius: 12px;
    max-width: 84px;
    object-fit: cover;
    width: 100%;
}

.section--shopping-cart .table--cart a.product-name {
    color: var(--cart-green) !important;
    font-weight: 600;
}

.section--shopping-cart .table--cart a.product-name:hover {
    color: var(--cart-bronze) !important;
}

.section--shopping-cart .table--cart .price h4 {
    color: var(--cart-ink);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.section--shopping-cart .table--cart .price h4.text-brand {
    color: var(--cart-bronze) !important;
    font-size: 16px;
    font-weight: 700;
}

/* quantity stepper - same 46px pill used on the product page */
.section--shopping-cart .detail-qty {
    align-items: center;
    border: 1px solid var(--cart-line) !important;
    border-radius: 999px;
    display: flex;
    height: 46px;
    justify-content: space-between;
    max-width: none;
    padding: 0 12px;
    width: 106px;
}

.section--shopping-cart .detail-qty .qty-val,
.section--shopping-cart .detail-qty .qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    text-align: center;
    width: 100%;
}

.section--shopping-cart .detail-qty .qty-val::-webkit-outer-spin-button,
.section--shopping-cart .detail-qty .qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.section--shopping-cart .detail-qty .qty-down,
.section--shopping-cart .detail-qty .qty-up {
    align-items: center;
    color: var(--cart-muted);
    display: flex;
    height: 100%;
    justify-content: center;
    position: static;
    width: 16px;
}

.section--shopping-cart .detail-qty .qty-down:hover,
.section--shopping-cart .detail-qty .qty-up:hover {
    color: var(--cart-bronze);
}

.section--shopping-cart .remove-cart-button {
    align-items: center;
    border-radius: 50%;
    color: #a8aeaa !important;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
    width: 34px;
}

.section--shopping-cart .remove-cart-button:hover {
    background: #fbeceb;
    color: #c0392b !important;
}

/* continue shopping / coupon */

.section--shopping-cart .cart-action .btn,
.section--shopping-cart .btn-apply-coupon-code {
    background-color: var(--cart-green);
    border: 2px solid var(--cart-green);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 26px;
    transition: background-color .2s ease, border-color .2s ease;
}

.section--shopping-cart .cart-action .btn:hover,
.section--shopping-cart .btn-apply-coupon-code:hover {
    background-color: var(--cart-bronze);
    border-color: var(--cart-bronze);
    color: #fff;
}

.section--shopping-cart .form-coupon-wrapper {
    gap: 10px;
}

.section--shopping-cart .coupon-code {
    background: var(--cart-cream);
    border: 1px solid var(--cart-line);
    border-radius: 999px;
    flex: 1 1 auto;
    margin-right: 0 !important;
    padding: 12px 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.section--shopping-cart .coupon-code:focus {
    background: #fff;
    border-color: var(--cart-bronze);
    box-shadow: 0 0 0 3px rgba(180, 110, 41, .12);
    outline: 0;
}

/* totals panel */

.section--shopping-cart .cart-totals {
    background: var(--cart-cream);
    border: 1px solid var(--cart-line) !important;
    border-radius: 16px;
    padding: 26px 24px !important;
}

.section--shopping-cart .cart-totals .table td {
    border: 0;
    padding: 9px 0;
}

.section--shopping-cart .cart-totals .cart_total_label p,
.section--shopping-cart .cart-totals .cart_total_label .h6 {
    color: var(--cart-muted);
    font-size: 14px;
    margin: 0;
}

.section--shopping-cart .cart-totals .cart_total_amount {
    text-align: right;
}

.section--shopping-cart .cart-totals .cart_total_amount .text-brand {
    color: var(--cart-ink) !important;
    font-weight: 600;
}

.section--shopping-cart .cart-totals tr:last-child td {
    border-top: 1px solid var(--cart-sand) !important;
    padding-top: 16px;
}

.section--shopping-cart .cart-totals tr:last-child .cart_total_label .h6 {
    color: var(--cart-green);
    font-size: 16px;
    font-weight: 600;
}

.section--shopping-cart .cart-totals h4 strong.text-brand {
    color: var(--cart-green) !important;
    font-size: 22px;
    font-weight: 700;
}

.section--shopping-cart .cart-totals .btn {
    align-items: center;
    background-color: var(--cart-green);
    border: 2px solid var(--cart-green);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    padding: 14px 22px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.section--shopping-cart .cart-totals .btn:hover {
    background-color: var(--cart-bronze);
    border-color: var(--cart-bronze);
    box-shadow: 0 10px 24px -12px rgba(180, 110, 41, .7);
}

/* empty state - was a bare centred <p> */

.section--shopping-cart .row > .col-lg-8 > p.text-center {
    background: var(--cart-cream);
    border: 1px solid var(--cart-line);
    border-radius: 16px;
    color: var(--cart-muted);
    font-size: 16px;
    margin: 0;
    padding: 54px 20px;
}

@media (max-width: 991px) {
    .section--shopping-cart .cart-totals {
        margin-left: 0 !important;
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .section--shopping-cart .table--cart tbody td {
        padding: 12px;
    }

    .section--shopping-cart .form-coupon-wrapper {
        flex-wrap: wrap;
    }

    .section--shopping-cart .coupon-code {
        flex: 1 1 100%;
    }
}

/* --- cart page: progress, empty state, reassurance ------------------ */

.section--shopping-cart .av-cart-shipping-bar {
    background: var(--cart-cream);
    border: 1px solid var(--cart-line);
    border-radius: 14px;
    margin-bottom: 22px;
    padding: 16px 20px;
}

.section--shopping-cart .av-cart-shipping-bar.is-unlocked {
    background: #eef5f2;
    border-color: #cfe3db;
}

.section--shopping-cart .av-cart-shipping-text {
    align-items: center;
    color: var(--cart-ink);
    display: flex;
    font-size: 14.5px;
    gap: 10px;
    margin: 0 0 12px;
}

.section--shopping-cart .av-cart-shipping-text i {
    color: var(--cart-bronze);
    font-size: 16px;
}

.section--shopping-cart .av-cart-shipping-bar.is-unlocked .av-cart-shipping-text i {
    color: var(--cart-green);
}

.section--shopping-cart .av-cart-shipping-text strong {
    color: var(--cart-bronze);
    font-weight: 700;
}

.section--shopping-cart .av-cart-shipping-track {
    background: #e6ded1;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.section--shopping-cart .av-cart-shipping-track span {
    background: linear-gradient(90deg, var(--cart-green), var(--cart-bronze));
    border-radius: 999px;
    display: block;
    height: 100%;
    transition: width .4s ease;
}

.section--shopping-cart .av-cart-shipping-bar.is-unlocked .av-cart-shipping-track span {
    background: var(--cart-green);
}

/* empty state */

.section--shopping-cart .av-cart-empty {
    background: var(--cart-cream);
    border: 1px solid var(--cart-line);
    border-radius: 18px;
    padding: 62px 28px 58px;
    text-align: center;
}

.section--shopping-cart .av-cart-empty i {
    color: var(--cart-sand);
    display: block;
    font-size: 52px;
    margin-bottom: 18px;
}

.section--shopping-cart .av-cart-empty h2 {
    color: var(--cart-green);
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
}

.section--shopping-cart .av-cart-empty p {
    color: var(--cart-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto 26px;
    max-width: 46ch;
}

.section--shopping-cart .av-cart-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.section--shopping-cart .av-cart-btn {
    background: var(--cart-green);
    border: 2px solid var(--cart-green);
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 26px;
    transition: background-color .2s ease, border-color .2s ease;
}

.section--shopping-cart .av-cart-btn:hover {
    background: var(--cart-bronze);
    border-color: var(--cart-bronze);
    color: #fff;
}

.section--shopping-cart .av-cart-btn-ghost {
    background: transparent;
    border-color: var(--cart-line);
    color: var(--cart-green);
}

.section--shopping-cart .av-cart-btn-ghost:hover {
    background: #fff;
    border-color: var(--cart-sand);
    color: var(--cart-green);
}

/* reassurance list under the checkout button */

.section--shopping-cart .av-cart-reassure {
    border-top: 1px solid var(--cart-sand);
    list-style: none;
    margin: 4px 0 0;
    padding: 16px 0 0;
}

.section--shopping-cart .av-cart-reassure li {
    align-items: flex-start;
    color: var(--cart-muted);
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.section--shopping-cart .av-cart-reassure li:last-child {
    margin-bottom: 0;
}

.section--shopping-cart .av-cart-reassure i {
    color: var(--cart-green);
    flex: 0 0 auto;
    font-size: 13px;
    margin-top: 2px;
    width: 15px;
}

/* keep the totals reachable while scrolling a long cart */
@media (min-width: 992px) {
    .section--shopping-cart .cart-totals {
        position: sticky;
        top: 24px;
    }
}

/* --- cart table: align the header band with its container ------------
   The Nest theme styles the header row as a floating rounded pill:
       .shopping-summery table thead th.start { border-radius:10px 0 0 10px }
       .shopping-summery table thead th.end   { border-radius:0 10px 10px 0 }
   That was designed for a table with no surrounding box. Inside the
   bordered, rounded container above it reads as a misaligned band, so the
   corners are squared off and the container does the clipping instead.

   Two more theme rules had to be neutralised:
     * th.start carries the .pl-30 utility (padding-left:30px !important)
       while body cells sit at 12px, so the columns did not line up.
     * tbody tr forces a Bootstrap bs-light background and a #dee2e6
       border, both !important, which fought the cream/sand palette.
   ------------------------------------------------------------------ */

.section--shopping-cart .shopping-summery table thead th.start,
.section--shopping-cart .shopping-summery table thead th.end {
    border-radius: 0;
}

/* one shared gutter so header labels sit directly above their column */
.section--shopping-cart .table--cart thead .main-heading th:first-child,
.section--shopping-cart .table--cart tbody td:first-child {
    padding-left: 20px !important;
}

.section--shopping-cart .table--cart thead .main-heading th:last-child,
.section--shopping-cart .table--cart tbody td:last-child {
    padding-right: 20px !important;
}

/* rows are white on the container, not Bootstrap's grey */
.section--shopping-cart .shopping-summery table tbody tr {
    background-color: #fff !important;
    border-bottom: 0;
}

/* the header band must reach the container edge, so the wrapper cannot
   introduce its own scroll context on desktop */
@media (min-width: 992px) {
    .section--shopping-cart .shopping-summery .table-responsive {
        overflow: visible;
    }
}

/* on mobile the table scrolls, so the radius is clipped by the wrapper */
@media (max-width: 991px) {
    .section--shopping-cart .shopping-summery {
        border-radius: 14px;
    }

    .section--shopping-cart .shopping-summery .table-responsive {
        border-radius: inherit;
    }
}

/* --- cart totals: make the panel actually read as a panel ------------
   It was #f7f4ee, which is technically cream but so close to white that
   against the page it just looked like an unstyled block. Deepened one
   step and given the sand border rather than the hairline, so it reads
   as a deliberate summary card next to the white items table.
   ------------------------------------------------------------------ */

.section--shopping-cart .cart-totals {
    background: #f3ece0;
    border: 1px solid var(--cart-sand) !important;
    box-shadow: none;
}

/* the divider above the total needs to stay visible on the deeper ground */
.section--shopping-cart .cart-totals tr:last-child td {
    border-top: 1px solid #e0d0b4 !important;
}

/* give the grand total its own white plate so the figure carries weight */
.section--shopping-cart .cart-totals h4 strong.text-brand {
    display: inline-block;
}

.section--shopping-cart .cart-totals .btn {
    box-shadow: 0 8px 20px -12px rgba(24, 77, 69, .6);
}

/* ── wishlist page ───────────────────────────────────────────────────
   Shares .shopping-summery / .table-wishlist markup with the cart but
   sits outside .section--shopping-cart, so it inherited none of those
   fixes: the header row was still the theme's floating #ececec pill,
   th.start still carried .pl-30 (padding-left:30px !important) against
   12px body cells, and tbody rows still forced Bootstrap's grey
   bs-light background. Same three corrections, scoped to .av-wishlist.
   ------------------------------------------------------------------ */

.av-wishlist {
    --wl-green: #184d45;
    --wl-bronze: #b46e29;
    --wl-sand: #f0dcc2;
    --wl-cream: #f7f4ee;
    --wl-line: #ece5d8;
    --wl-ink: #3a443f;
    --wl-muted: #6d746f;
}

.av-wishlist h1.heading-2 {
    color: var(--wl-green);
    letter-spacing: -.01em;
}

.av-wishlist .text-brand {
    color: var(--wl-bronze) !important;
}

/* --- the table as a single bordered surface -------------------------- */

.av-wishlist .shopping-summery {
    background: #fff;
    border: 1px solid var(--wl-line);
    border-radius: 16px;
    overflow: hidden;
}

.av-wishlist .table-wishlist {
    margin: 0;
}

.av-wishlist .shopping-summery table thead th {
    background: var(--wl-cream);
    border-bottom: 1px solid var(--wl-line);
    color: var(--wl-green);
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 16px 12px;
    text-transform: uppercase;
}

/* square off the theme's floating-pill corners so the band meets the box */
.av-wishlist .shopping-summery table thead th.start,
.av-wishlist .shopping-summery table thead th.end {
    border-radius: 0;
}

.av-wishlist .shopping-summery table tbody td {
    border-bottom: 1px solid var(--wl-line);
    padding: 18px 12px;
    vertical-align: middle;
}

.av-wishlist .shopping-summery table tbody tr {
    background-color: #fff !important;
    border-bottom: 0;
}

.av-wishlist .shopping-summery table tbody tr:last-child td {
    border-bottom: 0;
}

/* one shared gutter so headers sit above their column */
.av-wishlist .shopping-summery table thead th:first-child,
.av-wishlist .shopping-summery table tbody td:first-child {
    padding-left: 20px !important;
}

.av-wishlist .shopping-summery table thead th:last-child,
.av-wishlist .shopping-summery table tbody td:last-child {
    padding-right: 20px !important;
}

/* --- cells ----------------------------------------------------------- */

.av-wishlist .product-thumbnail img {
    aspect-ratio: 1 / 1;
    background: var(--wl-cream);
    border: 1px solid var(--wl-line);
    border-radius: 12px;
    margin-right: 0;
    max-width: 84px;
    object-fit: cover;
    width: 100%;
}

.av-wishlist a.product-name {
    color: var(--wl-green) !important;
    font-weight: 600;
}

.av-wishlist a.product-name:hover {
    color: var(--wl-bronze) !important;
}

.av-wishlist .price .text-brand {
    color: var(--wl-bronze) !important;
    font-size: 16px;
    font-weight: 700;
}

.av-wishlist .price .old-price del {
    color: #a8aeaa;
    font-size: 13px;
    margin-left: 6px;
}

/* stock status reads as a pill rather than loose text */
.av-wishlist .stock-status {
    background: #eef5f2;
    border-radius: 999px;
    color: var(--wl-green);
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 14px;
}

.av-wishlist .stock-status-label {
    color: var(--wl-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.av-wishlist .add-to-cart-button {
    background: var(--wl-green);
    border: 2px solid var(--wl-green);
    border-radius: 999px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 20px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.av-wishlist .add-to-cart-button:hover {
    background: var(--wl-bronze);
    border-color: var(--wl-bronze);
    box-shadow: 0 8px 18px -10px rgba(180, 110, 41, .7);
    color: #fff;
}

.av-wishlist .js-remove-from-wishlist-button {
    align-items: center;
    border-radius: 50%;
    color: #a8aeaa;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
    width: 34px;
}

.av-wishlist .js-remove-from-wishlist-button:hover {
    background: #fbeceb;
    color: #c0392b;
}

/* --- empty state ------------------------------------------------------ */

.av-wishlist .av-wishlist-empty {
    background: var(--wl-cream);
    border: 1px solid var(--wl-line);
    border-radius: 18px;
    padding: 62px 28px 58px;
    text-align: center;
}

.av-wishlist .av-wishlist-empty i {
    color: var(--wl-sand);
    display: block;
    font-size: 52px;
    margin-bottom: 18px;
}

.av-wishlist .av-wishlist-empty h2 {
    color: var(--wl-green);
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
}

.av-wishlist .av-wishlist-empty p {
    color: var(--wl-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto 26px;
    max-width: 46ch;
}

.av-wishlist .av-wishlist-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.av-wishlist .av-wishlist-btn {
    background: var(--wl-green);
    border: 2px solid var(--wl-green);
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 26px;
    transition: background-color .2s ease, border-color .2s ease;
}

.av-wishlist .av-wishlist-btn:hover {
    background: var(--wl-bronze);
    border-color: var(--wl-bronze);
    color: #fff;
}

.av-wishlist .av-wishlist-btn-ghost {
    background: transparent;
    border-color: var(--wl-line);
    color: var(--wl-green);
}

.av-wishlist .av-wishlist-btn-ghost:hover {
    background: #fff;
    border-color: var(--wl-sand);
    color: var(--wl-green);
}

@media (max-width: 991px) {
    .av-wishlist .shopping-summery table tbody td {
        padding: 12px;
    }
}

/* ── products page: the filter sidebar ───────────────────────────────
   Every category was rendering the SAME placeholder icon - icon-1.png,
   icon-2.png and icon-3.png were byte-identical (md5 b81a60fc...). They
   now point at per-category SVGs; this styles the list around them.
   ------------------------------------------------------------------ */

.bb-product-filter {
    --pf-green: #184d45;
    --pf-bronze: #b46e29;
    --pf-sand: #f0dcc2;
    --pf-cream: #f7f4ee;
    --pf-line: #ece5d8;
    --pf-muted: #6d746f;

    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 20px;
}

.bb-product-filter-title {
    border-bottom: 1px solid var(--pf-line);
    color: var(--pf-green);
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0 0 14px;
    padding-bottom: 12px;
    text-transform: uppercase;
}

.bb-product-filter-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-product-filter-item {
    margin: 0 0 4px;
}

.bb-product-filter-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--pf-muted);
    display: flex;
    font-size: 14.5px;
    gap: 12px;
    padding: 9px 12px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.bb-product-filter-link:hover {
    background: var(--pf-cream);
    border-color: var(--pf-sand);
    color: var(--pf-green);
}

.bb-product-filter-link.active,
.bb-product-filter-item.active > .bb-product-filter-link {
    background: var(--pf-cream);
    border-color: var(--pf-green);
    color: var(--pf-green);
    font-weight: 600;
}

/* the icon sits on a tinted tile so a line-art SVG still reads as a chip */
.bb-product-filter-link img {
    background: var(--pf-cream);
    border: 1px solid var(--pf-line);
    border-radius: 8px;
    flex: 0 0 auto;
    height: 34px;
    object-fit: contain;
    padding: 6px;
    transition: background-color .2s ease, border-color .2s ease;
    width: 34px;
}

.bb-product-filter-link:hover img,
.bb-product-filter-link.active img {
    background: #fff;
    border-color: var(--pf-sand);
}

/* nested sub-categories, if any are ever added */
.bb-product-filter-items .bb-product-filter-items {
    border-left: 1px solid var(--pf-line);
    margin: 4px 0 8px 27px;
    padding-left: 10px;
}

.bb-product-filter-items .bb-product-filter-items .bb-product-filter-link {
    font-size: 13.5px;
    padding: 7px 10px;
}

.bb-product-filter-items .bb-product-filter-items img {
    height: 26px;
    width: 26px;
}

/* ── blog: single post and listing ───────────────────────────────────
   The .ck-content body is left alone apart from rhythm and link colour,
   so pasted editor markup keeps behaving as authored.
   ------------------------------------------------------------------ */

.single-page {
    --bl-green: #184d45;
    --bl-bronze: #b46e29;
    --bl-sand: #f0dcc2;
    --bl-cream: #f7f4ee;
    --bl-line: #ece5d8;
    --bl-ink: #3a443f;
    --bl-muted: #6d746f;
}

.single-page .single-header .font-heading a {
    color: var(--bl-bronze);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.single-page .single-header h2 {
    color: var(--bl-green);
    font-size: 34px;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin-bottom: 14px;
    max-width: 22ch;
}

.single-page .single-header-meta .entry-meta {
    align-items: center;
    border-bottom: 1px solid var(--bl-line);
    color: var(--bl-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13.5px;
    gap: 10px;
    padding-bottom: 18px;
}

.single-page .author-avatar .img-circle {
    border: 1px solid var(--bl-line);
    border-radius: 50%;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

.single-page .post-by {
    color: var(--bl-ink);
    font-weight: 600;
}

.single-page .post-on.has-dot::before {
    color: var(--bl-sand);
}

.single-page .single-thumbnail {
    border: 1px solid var(--bl-line);
    border-radius: 18px;
    margin: 26px 0 34px;
    overflow: hidden;
}

.single-page .single-thumbnail img {
    display: block;
    height: auto;
    width: 100%;
}

/* --- the article body ------------------------------------------------ */

.single-page .single-content .ck-content {
    color: var(--bl-ink);
    font-size: 16.5px;
    line-height: 1.8;
    max-width: 100%;
}

.single-page .single-content .ck-content > p {
    margin-bottom: 20px;
}

.single-page .single-content .ck-content h2 {
    color: var(--bl-green);
    font-size: 23px;
    letter-spacing: -.01em;
    margin: 38px 0 14px;
}

.single-page .single-content .ck-content h3 {
    color: var(--bl-green);
    font-size: 19px;
    margin: 30px 0 12px;
}

.single-page .single-content .ck-content a {
    color: var(--bl-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-page .single-content .ck-content a:hover {
    color: var(--bl-bronze);
}

.single-page .single-content .ck-content ul,
.single-page .single-content .ck-content ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.single-page .single-content .ck-content li {
    margin-bottom: 9px;
}

.single-page .single-content .ck-content li::marker {
    color: var(--bl-bronze);
}

.single-page .single-content .ck-content strong {
    color: var(--bl-green);
}

.single-page .single-content .ck-content blockquote {
    background: var(--bl-cream);
    border: 0;
    border-left: 3px solid var(--bl-bronze);
    border-radius: 0 12px 12px 0;
    color: var(--bl-ink);
    font-size: 17px;
    font-style: italic;
    margin: 28px 0;
    padding: 20px 24px;
}

.single-page .single-content .ck-content img {
    border-radius: 12px;
    height: auto;
    max-width: 100%;
}

/* --- tags + share ---------------------------------------------------- */

.single-page .entry-bottom {
    align-items: center;
    border-top: 1px solid var(--bl-line);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding-top: 24px;
}

.single-page .entry-bottom .tags .btn {
    background: var(--bl-cream);
    border: 1px solid var(--bl-line);
    border-radius: 999px;
    color: var(--bl-green);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
}

.single-page .entry-bottom .tags .btn:hover {
    background: var(--bl-green);
    border-color: var(--bl-green);
    color: #fff;
}

@media (max-width: 767px) {
    .single-page {
        padding-right: 0 !important;
    }

    .single-page .single-header h2 {
        font-size: 26px;
        max-width: none;
    }

    .single-page .single-content .ck-content {
        font-size: 16px;
    }
}

/* ── products list: mobile filter drawer ─────────────────────────────
   The sidebar is a Bootstrap col-xl-3, so below 1200px it collapses to
   full width and the whole filter stack — categories, brands, tags,
   price, on-sale — sits above the first product. Below the breakpoint
   it becomes an off-canvas drawer behind a Filter button; above it,
   everything here switches off and it is an ordinary column again.
   ------------------------------------------------------------------ */

.av-filter-trigger,
.av-filter-head,
.av-filter-foot,
.av-filter-backdrop {
    display: none;
}

@media (max-width: 1199.98px) {
    .av-filter-trigger {
        align-items: center;
        background: #fff;
        border: 1px solid #ece5d8;
        border-radius: 999px;
        color: #184d45;
        display: inline-flex;
        font-family: var(--font-heading), "Montserrat", sans-serif;
        font-size: 14px;
        font-weight: 600;
        gap: 9px;
        margin-bottom: 18px;
        padding: 11px 22px;
        transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    }

    .av-filter-trigger i {
        font-size: 15px;
        line-height: 1;
    }

    .av-filter-trigger:hover,
    .av-filter-trigger[aria-expanded="true"] {
        background: #184d45;
        border-color: #184d45;
        color: #fff;
    }

    /* the drawer itself */
    #av-filter-panel.primary-sidebar {
        background: #fbfaf7;
        bottom: 0;
        box-shadow: 18px 0 44px -30px rgba(24, 77, 69, .7);
        display: flex;
        flex-direction: column;
        left: 0;
        margin-top: 0 !important;
        max-width: 380px;
        overflow: hidden;
        padding: 0;
        position: fixed;
        top: 0;
        transform: translateX(-102%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        visibility: hidden;
        width: 88vw;
        z-index: 1060;
    }

    #av-filter-panel.primary-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .av-filter-head {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #ece5d8;
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        padding: 16px 20px;
    }

    .av-filter-head span {
        color: #184d45;
        font-family: var(--font-heading), "Montserrat", sans-serif;
        font-size: 15px;
        font-weight: 600;
    }

    .av-filter-close {
        background: transparent;
        border: 0;
        color: #6d746f;
        font-size: 28px;
        line-height: 1;
        padding: 0 4px;
    }

    .av-filter-close:hover {
        color: #b46e29;
    }

    /* the scrollable middle */
    #av-filter-panel.primary-sidebar .widget-area {
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 18px 16px;
    }

    .av-filter-foot {
        background: #fff;
        border-top: 1px solid #ece5d8;
        display: block;
        flex: 0 0 auto;
        padding: 14px 16px;
    }

    .av-filter-apply {
        background: #184d45;
        border: 2px solid #184d45;
        border-radius: 999px;
        color: #fff;
        font-family: var(--font-heading), "Montserrat", sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 13px 20px;
        transition: background-color .2s ease, border-color .2s ease;
        width: 100%;
    }

    .av-filter-apply:hover {
        background: #b46e29;
        border-color: #b46e29;
    }

    .av-filter-backdrop {
        background: rgba(15, 26, 23, .46);
        bottom: 0;
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1050;
    }

    .av-filter-backdrop[hidden] {
        display: none;
    }

    /* stop the page behind the drawer from scrolling with it */
    body.av-filter-locked {
        overflow: hidden;
    }

    /* the filter cards lose their own frame inside the drawer */
    #av-filter-panel.primary-sidebar .bb-product-filter {
        border: 0;
        border-bottom: 1px solid #ece5d8;
        border-radius: 0;
        margin-bottom: 0;
        padding: 16px 4px;
    }

    #av-filter-panel.primary-sidebar .bb-product-filter:last-child {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #av-filter-panel.primary-sidebar {
        transition-duration: .01ms;
    }
}

/* ── SEO: one H1 per page ────────────────────────────────────────────
   50 of 94 pages carried two H1s — the breadcrumb page-title band plus a
   duplicate in the content. The content one is now an H2. On cart and
   wishlist that heading sized off the bare `h1{font-size:48px}` rule
   (`.heading-2` is not defined anywhere in the theme), so the size is
   pinned here to keep the change invisible.
   ------------------------------------------------------------------ */

.section--shopping-cart h2.heading-2,
.av-wishlist h2.heading-2 {
    font-size: 48px;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .section--shopping-cart h2.heading-2,
    .av-wishlist h2.heading-2 {
        font-size: 32px;
    }
}

/* ── blog post: centred measure and a sane cover image ───────────────
   The post layout was blog-post-right-sidebar, but the blog sidebar
   renders completely empty (five widgets are registered to
   primary_sidebar and none of them output anything), so a third of the
   page was blank and the article sat left of centre. The layout is now
   blog-post-full-width; this centres the column and caps the cover,
   which was a 500x700 portrait stretched to full width.
   ------------------------------------------------------------------ */

.single-page {
    margin-inline: auto;
    max-width: 1610px;
    padding-right: 0 !important;
}

.single-page .single-header,
.single-page .single-content,
.single-page .single-header .row,
.single-page .single-content .row {
    margin-left: 0;
    margin-right: 0;
}

.single-page .single-header .col-lg-12,
.single-page .single-content .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}

/* the article measure is centred rather than flush left */
.single-page .single-content .ck-content {
    margin-inline: auto;
    max-width: 100%;
}

/* cover: a banner, not a full-height portrait */
.single-page .single-thumbnail {
    background: var(--bl-cream, #f7f4ee);
    max-height: 420px;
}

.single-page .single-thumbnail img {
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

@media (max-width: 767px) {
    .single-page {
        max-width: none;
    }

    .single-page .single-thumbnail,
    .single-page .single-thumbnail img {
        max-height: 260px;
    }
}

/* ── customer auth: login, register, password reset ──────────────────
   These pages come from the ecommerce plugin (customers/forms/auth) and
   are styled by its front-card.css. That file ships in the plugin source
   but public/vendor/core is NOT in the update package, so after 1.26.11
   it was never published and the page rendered unstyled — fixed by
   republishing assets. This brings the card onto the brand palette so it
   matches the cart, wishlist and checkout rather than Bootstrap defaults.
   ------------------------------------------------------------------ */

.auth-card {
    --au-green: #184d45;
    --au-bronze: #b46e29;
    --au-sand: #f0dcc2;
    --au-cream: #f7f4ee;
    --au-line: #ece5d8;
    --au-ink: #3a443f;
    --au-muted: #6d746f;

    background: #fff;
    border: 1px solid var(--au-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 54px -34px rgba(24, 77, 69, .5);
    overflow: hidden;
}

.auth-card__header {
    background: var(--au-cream);
    border-bottom: 1px solid var(--au-line);
    padding: 26px 28px;
}

.auth-card__header-icon {
    background: #fff !important;
    border: 1px solid var(--au-line);
    border-radius: 12px !important;
    color: var(--au-green);
}

.auth-card__header-icon .icon,
.auth-card__header-icon svg {
    color: var(--au-green);
}

.auth-card__header-title {
    color: var(--au-green);
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
}

.auth-card__header .auth-card__header-description {
    color: var(--au-muted) !important;
    font-size: 14px;
    margin: 8px 0 0 !important;
}

.auth-card__body {
    padding: 28px;
}

/* --- fields ---------------------------------------------------------- */

.auth-card .form-label {
    color: var(--au-muted);
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 6px;
}

.auth-card .form-control {
    background: var(--au-cream);
    border: 1px solid var(--au-line);
    border-radius: 10px;
    color: var(--au-ink);
    font-size: 15px;
    min-height: 48px;
    padding: 12px 14px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.auth-card .form-control:focus {
    background: #fff;
    border-color: var(--au-bronze);
    box-shadow: 0 0 0 3px rgba(180, 110, 41, .12);
}

.auth-card .form-control.is-invalid {
    border-color: #c0392b;
}

.auth-card .invalid-feedback {
    color: #c0392b;
    font-size: 12.5px;
}

.auth-card .auth-input-icon {
    color: var(--au-muted);
}

.auth-card .form-check-input:checked {
    background-color: var(--au-green);
    border-color: var(--au-green);
}

/* --- actions --------------------------------------------------------- */

.auth-card .btn-auth-submit,
.auth-card .btn-primary {
    background-color: var(--au-green);
    border: 2px solid var(--au-green);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-heading), "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 26px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.auth-card .btn-auth-submit:hover,
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus {
    background-color: var(--au-bronze);
    border-color: var(--au-bronze);
    box-shadow: 0 10px 24px -12px rgba(180, 110, 41, .7);
    color: #fff;
}

.auth-card a {
    color: var(--au-green);
}

.auth-card a:hover {
    color: var(--au-bronze);
}

/* --- social login ----------------------------------------------------
   The social-login plugin already draws a divider on .login-options-title,
   with 40px of margin AND 40px of padding above it. Adding a second
   border-top on .login-options produced two horizontal rules with a wide
   gap between them. Only the plugin's line is kept, restyled to the brand
   and with the spacing brought back to something sensible.
   ------------------------------------------------------------------ */

.auth-card .login-options {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.auth-card .login-options-title {
    border-top: 1px solid var(--au-line);
    color: var(--au-muted);
    font-size: 13px;
    margin: 24px 0 0;
    padding: 18px 0 0;
    text-align: center;
}

.auth-card .login-options-title p {
    color: var(--au-muted);
    font-size: 13px;
    padding: 0 14px;
}

/* the plugin insets the button list by 50px, which is a lot on a card */
.auth-card .login-options .social-login-basic {
    margin: 14px 0 0;
    padding: 0;
}

.auth-card .login-options .social-login-basic .social-login {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 12px 18px;
}

.auth-card .login-options .social-login-basic li:last-child .social-login {
    margin-bottom: 0;
}

.auth-card .login-options a,
.auth-card .social-login a {
    border: 1px solid var(--au-line);
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease;
}

.auth-card .login-options a:hover,
.auth-card .social-login a:hover {
    background: var(--au-cream);
    border-color: var(--au-sand);
}

@media (max-width: 575px) {
    .auth-card__header,
    .auth-card__body {
        padding: 20px 18px;
    }
}