/* ===========
           FOR TOP IMAGE H1
=============== */

.product-hero-content h1{
    font-size:62px;
    line-height:1.05;
    letter-spacing:0;
    font-weight:600;
}

@media(max-width:768px){
    .product-hero-content h1{
        font-size:32px;
        line-height:1.2;
    }
}

/* ===========
  FOR INDEX PAGE HERO ANIMATION
=============== */

#home-hero{
    min-height:650px !important;
    height:650px !important;
    overflow:hidden !important;
}

/* Move heading upward */
#home-hero .hero-copy{
    top:80px !important;
    transform:none !important;
}

/* Move product image upward and slightly right */
#home-hero .hero-stage{
    top:40% !important;
    right:5% !important;
    transform:translateY(-50%) scale(.95) !important;
}

/* Create space before button */
#home-hero .hero-actions{
    top:auto !important;
    bottom:80px !important;
    transform:none !important;
}

/* Prevent button overlap */
#home-hero .hero-description{
    margin-bottom:40px !important;
}

#home-hero .primary-button{
    margin-top:20px !important;
}

#home-hero{
    display:flex !important;
    align-items:center !important;
}

#home-hero .hero-copy{
    flex:0 0 60% !important;
    width:60% !important;
    max-width:60% !important;
    box-sizing:border-box;
    z-index:5;
}

#home-hero .hero-description{
    width:90% !important;
    max-width:650px;
}

#home-hero .hero-stage{
    flex:0 0 40%;
    width:40%;
}

@media(max-width:900px){

    #home-hero{
        display:block !important;
    }

    #home-hero .hero-copy{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    #home-hero .hero-stage{
        width:100%;
    }
}



 /*  header   */
/* ===========================
   HEADER / NAVIGATION
=========================== */

.nav {
  width: 100%;
  height: 70px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  gap: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}


/* ===========================
   BRAND LOGO
=========================== */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  color: #1f4d3a;
}

.brand-mark {
  width: 42px;
  height: 42px;
  background: #1f4d3a;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1f4d3a;
}

.brand-text small {
  margin-top: 2px;
  font-size: 10px;
  color: #e9a45b;
  letter-spacing: .5px;
}


/* ===========================
   NAVIGATION MENU
=========================== */

.nav nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.nav nav a {
  text-decoration: none;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: 0.3s ease;
}

.nav nav a:hover {
  color: #1f4d3a;
}


 /* ===========================
   ingredients PAGE  TABS
=========================== */



  /* =====================================
   Compact Minimal About Cards
===================================== */

.why-choice-cards{

    display:grid;

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

    gap:16px;

    margin-top:25px;

}


.why-choice-cards article{

    padding:18px 16px;

    min-height:190px;

    background:#ffffff;

    border-radius:16px;

    transition:.25s ease;

}


/* Number */

.choice-number{

    position:absolute;

    top:14px;

    right:16px;

    font-size:12px;

    font-weight:700;

    color:#9aaea1;

}


/* Icon */

.choice-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

    border-radius:12px;

    background:#153e2d;

    color:#ffffff;

}


.choice-icon svg{

    width:22px;

    height:22px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

}



/* Heading */

.why-choice-cards h4{

    margin:0 0 6px;

    color:#153e2d;

    font-size:16px;

    line-height:1.3;

    font-weight:700;

}



/* Text */

.why-choice-cards p{

    margin:0;

    color:#68756e;

    font-size:13px;

    line-height:1.5;

}



/* Tablet */

@media(max-width:1000px){

    .why-choice-cards{

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

    }

}


/* Mobile */

@media(max-width:600px){

    .why-choice-cards{

        grid-template-columns:1fr;

    }

}


    /* =====================================
   Compact Formula Section (Keep Design)
===================================== */

/* Compact Formula Section Spacing Only */

.formula{
    padding-top:5px !important;
    padding-bottom:5px !important;
}


/* Reduce heading spacing without affecting bottle */

.formula-sticky .section-kicker{
    margin-bottom:8px;
}

.formula-sticky h2{
    margin-top:5px;
    margin-bottom:15px;
}


/* Remove extra space around visual */
.formula-visual{
    margin-top:-15px;
    margin-bottom:-15px;
}



   /* Rounded corners only for Reviews section */

.customer-video-wrap{
    border-radius:24px;
    overflow:hidden;
}


.customer-video{
    border-radius:24px;
    display:block;
}


.review-carousel{
    border-radius:24px;
    overflow:hidden;
}


.video-caption{
    border-radius:0 0 24px 24px;
}


/* Mobile */

@media(max-width:900px){

    .customer-video-wrap,
    .customer-video,
    .review-carousel{

        border-radius:20px;

    }

}


/* =====================
    LOGO
 ======================= */
 
 .logo{
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    margin-left: 20px;   /* Shift logo to the right */
}

.logo img{
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
    margin-left: 10px;
}

.logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.logo-text h2{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#2E7D32;
    letter-spacing:1px;
    line-height:1;
}

.logo-text p{
    margin:4px 0 0;
    font-size:13px;
    color:#666;
    letter-spacing:1px;
    line-height:1.3;
}

.logo img{
    width:65px;
    height:65px;
}

/* ==========================
    ABOUT US PAGE PURPOSE TWO COLUMN SECTION
========================== */


