/* ==========================================================
   ETERNAA – Universal Responsive Stylesheet
   replaces old style.css  |  1-file solution
   ========================================================== */

/* 1.  Brand design-tokens
-----------------------------------------------------------*/
:root{
    --primary      : #3b5d50;
    --primary-dark : #2c4a40;
    --accent       : #f9bf29;
    --text         : #2f2f2f;
    --text-muted   : #6a6a6a;
    --bg           : #eff2f1;
    --white        : #ffffff;
    --radius       : 30px;
    --font         : "Fort-Size", sans-serif;

    /* fluid type scale (clamp = min, preferred, max) */
    --step--2: clamp(0.78rem, 0.75rem + 0.16vw, 0.88rem);
    --step--1: clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem);
    --step-0 : clamp(1.13rem, 1.08rem + 0.25vw, 1.28rem);  /* body */
    --step-1 : clamp(1.35rem, 1.29rem + 0.30vw, 1.54rem);
    --step-2 : clamp(1.62rem, 1.55rem + 0.36vw, 1.85rem);
    --step-3 : clamp(1.94rem, 1.86rem + 0.43vw, 2.22rem);
    --step-4 : clamp(2.33rem, 2.23rem + 0.52vw, 2.66rem);
    --step-5 : clamp(2.80rem, 2.68rem + 0.62vw, 3.19rem);
}

/* 2.  Global reset
-----------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:var(--font);font-weight:400;font-size:var(--step-0);
    line-height:1.6;color:var(--text-muted);background:var(--bg);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--text);text-decoration:none;transition:color .3s ease;}
a:hover{color:var(--primary);}
a.more{font-weight:600;}

/* 3.  Navbar – fully responsive
-----------------------------------------------------------*/
.custom-navbar{background:var(--primary) !important;padding:15px 0;}
.custom-navbar .container{display:flex;align-items:center;justify-content:space-between;}
.custom-navbar .navbar-brand{font-size:var(--step-3);font-weight:600;color:var(--white);}
.custom-navbar .navbar-toggler{border:none;background:none;color:var(--white);font-size:1.5rem;}
.custom-navbar .navbar-nav{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;}
.custom-navbar .navbar-nav .nav-link{color:var(--white);opacity:.55;font-weight:400;position:relative;padding:6px 12px;transition:opacity .3s ease;}
.custom-navbar .navbar-nav .nav-link::before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--accent);width:0;transition:width .25s ease;}
.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link.active{opacity:1;}
.custom-navbar .navbar-nav .nav-link:hover::before,
.custom-navbar .navbar-nav .nav-link.active::before{width:calc(100% - 24px);}

/* hamburger → inline on large screens */
@media(min-width:992px){
    .custom-navbar .navbar-nav{flex-direction:row;gap:1.25rem;margin-top:0;}
    .custom-navbar .navbar-toggler{display:none;}
}

/* 4.  Hero – fluid type + spacing
-----------------------------------------------------------*/
/* ---------- HERO – mobile-first, never overflows ---------- */
.hero {
    background: var(--primary);
    padding: clamp(2rem, 18vw, 2rem) 0 clamp(2rem, 10vw, 2rem);
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 60vh;          /* full-screen on phones */
}
.hero .container {
    display: grid;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    padding: 0 1rem;
}
.hero h1 {
    font-weight: 800;
    color: var(--white);
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
    margin: 0 0 1rem;
}
.hero p {
    color: rgba(255, 255, 255, .7);
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 2rem;
}
/* ---------- decorative dots – responsive ---------- */
.hero .hero-img-wrap {
    position: relative;          /* keeps pseudo-element inside flow */
}
.hero .hero-img-wrap::after {
    content: "";
    position: absolute;
    width: clamp(120px, 15vw, 255px);
    height: clamp(100px, 13vw, 217px);
    background: url("../images/dots-light.svg") center / contain no-repeat;
    right: clamp(-40px, -8vw, -100px);
    top: clamp(-10px, -2vw, -40px);
    pointer-events: none;        /* lets clicks pass through */
    display: none;               /* off by default on mobile */
}

