@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ===== Tokens ===== */
:root {
   --green-dark: #1d3b28;
   --green-mid: #315F2C;
   --orange: #F7941D;
   --orange-dark: #F5B52E;
   --cream: #f7f3ea;
   --sage: #eef0e6;
   --text: #1f2a22;
   --muted: #6b736d;
   --card-bg: #f6f2e9;
   --lightbg: #f9f7eb;
   --white: #fff;
   --font-head: "Playfair Display", Georgia, serif;
   --font-body: "Poppins", sans-serif;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px;
}
body {
   font-family: var(--font-body);
   color: var(--text);
   background: #fff;
   overflow-x: hidden;
   font-size: 0.95rem;
}
img {
   max-width: 100%;
   height: auto;
}
a {
   text-decoration: none;
}
h1,
h2,
h3.serif {
   font-family: var(--font-head);
   font-weight: 700;
}
.container {
   max-width: 1240px;
}

/* ===== Buttons ===== */
/* .btn-orange {
   background: var(--orange);
   color: #fff;
   
}
.btn-orange:hover,
.btn-orange:focus {
   background: var(--orange-dark);
   color: #fff;
}
.btn-dark-green {
   background: var(--green-dark);
   color: #fff;
   font-weight: 600;
   font-size: 0.85rem;
   border-radius: 50px;
   padding: 0.55rem 1rem;
   border: 0;
}
.btn-dark-green:hover,
.btn-dark-green:focus {
   background: var(--green-mid);
   color: #fff;
}
.btn-dark-green.added {
   background: var(--orange);
}
.btn-outline-dark-green {
   border: 1.5px solid var(--green-dark);
   color: var(--green-dark);
   font-weight: 500;
   font-size: 0.85rem;
   border-radius: 6px;
   padding: 0.55rem 1.4rem;
}
.btn-outline-dark-green:hover {
   background: var(--green-dark);
   color: #fff;
} */

.cmnbtn {
   overflow: hidden;
   color: var(--white);
   padding: 9px 32px;
   position: relative;
   overflow: hidden;
   display: inline-flex;
   justify-content: center;
   border-radius: 30px;
   gap: 10px;
   font-size: 0.8rem;
   font-weight: 600;
   border: 0;
   border-radius: 50px;
   text-transform: capitalize;
   transition: 0.5s;
   z-index: 0;
}
.cmnbtn1 i {
    line-height: 1;
}

.cmnbtn:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: var(--green-mid);
    width: 0%;
    height: 100%;
    transition: 0.5s;
    z-index: -1;
}

.cmnbtn:hover {
    color: var(--white);
}

.cmnbtn:hover:after {
    width: 100%;
}

.btn-orange {
   background: var(--orange);
   color: #fff;
}
.btn-dark-green{
   background: var(--green-mid);
   color: #fff;
}
.btn-dark-green:after{
   background: var(--orange);
}
.btn-outline-dark-green {
   border: 1.5px solid var(--green-mid);
   color: var(--green-dark);
}
.btn-outline-dark-green:hover {
   color: #fff;
}


/* ===== Top bar ===== */
.topbar {
   background: var(--green-dark);
   color: #fff;
   font-size: 0.8rem;
   padding: 0.6rem 0;
}
.topbar a {
   color: #fff;
   transition: 0.5s;
}
.topbar a:hover{
    color: var(--orange);
}
.topbar i {
    margin-right: 0.35rem;
    display: inline-block;
    position: relative;
    top: 1px;
}