.about-purpose-section {

    background:#fff;

    padding:90px 0;

}



.purpose-layout {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



/* LEFT SIDE */


.purpose-intro {

    max-width:520px;

}


.purpose-intro .section-kicker {

    color:#879578;

    letter-spacing:3px;

    text-transform:uppercase;

}



.purpose-intro h2 {

    font-size:55px;

    line-height:1.1;

    color:#173326;

    margin:20px 0 30px;

}


.purpose-intro h2 em {

    font-weight:400;

    font-style:italic;

}



.purpose-intro > p {

    color:#626a62;

    font-size:17px;

    line-height:1.8;

    margin-bottom:18px;

}



.purpose-tag {

    margin-top:40px;

    padding:20px;

    background:#f6f4ed;

    border-radius:18px;

    border-left:4px solid #173326;

}



.purpose-tag span {

    font-size:14px;

    letter-spacing:3px;

    color:#173326;

    font-weight:600;

}


.purpose-tag p {

    margin:8px 0 0;

    color:#667066;

}



/* RIGHT SIDE */


.purpose-tabs-wrapper {

    background:#f7f5ef;

    padding:40px;

    border-radius:35px;

    border:1px solid #ebe6d9;

}



.purpose-tabs-nav {

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:35px;

}



.purpose-tab {

    width:100%;

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px 25px;

    background:white;

    border:1px solid #e5e0d4;

    border-radius:18px;

    cursor:pointer;

    font-size:18px;

    color:#526052;

    transition:.35s;

    text-align:left;

}



.purpose-tab span {

    font-size:13px;

    color:#a18f68;

}



.purpose-tab.active {

    background:#173326;

    color:#fff;

    border-color:#173326;

}



.purpose-tab.active span {

    color:#d6c59b;

}




/* CONTENT */


.purpose-panel {

    display:none;

    animation:fadePurpose .4s ease;

}



.purpose-panel.active {

    display:block;

}



.purpose-panel h3 {

    font-size:34px;

    color:#173326;

    margin-bottom:15px;

}



.purpose-panel p {

    color:#626a62;

    line-height:1.8;

    font-size:17px;

}



/* VALUES */


.value-list {

    list-style:none;

    padding:0;

    margin:20px 0 0;

}



.value-list li {

    padding:18px 0;

    border-bottom:1px solid #e6e0d5;

}



.value-list strong {

    display:block;

    color:#173326;

    font-size:18px;

}



.value-list span {

    color:#667066;

    font-size:15px;

}



@keyframes fadePurpose {

    from {

        opacity:0;

        transform:translateY(15px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* MOBILE */

@media(max-width:900px){


.purpose-layout {

    grid-template-columns:1fr;

    gap:45px;

}


.purpose-intro h2 {

    font-size:38px;

}


.purpose-tabs-wrapper {

    padding:25px;

}


}


/* for mission */
.mission-points {

    list-style:none;

    padding:0;

    margin:35px 0 0;

}


.mission-points li {

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:22px 0;

    border-bottom:1px solid #e8e3d8;

}


.mission-points li:last-child {

    border-bottom:none;

}


.mission-icon {

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#173326;

    color:#d6c59b;

    font-size:13px;

    font-weight:600;

}


.mission-points h4 {

    margin:0 0 8px;

    color:#173326;

    font-size:19px;

    font-weight:600;

}


.mission-points p {

    margin:0;

    color:#667066;

    line-height:1.7;

    font-size:15px;

}



@media(max-width:600px){

    .mission-points li {

        gap:15px;

    }


    .mission-icon {

        min-width:36px;

        height:36px;

    }

}

.mission-tabs {

    width:100%;

}


/* Horizontal tab buttons */

.mission-tab-buttons {

    display:flex;

    gap:12px;

    margin-bottom:35px;

    border-bottom:1px solid #e5e1d7;

    padding-bottom:15px;

}



.mission-tab {

    border:none;

    background:transparent;

    padding:14px 35px;

    border-radius:40px;

    color:#667066;

    font-size:16px;

    cursor:pointer;

    transition:.3s ease;

}



.mission-tab:hover {

    color:#173326;

}



.mission-tab.active {

    background:#173326;

    color:#ffffff;

}



/* Tab Content */


.mission-tab-panel {

    display:none;

    animation:missionFade .4s ease;

}


.mission-tab-panel.active {

    display:block;

}



@keyframes missionFade {

    from {

        opacity:0;

        transform:translateY(10px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* Mission List */


.mission-points {

    list-style:none;

    padding:0;

    margin:0;

}



.mission-points li {

    display:flex;

    gap:20px;

    padding:22px 0;

    border-bottom:1px solid #ece7dc;

}



.mission-icon {

    flex-shrink:0;

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#173326;

    color:#d6c59b;

    border-radius:50%;

    font-size:13px;

}



.mission-points h4 {

    margin:0 0 8px;

    color:#173326;

    font-size:19px;

}



.mission-points p {

    margin:0;

    color:#667066;

    line-height:1.7;

}



/* Mobile */


@media(max-width:600px){

    .mission-tab-buttons {

        overflow-x:auto;

    }


    .mission-tab {

        white-space:nowrap;

        padding:12px 25px;

    }


    .mission-points li {

        flex-direction:column;

    }

}

/* Connect hero with About Purpose section */

.editorial-hero.product-page-hero {
    margin-bottom:0 !important;
    padding-bottom:10 !important;
}


.about-purpose-section {
    margin-top:0 !important;
    padding-top:60px;
}

  /* -------------------
  
  why choose us
  
  ---------------------------*/

/* Main layout */

.brand-values {

    display:grid;

    grid-template-columns:320px 1fr;

    gap:45px;

    align-items:start;

}


/* Left heading */

.brand-values-heading {

    width:100%;

    max-width:320px;

}


.brand-values-heading .section-kicker {

    margin-bottom:20px;

}


.brand-values-heading h2 {

    font-size:40px;

    line-height:1.15;

    letter-spacing:-0.5px;

    margin:0;

    white-space:normal;

}


.brand-values-heading h2 em {

    font-style:italic;

    font-weight:400;

}



/* Right cards */

.why-choice-cards {

    display:grid;

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

    gap:18px;

}



/* Card design */

.why-choice-cards article {

    background:#fff;

    border:1px solid #ddd8cc;

    border-radius:20px;

    padding:22px 18px;

    min-height:200px;

}



/* Responsive */

@media(max-width:1100px){

    .brand-values {

        grid-template-columns:1fr;

    }


    .brand-values-heading {

        max-width:600px;

    }

}


@media(max-width:900px){

    .why-choice-cards {

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

    }

}


@media(max-width:600px){

    .why-choice-cards {

        grid-template-columns:1fr;

    }


    .brand-values-heading h2 {

        font-size:34px;

    }

}

/* Floating cards effect */

.why-choice-cards article {

    background:#ffffff;

    border:1px solid #ddd8cc;

    border-radius:22px;

    padding:22px 18px;

    min-height:200px;

    box-shadow:
        0 15px 35px rgba(23,51,38,.08),
        0 5px 15px rgba(0,0,0,.04);

    transform:translateY(0);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    animation:floatCard 5s ease-in-out infinite;

}



/* Different floating timing for each card */

.why-choice-cards article:nth-child(2){

    animation-delay:.5s;

}


.why-choice-cards article:nth-child(3){

    animation-delay:1s;

}


.why-choice-cards article:nth-child(4){

    animation-delay:1.5s;

}


.why-choice-cards article:nth-child(5){

    animation-delay:2s;

}


.why-choice-cards article:nth-child(6){

    animation-delay:2.5s;

}



/* Hover lift */

.why-choice-cards article:hover {

    transform:
        translateY(-12px)
        rotate(1deg);

    box-shadow:
        0 25px 50px rgba(23,51,38,.15);

}



/* Floating animation */

@keyframes floatCard {

    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-8px);

    }

}

  .brand-values-intro {

    margin-top:25px;

    color:#667066;

    font-size:15px;

    line-height:1.8;

    max-width:280px;

    text-align:justify;

}




/* ===================

REVIEW PAGE

=====================

.reviews-heading{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.left-text{
    font-weight:600;
}

.right-rating{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

.score{
    font-size:28px;
    font-weight:bold;
    color:#2E7D32;
}

.stars{
    color: #FF9800 !important;
}

.rating-text{
    color:#666;
    font-size:14px;
}



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

.contact-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.contact-info a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #333333;
  font-size: 12px;
  white-space: nowrap;
}

.contact-info i {
  color: #e9a45b;
  font-size: 16px;
}


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

.cart-button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #1f4d3a;
  color: #ffffff;
  padding: 9px 15px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  transition: .3s ease;
}

.cart-button:hover {
  background: #163b2c;
}

.cart-button i {
  color: #e9a45b;
  font-size: 16px;
}

.cart-count {
  background: #e9a45b;
  color: #1f4d3a;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}


/* ===========================
   RESPONSIVE DESIGN
=========================== */

@media(max-width:1200px){

  .nav {
    padding:0 20px;
  }

  .nav nav {
    gap:15px;
  }

  .contact-info span {
    display:none;
  }

}


@media(max-width:900px){

  .nav {
    height:auto;
    min-height:70px;
    flex-wrap:wrap;
    padding:12px 20px;
  }

  .nav nav {
    order:3;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
  }

}


@media(max-width:600px){

  .brand-name {
    font-size:18px;
  }

  .contact-info {
    display:none;
  }

  .nav nav {
    gap:12px;
  }

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

}
 /* **************** */


    /* Compact Editorial Hero - Height Reduction Only */

.product-page-hero{

    min-height:140px !important;

    padding:22px 45px !important;

    margin:0px auto 25px !important;

}


.product-page-hero .about-hero-content{

    padding:0 !important;

}


.product-page-hero .section-kicker{

    margin-bottom:8px !important;

}


.product-page-hero h1{

    margin-bottom:8px !important;

}


.product-page-hero p:not(.section-kicker){

    line-height:1.5 !important;

}



.product-page-hero .editorial-hero-mark{

    transform:scale(.75);

}


@media(max-width:700px){

    .product-page-hero{

        padding:20px 25px !important;

    }

}

.page-nav,
main{
    margin-bottom:0;
    margin-top:0;
    padding-top:0;
}

.product-page-hero{
    margin-top:0;
    padding:24px 60px 20px;
}

.product-page-hero h1{
    margin-top:0;
}

.page-breadcrumb{
    margin-top:auto;
}

/* Light Orange + White Gradient Breadcrumb */

.page-breadcrumb{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:max-content;

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

    padding:10px 24px;

    background:linear-gradient(
        135deg,
        #fff7ed,
        #ffffff 55%,
        #fed7aa
    );

    border:1px solid rgba(234,88,12,.18);

    border-radius:999px;

    box-shadow:
        0 8px 25px rgba(234,88,12,.12);

    font-size:14px;
    font-weight:500;

}


/* Links */

.page-breadcrumb a{

    color:#9a3412;

    text-decoration:none;

    font-weight:500;

    transition:.25s ease;

}


.page-breadcrumb a:hover{

    color:#ea580c;

}


/* Separator */

.page-breadcrumb span{

    color:#fb923c;

    font-size:13px;

}


/* Current Page */

.page-breadcrumb span:last-child{

    color:#7c2d12;

    font-weight:700;

}

   /* need assistancec about page */

   /* =========================
   PREMIUM LIGHT CTA SECTION
========================= */

.page-contact-cta{
    background:linear-gradient(135deg,#f4faef 0%,#ffffff 55%,#e5f5d9 100%);
    padding:55px 20px;
    display:flex;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;
}


/* Soft green glow */

.page-contact-cta::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:#9bd77a;
    opacity:.18;
    filter:blur(70px);
    top:-80px;
    right:-50px;
}


/* Content */

.contact-cta-content{
    max-width:700px;
    position:relative;
    z-index:2;
}


.section-kicker{
    color:#4d8c3a;
    font-size:14px;
    font-weight:600;
    letter-spacing:1.8px;
    text-transform:uppercase;
    margin:0 0 12px;
}


.contact-cta-content h2{
    color:#18351f;
    font-family:"Poppins",sans-serif;
    font-size:38px;
    line-height:1.2;
    font-weight:600;
    margin:0 0 15px;
}


.contact-cta-content h2 em{
    color:#4f9b42;
    font-style:italic;
}


.contact-cta-content > p:not(.section-kicker){
    color:#536356;
    font-size:16px;
    line-height:1.6;
    max-width:620px;
    margin:0 auto 25px;
}


/* Button */

.cta-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:13px 26px;
    background:#3f8f3d;
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}


.cta-button span{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#fff;
    color:#3f8f3d;
    display:flex;
    align-items:center;
    justify-content:center;
}


.cta-button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(63,143,61,.25);
}


/* Mobile */

@media(max-width:768px){

    .page-contact-cta{
        padding:40px 20px;
    }

    .contact-cta-content h2{
        font-size:30px;
    }

    .contact-cta-content > p:not(.section-kicker){
        font-size:15px;
    }

}
   
  /* need assistancec about page */
   
    /* ==========================================================
   EARTHMIRA PREMIUM TRUST BAR
   Luxury Supplement Brand Style
========================================================== */

.trust-bar {

    width: min(1320px, 92%);

    margin: 0 auto;

    display: grid;

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

    gap: 16px;

}


/* Trust Card */

.trust-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 68px;

    padding: 12px 18px;

    overflow: hidden;

    border-radius: 18px;


    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.98),
        rgba(228,244,235,.96)
    );


    border:

    1px solid rgba(18,58,44,.12);


    box-shadow:

    0 8px 30px rgba(18,58,44,.08),

    inset 0 1px 0 rgba(255,255,255,.8);


    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}