/* tablet+ : show it */
@media (min-width: 768px) {
    .hero .hero-img-wrap::after {
        display: block;
    }
}

/* ---------- tablet → laptop two-column ---------- */
/* ==========================================
   WINDOWS / LAPTOP NAVBAR FIX  (≥ 992 px)
========================================== */
@media (min-width: 992px) {
  .custom-navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .navbar-brand {
    margin-right: auto;
    flex-shrink: 0;
  }
  .navbar-nav {
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem;
  }
  .navbar-text {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ---------- 4 K finisher ---------- */
@media (min-width: 2000px) {
    .hero {
        padding: clamp(10rem, 25vw, 15rem) 0;
    }
    .hero h1 {
        font-size: var(--step-5);
    }
}
/* 5.  Buttons – consistent everywhere
-----------------------------------------------------------*/
.btn{display:inline-block;font-weight:600;padding:12px 30px;border-radius:var(--radius);border:1px solid transparent;transition:all .3s ease;text-align:center; }
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--white);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.btn-secondary{background:var(--accent);border-color:var(--accent);color:var(--text);}
.btn-outline-primary{border-color:var(--primary);color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary);color:var(--white);}
.btn-success{background:var(--primary);border:none;}
.btn-success:hover{background:var(--primary-dark);transform:translateY(-3px);}
.btn-outline-success{border-color:var(--primary);color:var(--primary);}
.btn-outline-success:hover{background:var(--primary);color:var(--white);}
.btn-outline-dark:hover{background:var(--primary) !important;color:var(--white) !important;}
.btn-lg{padding:16px 40px;font-size:var(--step-1);}
.btn-sm{padding:8px 20px;font-size:var(--step--1);}