/* ===== Header ===== */
.site-header {
   background: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
   z-index: 1030;
}
.site-header .navbar {
   padding: 0.4rem 0;
   background: var(--lightbg);
}
.logo {
   height: 80px;
   width: auto;
   object-fit: contain;
}
.site-header .navbar-brand{
    padding: 0;
}
.nav-link {
   color: var(--text);
   font-weight: 600;
   font-size: 0.9rem;
   position: relative;
   padding: 0.5rem 0.6rem !important;
}
.nav-link.active,
.nav-link:hover {
   color: var(--orange);
}
.nav-link.active::after {
   content: "";
   position: absolute;
   left: 0.6rem;
   right: 0.6rem;
   bottom: -4px;
   height: 2px;
   background: var(--orange);
}
.search-box {
   position: relative;
}
.search-box .form-control {
   border-radius: 50px;
   border: 1px solid #d9ddd8;
   font-size: 0.75rem;
   padding: 0.5rem 2.4rem 0.5rem 1rem;
   width: 200px;
   background: #fff;
}
.search-box .form-control:focus {
   border-color: var(--orange);
   box-shadow: 0 0 0 0.15rem rgba(245, 130, 32, 0.2);
}
.search-box .btn {
   position: absolute;
   right: 4px;
   top: 50%;
   transform: translateY(-50%);
   padding: 0.25rem 0.6rem;
}
.mobile-search {
   display: none;
   background: #fff;
   border-top: 1px solid #eee;
}
.mobile-search .form-control {
   width: 100%;
}
.icon-btn {
   border: 0;
   font-size: 1.35rem;
   color: var(--text);
   position: relative;
   padding: 0.25rem 0.5rem;
}
.cart-count {
   position: absolute;
   top: -2px;
   right: -2px;
   background: var(--orange);
   color: #fff;
   font-size: 0.6rem;
   font-weight: 700;
   min-width: 17px;
   height: 17px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.mobile-nav li a {
   display: block;
   padding: 0.8rem 0;
   border-bottom: 1px solid #eee;
   color: var(--text);
   font-weight: 500;
}
.mobile-nav li a:hover {
   color: var(--orange);
}

/* ===== Hero ===== */
.hero-slide {
   display: flex;
   align-items: center;
   position: relative;
}
.hero-slide .hero-image{
    position: relative;
    height: 500px;
    width: 100%;
}
.hero-slide .hero-image::before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0));
}
.hero-slide .hero-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide .hero-content{
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.hero-copy {
   color: #fff;
   padding-left: 3rem;
}
.hero-copy h1,
.hero-title {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(2.2rem, 4.5vw, 4.5rem);
   line-height: 1.12;
   margin-bottom: 1.5rem;
}
.hero-sub {
   font-family: var(--font-head);
   font-weight: 700;
   color: #f6a623;
   font-size: clamp(1.3rem, 2.6vw, 2rem);
   margin-bottom: 1rem;
}
.hero-text {
   font-size: 1rem;
   margin-bottom: 1.4rem;
}
.hero-pouches img {
   max-height: 340px;
   width: auto;
   filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
   border-radius: 10px;
}
.hero-pouches img:first-child {
   transform: translateY(-10px);
}
/* Owl hero */
.hero-owl {
   position: relative;
}
.hero-owl .owl-nav {
   margin: 0;
}
.hero-owl .owl-nav button.owl-prev,
.hero-owl .owl-nav button.owl-next {
   position: absolute;
   bottom: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff !important;
   color: var(--text) !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   margin: 0;
}
.hero-owl .owl-nav button.owl-prev {
   left: 24px;
}
.hero-owl .owl-nav button.owl-next {
   right: 24px;
}
.hero-owl .owl-nav button:hover {
   background: var(--orange) !important;
   color: #fff !important;
}
.hero-owl .owl-dots {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 14px;
   margin: 0;
}
.hero-owl .owl-dots .owl-dot span {
   width: 8px;
   height: 8px;
   margin: 0 4px;
   background: #fff;
   opacity: 0.7;
}
.hero-owl .owl-dots .owl-dot.active span {
   background: var(--orange);
   opacity: 1;
}
.ctrl-circle {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   font-size: 1rem;
}
.ctrl-circle.sm {
   width: 34px;
   height: 34px;
   font-size: 0.85rem;
}

/* ===== Features strip ===== */
.features-strip {
   background: var(--sage);
   padding: 1.5rem 0;
}
.feature-item {
   display: flex;
   align-items: center;
   gap: 0.9rem;
}
.feature-icon {
   flex: 0 0 56px;
   height: 56px;
   border-radius: 50%;
   background: #fff;
   color: var(--green-mid);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.feature-item h3 {
   font-size: 0.9rem;
   font-weight: 600;
   margin: 0;
}
.feature-item p {
   font-size: 0.8rem;
   color: var(--muted);
   margin: 0;
   line-height: 1.5;
}

/* ===== Section heads ===== */
.section {
   padding: 5rem 0;
}
.section-head {
   text-align: center;
   margin-bottom: 1.9rem;
}
.section-title {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.6rem, 3vw, 2rem);
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
   margin-bottom: 0.5rem;
   position: relative;
}
.section-title::before{
   position: absolute;
   content: "\F90B";
   font-family: bootstrap-icons;
   font-size: 20px;
   left: -30px;
   top: 3px;
   color: var(--green-mid);
}
.section-title::after{
   position: absolute;
   content: "\F90B";
   font-family: bootstrap-icons;
   font-size: 20px;
   right: -30px;
   top: 3px;
   color: var(--green-mid);
   transform: scaleX(-1);;
}
.title-leaf {
   color: var(--green-mid);
   font-size: 1.1rem;
   position: relative;
   top: 15px;
}
.title-leaf::before {
   content: "";
   position: absolute;
   width: 40px;
   height: 1px;
   background: var(--green-mid);
   right: 130%;
   top: 60%;
   opacity: 0.6;
}
.title-leaf.flip::before {
   right: auto;
   left: 130%;
}
.section-head p {
   color: var(--muted);
   font-size: 0.9rem;
   margin: 0;
}

/* ===== Categories ===== */
.category-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: var(--text);
}
.category-img {
   width: 130px;
   max-width: 130px;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--card-bg);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   transition: transform 0.25s, box-shadow 0.25s;
   border: 4px solid #fff;
}
.category-img img {
   width: 100px;
   height: 100px;
   object-fit: contain;
}
.category-img.all {
   background: var(--cream);
   color: var(--green-mid);
   font-size: 3rem;
}
.category-card:hover .category-img {
   transform: translateY(-4px);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.category-name {
   font-weight: 600;
   font-size: 1rem;
   margin-top: 0.7rem;
}

/* ===== Featured ===== */
.featured-card {
   position: relative;
   background: var(--card-bg);
   border-radius: 12px;
   padding: 0.9rem;
   height: 100%;
   transition: box-shadow 0.25s;
}
.featured-card:hover {
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}
.badge-tag {
   position: absolute;
   top: -8px;
   left: 12px;
   z-index: 2;
   color: #fff;
   font-size: 0.7rem;
   font-weight: 600;
   padding: 0.25rem 0.8rem;
   border-radius: 6px;
}
.badge-orange {
   background: var(--orange);
}
.badge-green {
   background: var(--green-dark);
}
.featured-img {
   width: 100%;
   height: 100%;
   max-height: 260px;
   object-fit: cover;
   border-radius: 10px;
}
.featured-body {
   padding: 1rem 0 1rem 1.2rem;
}
.featured-body h3 {
   font-size: 1.2rem;
   font-weight: 700;
   line-height: 1.35;
}
.featured-body .bn {
   display: block;
}
.featured-body .desc {
   font-size: 0.9rem;
   color: var(--muted);
   margin-bottom: 0.4rem;
}
.rating {
   color: var(--orange);
   font-size: 0.72rem;
   display: flex;
   align-items: center;
   gap: 1px;
}
.rating span {
   color: var(--orange);
   margin-left: 0.4rem;
}
.price {
   margin: 0.4rem 0 0.7rem;
}
.price strong {
   font-size: 1.5rem;
   color: var(--orange);
   font-weight: 700;
}
.price del {
   color: #9a9f9b;
   font-size: 0.8rem;
   margin-left: 0.3rem;
}

/* ===== Why choose ===== */
.why-section {
   background: var(--card-bg);
   overflow: hidden;
}
.why-image {
   min-height: 400px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
   position: relative;
}
.why-image::after {
   content: "";
   position: absolute;
   top: 0;
   right: -1px;
   bottom: 0;
   width: 190px;
   background: linear-gradient(90deg, transparent, var(--card-bg));
}
.why-content {
   display: flex;
   align-items: center;
   position: relative;
}
.why-inner {
   padding: 5rem 0 5rem 3rem;
   max-width: 640px;
}
.eyebrow {
   color: var(--orange);
   font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   display: flex;
   align-items: center;
   gap: 0.6rem;
}
.eyebrow::before {
   content: "";
   width: 24px;
   height: 1px;
   background: var(--orange);
}
.why-inner h2 {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.5rem, 2.8vw, 2.2rem);
   margin: 0.5rem 0 0.8rem;
}
.why-inner > p {
   font-size: 0.9rem;
   color: #3d463f;
   margin-bottom: 1.2rem;
}
.why-icons {
   text-align: center;
}
.why-icons strong {
   display: block;
   font-size: 0.9rem;
   line-height: 1.2rem;
   font-weight: 600;
}
.why-icons small {
   color: var(--muted);
   font-size: 0.8rem;
}
.why-icon {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: #ece8d8;
   color: var(--green-mid);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin-bottom: 0.4rem;
}