/* Moving Shine Effect */

.trust-item::before {

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;


    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.75),

        transparent

    );


    transition:.7s ease;

}


.trust-item:hover::before {

    left:140%;

}



.trust-item:hover {

    transform:translateY(-5px);


    border-color:

    rgba(44,130,88,.35);


    box-shadow:

    0 18px 45px rgba(18,58,44,.16);

}


/* Icon */

.trust-icon {

    width:42px;

    height:42px;


    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:13px;


    color:white;


    background:

    linear-gradient(

        145deg,

        #246447,

        #0c2b1d

    );


    box-shadow:

    0 8px 18px rgba(18,58,44,.25);


    transition:.35s ease;

}


.trust-item:hover .trust-icon {

    transform:

    scale(1.08)

    rotate(-5deg);


}



/* SVG Icons */

.trust-icon svg {

    width:21px;

    height:21px;


    stroke:white;

}



/* Text */

.trust-content {

    position:relative;

    z-index:2;

}



.trust-content h4 {


    margin:0 0 2px;


    font-family:

    "Manrope",
    sans-serif;


    font-size:15px;


    line-height:1.2;


    font-weight:800;


    background:

    linear-gradient(

        90deg,

        #123A2C,

        #26704d

    );


    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;


}



.trust-content p {


    margin:0;


    font-family:

    "DM Sans",
    sans-serif;


    color:#66736c;


    font-size:12px;


    line-height:1.4;


}


