/* ====== Variables ====== */
:root{
  --bg:#f7f1e6;          /* warm cream */
  --bg-2:#efe5d2;        /* deeper cream */
  --card:#ffffff;        /* clean surface */
  --surface:#fffdf8;     /* soft surface */
  --ink:#2a241c;         /* warm dark text */
  --muted:#7a7164;       /* muted warm grey */
  --green:#c62828;       /* primary accent — now red (was green #2e7d32) */
  --green-2:#e53935;     /* bright accent — now red (was green #43a047) */
  --green-deep:#8e1414;  /* deep accent — now red (was green #1b5e20) */
  --gold:#c9a227;        /* premium gold */
  --gold-2:#e0b84a;      /* light gold */
  --accent1:#8e1414;     /* was #1b5e20 */
  --accent2:#c62828;     /* was #2e7d32 */
  --red:#c0392b;         /* urgency / price */
  --white:#ffffff;
  --border:#e7dcc6;      /* warm tan border */
  --container:1100px;
  --radius:12px;
  --glass: rgba(43,36,28,0.04);
  --font: 'Poppins', sans-serif;
}




*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    background:#050b18;
    color:#fff;
}

/* Header */

header{
    background:#000;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand-logo{
    height: 100px;
    width: 100px;
    object-fit: cover;
    /* border-radius: 50%; */
    /* border: 1px solid rgba(255, 255, 255, 0.04); */
    /* background-color: rgb(255 255 255); */
}
.brand-title{font-weight:700;font-size:1.5rem}
.brand-title .herbs {
  color: var(--green);
}

.brand-title .two {
  color: var(--gold);
}

.brand-title .heart {
  color: var(--red);
}


.site-nav{display:flex;gap:18px;align-items:center}
.site-nav .nav-link{color:var(--muted);text-decoration:none;font-weight:600}
.site-nav .nav-link:hover{ color: red;}

.hamburger{display:none;background:transparent;border:0;cursor:pointer;padding: 0;}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);margin:4px 0;border-radius:2px}

.css-marquee { 
    white-space: nowrap;
    background: linear-gradient(90deg,#1b7026,#37eb1fab); padding:20px 0; 
    padding: 5px 0;
    overflow: hidden;
    min-height: 2rem;
 }
.css-marquee span { display:inline-block; padding-left:100%; animation: slide 24s linear infinite; font-weight:500; color:black; }
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }


.premiumBannerWrap {
    width: 100%;
    background: #000;
}

.premiumSlider {
    position: relative;
    max-width: 1920px;
    margin: auto;
    overflow: hidden;
}

.premiumBannerTrack {
    display: flex;
    transition: transform 0.8s ease-in-out;
}

.premiumBannerItem {
    min-width: 100%;
    aspect-ratio: 1920 / 900;
}

.premiumBannerItem img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* NO crop */
    display: block;
}

/* Arrows */
.sliderBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 28px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.sliderBtn:hover {
    background: rgba(0,0,0,0.8);
}

.prev { left: 10px; }
.next { right: 10px; }

@media (max-width:768px){

    .css-marquee{
        margin-bottom:0 !important;
    }

    .premiumBannerWrap{
        margin:0 !important;
        padding:0 !important;
        display:block;
        line-height:0;
    }

    .premiumSlider{
        margin:0 !important;
        padding:0 !important;
        line-height:0;
    }

    .premiumBannerTrack{
        margin:0 !important;
        padding:0 !important;
    }

    .premiumBannerItem{
        min-width:100%;
        aspect-ratio:auto !important;
        display:block;
    }

    .premiumBannerItem img{
        width:100%;
        height:auto;
        display:block;
       
    }
}


.hero {
    max-width: 900px;
    margin: 70px auto;
    padding: 0 20px;
    text-align: center;
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    color: #706f6f;
    margin-bottom: 15px;
    position: relative;
}

.hero h1::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    background: #2e7d32;
    margin: 12px auto 0;
    border-radius: 10px;
}

.hero p {
    font-size: 17px;
    line-height: 1.9;
    color: #bbbaba;
    margin-top: 25px;
}