/* ===== Product cards ===== */
.sort-wrap {
   position: absolute;
   right: 0;
   top: 0;
   width: 170px;
}
.sort-wrap .form-select {
   font-size: 0.72rem;
   border-radius: 6px;
}
.product-card {
   background: var(--card-bg);
   border-radius: 10px;
   padding: 0.8rem;
   text-align: center;
   height: 100%;
   position: relative;
   transition: transform 0.25s, box-shadow 0.25s;
   display: flex;
   flex-direction: column;
}
.product-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}
.product-img {
   aspect-ratio: 1 / 1.05;
   overflow: hidden;
   border-radius: 8px;
   margin-bottom: 1rem;
}
.product-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.35s;
}
.product-card:hover .product-img img {
   transform: scale(1.06);
}
.wish-btn {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, 0.9);
   color: var(--muted);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   z-index: 2;
   opacity: 0;
   transition: opacity 0.2s;
}
.product-card:hover .wish-btn,
.wish-btn.active,
.wish-btn:focus {
   opacity: 1;
}
.wish-btn.active {
   color: #d62839;
}
.product-name {
   font-size: 1.1rem;
   font-weight: 600;
   margin: 0;
   min-height: 46px;
   line-height: 1.3;
}
.product-bn {
   font-size: 0.8rem;
   color: var(--muted);
   margin-bottom: 0.5rem;
}
.product-card .rating {
   justify-content: center;
   font-size: 0.72rem;
}
.product-card .price {
   margin: 0.4rem 0 0.8rem;
}
.product-card .price strong {
   font-size: 1.2rem;
}
.product-card .btn {
   margin-top: auto;
   font-size: 0.75rem;
}
.product-hide {
   display: none !important;
}

/* ===== Testimonials ===== */
.review-carousel {
   position: relative;
   padding: 0 2.5rem;
}
.review-card {
   display: flex;
   gap: 1rem;
   background: var(--card-bg);
   border-radius: 12px;
   padding: 1.4rem 1.2rem;
   height: 100%;
   margin: 0;
   align-items: flex-start;
}
.review-carousel .review-slide .review-card .avatar {
   width: 62px;
   height: 62px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
}
.review-card .stars {
   color: var(--orange);
   font-size: 0.85rem;
   letter-spacing: 1px;
   margin-bottom: 0.3rem;
}
.review-card blockquote {
   font-size: 0.9rem;
   margin-bottom: 0.8rem;
   color: #3d463f;
}
.review-card figcaption strong {
   display: block;
   font-size: 0.9rem;
}
.review-card figcaption span {
   font-size: 0.8rem;
   color: var(--muted);
}
.review-ctrl {
   width: 34px;
   top: 45%;
   bottom: auto;
   transform: translateY(-50%);
   height: 34px;
   opacity: 1;
}
.review-carousel .owl-nav{
   display: flex!important;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   position: absolute;
   left: 0;
   top: 50%;
   transform: translate(0,-50%);
}
.review-carousel .owl-nav button{
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: var(--white)!important;
   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1)!important;
   color: var(--green-dark)!important;
   font-size: 1.5rem!important;
}
.review-carousel .owl-nav button span{
   font-size: 2rem!important;
   display: inline-block;position: relative;
   top: -3px;
}
.review-carousel .owl-dots{
   display: flex!important;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   margin-top: 1.8rem;
}
.review-carousel .owl-dots .owl-dot span{
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #c7d4ca;
   transition: 0.5s;
}
.review-carousel .owl-dots .owl-dot.active span{
   background: var(--orange);
}


/* ===== Newsletter ===== */
.newsletter {
   background: var(--green-dark);
   color: #fff;
   padding: 2rem 0;
}
.news-icon {
   width: 62px;
   height: 62px;
   border-radius: 50%;
   background: #fff;
   color: var(--green-dark);
   font-size: 1.9rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}
.newsletter h2 {
   font-family: var(--font-head);
   font-size: 1.3rem;
   margin: 0;
}
.newsletter p {
   margin: 0;
   font-size: 0.75rem;
   opacity: 0.85;
}
.news-form {
   display: flex;
   background: #fff;
   border-radius: 50px;
}
.news-form .form-control {
   border: 0;
   box-shadow: none;
   background: transparent;
   font-size: 0.9rem;
   padding: 0.8rem 1rem;
}
.news-form .btn {
   white-space: nowrap;
}
.news-msg {
   font-size: 0.75rem;
   margin: 0.5rem 1rem 0;
   min-height: 1rem;
}
.news-msg.error {
   color: #ffb4b4;
}