/* ==========================================================
   Responsive
========================================================== */


@media(max-width:1100px){


.trust-bar {

    grid-template-columns:

    repeat(2,1fr);

}


}



@media(max-width:600px){


.trust-bar {


    grid-template-columns:1fr;

    width:90%;


}



.trust-item {


    padding:14px 16px;


}



.trust-content h4 {


    font-size:14px;


}


}

/* bact to top */

      .back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;

    width:48px;
    height:48px;

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

    background:#3f8f3d;
    color:#fff;

    border-radius:50%;
    text-decoration:none;

    font-size:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.2);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

    z-index:999;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
}

.back-to-top:hover{
    background:#2f6f2d;
    transform:translateY(-5px);
}
/***************/


/* blog top image */

/* ===========================
   JOURNAL LIST SECTION
=========================== */

.journal-list {
  padding-top: 20px;
  margin-top: 0;
}


/* Remove extra spacing from heading */
.journal-list-heading {
  margin-top: 0;
}


/* If previous hero section has bottom spacing */
.blog-hero {
  margin-bottom: 0;
}


/* Section kicker spacing */
.journal-list-heading .section-kicker {
  margin-top: 0;
  margin-bottom: 10px;
}


.journal-list-heading h2 {
  margin-top: 0;
}


/* Mobile */
@media(max-width:768px){

  .journal-list {
    padding-top: 15px;
  }

}

