:root {
           --green: #4caf50;
           --green-dark: #388e3c;
           --green-light: #81c784;
           --green-pale: #e8f5e9;
           --green-bg: #f1f8e9;
           --cream: #fffdf7;
           --earth: #8d6e63;
           --earth-light: #bcaaa4;
           --text-dark: #2e3a2e;
           --text-body: #5a6b5a;
           --text-light: #8a9a8a;
           --border: #c8e6c9;
           --white: #ffffff;
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: "Montserrat", sans-serif;
           background-color: var(--cream);
           color: var(--text-dark);
           overflow-x: hidden;
       }

       h1,
       h2,
       h3,
       h4,
       h5,
       h6 {
           font-family: "Oswald", sans-serif;
           text-transform: uppercase;
           letter-spacing: 0.02em;
       }

       ::selection {
           background: var(--green);
           color: #fff;
       }

       ::-webkit-scrollbar {
           width: 8px;
       }

       ::-webkit-scrollbar-track {
           background: var(--green-pale);
       }

       ::-webkit-scrollbar-thumb {
           background: var(--green-light);
           border-radius: 4px;
       }

       ::-webkit-scrollbar-thumb:hover {
           background: var(--green);
       }

       a {
           text-decoration: none;
           transition: all 0.3s ease;
       }

       /* ========== NAVBAR ========== */
       .navbar-jikaka {
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(20px);
           border-bottom: 1px solid var(--border);
           padding: 0.6rem 0;
           transition: all 0.3s ease;
           z-index: 1050;
       }

       .navbar-jikaka.scrolled {
           box-shadow: 0 2px 20px rgba(76, 175, 80, 0.1);
       }

       .navbar-jikaka .navbar-brand img {
           height: 52px;
           transition: height 0.3s ease;
       }

       .navbar-jikaka.scrolled .navbar-brand img {
           height: 42px;
       }

       .navbar-jikaka .nav-link {
           font-family: "Montserrat", sans-serif;
           font-size: 12px;
           font-weight: 500;
           color: var(--text-body);
           text-transform: uppercase;
           letter-spacing: 0.05em;
           padding: 0.5rem 1rem !important;
           position: relative;
       }

       .navbar-jikaka .nav-link::after {
           content: "";
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 0;
           height: 2px;
           background: var(--green);
           transition: width 0.3s ease;
           border-radius: 2px;
       }

       .navbar-jikaka .nav-link:hover,
       .navbar-jikaka .nav-link.active {
           color: var(--green-dark);
       }

       .navbar-jikaka .nav-link:hover::after,
       .navbar-jikaka .nav-link.active::after {
           width: 60%;
       }

       .navbar-jikaka .navbar-toggler i {
           color: var(--green);
           font-size: 20px;
       }

       .nav-icon-btn {
           width: 38px;
           height: 38px;
           border-radius: 50%;
           border: 1px solid var(--border);
           background: var(--white);
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--text-body);
           transition: all 0.3s ease;
           position: relative;
           font-size: 15px;
       }

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

       .cart-badge {
           position: absolute;
           top: -4px;
           right: -4px;
           width: 18px;
           height: 18px;
           background: var(--green);
           color: #fff;
           font-size: 10px;
           font-weight: 700;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 2px solid var(--white);
           transition: transform 0.2s ease;
       }

       .cart-badge.bump {
           transform: scale(1.3);
       }

       .custom-toggler {
           width: 32px;
           height: 32px;
           position: relative;
       }

       .custom-toggler span,
       .custom-toggler span::before,
       .custom-toggler span::after {
           content: "";
           position: absolute;
           left: 0;
           width: 100%;
           height: 3px;
           background: linear-gradient(135deg,
                   #2f5d1e,
                   #4caf50);
           border-radius: 50px;
           transition: .3s ease;
       }

       .custom-toggler span {
           top: 50%;
           transform: translateY(-50%);
       }

       .custom-toggler span::before {
           top: -8px;
       }

       .custom-toggler span::after {
           top: 8px;
       }

       .custom-toggler:not(.collapsed) span {
           background: transparent;
       }

       .custom-toggler:not(.collapsed) span::before {
           top: 0;
           transform: rotate(45deg);
       }

       .custom-toggler:not(.collapsed) span::after {
           top: 0;
           transform: rotate(-45deg);
       }

       /* ========== BANNER ========== */

       .banner-top {
           margin-top: 82px;
       }

       .banner-section .bannerImg {
           max-height: 650px;
       }

       .banner-section .owl-carousel .owl-nav button.owl-next,
       .banner-section .owl-carousel .owl-nav button.owl-prev {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           width: 48px;
           height: 48px;
           color: var(--primary-500);
           font-size: 20px;
           border-radius: 50px;
           /* backdrop-filter: blur(1px); 
           background-color: #ffffffe3;*/
           background-color: #fff;
           box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
       }

       .banner-section .owl-carousel .owl-nav button.owl-next {
           right: 10px;
       }

       .bestselling-section .owl-carousel .owl-nav button.owl-next {
           right: -30px;
       }

       .banner-section .owl-carousel .owl-nav button.owl-prev {
           left: 10px;
       }

       .bestselling-section .owl-carousel .owl-nav button.owl-prev {
           left: -30px;
       }

       .banner-section .owl-carousel .owl-dots {
           position: absolute;
           bottom: 10px;
           left: 50%;
           transform: translateX(-50%);
       }

       .banner-section .owl-carousel .owl-dots .owl-dot span {
           width: 8px;
           height: 8px;
           display: block;
           border-radius: 50%;
           transition: all 0.3s ease;
           background-color: var(--green-bg);
       }

       .banner-section .owl-carousel .owl-dots .owl-dot {
           margin: 4px;
       }

       .banner-section .owl-carousel .owl-dots .owl-dot.active span {
           background-color: var(--green-dark);
           border-radius: 20px;
       }

       /* ========== HERO ========== */
       .hero-section {
           padding-top: 120px;
           padding-bottom: 80px;
           background: linear-gradient(135deg,
                   var(--green-pale) 0%,
                   var(--cream) 50%,
                   #fce4ec10 100%);
           position: relative;
           overflow: hidden;
       }

       .hero-section::before {
           content: "";
           position: absolute;
           top: -100px;
           right: -100px;
           width: 400px;
           height: 400px;
           background: radial-gradient(circle,
                   rgba(76, 175, 80, 0.08) 0%,
                   transparent 70%);
           border-radius: 50%;
       }

       .hero-section::after {
           content: "";
           position: absolute;
           bottom: -50px;
           left: -80px;
           width: 300px;
           height: 300px;
           background: radial-gradient(circle,
                   rgba(76, 175, 80, 0.06) 0%,
                   transparent 70%);
           border-radius: 50%;
       }

       .hero-tag {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           padding: 6px 18px;
           border-radius: 30px;
           background: var(--white);
           border: 1px solid var(--border);
           font-size: 0.75rem;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.1em;
           color: var(--green-dark);
           margin-bottom: 1.5rem;
       }

       .hero-tag .dot {
           width: 6px;
           height: 6px;
           border-radius: 50%;
           background: var(--green);
           animation: pulse-dot 2s infinite;
       }

       @keyframes pulse-dot {

           0%,
           100% {
               opacity: 1;
               transform: scale(1);
           }

           50% {
               opacity: 0.5;
               transform: scale(1.5);
           }
       }

       .hero-title {
           font-size: clamp(2.5rem, 5vw, 4.5rem);
           font-weight: 500;
           line-height: 1.05;
           color: var(--text-dark);
           margin-bottom: 1.5rem;
       }

       .hero-title .highlight {
           background: linear-gradient(135deg, var(--green), var(--green-dark));
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
       }

       .hero-desc {
           font-size: 1.05rem;
           font-weight: 400;
           color: var(--text-body);
           line-height: 1.7;
           margin-bottom: 2rem;
           max-width: 500px;
       }

       .btn-green {
           background: var(--green);
           color: #fff;
           border: none;
           padding: 14px 32px;
           border-radius: 50px;
           font-family: "Montserrat", sans-serif;
           font-size: 0.85rem;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           transition: all 0.3s ease;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 8px;
       }

       .btn-green:hover {
           background: var(--green-dark);
           color: #fff;
           transform: translateY(-2px);
           box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
       }

       .btn-outline-green {
           background: transparent;
           color: var(--green-dark);
           border: 2px solid var(--green);
           padding: 12px 30px;
           border-radius: 50px;
           font-family: "Montserrat", sans-serif;
           font-size: 0.85rem;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           transition: all 0.3s ease;
           display: inline-flex;
           align-items: center;
           gap: 8px;
       }

       .btn-outline-green:hover {
           background: var(--green);
           color: #fff;
           transform: translateY(-2px);
       }

       .hero-img-wrapper {
           height: 550px;
           border-radius: 30px;
           overflow: hidden;
           box-shadow: 0 20px 60px rgba(76, 175, 80, 0.15);
       }

       .hero-img-wrapper img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.7s ease;
       }

       .hero-img-wrapper:hover img {
           transform: scale(1.05);
       }

       .hero-floating-card {
           position: absolute;
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
           border-radius: 12px;
           padding: 14px 18px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
           animation: float-card 4s ease-in-out infinite;
       }

       .hero-floating-card.left {
           bottom: 80px;
           left: -20px;
           animation-delay: 0s;
       }

       .hero-floating-card.right {
           top: 60px;
           right: -16px;
           animation-delay: 1.5s;
       }

       @keyframes float-card {

           0%,
           100% {
               transform: translateY(0);
           }

           50% {
               transform: translateY(-8px);
           }
       }

       .hero-floating-card .icon-circle {
           width: 42px;
           height: 42px;
           border-radius: 50%;
           background: var(--green-pale);
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--green);
           font-size: 1.1rem;
       }

       .hero-floating-card h6 {
           font-size: 0.85rem;
           font-weight: 600;
       }

       .hero-floating-card p {
           font-size: 0.8rem;
           font-weight: 400;
           color: var(--text-light);
       }

       .hero-stats {
           display: flex;
           gap: 2rem;
           margin-top: 2.5rem;
           padding-top: 2rem;
           border-top: 1px solid var(--border);
       }

       .hero-stats .stat-num {
           font-family: "Oswald", sans-serif;
           font-size: 2rem;
           font-weight: 600;
           color: var(--green);
       }

       .hero-stats .stat-label {
           font-size: 0.7rem;
           text-transform: uppercase;
           letter-spacing: 0.1em;
           color: var(--text-light);
           margin-top: 2px;
       }

       /* ========== category ========== */
       .category-strip {
           background: var(--white);
           border-bottom: 1px solid #ececec;
           border-top: 1px solid #ececec;
       }

       .category-scroll {
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
           gap: 12px;
           overflow-x: auto;
           scrollbar-width: none;
           -ms-overflow-style: none;
       }

       .category-scroll::-webkit-scrollbar {
           display: none;
       }

       .category-item {
           min-width: 90px;
           text-decoration: none;
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 10px;
           transition: 0.3s;
           flex-shrink: 0;
       }

       .category-item:hover {
           transform: translateY(-5px);
       }

       .cat-icon {
           width: 60px;
           height: 60px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 28px;
           transition: 0.3s;
       }

       .category-item:hover .cat-icon {
           transform: scale(1.08);
       }

       .category-item span {
           font-size: 12px;
           font-weight: 500;
           color: #555;
           text-align: center;
           line-height: 1.4;
       }

       /* Background Colors */

       .bg-green {
           background: #e8f2d8;
       }

       .bg-beige {
           background: #fdf8f0;
       }

       .bg-yellow {
           background: #fff8e1;
       }

       .bg-gold {
           background: #fef3c7;
       }

       .bg-red {
           background: #fee2e2;
       }

       .bg-blue {
           background: #e0f2fe;
       }

       .bg-lightgreen {
           background: #f0fdf4;
       }

       .bg-mint {
           background: #ecfdf5;
       }

       .bg-sky {
           background: #eff6ff;
       }

       .bg-pink {
           background: #fdf2f8;
       }

       /* ========== SECTION COMMON ========== */
       .section-tag {
           display: inline-block;
           font-size: 0.7rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 0.15em;
           color: var(--green);
           margin-bottom: 0.5rem;
       }

       .section-title {
           font-size: clamp(1.8rem, 3vw, 2.5rem);
           font-weight: 500;
           color: var(--text-dark);
           margin-bottom: 0.5rem;
       }

       .section-desc {
           font-size: 0.95rem;
           font-weight: 400;
           color: var(--text-body);
           max-width: 550px;
       }

       .section-desc.center {
           margin: 0 auto;
       }

       .leaf-divider {
           display: flex;
           align-items: center;
           gap: 12px;
           margin: 0 auto;
           max-width: 300px;
       }

       .leaf-divider::before,
       .leaf-divider::after {
           content: "";
           flex: 1;
           height: 1px;
           background: linear-gradient(to right,
                   transparent,
                   var(--border),
                   transparent);
       }

       .leaf-divider i {
           color: var(--green-light);
           font-size: 0.9rem;
       }

       /* ========== PRODUCT CARDS ========== */
       .product-card {
           background: var(--white);
           border-radius: 20px;
           border: 1px solid var(--border);
           overflow: hidden;
           transition: all 0.4s ease;
           height: 100%;
       }

       .product-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 40px rgba(76, 175, 80, 0.12);
           border-color: var(--green-light);
       }

       .product-card .prod-img-wrap {
           position: relative;
           overflow: hidden;
           aspect-ratio: 1;
           background: var(--green-pale);
       }

       .product-card .prod-img-wrap img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.5s ease;
       }

       .product-card:hover .prod-img-wrap img {
           transform: scale(1.08);
       }

       .product-card .prod-badge {
           position: absolute;
           top: 12px;
           left: 12px;
           padding: 4px 12px;
           border-radius: 20px;
           font-size: 0.65rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 0.05em;
       }

       .badge-sale {
           background: #ef5350;
           color: #fff;
       }

       .badge-new {
           background: var(--green);
           color: #fff;
       }

       .badge-best {
           background: var(--green-dark);
           color: #fff;
       }

       .product-card .prod-add-btn {
           position: absolute;
           bottom: 12px;
           right: 12px;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           background: var(--green);
           color: #fff;
           border: none;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1rem;
           cursor: pointer;
           opacity: 0;
           transform: translateY(8px);
           transition: all 0.3s ease;
           box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
       }

       .product-card:hover .prod-add-btn {
           opacity: 1;
           transform: translateY(0);
       }

       .product-card .prod-add-btn:hover {
           background: var(--green-dark);
           transform: translateY(0) scale(1.1);
       }

       .product-card .prod-wish {
           position: absolute;
           top: 12px;
           right: 12px;
           width: 34px;
           height: 34px;
           border-radius: 50%;
           background: var(--green-bg);
           border: none;
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--text-light);
           font-size: 0.8rem;
           cursor: pointer;
           opacity: 0;
           transition: all 0.3s ease;
       }

       .product-card:hover .prod-wish {
           opacity: 1;
       }

       .product-card .prod-wish:hover {
           color: #ef5350;
       }

       .product-card .prod-body {
           padding: 1.2rem;
       }

       .product-card .prod-stars {
           display: flex;
           align-items: center;
           gap: 2px;
           margin-bottom: 0.4rem;
       }

       .product-card .prod-stars i {
           font-size: 0.7rem;
           color: #ffc107;
       }

       .product-card .prod-stars i.empty {
           color: #e0e0e0;
       }

       .product-card .prod-stars span {
           font-size: 0.7rem;
           color: var(--text-light);
           margin-left: 4px;
       }

       .product-card .prod-name {
           font-family: "Oswald", sans-serif;
           font-size: 1.05rem;
           font-weight: 500;
           color: var(--text-dark);
           text-transform: uppercase;
       }

       .product-card .prod-sub {
           font-size: 13px;
           font-weight: 500;
           color: var(--text-light);
           margin-top: 2px;
       }

       .product-card .prod-price {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-top: 0.6rem;
       }

       .product-card .price-now {
           font-family: "Oswald", sans-serif;
           font-size: 1.25rem;
           font-weight: 600;
           color: var(--green-dark);
       }

       .product-card .price-was {
           font-size: 0.85rem;
           color: var(--text-light);
           text-decoration: line-through;
       }

       /* Filter buttons */
       .filter-btn,
       .login-btn {
           padding: 8px 20px;
           border-radius: 30px;
           font-size: 0.75rem;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           border: 2px solid var(--border);
           background: transparent;
           color: var(--text-body);
           cursor: pointer;
           transition: all 0.3s ease;
       }

       .filter-btn:hover,
       .filter-btn.active,
       .login-btn:hover {
           background: var(--green);
           color: #fff;
           border-color: var(--green);
       }

       /* ========== PROMISE / FEATURES ========== */
       .feature-card {
           background: var(--white);
           border-radius: 16px;
           border: 1px solid var(--border);
           padding: 2rem;
           transition: all 0.4s ease;
           position: relative;
           overflow: hidden;
           height: 100%;
       }

       .feature-card::before {
           content: "";
           position: absolute;
           top: -1px;
           left: 0;
           width: 100%;
           height: 3px;
           background: var(--green);
           transform: scaleX(0);
           transform-origin: left;
           transition: transform 0.4s ease;
       }

       .feature-card:hover::before {
           transform: scaleX(1);
       }

       .feature-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 40px rgba(76, 175, 80, 0.1);
           border-color: var(--green);
       }

       .feature-card .feat-icon {
           width: 56px;
           height: 56px;
           border-radius: 16px;
           background: var(--green-pale);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.3rem;
           color: var(--green);
           margin-bottom: 1.2rem;
           transition: all 0.3s ease;
       }

       .feature-card:hover .feat-icon {
           background: var(--green);
           color: #fff;
       }

       .feature-card .feat-title {
           font-family: "Oswald", sans-serif;
           font-size: 1.15rem;
           font-weight: 500;
           text-transform: uppercase;
           color: var(--text-dark);
           margin-bottom: 0.5rem;
       }

       .feature-card .feat-desc {
           font-size: 14px;
           font-weight: 400;
           color: var(--text-body);
           line-height: 1.6;
       }

       /* ========== COMBO CARDS ========== */
       .combo-card {
           background: var(--white);
           border-radius: 24px;
           border: 1px solid var(--border);
           overflow: hidden;
           transition: all 0.4s ease;
           height: 100%;
       }

       .combo-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 40px rgba(76, 175, 80, 0.12);
       }

       .combo-card .combo-img-wrap {
           position: relative;
           /* height: 220px; */
           overflow: hidden;
       }

       .combo-card .combo-img-wrap img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.5s ease;
       }

       .combo-card:hover .combo-img-wrap img {
           transform: scale(1.05);
       }

       .combo-card .combo-img-wrap .combo-overlay {
           position: absolute;
           inset: 0;
           background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
       }

       .combo-card .combo-save-badge {
           position: absolute;
           top: 14px;
           right: 14px;
           padding: 5px 14px;
           border-radius: 20px;
           background: var(--green);
           color: #fff;
           font-size: 0.7rem;
           font-weight: 700;
           text-transform: uppercase;
       }

       .combo-card .combo-body {
           padding: 1.5rem;
       }

       .combo-card .combo-title {
           font-family: "Oswald", sans-serif;
           font-size: 1.2rem;
           font-weight: 500;
           text-transform: uppercase;
           color: var(--text-dark);
       }

       .combo-card .combo-items {
           font-size: 0.8rem;
           color: var(--text-light);
           font-weight: 400;
           margin-top: 0.3rem;
       }

       .combo-card .combo-price {
           display: flex;
           align-items: center;
           gap: 10px;
           margin-top: 0.8rem;
       }

       .combo-card .combo-price .now {
           font-family: "Oswald", sans-serif;
           font-size: 1.5rem;
           font-weight: 600;
           color: var(--green-dark);
       }

       .combo-card .combo-price .was {
           font-size: 0.9rem;
           color: var(--text-light);
           text-decoration: line-through;
       }

       .combo-card.popular {
           border-color: var(--green);
           position: relative;
       }

       .combo-card.popular .popular-bar {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: var(--green);
       }

       .combo-card.popular .popular-tag {
           position: absolute;
           top: 16px;
           left: 50%;
           transform: translateX(-50%);
           padding: 4px 16px;
           border-radius: 20px;
           background: var(--green);
           color: #fff;
           font-size: 0.65rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           z-index: 2;
           white-space: nowrap;
       }

       /* ========== REVIEWS ========== */
       .review-card {
           background: var(--white);
           border-radius: 24px;
           border: 1px solid var(--border);
           padding: 2rem;
           transition: all 0.4s ease;
       }

       .review-card:hover {
           transform: translateY(-3px);
           box-shadow: 0 10px 30px rgba(76, 175, 80, 0.08);
       }

       .review-card .rev-stars i {
           font-size: 0.8rem;
           color: #ffc107;
       }

       .review-card .rev-text {
           font-size: 0.9rem;
           font-weight: 400;
           color: var(--text-body);
           line-height: 1.7;
           margin: 1rem 0 1.2rem;
       }

       .review-card .rev-author img {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           object-fit: cover;
           border: 2px solid var(--green-pale);
       }

       .review-card .rev-name {
           font-size: 14px;
           font-weight: 600;
           color: var(--text-dark);
       }

       .review-card .rev-loc {
           font-size: 12px;
           font-weight: 500;
           color: var(--text-light);
       }

       /* ========== NEWSLETTER ========== */
       .newsletter-section {
           background: linear-gradient(135deg, var(--green-pale), var(--green-bg));
           position: relative;
           overflow: hidden;
       }

       .newsletter-section::before {
           content: "";
           position: absolute;
           top: -60px;
           right: -60px;
           width: 200px;
           height: 200px;
           background: radial-gradient(circle,
                   rgba(76, 175, 80, 0.15),
                   transparent 70%);
           border-radius: 50%;
       }

       .newsletter-card {
           background: var(--white);
           border-radius: 30px;
           border: 1px solid var(--border);
           padding: 3rem;
           position: relative;
           overflow: hidden;
           box-shadow: 0 10px 40px rgba(76, 175, 80, 0.08);
       }

       .newsletter-card h3 {
           font-size: 1.6rem;
           font-weight: 500;
       }

       .newsletter-card .nl-icon {
           width: 64px;
           height: 64px;
           border-radius: 50px;
           background: var(--green-pale);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.5rem;
           color: var(--green);
           margin: 0 auto 1.2rem;
       }

       .newsletter-input {
           flex: 1;
           padding: 14px 24px;
           border-radius: 50px;
           border: 2px solid var(--border);
           background: var(--cream);
           font-family: "Montserrat", sans-serif;
           font-size: 0.85rem;
           color: var(--text-dark);
           outline: none;
           transition: border-color 0.3s ease;
       }

       .newsletter-input:focus {
           border-color: var(--green);
       }

       .newsletter-input::placeholder {
           color: var(--text-light);
       }

       .newsletter-card .smallText {
           font-size: 0.7rem;
           color: var(--text-light);
           margin-top: 1rem;
           font-weight: 400;
       }

       .newsletter-card #subscribeMsg {
           margin-top: 1rem;
           font-size: 0.85rem;
           display: none;
           color: var(--green-dark);
       }

       /* ========== FOOTER ========== */
       .footer-section {
           background: var(--text-dark);
           color: rgba(255, 255, 255, 0.7);
       }

       .footer-section .footer-logo {
           margin-bottom: 10px;
           width: 150px;
       }

       .footer-section .pText {
           font-size: 14px;
           font-weight: 400;
           max-width: 300px;
       }

       .footer-section h5 {
           font-size: 20px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.1em;
           color: #fff;
           margin-bottom: 1.2rem;
       }

       .footer-section a {
           color: rgba(255, 255, 255, 0.7);
           font-size: 14px;
           font-weight: 400;
           transition: all 0.3s ease;
       }

       .footer-section a:hover {
           color: var(--green-light);
           padding-left: 4px;
       }

       .footer-social a {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           border: 1px solid rgba(255, 255, 255, 0.15);
           display: inline-flex;
           align-items: center;
           justify-content: center;
           color: rgba(255, 255, 255, 0.7);
           font-size: 0.9rem;
           transition: all 0.3s ease;
       }

       .footer-social a:hover {
           background: var(--green);
           border-color: var(--green);
           color: #fff;
           padding-left: 0;
           transform: translateY(-3px);
       }

       .footer-section .icon {
           color: var(--green-light);
           font-size: 18px;
       }

       .footer-bottom {
           border-top: 1px solid rgba(255, 255, 255, 0.08);
           padding: 16px 0;
       }

       .footer-bottom .copyText {
           font-size: 12px;
           color: rgba(255, 255, 255, 0.7);
           margin: 0;
       }

       .products-section,
       .reviews-section {
           background: var(--white);
       }

       .promise-section {
           background: var(--green-bg);
       }



       /* products page css */

       .page-banner {
           position: relative;
           padding: 120px 0;
           background: url("../images/page-banner.png") center center/cover;
           overflow: hidden;
       }

       .policy-banner {
           background: url(../images/policy-bg.png) center center/cover;
       }

       .page-banner::before {
           content: '';
           position: absolute;
           inset: 0;
           background: rgba(20, 40, 20, .65);
       }

       .banner-content {
           position: relative;
           z-index: 2;
           text-align: center;
       }

       .banner-tag {
           display: inline-block;
           padding: 8px 18px;
           background: rgba(255, 255, 255, .12);
           border: 1px solid rgba(255, 255, 255, .2);
           border-radius: 50px;
           color: #c7e49e;
           font-size: 13px;
           font-weight: 600;
           margin-bottom: 15px;
       }

       .banner-content h1 {
           color: #fff;
           font-size: 58px;
           font-weight: 800;
           margin-bottom: 15px;
       }

       .breadcrumb-nav {
           display: flex;
           justify-content: center;
           gap: 10px;
           color: #fff;
       }

       .breadcrumb-nav a {
           color: #c7e49e;
           text-decoration: none;
       }

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

       .plp-section {
           background: #f7faf5;
       }

       .plp-topbar {
           background: #fff;
           border-radius: 20px;
           padding: 18px 25px;
           margin-bottom: 35px;

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

           box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
       }

       .plp-results {
           font-size: 15px;
           color: #666;
       }

       .plp-sort {
           width: 220px;
           border-radius: 50px;
       }

       .plp-card {
           background: #fff;
           border-radius: 20px;
           overflow: hidden;
           border: 1px solid var(--border);
           transition: .35s;
           height: 100%;
           position: relative;
       }

       .plp-card:hover {
           transform: translateY(-8px);
           box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
       }

       .plp-img-wrap {
           position: relative;
           padding: 20px;
           background: var(--cream);
           overflow: hidden;
       }

       .plp-img-wrap img {
           width: 100%;
           transition: .4s;
       }

       .plp-card:hover img {
           transform: scale(1.08);
       }

       .plp-badge {
           position: absolute;
           top: 15px;
           left: 15px;
           background: #43a047;
           color: #fff;
           font-size: 11px;
           font-weight: 600;
           padding: 5px 10px;
           border-radius: 30px;
           z-index: 19;
       }

       .plp-wishlist {
           position: absolute;
           top: 15px;
           right: 15px;

           width: 38px;
           height: 38px;

           border: none;
           border-radius: 50%;

           background: #fff;
           color: #666;

           box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
       }

       .plp-body {
           padding: 20px;
       }

       .plp-rating {
           color: #ffb300;
           font-size: 13px;
           margin-bottom: 10px;
       }

       .plp-rating span {
           color: #888;
           margin-left: 5px;
       }

       .plp-title {
           font-size: 18px;
           font-weight: 700;
           line-height: 1.5;
           margin-bottom: 8px;
           color: #222;
       }

       .plp-subtitle {
           font-size: 13px;
           color: #888;
           margin-bottom: 15px;
       }

       .plp-price {
           margin-bottom: 18px;
       }

       .plp-current {
           font-size: 24px;
           font-weight: 700;
           color: #2e7d32;
       }

       .plp-old {
           margin-left: 8px;
           color: #999;
           text-decoration: line-through;
       }

       .about-story-section,
       .product-tabs-sec,
       .contact-map-section,
       .related-products-sec {
           background: #fff;
       }

       .about-story-image {
           position: relative;
       }

       .about-story-image img {
           width: 100%;
           border-radius: 24px;
           display: block;
           object-fit: cover;
       }

       .experience-box {
           position: absolute;
           bottom: 30px;
           right: -20px;

           background: #4CAF50;
           color: #fff;

           padding: 20px 25px;
           border-radius: 20px;

           box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
       }

       .experience-box h3 {
           font-size: 34px;
           font-weight: 700;
           margin: 0;
           line-height: 1;
       }

       .experience-box span {
           font-size: 14px;
       }

       .about-tag {
           display: inline-block;

           background: #edf7e9;
           color: #4CAF50;

           padding: 8px 18px;
           border-radius: 50px;

           font-size: 13px;
           font-weight: 600;

           margin-bottom: 15px;
       }

       .about-title {
           font-size: 48px;
           font-weight: 700;
           line-height: 1.2;
           color: #1b1b1b;
           margin-bottom: 16px;
       }

       .about-text {
           color: #666;
           font-size: 16px;
           line-height: 1.9;
           margin-bottom: 15px;
       }

       .about-features {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 15px;
           margin: 30px 0;
       }

       .about-feature {
           display: flex;
           align-items: center;
           gap: 10px;

           background: #f8faf7;
           padding: 14px 18px;
           border-radius: 14px;
       }

       .about-feature i {
           color: #4CAF50;
           font-size: 18px;
       }

       .about-feature span {
           font-size: 14px;
           font-weight: 600;
           color: #333;
       }

       .why-card {
           height: 100%;
           background: #fff;
           padding: 35px 25px;
           border-radius: 20px;
           text-align: center;
           border: 1px solid #edf1ea;
           transition: .35s;
       }

       .why-card:hover {
           transform: translateY(-8px);
           box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
       }

       .why-icon {
           width: 80px;
           height: 80px;
           margin: 0 auto 20px;
           border-radius: 50%;
           background: #edf7e9;

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

       .why-icon i {
           font-size: 32px;
           color: #4CAF50;
       }

       .why-card h4 {
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 12px;
       }

       .why-card p {
           color: #666;
           line-height: 1.8;
           margin: 0;
       }

       .stats-section {
           background: #f8faf7;
       }

       .stat-card {
           background: #fff;
           border: 1px solid #edf1ea;
           border-radius: 20px;
           padding: 40px 20px;
           text-align: center;
           height: 100%;
           transition: .35s;
       }

       .stat-card:hover {
           transform: translateY(-8px);
           box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
       }

       .stat-card h3 {
           font-size: 48px;
           font-weight: 800;
           color: #4CAF50;
           margin-bottom: 10px;
           line-height: 1;
       }

       .stat-card span {
           font-size: 16px;
           font-weight: 600;
           color: #555;
       }

       .farm-timeline {
           display: flex;
           align-items: center;
           justify-content: center;
           flex-wrap: wrap;
           gap: 20px;
       }

       .farm-step {
           text-align: center;
           max-width: 220px;
       }

       .farm-icon {
           width: 100px;
           height: 100px;
           margin: auto;
           border-radius: 50%;
           background: #edf7e9;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 38px;
           color: #4CAF50;
           margin-bottom: 20px;
       }

       .farm-step h5 {
           font-weight: 700;
           margin-bottom: 10px;
       }

       .farm-step p {
           color: #666;
           margin: 0;
       }

       .farm-line {
           width: 80px;
           height: 2px;
           background: #4CAF50;
           position: relative;
       }

       .farm-line::after {
           content: '';
           position: absolute;
           right: -2px;
           top: -4px;
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background: #4CAF50;
       }

       .certification-section {
           background: #f8faf7;
       }

       .trust-list {
           list-style: none;
           padding: 0;
           margin: 30px 0 0;
       }

       .trust-list li {
           display: flex;
           align-items: center;
           gap: 12px;
           margin-bottom: 18px;
           font-weight: 500;
       }

       .trust-list i {
           color: #4CAF50;
       }

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

       .cert-badge {
           background: #fff;
           border-radius: 24px;
           padding: 40px 25px;
           text-align: center;
           border: 1px solid #edf1ea;
           transition: .35s;
       }

       .cert-badge:hover {
           transform: translateY(-8px);
           box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
       }

       .cert-badge i {
           font-size: 42px;
           color: #4CAF50;
           margin-bottom: 18px;
       }

       .cert-badge h5 {
           font-size: 18px;
           font-weight: 700;
           margin: 0;
       }

       .about-cta-box {
           position: relative;
           overflow: hidden;

           background: linear-gradient(135deg,
                   #3f6b1f 0%,
                   #58852f 50%,
                   #7da646 100%);

           border-radius: 35px;
           padding: 80px 50px;
           text-align: center;
       }

       .about-cta-box::before {
           content: '';
           position: absolute;

           width: 350px;
           height: 350px;

           background: rgba(255, 255, 255, .08);
           border-radius: 50%;

           top: -120px;
           right: -100px;
       }

       .about-cta-box::after {
           content: '';
           position: absolute;

           width: 250px;
           height: 250px;

           background: rgba(255, 255, 255, .05);
           border-radius: 50%;

           bottom: -100px;
           left: -80px;
       }

       .about-cta-text {
           max-width: 700px;
           margin: 20px auto 35px;
           color: rgba(255, 255, 255, .85);
           font-size: 17px;
           line-height: 1.9;
       }

       .about-cta-btns {
           display: flex;
           justify-content: center;
           gap: 15px;
           flex-wrap: wrap;
       }

       .cta-btn-primary {
           background: #fff;
           color: #3f6b1f;
           padding: 14px 35px;
           border-radius: 50px;
           font-weight: 700;
           text-decoration: none;
       }

       .cta-btn-outline {
           border: 1px solid rgba(255, 255, 255, .4);
           color: #fff;
           padding: 14px 35px;
           border-radius: 50px;
           font-weight: 600;
           text-decoration: none;
       }

       .cta-btn-outline:hover {
           background: #fff;
           color: #3f6b1f;
       }


       /* contact page css */

       .contact-info-box {
           height: 100%;
           background: #f8faf7;
           border-radius: 25px;
           padding: 35px;
       }

       .contact-item {
           display: flex;
           gap: 18px;
           align-items: flex-start;
           margin-bottom: 30px;
       }

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

       .contact-icon {
           width: 54px;
           height: 54px;
           min-width: 54px;

           background: #4CAF50;
           color: #fff;

           border-radius: 50%;

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

           font-size: 20px;
       }

       .contact-item h5 {
           font-size: 20px;
           font-weight: 700;
           margin-bottom: 6px;
       }

       .contact-item p,
       .contact-item a {
           color: #666;
           margin: 0;
           line-height: 1.8;
       }

       .contact-form-box {
           background: #fff;
           padding: 35px;
           border-radius: 25px;
           border: 1px solid #edf1ea;
           box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
       }

       .contact-input {
           width: 100%;
           height: 58px;
           border: 1px solid #e7ece4;
           border-radius: 15px;
           padding: 0 20px;
           font-size: 15px;
           outline: none;
           transition: .3s;
       }

       .contact-input:focus {
           border-color: #4CAF50;
       }

       .contact-textarea {
           height: 160px;
           resize: none;
           padding-top: 18px;
       }

       .why-contact-section {
           background: #f8faf7;
       }

       .contact-highlight {
           display: flex;
           gap: 20px;
           align-items: center;
           margin-top: 35px;
           padding: 25px;
           background: #fff;
           border-radius: 20px;
           border: 1px solid #edf1ea;
       }

       .contact-highlight i {
           font-size: 34px;
           color: #4CAF50;
       }

       .contact-highlight h5 {
           margin-bottom: 6px;
           font-weight: 700;
       }

       .contact-highlight p {
           margin: 0;
           color: #666;
       }

       .contact-feature-card {
           height: 100%;

           background: #fff;
           border-radius: 24px;
           padding: 35px 30px;

           border: 1px solid #edf1ea;

           transition: .35s;
       }

       .contact-feature-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
       }

       .contact-feature-card i {
           width: 65px;
           height: 65px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 18px;
           background: #edf7e9;
           color: #4CAF50;
           font-size: 24px;
           margin-bottom: 20px;
       }

       .contact-feature-card h4 {
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 12px;
       }

       .contact-feature-card p {
           color: #666;
           line-height: 1.8;
           margin: 0;
       }

       .map-wrapper iframe {
           width: 100%;
           height: 550px;
           border: none;
       }

       /* profile page css  */
       .account-nav .nav-link {
           border: none;
           background: none;
           color: #444;
           padding: 14px 18px;
           text-align: left;
           border-radius: 14px;
           margin-bottom: 8px;
           font-weight: 500;
           box-shadow: none;
       }

       .account-nav .nav-link.active {
           background: #edf7e9;
           color: #4CAF50;
       }

       .account-card {
           background: #fff;
           padding: 30px;
           border-radius: 20px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
       }

       .account-card .form-control,
       .loginForm .form-control,
       .review-form-box .form-control {
           box-shadow: none;
       }

       .account-card .form-control:focus,
       .loginForm .form-control:focus,
       .review-form-box .form-control:focus {
           border-color: var(--border);
       }

       .account-card textarea.form-control,
       .review-form-box textarea.form-control {
           resize: none;
           max-height: 120px;
       }

       .profile-img {
           width: 120px;
           height: 120px;
           border-radius: 50%;
           object-fit: cover;
           border: 4px solid #4CAF50;
       }

       .status {
           padding: 6px 12px;
           border-radius: 30px;
           font-size: 13px;
           font-weight: 600;
       }

       .delivered {
           background: #e8f7e8;
           color: #28a745;
       }

       .processing {
           background: #fff3cd;
           color: #856404;
       }

       .shipped {
           background: #e7f3ff;
           color: #0d6efd;
       }

       .profile-premium-card {
           background: linear-gradient(135deg,
                   #2f5d1e,
                   #4caf50);

           border-radius: 24px;
           padding: 35px;
           color: #fff;
       }

       .profile-top {
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 20px;
       }

       .profile-left {
           display: flex;
           align-items: center;
           gap: 16px;
       }

       .change-photo {
           position: absolute;
           right: 0;
           bottom: 0;

           width: 38px;
           height: 38px;

           background: #fff;
           color: #4caf50;

           border-radius: 50%;

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

           cursor: pointer;
       }

       .user-badge {
           background: rgba(255, 255, 255, .15);
           padding: 6px 14px;
           border-radius: 50px;
           font-size: 12px;
           display: inline-block;
           margin-bottom: 10px;
       }

       .user-name {
           font-size: 30px;
           font-weight: 700;
           margin-bottom: 5px;
       }

       .user-email {
           margin: 0;
           opacity: .9;
       }

       .profile-stats {
           display: flex;
           gap: 15px;
       }

       .mini-stat {
           min-width: 95px;
           text-align: center;
           background: rgba(255, 255, 255, .12);
           backdrop-filter: blur(10px);
           border-radius: 16px;
           padding: 15px;
       }

       .mini-stat h4 {
           font-size: 28px;
           font-weight: 700;
           margin-bottom: 5px;
           color: #fff;
       }

       .mini-stat span {
           font-size: 13px;
       }

       .profile-avatar-wrap {
           position: relative;
           width: 110px;
           height: 110px;
       }

       .profile-avatar-wrap img {
           width: 110px;
           height: 110px;
           object-fit: cover;
           border-radius: 50%;
           border: 4px solid rgba(255, 255, 255, .3);
       }

       .change-photo {
           position: absolute;
           right: 0;
           bottom: 0;

           width: 38px;
           height: 38px;

           border-radius: 50%;
           background: #fff;
           color: #4caf50;

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

           cursor: pointer;

           box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
       }

       .order-table,
       .add-info-table {
           min-width: 600px;
       }

       .order-table tr th,
       .order-table tr td,
       .add-info-table tr th,
       .add-info-table tr td {
           white-space: nowrap;
       }

       .otp-modal {
           border: none;
           border-radius: 24px;
           overflow: hidden;
           position: relative;
       }

       .otp-modal .modal-body {
           padding: 40px 35px;
       }

       .otp-modal .modal-close {
           position: absolute;
           top: 20px;
           right: 20px;
           z-index: 5;
           box-shadow: none;
       }

       .otp-modal .otp-icon {
           width: 90px;
           height: 90px;
           margin: auto;
           border-radius: 50%;
           background: #edf7e9;

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

           font-size: 34px;
           color: #4CAF50;

           margin-bottom: 20px;
       }

       .otp-modal h3 {
           text-align: center;
           font-weight: 700;
           margin-bottom: 10px;
       }

       .otp-modal p {
           text-align: center;
           color: #777;
           margin-bottom: 25px;
       }

       .otp-modal label {
           font-weight: 600;
           margin-bottom: 8px;
           display: block;
       }

       .otp-modal .otp-inputs {
           display: flex;
           justify-content: center;
           gap: 10px;
       }

       .otp-modal .otp-input {
           width: 50px;
           height: 55px;
           border: 1px solid #ddd;
           border-radius: 12px;
           text-align: center;
           font-size: 22px;
           font-weight: 600;
       }

       .otp-modal .otp-input:focus {
           border-color: #4CAF50;
           outline: none;
       }

       .otp-modal .otp-resend {
           text-align: center;
           margin-bottom: 20px;
           font-size: 14px;
       }

       .otp-modal .otp-resend a {
           color: #4CAF50;
           font-weight: 600;
           text-decoration: none;
       }

       /* cart page css */
       .cart-item-row {
           display: flex;
           align-items: center;
           gap: 20px;
           padding: 20px 0;
           border-bottom: 1px solid #eee;
       }

       .cart-thumb {
           width: 100px;
           height: 100px;
           flex-shrink: 0;
       }

       .cart-thumb img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           border-radius: 12px;
       }

       .cart-content,
       .cart-item-left {
           flex: 1;
       }

       .cart-item-left,
       .cart-item-right {
           display: flex;
           align-items: center;
           gap: 20px;
       }

       .cart-content h5 {
           font-size: 18px;
           margin-bottom: 6px;
       }

       .cart-content span {
           color: #777;
           font-weight: 500;
           font-size: 12px;
           display: block;
       }

       .cart-price {
           color: #2f7d32;
           font-weight: 700;
       }

       .cart-qty {
           display: flex;
           align-items: center;
           border: 1px solid #ddd;
           border-radius: 50px;
           overflow: hidden;
       }

       .cart-qty button {
           width: 38px;
           height: 38px;
           border: none;
           background: #f8f8f8;
       }

       .cart-qty input {
           width: 45px;
           border: none;
           text-align: center;
           outline: none;
       }

       .cart-remove {
           color: #dc3545;
           cursor: pointer;
           font-size: 18px;
       }

       .cart-summary {
           position: sticky;
           top: 100px;
       }

       .coupon-box {
           display: flex;
           gap: 10px;
           margin-bottom: 20px;
           justify-content: center;
       }

       .coupon-box input {
           flex: 1;
           height: 50px;
           border: 1px solid #ddd;
           border-radius: 10px;
           padding: 0 15px;
           outline: none;
       }

       .cart-summary ul {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .cart-summary ul li {
           display: flex;
           justify-content: space-between;
           padding: 12px 0;
           border-bottom: 1px dashed #ddd;
       }

       .cart-total {
           display: flex;
           justify-content: space-between;
           padding: 20px 0;
           font-size: 20px;
           font-weight: 700;
       }

       .continue-shop {
           display: block;
           text-align: center;
           margin-top: 15px;
           color: #555;
           text-decoration: none;
       }

       /* Product Details page css */
       .product-gallery-slider {
           overflow: hidden;
           border-radius: 16px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
       }

       .product-gallery-slider img {
           width: 100%;
           height: 550px;
           object-fit: cover;
           border-radius: 20px;
       }

       .product-thumbs {
           display: flex;
           gap: 12px;
           margin-top: 15px;
       }

       .product-thumbs img {
           width: 90px;
           height: 90px;
           object-fit: cover;
           border-radius: 12px;
           border: 2px solid #eee;
           cursor: pointer;
           transition: .3s;
           opacity: .5;
       }

       .product-thumbs img.active,
       .product-thumbs img:hover {
           opacity: 1;
           border-color: #6a994e;
           transform: translateY(-3px);
       }

       .product-rating {
           display: flex;
           align-items: center;
           gap: 12px;
           margin-bottom: 20px;
       }

       .product-rating .stars {
           color: #ffb703;
       }

       .product-rating span {
           color: #777;
       }

       .product-price {
           display: flex;
           align-items: center;
           gap: 15px;
           flex-wrap: wrap;
           margin-bottom: 20px;
       }

       .current-price {
           font-size: 36px;
           font-weight: 700;
           color: #6a994e;
       }

       .old-price {
           text-decoration: line-through;
           color: #999;
           font-size: 22px;
       }

       .save-badge {
           background: #eef7ea;
           color: #6a994e;
           padding: 6px 14px;
           border-radius: 30px;
           font-size: 13px;
           font-weight: 600;
       }

       .product-qty {
           margin-bottom: 30px;
       }

       .product-qty span {
           display: block;
           font-weight: 600;
           margin-bottom: 10px;
       }

       .qty-box {
           width: fit-content;
       }

       .product-buttons {
           display: flex;
           gap: 15px;
           flex-wrap: wrap;
           margin-bottom: 35px;
       }

       .buy-btn {
           padding: 14px 32px;
           border: 2px solid #6a994e;
           color: #6a994e;
           border-radius: 50px;
           text-decoration: none;
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: 600;
       }

       .product-features {
           border-top: 1px solid #eee;
           padding-top: 25px;
       }

       .feature-item {
           display: flex;
           gap: 15px;
           margin-bottom: 20px;
       }

       .feature-item i {
           width: 50px;
           height: 50px;
           border-radius: 50%;
           background: #eef7ea;
           color: #6a994e;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .feature-item h6 {
           margin-bottom: 4px;
       }

       .feature-item p {
           margin: 0;
           color: #777;
           font-size: 14px;
       }


       .product-tabs-wrapper {
           background: #fff;
           border-radius: 24px;
           padding: 40px;
           box-shadow: 0 10px 40px rgba(0, 0, 0, .05);
       }

       .product-tabs-nav {
           gap: 15px;
           border: none;
           margin-bottom: 30px;
       }

       .product-tabs-nav .nav-link {
           border: none;
           background: #f8f8f8;
           color: #555;
           padding: 14px 28px;
           border-radius: 50px;
           font-weight: 600;
       }

       .product-tabs-nav .nav-link.active {
           background: #6a994e;
           color: #fff;
       }

       .product-tab-content h4 {
           margin-bottom: 20px;
           font-weight: 700;
       }

       .product-tab-content p {
           color: #666;
           line-height: 1.9;
       }

       .desc-feature-box {
           background: #f8faf7;
           border: 1px solid #edf3e9;
           padding: 18px;
           border-radius: 16px;
           font-weight: 600;
           text-align: center;
       }

       .add-info-table {
           margin: 0;
       }

       .add-info-table th {
           width: 220px;
           background: #f8faf7;
       }

       .add-info-table th,
       .add-info-table td {
           padding: 15px;
           border-color: #eee;
       }

       .review-card {
           padding: 25px;
           border: 1px solid #eee;
           border-radius: 18px;
           margin-bottom: 20px;
       }

       .review-top {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 10px;
       }

       .review-stars {
           color: #ffb703;
       }

       .review-form-box {
           margin-top: 35px;
           padding-top: 35px;
           border-top: 1px solid #eee;
       }

       .why-product-item {
           display: flex;
           gap: 18px;
           padding: 25px;
           border-radius: 20px;
           background: #fff;
           margin-bottom: 20px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
           transition: .3s;
       }

       .why-product-item:hover {
           transform: translateY(-5px);
       }

       .why-icon {
           min-width: 60px;
           width: 60px;
           height: 60px;
           border-radius: 50%;
           background: #eef8e8;
           color: var(--primary-color);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 22px;
       }

       .why-product-item h5 {
           margin-bottom: 8px;
           font-weight: 700;
       }

       .why-product-item p {
           margin: 0;
           color: #666;
           line-height: 1.7;
       }

       .why-product-image {
           padding: 20px;
           border-radius: 30px;
           overflow: hidden;
           background: white;
           box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
       }

       .related-products-slider .item {
           padding: 10px;
       }

       .related-products-slider .owl-stage {
           display: flex;
       }

       .related-products-slider .product-card {
           height: 100%;
       }

       /* Terms & Conditions page css */
       .legal-content-wrap {
           max-width: 900px;
           margin: auto;
       }

       .legal-block {
           background: #fff;
           padding: 30px;
           border-radius: 20px;
           margin-bottom: 20px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
       }

       .legal-block h3 {
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 15px;
           color: var(--primary-color);
       }

       .legal-block p {
           margin: 0;
           color: #666;
           line-height: 1.9;
       }

       /* FAQ page css  */
       .faq-wrapper {
           max-width: 900px;
           margin: auto;
       }

       .faq-wrapper .accordion-item {
           border: none;
           margin-bottom: 15px;
           border-radius: 18px !important;
           overflow: hidden;
           box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
       }

       .faq-wrapper .accordion-button {
           padding: 20px 25px;
           font-size: 18px;
           font-weight: 600;
           box-shadow: none !important;
       }

       .faq-wrapper .accordion-button:not(.collapsed) {
           background: var(--green-bg);
           color: var(--green-dark);
       }

       .faq-wrapper .accordion-body {
           padding: 20px 25px;
           color: #666;
           line-height: 1.8;
       }

       .summary-product {
           display: flex;
           align-items: center;
           gap: 14px;
           margin-bottom: 16px;
       }

       .summary-product img {
           width: 70px;
           height: 70px;
           object-fit: cover;
           border-radius: 12px;
       }

       .summary-product h6 {
           margin: 0;
           font-size: 15px;
       }

       .summary-product span {
           color: #777;
           font-size: 14px;
       }

       .summary-product strong {
           margin-left: auto;
       }

       .payment-methods {
           display: flex;
           flex-direction: column;
           gap: 12px;
       }

       .payment-methods input {
           display: none;
       }

       .payment-option {
           display: flex;
           align-items: center;
           gap: 12px;
           padding: 14px 18px;
           border: 1px solid #e8ece6;
           border-radius: 14px;
           background: #fff;
           cursor: pointer;
           transition: .3s;
           position: relative;
       }

       .payment-option i {
           font-size: 18px;
           color: var(--green);
       }

       .payment-option span {
           font-size: 15px;
           font-weight: 500;
       }

       .payment-option::after {
           content: "";
           width: 18px;
           height: 18px;
           border: 2px solid #d7d7d7;
           border-radius: 50%;
           margin-left: auto;
           transition: .3s;
       }

       .payment-option:hover {
           border-color: var(--border);
           transform: translateY(-2px);
       }

       .payment-methods input:checked+.payment-option {
           border-color: var(--border);
           background: #f7fbf4;
       }

       .payment-methods input:checked+.payment-option::after {
           border: 5px solid var(--green-dark);
       }

       .success-modal {
           border: none;
           border-radius: 24px;
           padding: 40px 30px;
           text-align: center;
           position: relative;
       }

       .success-close {
           position: absolute;
           top: 15px;
           right: 15px;
           width: 38px;
           height: 38px;
           border: none;
           border-radius: 50%;
           background: #f5f5f5;
           cursor: pointer;
           transition: .3s;
       }

       .success-close:hover {
           background: #e9e9e9;
       }

       .success-icon {
           width: 90px;
           height: 90px;
           margin: auto;
           border-radius: 50%;
           background: #eef8e8;
           color: var(--primary-color);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 40px;
           margin-bottom: 20px;
       }

       .success-modal h3 {
           font-size: 28px;
           font-weight: 700;
           margin-bottom: 10px;
       }

       .success-modal p {
           color: #666;
           margin-bottom: 25px;
       }

       .success-actions {
           margin-bottom: 15px;
       }

       .success-timer {
           display: block;
           color: #888;
           font-size: 14px;
       }