/* ===== Footer ===== */
.site-footer {
   background: #15291c;
   color: #d4dbd5;
   padding-top: 4rem;
   font-size: 0.78rem;
   background-position: right center;
   background-repeat: no-repeat;
   background-size: cover;
}
.site-footer .footer-logo {
   filter: none;
   background: #fff;
   padding: 4px 10px;
   border-radius: 6px;
   height: 56px;
}
.site-footer h3 {
   color: #fff;
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 1rem;
   font-family: var(--font-body);
}
.site-footer ul li {
   margin-bottom: 0.55rem;
}
.site-footer a {
   color: #d4dbd5;
   font-size: 0.9rem;
}
.site-footer a:hover {
   color: var(--orange);
}
.bn-line {
   line-height: 1.7;
   font-size: 0.9rem;
}
.contact-list i {
   color: #fff;
   margin-right: 0.5rem;
}
.socials {
   display: flex;
   gap: 0.6rem;
}
.socials a {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 1.05rem;
}
.socials .fb {
   background: #1877f2;
}
.socials .ig {
   background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}
.socials .yt {
   background: #ff0000;
}
.socials a:hover {
   color: #fff;
   transform: translateY(-2px);
}
.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 3rem;
   padding: 0.9rem 0;
   font-size: 0.72rem;
}

/* ===== Cart drawer ===== */
.cart-item {
   display: flex;
   gap: 0.8rem;
   padding: 0.8rem 0;
   border-bottom: 1px solid #eee;
   align-items: center;
}
.cart-item img {
   width: 56px;
   height: 56px;
   object-fit: cover;
   border-radius: 8px;
}
.cart-item .info {
   flex: 1;
   font-size: 0.8rem;
}
.cart-item .info strong {
   display: block;
}
.qty {
   display: inline-flex;
   align-items: center;
   border: 1px solid #d9ddd8;
   border-radius: 50px;
   margin-top: 0.3rem;
}
.qty button {
   border: 0;
   background: none;
   width: 26px;
   height: 26px;
   font-size: 0.8rem;
}
.qty span {
   min-width: 22px;
   text-align: center;
   font-size: 0.78rem;
}
.cart-remove {
   border: 0;
   background: none;
   color: var(--muted);
}
.cart-remove:hover {
   color: #d62839;
}
.cart-empty {
   text-align: center;
   color: var(--muted);
   padding: 2rem 0;
}
.submit-btn{
   border: none;
   background: var(--orange);
   border-radius: 0 50px 50px 0;
   color: var(--white);
   transition: 0.5s;
   font-weight: 500;
   font-size: 0.9rem;
   padding: 8px 30px;
   min-height: 35px;
}
.submit-btn:hover{
   background: var(--green-mid);
}

/* ===== Back to top ===== */
.back-to-top {
   position: fixed;
   right: 18px;
   bottom: 18px;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 0;
   background: var(--orange);
   color: #fff;
   font-size: 1.1rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   opacity: 0;
   visibility: hidden;
   transition: 0.25s;
   z-index: 1040;
}
.back-to-top.show {
   opacity: 1;
   visibility: visible;
}

/* ===== Responsive ===== */
@media (min-width: 992px) {
   .row-cols-lg-7 > * {
      flex: 0 0 auto;
      width: 14.2857%;
   }
}
@media (max-width: 1200px) {
   .search-box .form-control {
      width: 160px;
   }
   .hero-copy {
      padding-left: 2.5rem;
   }
   .hero-pouches img {
      max-height: 280px;
   }
   .hero-owl .owl-nav button.owl-prev,
.hero-owl .owl-nav button.owl-next{
   transform: translate(-50%,0);
   top: auto;
   bottom: 20px;
}
.hero-owl .owl-nav button.owl-prev{
   left: calc(50% - 30px);
}
.hero-owl .owl-nav button.owl-next{
   left: calc(50% + 30px);
}
}
@media (max-width: 991.98px) {
   .mobile-search.open {
      display: block;
   }
   .hero-slide {
      min-height: 340px;
   }
   .hero-copy {
      padding: 0 3.2rem;
   }
   .why-image {
      min-height: 240px;
   }
   .why-image::after {
      display: none;
   }
   .why-inner {
      padding: 2rem 1.5rem;
      max-width: none;
   }
   .featured-card {
      padding-right: 0.5rem;
   }
   .sort-wrap {
      position: static;
      margin: 1rem auto 0;
   }
   .section-title {
      gap: 0.5rem;
   }
   .title-leaf::before {
      display: none;
   }
}
@media (max-width: 767px) {
   .section {
      padding: 2.2rem 0;
   }
   .logo {
      height: 44px;
   }
   .hero-slide {
      min-height: 380px;
      text-align: left;
   }
   .hero-copy {
      padding: 0 2.8rem 0 2.8rem;
   }
   .review-carousel {
      padding: 0 1.8rem;
   }
   .news-icon {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
   }
   .footer-bottom span{
      text-align: center;
   }
}
@media (max-width: 574px) {
   .features-strip .feature-item {
      flex-direction: column;
      text-align: center;
   }
   .feature-icon {
      flex-basis: 48px;
      height: 48px;
      width: 48px;
      font-size: 1.3rem;
   }
   .featured-card .col-5,
   .featured-card .col-7 {
      width: 100%;
      flex: 0 0 100%;
   }
   .featured-img {
      max-height: 200px;
   }
   .featured-body {
      padding: 0.8rem;
   }
   .review-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }
   .review-carousel {
      padding: 0 1.4rem;
   }
   .why-inner h2 br {
      display: none;
   }
   .news-form {
      flex-direction: column;
      border-radius: 16px;
      gap: 4px;
   }
   .news-form .btn {
      width: 100%;
   }
   .wish-btn {
      opacity: 1;
   }
   .hero-copy {
      padding: 0 2.4rem;
   }
   .section-title {
      font-size: 1.35rem;
   }
   .submit-btn{
      border-radius: 0 0 15px 15px;
   }
   .category-img{
      width: 100px;
      max-width: 100px;
   }
   .category-img img {
      width: 65px;
      height: 65px;
      object-fit: contain;
   }
   .category-name{
      font-size: 0.8rem;
   }
   .featured-body h3{
      font-size: 1rem;
   }
}

/* ===== Utilities ===== */
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}
.spin {
   display: inline-block;
   animation: spin 0.6s linear infinite;
}


.inner-banner {
    position: relative;
}

.inner-banner .image {
    height: 400px;
    position: relative;
}

.inner-banner .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
}

.inner-banner .image::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
}

.inner-ban-con {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
}