/* ===========================
   BLOG SIGNOFF SECTION
=========================== */

.blog-signoff {
  width: 100%;
  padding: 80px 40px;
  text-align: center;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;

  background: linear-gradient(
    135deg,
    #dcefdc 0%,
    #f7fbf7 45%,
    #ffffff 100%
  );
}


/* Decorative green glow */
.blog-signoff::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: rgba(31,77,58,0.12);
  border-radius: 50%;
  top: -150px;
  right: -100px;
}


/* ===========================
   CONTENT
=========================== */

.blog-signoff span {
  position: relative;
  display: block;

  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;

  color: #e9a45b;
  margin-bottom: 18px;
}


.blog-signoff h2 {
  position: relative;

  max-width: 850px;
  margin: 0 auto 30px;

  font-size: 50px;
  line-height: 1.2;
  font-weight: 700;

  color: #1f4d3a;
}


.blog-signoff h2 em {
  font-style: italic;
  color: #e9a45b;
}


/* ===========================
   BUTTON
=========================== */

.blog-signoff a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 32px;

  background: #1f4d3a;
  color: #ffffff;

  border-radius: 30px;

  text-decoration: none;
  font-size: 15px;
  font-weight: 600;

  transition: .3s ease;
}


.blog-signoff a:hover {
  background: #163b2c;
}


.blog-signoff a i {
  color: #e9a45b;
  font-size: 16px;
}


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

.blog-signoff + footer {
  margin-top: 0;
}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

  .blog-signoff {
    padding: 50px 20px;
  }


  .blog-signoff h2 {
    font-size: 34px;
    line-height: 1.25;
  }


  .blog-signoff span {
    font-size: 11px;
  }


  .blog-signoff a {
    padding: 12px 24px;
  }

}

/* single blog */

/* ===========================
   ARTICLE BODY SPACING
=========================== */

.article-body {
  margin-top: 0;
  padding-top: 0;
}


/* Remove gap from previous section */
.article-body:first-child {
  margin-top: 0;
}


/* If article is inside a content section */
.article-content,
.article-container,
.article-page {
  padding-top: 0;
  margin-top: 0;
}


/* Heading spacing */
.article-body h2:first-child {
  margin-top: 0;
}


/* Lead paragraph */
.article-lead {
  margin-top: 0;
}

/* ===========================
   FEATURED STORY SECTION
=========================== */

.featured-story {
  margin-top: 50px;
  padding: 45px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 45px;

  background: linear-gradient(
    135deg,
    #f3f8f2 0%,
    #ffffff 100%
  );

  border-radius: 28px;
  box-shadow: 0 12px 35px rgba(31,77,58,0.08);

  position: relative;
  overflow: hidden;
}


/* Decorative green circle */
.featured-story::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(31,77,58,0.08);
  border-radius: 50%;
  top: -100px;
  right: -80px;
}


/* ===========================
   FEATURED IMAGE CARD
=========================== */

.featured-story-visual {
  position: relative;
  min-height: 360px;
  border-radius: 22px;
  overflow: hidden;

  background: linear-gradient(
    145deg,
    #1f4d3a,
    #3b7558
  );

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

  text-decoration:none;
  color:#fff;
}


.featured-story-visual span {
  position:absolute;
  top:25px;
  left:25px;

  font-size:12px;
  letter-spacing:1.5px;
  color:#e9a45b;
}


.featured-story-visual strong {
  position:absolute;
  font-size:120px;
  opacity:.12;
}


.featured-story-visual small {
  position:relative;
  z-index:2;

  font-size:30px;
  line-height:1.1;
  letter-spacing:2px;
  font-weight:700;
  text-align:center;
}


/* Orbit decoration */
.story-orbit {
  position:absolute;

  width:220px;
  height:220px;

  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}


/* ===========================
   ARTICLE CONTENT
=========================== */

.featured-story article {
  position:relative;
  z-index:2;
}


.featured-story .section-kicker {
  color:#e9a45b;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
}


.featured-story h2 {
  color:#1f4d3a;
  font-size:42px;
  line-height:1.2;
  margin:15px 0 20px;
}


.featured-story article p {
  color:#555;
  font-size:16px;
  line-height:1.7;
}


/* Read button */

.featured-story article > a {
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:15px;

  padding:12px 25px;

  background:#1f4d3a;
  color:#fff;

  border-radius:30px;
  text-decoration:none;

  font-weight:600;
}