/* Tablet */
@media (max-width: 768px) {
    .hero {
        margin: 60px auto;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.8;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hero {
        margin: 40px auto;
        padding: 0 15px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero h1::after {
        width: 55px;
        height: 3px;
    }

    .hero p {
        font-size: 15px;
        line-height: 1.7;
    }
}



/* =======================
   PRODUCTS GRID
======================= */
.products{
    width:92%;
    max-width:1300px;
    margin:60px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
    align-items:stretch;
}

/* =======================
   CARD BASE
======================= */
.card{
    background: linear-gradient(145deg, #0b1220, #0f1a2f);
    border-radius:22px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(255,255,255,0.06);

    display:flex;
    flex-direction:column;

    transition: all 0.35s ease;
    transform: translateZ(0);
}

.card:hover{
    transform: translateY(-12px);
    box-shadow: 0 25px 70px rgba(0,0,0,0.6);
    border-color: rgba(34,197,94,0.35);
}

/* =======================
   BADGE
======================= */
.badge{
    position:absolute;
    top:12px;
    left:12px;
    background: linear-gradient(135deg,#ef4444,#f97316);
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:6px 12px;
    border-radius:50px;
    z-index:5;
    letter-spacing:0.5px;
}

/* =======================
   IMAGE BOX
======================= */
.img-box{
    position:relative;
    width:100%;
    height:270px;
    overflow:hidden;
    flex-shrink:0;
    background:#0a0f1c;
}

/* IMAGES */
.img-box img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    transition: all 0.6s ease;
}

/* FRONT / BACK EFFECT */
.img-front{opacity:1;}
.img-back{opacity:0; transform:scale(1.1);}

.card:hover .img-front{
    opacity:0;
    transform:scale(1.15);
}

.card:hover .img-back{
    opacity:1;
    transform:scale(1);
}

/* =======================
   OVERLAY
======================= */
.overlay{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    opacity:0;
    transition:0.35s ease;
}

.card:hover .overlay{
    opacity:1;
}

/* QUICK BUTTON */
.quick-btn{
    background: linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    padding:10px 18px;
    border-radius:30px;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    transition:0.3s;
}

.quick-btn:hover{
    transform:scale(1.05);
}

/* CART BUTTON */
.cart-mini{
    background:#fff;
    color:#111;
    border:none;
    padding:9px 14px;
    border-radius:20px;
    cursor:pointer;
    font-weight:600;
    transition:0.3s;
}

.cart-mini:hover{
    transform:scale(1.05);
}

/* =======================
   WISHLIST
======================= */
.wishlist{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background: rgba(0,0,0,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    cursor:pointer;
    transition:0.3s;
    z-index:6;
    font-size:16px;
}

.wishlist:hover{
    background:#ef4444;
    transform:scale(1.15);
}

/* =======================
   CONTENT
======================= */
.card-content{
    padding:18px;
    color:#fff;
}

.card h3{
    font-size:18px;
    margin-bottom:6px;
}

.desc{
    color:#94a3b8;
    font-size:13px;
    margin-bottom:12px;
}

/* =======================
   PRICE
======================= */
.price-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.price{
    color:red;
    font-size:20px;
    font-weight:800;
}

.old-price{
    color:#64748b;
    text-decoration:line-through;
    font-size:13px;
}

/* =======================
   BUTTON
======================= */
.btn{
    display:block;
    text-align:center;
    padding:12px;
    border-radius:14px;
    text-decoration:none;
    color:#fff;
    font-weight:700;
    background: linear-gradient(135deg,#16a34a,#22c55e);
    transition:0.3s;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(34,197,94,0.25);
}

/* =======================
   MOBILE
======================= */
@media (max-width:768px){
    .img-box{
        height:220px;
    }

    .products{
        gap:18px;
    }
}

.toast{
    position:fixed;
    bottom:20px;
    left:20px;
    background:rgba(17,24,39,0.95);
    color:#fff;
    padding:12px 16px;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
    font-size:14px;
    opacity:0;
    transform:translateY(20px);
    transition:0.5s ease;
    z-index:9999;
    max-width:300px;
    line-height:1.4;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
    border-left:4px solid #22c55e;
}



/* CTA */

.cta{
    text-align:center;
    padding:70px 20px;
    background:#0b1324;
}

.cta h2{
    margin-bottom:15px;
}

.cta p{
    color:#cbd5e1;
}

.whatsapp-btn{
    display:inline-block;
    margin-top:20px;
    background:#16a34a;
    color:#fff;
    text-decoration:none;
    padding:15px 35px;
    border-radius:10px;
    font-weight:700;
    transition:all .3s ease;
    animation:pulse 2s infinite;
}

.whatsapp-btn:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 10px 25px rgba(22,163,74,.4);
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(22,163,74,.7);
    }
    
    70%{
        box-shadow:0 0 0 18px rgba(22,163,74,0);
    }
    
    100%{
        box-shadow:0 0 0 0 rgba(22,163,74,0);
    }
}

.why-us{
    padding:90px 20px;
    background:#08111f;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:42px;
    color:#fff;
    margin-bottom:10px;
}

.section-title p{
    color:#cbd5e1;
}

.why-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.why-card{
    background:#101827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:30px;
    text-align:center;
    transition:.3s;
}

.why-card:hover{
    transform:translateY(-8px);
}

.icon{
    font-size:40px;
    margin-bottom:15px;
}

.why-card h3{
    margin-bottom:12px;
    color:#fff;
}

.why-card p{
    color:#cbd5e1;
    line-height:1.7;
}
.stats{
    width:90%;
    max-width:1200px;
    margin:0 auto 80px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.stat-box{
    background:#101827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    padding:30px;
    text-align:center;
}

.stat-box h2{
    color:#16a34a;
    margin-bottom:10px;
}

.offer-strip{
    background:#16a34a;
    color:#fff;
    text-align:center;
    padding:15px;
    font-weight:700;
}

.floating-whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    text-decoration:none;
    color:#fff;
    z-index:999;
}

.performance-section{
    max-width:1200px;
    margin:100px auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.slider{
    position:relative;
    height:500px;
    border-radius:20px;
    overflow:hidden;
}

.slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slide.active{
    opacity:1;
}

.tag{
    display:inline-block;
    color:#16a34a;
    font-weight:700;
    margin-bottom:15px;
    letter-spacing:1px;
}

.content h2{
    font-size:48px;
    line-height:1.2;
    margin-bottom:20px;
    color:yellow;
}

.content p{
    color:#cbd5e1;
    line-height:1.9;
    margin-bottom:18px;
}

.mini-badges{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:25px;
}

.mini-badges span{
    color:#16a34a;
    font-weight:600;
    border-bottom:1px solid #16a34a;
    padding-bottom:4px;
}

@media(max-width:768px){

    .performance-section{
        grid-template-columns:1fr;
        gap:30px;
    }

    .slider{
        height:320px;
    }

    .content h2{
        font-size:32px;
    }
}

/* Footer Styling */
footer {
  background-color: #111;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  margin-top: auto; /* keeps footer at bottom */
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.footer-section {
  flex: 1 1 250px;
  max-width: 300px;
}

.footer-section h3 {
  color: #ff3333;
  margin-bottom: 10px;
}

.footer-section p {
  line-height: 1.6;
}

.footer-section a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

.footer-section a:hover {
  color: #ff3333;
}

.copy {
  font-size: 14px;
  border-top: 1px solid #333;
  padding-top: 15px;
  margin-top: 25px;
}

/* Responsive: mobile view vertical layout */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
  }

  .footer-section {
    max-width: 100%;
  }
}
/* ====== Responsive ====== */
@media (max-width: 1000px){
  .product-hero{flex-direction:column}
  .gallery{width:100%}
  .promo{flex-direction:column-reverse;align-items:center}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .specs-grid{grid-template-columns:1fr}
}

@media (max-width: 700px){
  .site-nav{display:none}
  .hamburger{display:block}
  .promo-image img{width:180px}
  .reviews-grid{grid-template-columns:1fr}
  .thumb{width:56px;height:56px}
  .countdown div{min-width:60px}
  .brand-title{display:none}
}

@media (max-width:420px){
  .thumb{width:48px;height:48px}
  .promo-image img{width:140px}
  .price-now{font-size:1.25rem}
}


/* Shopify Style Mobile Product Grid */
@media (max-width:768px){

    .products{
        width:95%;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .card img{
        height:180px;
    }

    .card-content{
        padding:12px;
    }

    .card h3{
        font-size:15px;
        line-height:1.3;
        margin-bottom:8px;
    }

    .desc{
        font-size:12px;
        margin-bottom:10px;
    }

    .price{
        font-size:20px;
        margin-bottom:10px;
    }

    .btn{
        padding:10px;
        font-size:13px;
    }
}


/* ======================================
   PREMIUM MALE SUPPLEMENT THEME
   PASTE AT END OF CSS
====================================== */

body{
    background:#f3f4f6 !important;
    color:#111827 !important;
}

/* Header */
header{
    background:#f6f7f8 !important;
    border-bottom:1px solid rgba(255, 255, 255, 0.993) !important;
}

.site-nav .nav-link{
    color:#000000 !important;
}

.site-nav .nav-link:hover{
    color:#b80b0b!important;
}



/* Brand */
.brand-title .herbs {
  color: var(--green);
}

.brand-title .two {
  color: var(--gold);
}

.brand-title .heart {
  color: var(--red);
}


.css-marquee {
    white-space: nowrap;
    /* was green: linear-gradient(90deg,#1b7026,#37eb1fab) */
    background: linear-gradient(90deg,#8e1414,#e53935); padding:20px 0;
    padding: 5px 0;
    overflow: hidden;
    min-height: 2rem;
 }
.css-marquee span { display:inline-block; padding-left:100%; animation: slide 24s linear infinite; font-weight:500; color:#ffffff; }
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }


.css-marquee span{
    color:white!important;
}

/* Banner */
.premiumBannerWrap{
    background:#fff !important;
}

/* Hero */
.hero h1{
    color:#111827 !important;
    font-weight:800;
}

.hero h1::after{
    background:linear-gradient(
    90deg,
    #d4af37,
    #f4d03f
    ) !important;
}

.hero p{
    color:#64748b !important;
}

/* Products Section */
.products{
    background:transparent !important;
}

/* Product Cards */
.card{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:
    0 10px 25px rgba(0,0,0,.06),
    0 2px 8px rgba(212,175,55,.05);
}

.card:hover{
    border-color:#d4af37 !important;
    box-shadow:
    0 25px 60px rgba(0,0,0,.12),
    0 8px 25px rgba(212,175,55,.15) !important;
}

.img-box{
    background:#f8fafc !important;
}

.card-content{
    color:#111827 !important;
}

.card h3{
    color:#111827 !important;
}

.desc{
    color:#64748b !important;
}

/* Badge */
.badge{
    background:linear-gradient(
    135deg,
    #8e1414,
    #ff3838
    ) !important;
}

/* Wishlist */
.wishlist{
    background:#fff !important;
    color:#111827 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.wishlist:hover{
    background:#b80b0b !important;
    color:#fff !important;
}

/* Price */
.price{
    color:#b80b0b !important;
    font-size:22px !important;
    font-weight:900 !important;
}

.old-price{
    color:#94a3b8 !important;
}

/* Buttons */
.btn{
    background:linear-gradient(
    135deg,
    #e0b84f,
    #b8860b
    ) !important;
    color:#fff !important;
}

.btn:hover{
    box-shadow:
    0 15px 35px rgba(212,175,55,.35) !important;
}

.quick-btn{
    background:linear-gradient(
    135deg,
    #2bc40c,
    #19b80b
    ) !important;
}

.cart-mini{
    background:#111827 !important;
    color:#fff !important;
}

/* Toast */
.toast{
    background:#fff !important;
    color:#111827 !important;
    border:1px solid #e5e7eb !important;
}

.toast.show{
    border-left:4px solid #d4af37 !important;
}

/* CTA */
.cta{
    background: linear-gradient(90deg,#8e1414,#e53935) !important;
}

.cta h2{
    color:#fff !important;
}

.cta p{
    color:#d1d5db !important;
}

.whatsapp-btn{
    background:linear-gradient(
    135deg,
    #6eec47,
    #01b801
    ) !important;
}

.whatsapp-btn:hover{
    box-shadow:
    0 10px 25px rgb(15, 241, 7) !important;
}

/* Why Us */
.why-us{
    background:#eef2f7 !important;
}

.section-title h2{
    color:#111827 !important;
}

.section-title p{
    color:#64748b !important;
}

.why-card{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.why-card:hover{
    box-shadow:
    0 20px 40px rgba(212,175,55,.15);
}

.why-card h3{
    color:#111827 !important;
}

.why-card p{
    color:#64748b !important;
}

/* Stats */
.stat-box{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
}

.stat-box h2{
    color:#b8860b !important;
}

.offer-strip{
    background: linear-gradient(90deg,#d4af37 ,#b8860b) !important;
}

/* Performance Section */
.tag{
    color:#b8860b !important;
}

.content h2{
    color:#111827 !important;
}

.content p{
    color:#64748b !important;
}

.mini-badges span{
    color:#8e1414 !important;
    border-bottom:1px solid #8e1414 !important;
}

/* Footer Styling */
footer {
  background: linear-gradient(180deg,#8e1414,#5a0d0d); /* was green #1b5e20,#14401a */
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  margin-top: auto; /* keeps footer at bottom */
  color: #eaf5ea;
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.footer-section {
  flex: 1 1 250px;
  max-width: 300px;
}

.footer-section h3 {
  color: var(--gold-2);
  margin-bottom: 10px;
}

.footer-section p {
  line-height: 1.6;
  color: #d7ead7;
}

.footer-section a {
  color: #d7ead7;
  text-decoration: none;
  transition: 0.3s;
}

.footer-section a:hover {
  color: var(--gold-2);
}

.copy {
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 15px;
  margin-top: 25px;
  color: #cfe3cf;
}

/* Responsive: mobile view vertical layout */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
  }

  .footer-section {
    max-width: 100%;
  }
}