.inner-ban-con .head span {
    font-family: var(--font-body);
    color: var(--orange-dark);
    font-size: 16px;
    font-weight: 500;
    display: block;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.inner-ban-con .head .title {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 60px;
    line-height: 90%;
    color: var(--white);
    font-family: var(--font-head);
}

.inner-ban-con .breadcrumb-item+.breadcrumb-item::before {
    color: var(--lightbg);
}

.inner-ban-con .breadcrumb .breadcrumb-item a {
    color: inherit;
}

.inner-ban-con .breadcrumb .breadcrumb-item {
    font-size: 15px;
    line-height: 20px;
    color: var(--white);
    font-weight: 500;
}

.inner-ban-con .breadcrumb .breadcrumb-item.active {
    color: var(--orange);
}

.product-toolbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.product-count {
    color: var(--textcolor);
    font-size: 14px;
}

.sort-box {
    position: relative;
}

.sort-box select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
    padding: 6px 40px 6px 15px;
    background: var(--darkgrey);
    color: #fff;
    border: 1px solid var(--grey);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.sort-box::after {
    content: "\f282";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 14px;
    bottom: 8px;
    color: var(--textcolor);
    pointer-events: none;
}

.product-list-main .list-right .row {
    row-gap: 20px;
}

.list-right .product-item .content .cmnbtn {
    margin-top: 15px;
    padding: 7px 15px;
}



/* =========================================
   PRODUCT FILTER SIDEBAR
========================================= */

.list-left {
    width: 100%;
}

.list-left .accordion {
    background: var(--cream);
    border: 1px solid var(--sage);
    border-radius: 5px;
    overflow: hidden;
}


/* =========================================
   ACCORDION ITEM
========================================= */

.list-left .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sage);
}

.list-left .accordion-item:last-child {
    border-bottom: 0;
}


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

.list-left .accordion-header {
    margin: 0;
}

.list-left .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 14px;
    background: var(--white);
    color: var(--green-dark);
    font-family: var(--font-body);
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    letter-spacing: 0;
}


/* Orange small line above heading */

.list-left .accordion-button.collapsed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    width: 38px;
    height: 2px;
    background: var(--orange);
    opacity: 0;
    transition: 0.5s;
}

.list-left .accordion-button::before {
   content: "";
    position: absolute;
    top: 0;
    left: 14px;
    width: 38px;
    height: 2px;
    background: var(--orange);
    opacity: 1;
    transition: 0.5s;
}


/* Bootstrap default arrow */

.list-left .accordion-button::after {
    width: 10px;
    height: 10px;
    background-size: 10px;
    transition: transform .25s ease;
}


/* Open state */

.list-left .accordion-button:not(.collapsed) {
    background: var(--lightbg);
    color: var(--text);
}


/* =========================================
   ACCORDION BODY
========================================= */

.list-left .accordion-body {
    padding: 2px 14px 17px;
    background: var(--lightbg);
    color: var(--text);
}


/* =========================================
   CATEGORY / RADIO FILTER
========================================= */

.filter-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: color .5s ease;
}

.filter-option:hover {
    color: var(--orange);
}

.filter-option input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}


/* Custom radio */

.filter-radio {
    position: relative;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    border: 1px solid var(--muted);
    border-radius: 50%;
    transition: .5s ease;
}


/* Checked radio */

.filter-option input:checked+.filter-radio {
    border-color: var(--orange);
}

.filter-option input:checked+.filter-radio::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background: var(--orange);
    border-radius: 50%;
}

.filter-option:has(input:checked) {
    color: var(--orange);
}


/* Count */

.filter-option small,
.filter-checkbox small {
    color: var(--muted);
    font-size: 13px;
}


/* =========================================
   CHECKBOX
========================================= */

.filter-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: color .5s ease;
}

.filter-checkbox:hover {
    color: var(--orange);
}

.filter-checkbox input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}


/* Custom checkbox */

.checkbox-box {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--muted);
    border-radius: 2px;
    transition: .2s ease;
}


/* Checked */

.filter-checkbox input:checked+.checkbox-box {
    border-color: var(--orange);
}

.filter-checkbox input:checked+.checkbox-box::after {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--orange);
    font-size: 10px;
    font-weight: 700;
}

.filter-checkbox:has(input:checked) {
    color: var(--orange);
}

/* =========================================
   PRICE RANGE
========================================= */

.price-range {
    padding-top: 5px;
}


/* Slider area */

.price-slider {
    position: relative;
    width: 100%;
    height: 20px;
    margin: 5px 0 8px;
}


/* Track */

.price-slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--orange);
    transform: translateY(-50%);
}


/* Range inputs */

.price-slider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}


/* Webkit thumb */

.price-slider input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    border: 1px solid var(--sage);
    border-radius: 50%;
    background: var(--green-dark);
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    cursor: pointer;
}


/* Firefox thumb */

.price-slider input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 1px solid var(--sage);
    border-radius: 50%;
    background: var(--green-dark);
    pointer-events: auto;
    cursor: pointer;
}


/* Price values */

.price-values {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   SMOOTH ACCORDION
========================================= */

.list-left .accordion-collapse {
    transition: height .5s ease;
}


/* =========================================
   REMOVE BOOTSTRAP FOCUS
========================================= */

.list-left .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}


/* =========================================
   SCROLLBAR - OPTIONAL
========================================= */

.list-left::-webkit-scrollbar {
    width: 4px;
}

.list-left::-webkit-scrollbar-track {
    background: var(--dark);
}

.list-left::-webkit-scrollbar-thumb {
    background: var(--grey);
}

.list-left::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}


.product-list .sort-wrap{
   position: relative;
}
.product-list .product-toolbar .section-head{
   margin-bottom: 0;
}


/* Product Details------------------------------------------------- */

.product_slider_holder {
    display: flex;
    gap: 15px;
    width: 100%;
    height: 560px;
}

.slider-nav {
    width: 85px;
    height: 100%;
    flex: 0 0 85px;
    position: relative;
}

.slider-nav .slick-list {
    height: 100% !important;
}

.slick-slide img {
    border-radius: 7px;
}