.featured-story article > a span {
  color:#e9a45b;
}


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

@media(max-width:768px){

  .featured-story {
    margin-top:30px;
    padding:25px;
    grid-template-columns:1fr;
    gap:25px;
    border-radius:20px;
  }


  .featured-story-visual {
    min-height:260px;
  }


  .featured-story h2 {
    font-size:32px;
  }

}

/*************/

/*********** refund policy */

/* ===========================
   REFUND STEPS
=========================== */

.refund-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    margin: 60px auto;
    padding: 50px;

    background: linear-gradient(135deg, #eef7ef 0%, #ffffff 100%);
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(31, 77, 58, 0.08);
}


/* Cards */

.refund-steps article {
    background: #ffffff;
    padding: 35px 28px;
    border-radius: 18px;

    text-align: center;

    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    transition: .35s ease;

    border-top: 5px solid #1f4d3a;
}


.refund-steps article:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(31,77,58,.12);
}


/* Number Badge */

.refund-steps article span {
    width: 60px;
    height: 60px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    background: #e9a45b;
    color: #ffffff;

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


/* Heading */

.refund-steps h2 {
    margin-bottom: 15px;

    font-size: 24px;
    color: #1f4d3a;
}


/* Paragraph */

.refund-steps p {
    color: #666;
    line-height: 1.7;
    font-size: 15px;
}


/* Responsive */

@media(max-width:900px){

    .refund-steps{
        grid-template-columns:1fr;
        padding:30px 20px;
    }

}

/* below text */

/* ===========================
   POLICY DOCUMENT
=========================== * /

.policy-document {
    display: flex;
    flex-direction: column;
    gap: 20px;   /* Reduced from 40px * /
    margin: 50px auto;
}


/* Policy Card * /

.policy-document section {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 35px;

    background: #ffffff;
    border-radius: 20px;
    border-left: 6px solid #1f4d3a;

    box-shadow: 0 5px 12px rgba(0,0,0,.04);
    transition: all .3s ease;
}

.policy-document section:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(31,77,58,.08);
}

/*******************/


/*  CAR PAGE */

/* ===========================
   CENTER CART PAGE CONTENT
=========================== */

.simple-cart-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Continue shopping */

.back-link {
    width: 100%;
    max-width: 1100px;
    margin: 25px auto 10px;
}


/* Cart title */

.simple-page-title {
    width: 100%;
    max-width: 1100px;
    margin: 20px auto 40px;
}


/* Empty cart */

.empty-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}


/* Cart layout */

.simple-cart-grid {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto 60px;

    display: grid;
    grid-template-columns: 1fr 360px;

    gap: 35px;

    align-items: start;
}


/* Product card */

.simple-cart-items {
    width:100%;
}


.simple-cart-line {

    width:100%;

    padding:30px;

    display:grid;

    grid-template-columns:140px 1fr auto;

    gap:25px;

    align-items:center;

    background:#fff;

    border-radius:22px;

    box-shadow:
    0 5px 15px rgba(31,77,58,.06);
}


/* Order summary */

.simple-order-card {

    width:100%;

    padding:30px;

    border-radius:22px;

    background:#fff;

    box-shadow:
    0 5px 15px rgba(31,77,58,.06);
}


/* Mobile */

@media(max-width:900px){

    .simple-cart-grid {
        grid-template-columns:1fr;
        max-width:600px;
    }


    .simple-cart-line {
        grid-template-columns:1fr;
        text-align:center;
    }

}

/* cart items on right order summary */

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

.cart-page-grid[hidden],
.simple-order-card[hidden] {
    display: none !important;
}


/* Cart Layout */

.simple-cart-grid {
    width:100%;
    max-width:1100px;

    margin:40px auto;

    display:grid;
    grid-template-columns:1fr 360px;

    gap:35px;

    align-items:start;
}


/* Product Area */

.simple-cart-items {
    width:100%;
}


/* Order Summary Card */

/* ===========================
   DARK GREEN ORDER SUMMARY
=========================== */

.simple-order-card {

    display:block;

    background:linear-gradient(
        145deg,
        #1f4d3a,
        #163b2c
    );

    padding:32px;

    border-radius:24px;

    color:#ffffff;

    box-shadow:
    0 8px 20px rgba(31,77,58,.18);

}


/* Heading */

.simple-order-card h2 {

    color:#ffffff;

    font-size:26px;

    margin:0 0 25px;

}


/* Summary Rows */

.simple-order-card .summary-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.18);

}


.simple-order-card .summary-row span {

    color:rgba(255,255,255,.75);

}


.simple-order-card .summary-row strong {

    color:#ffffff;

}


/* Total */

.simple-order-card .summary-row.total {

    border-bottom:none;

    margin-top:10px;

    font-size:20px;

}


.simple-order-card .summary-row.total strong {

    color:#f2b36d;

}



/* Checkout Button */

/* Premium Medium Light Green Checkout Button */

.simple-order-card .primary-button.wide {

    background:#C9EF63;

    color:#16402e;

    font-weight:700;

    border:1px solid #a5cda9;

    margin-top:25px;

    transition:.3s ease;

}


.simple-order-card .primary-button.wide i {

    color:#e9a45b;

}