/* 6.  Product cards – responsive grid
-----------------------------------------------------------*/
.product-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}
.product-item{display:block;text-decoration:none;color:var(--text);background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.05);transition:transform .3s ease,box-shadow .3s ease;}
.product-item:hover{transform:translateY(-12px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.product-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s ease;}
.product-item:hover img{transform:scale(1.08);}
.product-item .body{padding:1.25rem 1rem;text-align:center;}
.product-item h3{font-weight:600;font-size:var(--step-1);margin:.5rem 0;}
.product-item strong{font-weight:800;font-size:var(--step-2);color:var(--text);}

/* 7.  Quantity spinner
-----------------------------------------------------------*/
.qty-control{display:inline-flex;border:1px solid #ddd;border-radius:12px;overflow:hidden;background:var(--white);}
.qty-btn{width:44px;height:40px;border:none;background:#f8f9fa;font-size:var(--step-2);cursor:pointer;transition:background .3s ease,color .3s ease;}
.qty-btn:hover{background:var(--primary);color:var(--white);}
.qty-number{min-width:50px;text-align:center;padding:8px;font-weight:600;background:var(--white);}
@media(max-width:768px){.qty-btn{width:38px;height:36px;font-size:var(--step-1);}}

/* 8.  Carousel – horizontal scroll + arrows
-----------------------------------------------------------*/
.products-carousel{position:relative;overflow:hidden;padding:0 3rem;}
#leggingsCarousel{display:flex;gap:1rem;scroll-behavior:smooth;overflow-x:auto;-webkit-overflow-scrolling:touch;}
#leggingsCarousel::-webkit-scrollbar{display:none;} /* hide scrollbar */
.carousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(0,0,0,.6);color:var(--white);border:none;
    width:50px;height:50px;border-radius:50%;font-size:var(--step-3);
    cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;
    transition:background .3s ease;
}
.carousel-arrow:hover{background:rgba(0,0,0,.9);}
.carousel-arrow-left{left:10px;}
.carousel-arrow-right{right:10px;}
@media(max-width:768px){.carousel-arrow{display:none;}} /* touch scroll only */

/* 9.  Modal gallery – responsive zoom
-----------------------------------------------------------*/
.modal-transparent{background:transparent !important;border:none !important;box-shadow:none !important;}
.modal-backdrop.show{background:rgba(0,0,0,.3);backdrop-filter:blur(5px);}
.main-img{max-height:clamp(500px, 60vh, 0px);object-fit:cover;width:100%;cursor:zoom-in;transition:transform .3s ease;}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:var(--white);border:none;font-size:var(--step-3);padding:6px 12px;border-radius:50%;z-index:5;cursor:pointer;transition:background .3s ease;}
.nav-btn:hover{background:rgba(0,0,0,.8);}
.prev-btn{left:10px;border-radius:50%;width:40px;height:40px;padding:0;text-align:center;line-height:40px;font-size:20px;}
.next-btn{right:10px;border-radius:50%;width:40px;height:40px;padding:0;text-align:center;line-height:40px;font-size:20px;}
.zoom-controls{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:10;}
.zoom-controls button{background:var(--white);border:none;padding:6px 10px;border-radius:6px;cursor:pointer;}
@media(max-width:768px){.nav-btn{font-size:var(--step-2);padding:4px 8px;}.zoom-controls{top:5px;right:5px;gap:4px;}}

/* 10.  Bulk pricing cards
-----------------------------------------------------------*/
.bulk-card{background:var(--white);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:2rem;position:relative;transition:transform .4s ease,box-shadow .4s ease;}
.bulk-card:hover{transform:translateY(-15px);box-shadow:0 25px 50px rgba(0,0,0,.15);}
.bulk-card.popular{border:3px solid var(--accent);}
.ribbon{position:absolute;top:20px;right:-10px;background:var(--accent);color:var(--text);padding:8px 30px;font-weight:bold;transform:rotate(15deg);box-shadow:0 4px 10px rgba(0,0,0,.2);}
.price-old{font-size:var(--step-2);text-decoration:line-through;color:#aaa;}
.price-new{font-size:var(--step-4);font-weight:800;color:var(--primary);}

/* 11.  Login box – centred card
-----------------------------------------------------------*/
.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;}
.login-box{background:var(--white);border-radius:20px;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden;}
.login-header{background:var(--primary);color:var(--white);padding:2rem;text-align:center;}
.login-header h1{margin:0;font-size:var(--step-3);}
.login-body{padding:2.5rem 2rem;}
.btn-login{width:100%;height:56px;border-radius:12px;font-weight:600;font-size:var(--step-1);}

/* 12.  Utility helpers
-----------------------------------------------------------*/
.section-title{color:var(--text);font-weight:700;font-size:var(--step-3);}
.rounded-4{border-radius:20px;}
.shadow-lg{box-shadow:0 20px 40px rgba(0,0,0,.1);}
.sticky-top{top:100px;}
.max-height-400{max-height:400px;}
.text-primary{color:var(--primary) !important;}
.bg-primary{background-color:var(--primary) !important;}

/* 13.  Footer
-----------------------------------------------------------*/
.footer-section{background:var(--white);padding:5rem 0 3rem;}
.footer-section a:hover{color:rgba(47,47,47,.55);}
.footer-section .subscription-form{max-width:480px;margin:0 auto 3rem;}
.footer-section .subscription-form .form-control{height:56px;border-radius:12px;}
.footer-section .btn{border-radius:12px !important;}
.footer-section .links-wrap ul{list-style:none;padding:0;margin:0;}
.footer-section .links-wrap li{margin-bottom:.75rem;}
.footer-section .custom-social{display:flex;gap:.5rem;}
.footer-section .custom-social a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:#dce5e4;color:var(--primary);border-radius:50%;transition:background .3s ease,color .3s ease;}
.footer-section .custom-social a:hover{background:var(--primary);color:var(--white);}

/* 14.  Very-small screens (watch-size)
-----------------------------------------------------------*/
@media(max-width:360px){
    .hero h1{font-size:var(--step-3);}
    .btn-lg{padding:14px 28px;font-size:var(--step-0);}
    .product-grid{grid-template-columns:1fr;}
    .login-body{padding:1.5rem 1rem;}
}

/* 15.  Print styles
-----------------------------------------------------------*/
@media print{
    .navbar,.carousel-arrow,.zoom-controls,.nav-btn{display:none !important;}
    body{background:var(--white);color:#000;}
    .product-item{box-shadow:none;border:1px solid #ccc;}
}

/* ---------- Why ETERNAA? – perfect grid alignment ---------- */
#why-choose .row > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;   /* same gap for every column */
}

#why-choose img,
#why-choose svg,
#why-choose i {
    margin-bottom: 1rem;   /* identical spacing below icon / image */
    height: 50px;          /* force same height (Font-Awesome already 50 px) */
    object-fit: contain;
}

/* mobile-first tidy-up */
@media (min-width: 576px) {
    #why-choose .row {
        row-gap: 2rem;
    }
}