.slider-nav .slick-track {
    height: auto !important;
}

.slider-nav .slick-slide {
    height: 85px !important;
    margin-bottom: 12px;
    cursor: pointer;
}

.slider-nav .slick-slide .item {
    width: 85px;
    height: 85px;
    overflow: hidden;
    border: 1px solid var(--sage);
    background: var(--lightbg);
    border-radius: 7px;
}

.slider-nav .slick-slide .item img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    opacity: 0.6;
    border-radius: 7px;
    transition: 0.3s ease;
}

.slider-nav .slick-current .item {
    border-color: #ff4d00;
}

.slider-nav .slick-current .item img {
    opacity: 1;
}

.slider-nav .slick-slide:hover .item img {
    opacity: 1;
}


/* slider-nav arrow css */

.slider-nav .slick-next {
    bottom: 0px;
}

.slider-nav .slick-prev,
.slider-nav .slick-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 30px;
    z-index: 10;
    border: 1px solid var(--orange);
    background: var(--orange);
    font-size: 0;
    cursor: pointer;
}

.slider-nav .slick-prev {
    top: -5px;
}

.slider-nav .slick-next::before,
.slider-nav .slick-prev::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23fff' height='800px' width='800px' version='1.1' id='Layer_1' viewBox='0 0 512.002 512.002' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M498.837,65.628c-7.957-3.328-17.152-1.472-23.253,4.629L256,289.841L36.416,70.257 c-6.101-6.101-15.275-7.936-23.253-4.629C5.184,68.913,0,76.721,0,85.34v106.667c0,5.675,2.24,11.093,6.251,15.083 l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251L505.751,207.09 c4.011-3.989,6.251-9.408,6.251-15.083V85.34C512,76.721,506.816,68.913,498.837,65.628z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 18px;
    background-position: center;
    background-size: contain;
}

.slider-nav .slick-prev::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.slider-nav .slick-prev::before,
.slider-nav .slick-next::before {
    color: #fff;
    font-size: 15px;
    opacity: 1;
}

.slider-for {
    width: calc(100% - 100px);
    height: 560px;
}

.slider-for .item {
    height: 560px;
    background: #111;
}

.slider-for .item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* slick-for arrows css */

.slider-for .slick-prev,
.slider-for .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    font-size: 0;
}

.slider-for .slick-prev {
    left: 15px;
}

.slider-for .slick-next {
    right: 15px;
}

.slider-for .slick-prev::before {
    content: "‹";
}

.slider-for .slick-next::before {
    content: "›";
}

.slider-for .slick-prev::before,
.slider-for .slick-next::before {
    color: #fff;
    font-size: 28px;
    position: absolute !important;
    left: 40%;
    top: 45%;
    transform: translateY(-50%);
    z-index: 5;
}

.tab_indicator {
    position: absolute;
    border-radius: 20px;
    z-index: 1;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    background: black;
}

#tab,
.extra_info {
    position: relative;
    padding: 15px;
    background: var(--lightbg);
    border-radius: 5px;
    border: 1px solid var(--sage);
}

#tab ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    gap: 30px;
    position: relative;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--orange-dark);
}

#tab ul li a {
    z-index: 2;
    position: relative;
    font-weight: 500;
    color: var(--text);
    display: inline-block;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

#tab ul li a::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 3px;
    border-radius: 10px;
    background: var(--orange);
    bottom: -7px;
    transition: all 0.3s ease-in-out;
    left: 0;
}

#tab ul li.active a {
    color: var(--orange);
}

#tab ul li.active a::after {
    width: 100%;
}

.tab_content a {
    display: inline-block;
    text-transform: none !important;
    color: var(--text) !important;
    transition: all 0.3s ease-in-out;
}

.tab_content a:hover {
    color: var(--orange) !important;
}

#tab .tab_content ul {
    display: block !important;
    margin-bottom: 10px;
    border-bottom: none;
}

#tab .tab_content h4 {
    color: var(--green-dark);
    font-size: 25px;
    font-weight: 600;
    text-transform: capitalize;
}

.tab_content ul li {
    display: block;
    position: relative;
    padding-left: 25px;
    padding-bottom: 7px;
    line-height: 125%;
}

.tab_content ul li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill='%23c84218' d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 282.9 440.5 289.9 440C296.9 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z'/%3E%3C/svg%3E");
    width: 15px;
    height: 15px;
    background-size: contain;
    background-position: center;
}

.extra_info ul {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
}

.extra_info ul li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.extra_info ul li+li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--orange-dark);
}

.ex_text>* {
    display: block;
    font-style: normal;
    text-transform: capitalize;
}

.ex_icon i {
    font-size: 22px;
    color: var(--orange);
}

.ex_text b {
    color: var(--green-dark);
    font-size: 17px;
}


/* tab_sec end  */


/* product_details sec css  */

.product_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px 30px;
    max-width: 500px;
    border-bottom: 1px solid var(--orange-dark);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.prd-r>* {
    display: block;
    font-size: 13px;
}

.prd-r b {
    color: limegreen;
    position: relative;
}

.prd-r b.empty {
    color: #c52222;
}

.prd-r b::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    background: #22c55e;
    border-radius: 50%;
    margin-bottom: 1px;
    animation: liveBlink 1.2s infinite;
}

@keyframes liveBlink {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    }
    50% {
        opacity: 0.45;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
    }
}

.prd-r b.empty::before {
    background: #c52222;
    animation: outBlink 1.2s infinite;
}

@keyframes outBlink {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(197, 34, 34, 0.6);
    }
    50% {
        opacity: 0.45;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
    }
}

.prd-r em {
    display: inline-block;
    font-family: var(--font2);
    font-style: normal;
}