.simple-order-card .primary-button.wide:hover {

    background:#C9EF63;

    color:#123525;

}


/* Secure payment text */

.simple-order-card p {

    color:rgba(255,255,255,.7);

    text-align:center;

    font-size:13px;

    margin-top:18px;

}


/* Summary Rows */

.summary-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid #e4ebe4;

    color:#555;

}


.summary-row strong {

    color:#1f4d3a;

    font-weight:700;

}


.summary-row.total {

    border-bottom:none;

    margin-top:10px;

    font-size:20px;

}



/* Checkout Button */

.primary-button.wide {

    width:100%;

    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:15px;

    border-radius:30px;

    background:#1f4d3a;

    color:white;

    text-decoration:none;

}


.primary-button.wide i {

    color:#e9a45b;

}


.simple-order-card p {

    margin-top:18px;

    text-align:center;

    font-size:13px;

    color:#777;

}



/* Mobile */

@media(max-width:900px){

    .simple-cart-grid{

        grid-template-columns:1fr;

    }

}

/***************/

/*********************/


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

.page-title.simple-page-title{
    text-align:center;
    margin:40px auto 30px;
}

.back-link{
    display:block;
    max-width:1100px;
    margin:20px auto;
}

.checkout-grid.simple-checkout-grid{
    max-width:1100px;
    margin:40px auto;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    justify-content:center;
}

.checkout-form.simple-checkout-form,
.mini-order.simple-mini-order{
    width:100%;
}

@media(max-width:768px){
    .checkout-grid.simple-checkout-grid{
        grid-template-columns:1fr;
        padding:0 20px;
    }

    .back-link{
        padding:0 20px;
    }
}
/* Final review theme: every carousel card uses the same clean white surface. */
.reviews-section .review-carousel,
.reviews-section .review-slide,
.reviews-section .review-slide.featured,
.reviews-section .review-slide.lime-card {
    background: #fff !important;
    color: #0b2c20 !important;
}
.reviews-section .review-slide blockquote,
.reviews-section .review-slide.featured blockquote {
    color: #0b2c20 !important;
}
.reviews-section .review-slide small,
.reviews-section .review-slide.featured small {
    color: #667068 !important;
}

/* Each homepage hero slide owns an independently managed image. */
.hero-stage .hero-product[data-slide-product] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility .45s ease, transform .3s ease-out;
}
.hero-stage .hero-product[data-slide-product].active {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 900px) {
    .hero-stage .hero-product[data-slide-product] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) translate(var(--mx, 0), var(--my, 0));
    }
}

/* ==========================================================
   MOBILE WIDTH SAFETY + RESPONSIVE POLISH
   Keep every page inside the device viewport.
========================================================== */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
}

body,
#app {
    position: relative;
    min-width: 0;
}

main,
header,
footer,
section,
article,
nav,
.page-shell,
.page-content-width,
.editorial-hero,
.checkout-grid,
.cart-page-grid,
.product-layout {
    min-width: 0;
}

img,
video,
iframe {
    max-width: 100%;
}