.card,
.product-card,
.product-item {
    padding-bottom: 2rem;
}


/* ---------- Quick View button – always visible + correct colours ---------- */
a.btn.btn-outline-dark.btn-sm.px-4.rounded-pill {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99 !important;
    /* normal state = outline-dark (from your sheet) */
    background: black !important;
    border: 1px solid #212529 !important;
    color: #ffffff !important;
}

/* hover state = outline-dark hover (from your sheet) */
a.btn.btn-outline-dark.btn-sm.px-4.rounded-pill:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* ---------- product card – equal height, no scroll ---------- */
.product-card{
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.product-img-wrapper{
    position: relative;
    padding-bottom: 125%; /* 4:5 aspect */
    height: 0;
}
.product-img-wrapper img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 90%;
    object-fit: cover;
    transition: transform .4s;
}
.product-card:hover img{
    transform: scale(1.08);
}
.product-info{
    padding: .75rem .5rem 0;
    flex: 1 1 auto;
}
.product-title{
    font-size: 2rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .25rem;
}
.product-meta{
    font-size: .85rem;
    color: #6c757d;
    margin-bottom: .5rem;
}
.product-price del{
    font-size: .9rem;
    color: #adb5bd;
    margin-right: .5rem;
}
.product-price span{
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
}
.badge-sale,
.badge-stock{
    position: absolute;
    padding: .25rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    border-radius: .25rem;
}
.badge-sale{
    top: .5rem; left: .5rem;
    background: #dc3545; color: #fff;
}
.badge-stock{
    bottom: .5rem; left: 50%;
    transform: translateX(-50%);
    background: #ffc107; color: #212529;
    white-space: nowrap;
}
.btn-outline-dark.btn-sm{
    border-width: 1px;
    margin: .75rem .5rem .5rem;
    width: calc(100% - 1rem);   /* full-width inside padding */
}

/* ---------- responsive tweaks ---------- */
@media (max-width: 576px){
    .hero{min-height: 50vh; padding: clamp(4rem, 12vw, 7rem) 0;}
    .product-img-wrapper{padding-bottom: 133%;} /* 3:4 on phones */
}
#modalImage{margin:0 auto;display:block;}

/* size button default */
.size-btn span{
    padding:5px 8px;
    border:1px solid #ccc;
    border-radius:8px;
    cursor:pointer;
    transition:all .3s;
}

/* selected state */
.size-btn input:checked + span{
    background:#3b5d50;
    color:#fff;
    border-color:#3b5d50;
}

.product-detail ul { padding-left: 1.2em; margin-bottom: 0; }
.product-detail li  { margin-bottom: .25em; }


/* Size buttons */
.size-btn input { position: absolute; opacity: 0; }
.size-btn span {
  display: block;
  padding: 7px 10px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
  background: #fff;
  min-width: 90px;
  transition: all .3s;
  cursor: pointer;
}
.size-btn input:checked + span {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.size-btn.disabled span {
  background: #f8f9fa;
  color: #999;
  border-color: #eee;
  cursor: not-allowed;
}
.size-btn span small {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
}