.prd-l {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.prd-l em {
    text-transform: capitalize;
    font-weight: 700;
    color: var(--green-mid);
    margin-bottom: 10px;
    display: inline-block;
    font-size: 30px;
    font-family: var(--font-body);
    font-style: normal;
}

.prd-l del {
    font-size: 18px;
    color: var(--muted);
    opacity: 0.7;
}

.prd-l i {
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    padding: 0px 7px;
    font-style: normal;
    font-family: var(--font-body);
    display: inline-block;
    background: var(--orange);
}

.product_color .pro-clr li {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 7px;
}

.product_color .pro-clr li em {
    font-size: 0;
    opacity: 0;
}

.product_color .pro-clr li.active {
    border: 2px solid limegreen;
}

.product_color b i {
    font-style: normal;
    color: var(--text);
    padding-left: 10px;
}

.sizes {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px 100px;
}

.sizes ul,
.size_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
    padding: 0;
}

.sizes em {
    display: inline-flex;
    font-style: normal;
    gap: 10px;
}

.size_left ul li {
    border: 1px solid #beb5b5;
    border-radius: 4px;
    padding: 3px;
    color: var(--text);
    font-weight: 500;
    font-size: 13px;
    padding: 0 5px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.size_left ul li.active {
    border: 1px solid rgb(42, 159, 42);
    background:  rgb(42, 159, 42);
    color: var(--white);
}

.quantity_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.quantity_wrapper form {
    border: 1px solid var(--white);
}

.quantity_wrapper form button,
.quantity_wrapper form input {
    border: none;
    background: var(--lightbg);
    color: var(--text);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    text-align: center;
    appearance: none;
}

.quantity_wrapper form button:nth-child(1) {
    border-right: 1px solid var(--lightbg);
}

.quantity_wrapper form button:nth-child(3) {
    border-left: 1px solid var(--lightbg);
}

#quantity::-webkit-inner-spin-button,
#quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#quantity {
    -moz-appearance: textfield;
    appearance: textfield;
}

.purchase_sec {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.purchase_sec button {
    text-align: center;
    justify-content: center;
    padding: 10px 50px;
}

.purchase_sec button i {
    font-size: 17px;
    line-height: 103%;
}

.purchase_sec button.cart {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    border-radius: 5px;
    min-width: 150px;
    background: transparent;
    border-radius: 50px;
    color: var(--text);
    border: 1px solid var(--orange);
    transition: all 0.3s ease-in-out;
}

.purchase_sec button.cart:hover{
   color: var(--white);
}

.purchase_sec button.cart:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: var(--orange);
    width: 0%;
    height: 100%;
    transition: 0.5s;
    z-index: -1;
}

.purchase_sec button.cart:hover:after {
    width: 100%;
}

.purchase_sec button.fav {
    padding: 12px 15px 7px;
    border: 1px solid var(--white);
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purchase_sec .fav i {
    font-size: 25px;
    color: var(--muted);
    display: block;
    transition: color 0.25s ease;
}

.purchase_sec .fav.active i {
    color: #ff3b5c;
    animation: heartBeat 0.5s ease;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.35);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}


/* product_details sec css end */

.purchase_sec button {
    text-align: center;
    justify-content: center;
    padding: 10px 35px;
}

@media only screen and (max-width:1380.98px) {
    .product_details h1 {
        font-size: 50px;
    }
    section.tab_sec {
        padding-top: 0;
    }
}

@media only screen and (max-width:1199.98px) {
    .purchase_sec button {
        padding: 10px 35px;
    }
    .ex_text b {
        font-size: 15px;
    }
    .sizes {
        gap: 15px 70px;
    }
}

@media only screen and (max-width:991.98px) {
    .product_details {
        padding-top: 35px;
    }
    .extra_info ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .extra_info ul li+li {
        margin-top: 0px;
        padding-top: 0px;
        border-left: 1px solid #737373;
        border-top: none;
    }
    .ex_text>* {
        font-size: 13px;
        line-height: 150%;
    }
    .extra_info {
        margin-top: 30px;
    }
    .extra_info ul li {
        padding: 0 20px;
        width: 30%;
    }
    .product_price {
        max-width: unset;
    }
}

@media only screen and (max-width:840.98px) {
    .extra_info ul li {
        padding: 10px;
        width: 100%;
    }
    .extra_info ul li+li {
        border-left: none;
        border-bottom: none;
        border-top: 1px solid rgb(105, 100, 100);
        padding-top: 10px;
    }
    .extra_info ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0px;
    }
}