@supports not (overflow: clip) {
    html,
    body,
    #app {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .nav {
        width: 100%;
        max-width: 100%;
        min-height: 68px;
        height: 68px;
        padding: 7px 12px;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        left: 0;
        right: 0;
    }

    .logo {
        min-width: 0;
        margin-left: 0;
        gap: 8px;
    }

    .logo img {
        width: 48px;
        height: 48px;
        margin-left: 0;
        flex: 0 0 48px;
    }

    .logo-text {
        min-width: 0;
    }

    .logo-text h2 {
        font-size: clamp(18px, 6vw, 24px);
        letter-spacing: .5px;
        white-space: nowrap;
    }

    .logo-text p {
        max-width: 170px;
        margin-top: 2px;
        font-size: 9px;
        letter-spacing: .35px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav nav {
        display: none;
    }

    .nav .cart-button {
        flex: 0 0 auto;
        padding: 7px !important;
        gap: 5px;
    }

    .nav .cart-button > span:not(.cart-count) {
        display: none;
    }

    #home-hero {
        width: 100%;
        min-height: 780px !important;
        height: 780px !important;
    }

    #home-hero .hero-copy {
        left: 20px !important;
        right: 20px !important;
        top: 72px !important;
        width: auto !important;
        max-width: none !important;
    }

    #home-hero .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(43px, 14vw, 58px);
        letter-spacing: -3.5px;
    }

    #home-hero .hero-description {
        width: 100% !important;
        max-width: 100%;
        font-size: 13px;
    }

    #home-hero .hero-stage {
        right: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    #home-hero .hero-actions {
        left: 20px !important;
        right: 20px !important;
        bottom: 28px !important;
        width: auto;
        gap: 10px;
    }

    #home-hero .hero-actions .primary-button {
        min-width: 0;
        flex: 1;
    }

    .product-page-hero,
    .editorial-hero.product-page-hero {
        width: 100%;
        min-height: 150px !important;
        height: auto !important;
        padding: 20px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
    }

    .product-page-hero h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .page-breadcrumb {
        width: 100%;
        max-width: 100%;
        margin: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-content-width {
        width: calc(100% - 32px);
    }

    .section-pad {
        padding-left: 20px;
        padding-right: 20px;
    }

    .checkout-grid.simple-checkout-grid,
    .simple-cart-grid,
    .contact-page-grid {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .checkout-grid.simple-checkout-grid {
        padding-inline: 16px;
    }

    .simple-checkout-form,
    .simple-mini-order,
    .contact-form-card,
    .contact-details-card {
        min-width: 0;
    }

    .review-media-layout,
    .review-carousel,
    .customer-video-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .site-footer,
    footer {
        max-width: 100%;
    }

    .footer-contact a,
    footer a,
    .contact-details-card a {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .nav {
        padding-inline: 9px;
    }

    .logo img {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .logo-text h2 {
        font-size: 18px;
    }

    .logo-text p {
        max-width: 135px;
        font-size: 8px;
    }

    #home-hero .hero-actions .price-block {
        min-width: 66px;
    }

    #home-hero .hero-actions .primary-button {
        padding-left: 15px;
        font-size: 13px;
    }
}

/* ==========================================================
   RESPONSIVE NAVIGATION + SMALL-SCREEN HARDENING
========================================================== */
.mobile-menu-toggle {
    display: none;
}

.nav nav a[aria-current="page"] {
    color: #1f4d3a;
    font-weight: 700;
}

.nav nav a[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    body.mobile-menu-open {
        overflow: hidden;
    }

    .nav {
        height: 72px;
        min-height: 72px;
        flex-wrap: nowrap;
        padding: 8px clamp(12px, 3vw, 20px);
        gap: 8px;
    }

    .nav .logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-menu-toggle {
        order: 2;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: 1px solid rgba(31, 77, 58, .2);
        border-radius: 50%;
        background: #fff;
        color: #1f4d3a;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 99px;
        background: currentColor;
        transition: transform .25s ease, opacity .2s ease;
    }

    .nav.menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav.menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .nav.menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav .cart-button {
        order: 3;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex: 0 0 44px;
        justify-content: center;
        padding: 0 !important;
        border-radius: 50%;
        position: relative;
    }

    .nav .cart-count {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 19px;
        height: 19px;
        border: 2px solid #fff;
        font-size: 9px;
    }

    .nav nav,
    .nav.menu-open nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        order: initial;
        width: 100%;
        max-height: calc(100dvh - 72px);
        margin: 0;
        padding: 10px 16px 18px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid rgba(31, 77, 58, .1);
        box-shadow: 0 18px 35px rgba(20, 62, 45, .16);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .25s ease, opacity .2s ease, visibility .2s;
    }

    .nav.menu-open nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 11px 12px;
        border-bottom: 1px solid rgba(31, 77, 58, .09);
        font-size: 14px;
    }

    .nav nav a[aria-current="page"] {
        background: #eef5e3;
        border-radius: 8px;
    }

    #home-hero {
        min-height: min(780px, calc(100svh - 72px)) !important;
        height: max(690px, calc(100svh - 72px)) !important;
    }

    #home-hero .hero-copy {
        top: clamp(48px, 8vh, 72px) !important;
    }

    #home-hero .hero-stage {
        top: 49% !important;
        height: 40% !important;
        transform: translateY(-50%) scale(.9) !important;
    }

    #home-hero .hero-actions {
        bottom: 24px !important;
    }

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

    .footer-lead,
    .footer-contact,
    .site-footer .footer-bottom {
        grid-column: 1 / -1;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .site-footer {
        grid-template-columns: 1fr;
        padding-inline: 20px;
    }

    .footer-lead,
    .footer-contact,
    .site-footer .footer-bottom {
        grid-column: auto;
    }

    .footer-column,
    .footer-lead,
    .footer-contact {
        min-width: 0;
    }

    .footer-column address,
    .footer-column a {
        overflow-wrap: anywhere;
    }

    .trust-bar {
        width: calc(100% - 32px);
    }

    .primary-button,
    .outline-button,
    button,
    input,
    select {
        min-height: 44px;
    }

    #home-hero .hero-copy {
        left: 16px !important;
        right: 16px !important;
    }

    #home-hero .hero-copy h1 {
        font-size: clamp(39px, 13vw, 54px);
        letter-spacing: -3px;
    }

    #home-hero .hero-description {
        margin-bottom: 20px !important;
        line-height: 1.5;
    }

    #home-hero .hero-actions {
        left: 16px !important;
        right: 16px !important;
        flex-wrap: wrap;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 420px) {
    .logo-text p {
        display: none;
    }

    .logo-text h2 {
        font-size: clamp(16px, 5vw, 20px);
    }

    .nav .logo img {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .nav nav,
    .nav.menu-open nav {
        grid-template-columns: 1fr;
    }

    #home-hero {
        min-height: 720px !important;
        height: max(720px, calc(100svh - 72px)) !important;
    }

    #home-hero .hero-copy {
        top: 38px !important;
    }

    #home-hero .hero-stage {
        top: 51% !important;
        height: 35% !important;
    }

    #home-hero .hero-actions .price-note {
        font-size: 8px;
    }
}

@media (max-width: 350px) {
    .nav {
        padding-inline: 8px;
    }

    .nav .logo {
        gap: 5px;
    }

    .nav .logo img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .mobile-menu-toggle,
    .nav .cart-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px;
    }

    #home-hero .hero-copy h1 {
        font-size: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle span,
    .nav nav {
        transition: none;
    }
}