@media only screen and (max-width:767.98px) {
    #tab>ul {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width:575.98px) {
    /* tab's mobile version accordian css start  */
    #tab ul {
        flex-direction: column;
    }
    #tab>ul {
        flex-wrap: wrap;
        display: block;
        border-bottom: none;
        margin-bottom: 0;
    }
    #tab ul li {
        width: 100%;
        position: relative;
        background: var(--white);
        border-radius: 5px;
        margin-bottom: 15px;
    }
    #tab {
        padding-bottom: 0;
    }
    #tab ul li a {
        display: block;
        padding: 15px 50px 15px 20px;
        text-align: left;
        color: var(--text);
        border: 1px solid var(--orange);
        border-radius: 10px;
        font-weight: 700;
    }
    .tab_content {
        display: block;
        overflow: hidden;
        position: relative;
        float: none;
        padding: 10px 0;
    }
    .tab-content {
        padding: 15px;
        display: none;
        transition: all 0.3s ease-in-out;
    }
    #tab ul li.active a {
        color: var(--white);
        background: var(--orange);
    }
    #tab ul li::before {
        content: '';
        background: url(../images/down-arw.svg) no-repeat right center;
        background-size: 100%;
        vertical-align: middle;
        display: inline-block;
        float: right;
        width: 20px;
        height: 20px;
        transition: all 0.5s;
        position: absolute;
        right: 15px;
        left: auto;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 3;
    }
    #tab ul li.active::before {
        background: url(../images/up-arw.svg) no-repeat right center;
        transform: rotate(0deg);
        background-size: 100%;
        top: 35%;
    }
    .tab_content ul li {
        display: block;
        position: relative;
        padding-left: 20px;
        padding-bottom: 10px !important;
        line-height: 135%;
        margin-bottom: 0 !important;
        background: transparent !important;
    }
    .tab_content ul li::before {
        display: none !important;
    }
    .tab_content ul li a {
        display: inline-block !important;
        padding: 0 !important;
        font-weight: normal !important;
    }
    /* tab's mobile version accordian css end  */
    .sizes em {
        display: none;
    }
    .purchase_sec {
        flex-wrap: wrap;
    }
    .purchase_sec button {
        padding: 10px 25px;
        font-size: 13px !important;
    }
    .purchase_sec button i {
        font-size: 15px;
        line-height: 100%;
    }
    .purchase_sec button.fav {
        padding: 16px 14px 9px;
    }
    .purchase_sec .fav i {
        font-size: 20px;
    }
    .product_price {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 10px 30px;
    }
    .product_details h1 {
        font-size: 40px;
    }
    .slider-for .item {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .product_slider_holder {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        height: auto;
    }
    .slider-for {
        order: 1;
        width: 100%;
        height: auto;
    }
    .slider-for .item {
        width: 100%;
        height: 400px;
        background: #111;
    }
    .slider-for .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .slider-nav {
        order: 2;
        width: 100%;
        height: 85px;
        flex: none;
        position: relative;
    }
    .slider-nav .slick-list {
        width: 100%;
        height: 85px !important;
    }
    .slider-nav .slick-track {
        height: 85px !important;
    }
    .slider-nav .slick-slide {
        width: 85px;
        height: 85px !important;
        margin: 0 6px 0 0;
    }
    .slider-nav .slick-slide .item {
        width: 85px;
        height: 85px;
    }
    .slider-nav .slick-prev,
    .slider-nav .slick-next {
        top: 50%;
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        width: 22px;
        height: 85px;
        z-index: 10;
    }
    .slider-nav .slick-prev {
        left: 0;
    }
    .slider-nav .slick-next {
        right: 0;
    }
    .slider-nav .slick-prev::before,
    .slider-nav .slick-next::before {
        width: 12px;
        height: 16px;
    }
    .slider-nav .slick-prev::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .slider-nav .slick-next::before {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    .slider-for .slick-prev {
        left: 10px;
    }
    .slider-for .slick-next {
        right: 10px;
    }
    .slick-slide img {
        display: block;
        height: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width:450.98px) {
    .product_details h1 {
        font-size: 35px;
    }
}

.rating img{
    width: 80px;
}
.product_details h1{
    color: var(--green-dark);
    font-size: 30px;
    font-weight: 700;
}

.subtitle {
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--orange);
    font-size: 14px;
    position: relative;
    margin-bottom: 7px;
    display: inline-block;
}

.rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.rating ul li {
    font-size: 14px;
    color: #e3ab00;
}
.rating ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    gap: 5px;
    margin-bottom: 0;
}
.product_details_sec{
   margin-bottom: 30px;
}


/* Contact Page--------------------------------------------- */


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

.contact-sec {
    position: relative;
    width: 100%;
    padding: 70px 0;
}

.contact-details {
    width: 100%;
}


/* =========================================
   LEFT CONTACT BOX
========================================= */

.contact-left {
    height: 100%;
    padding: 32px;
    background: var(--lightbg);
    border: 1px solid var(--sage);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}



/* Keep content above texture */

.contact-left>* {
    position: relative;
    z-index: 1;
}


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

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

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

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


/* Icon */

.contact-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 28px;
}

.contact-icon i {
    line-height: 1;
}


/* Content */

.contact-info-content {
    padding-top: 2px;
}

.contact-info-content h3 {
    margin: 0 0 5px;
    color: var(--green-dark);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.contact-info-content p {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}

.contact-info-content p a {
    color: var(--orange);
}


/* =========================================
   SOCIAL SECTION
========================================= */

.contact-social {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--orange-dark);
}

.social-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-head h3 {
    margin: 0;
    color: var(--green-dark);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Social list */

.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-links li {
    margin: 0;
    padding: 0;
}

.social-links a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--orange);
    border-radius: 50%;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    transition: all .25s ease;
}

.social-links a:hover {
    color: var(--white);
    background: var(--orange);
    border-color: var(--orange);
    transform: translateY(-2px);
}

.contact-social>p {
    margin: 12px 0 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================
   RIGHT FORM BOX
========================================= */

.contact-form {
    height: 100%;
    padding: 32px;
    background: var(--lightbg);
    border: 1px solid var(--sage);
    border-radius: 5px;
}


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

.form-head {
    margin-bottom: 25px;
}

.form-head h2 {
    margin: 0 0 6px;
    color: var(--green-dark);
    font-size: 27px;
    font-weight: 700;
    text-transform: capitalize;
}

.form-head p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================
   FORM GROUP
========================================= */

.contact-form .row {
    row-gap: 14px;
}

.form-group {
    position: relative;
    width: 100%;
}


/* =========================================
   INPUT / SELECT / TEXTAREA
========================================= */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: var(--white);
    border: 1px solid var(--sage);
    border-radius: 4px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .25s ease, background .25s ease;
}


/* Input */

.form-group input {
    height: 50px;
    padding: 0 15px 0 45px;
}


/* Select */

.form-group select {
    height: 50px;
    padding: 0 42px 0 45px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}


/* Textarea */

.form-group textarea {
    min-height: 125px;
    resize: vertical;
    padding: 15px 15px 15px 45px;
    line-height: 1.6;
}


/* Placeholder */

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text);
}


/* Focus */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--orange-dark);
    background: var(--white);
}


/* =========================================
   FORM ICON
========================================= */

.input-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 17px;
    pointer-events: none;
    z-index: 2;
}

.message-group .input-icon {
    top: 0;
    height: 50px;
}


/* =========================================
   SELECT ARROW
========================================= */

.select-arrow {
    position: absolute;
    top: 0;
    right: 15px;
    height: 50px;
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: 13px;
    pointer-events: none;
}


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

.contact-submit {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0;
    border: 0;
    border-radius: 4px;
    background: var(--orange);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: .4px;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.contact-submit:hover {
    background: var(--green-mid);
    transform: translateY(-1px);
}

.contact-submit i {
    font-size: 15px;
}

.map {
    position: relative;
    line-height: 0;
}

.map::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.map iframe {
    width: 100%;
    height: 350px;
    object-fit: cover;
    line-height: 0;
}