:root{
    --brand:#009986;
    --brand-soft: rgba(0,153,134,0.12);
}

/* Badge */
.eco-badge{
    display:inline-block;
    background:var(--brand-soft);
    color:var(--brand);
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

/* Title */
.title{
    font-size:32px;
    font-weight:800;
    margin-top:14px;
}

.subtitle{
    color:#555;
    margin-top:6px;
    max-width:520px;
}

/* Price */
.price-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:18px;
}

.price-current{
    font-size:28px;
    font-weight:800;
    color:var(--brand);
}

.price-old{
    text-decoration:line-through;
    color:#999;
}

.badge-save{
    background:var(--brand);
    color:#fff;
    padding:4px 10px;
    border-radius:8px;
    font-size:13px;
}

/* Label */
.label{
    font-weight:600;
    color:#222;
}

/* Color Button */
.color-btn{
    width:30px;
    height:30px;
    border-radius:50%;
    border:2px solid transparent;
    cursor:pointer;
    transition:0.25s;
}

.color-btn.active{
    border-color:var(--brand);
    transform:scale(1.1);
}


/* CTA */
.ctas{
    display:flex;
    gap:16px;
    margin-top:28px;
}

.btn-filled{
    background:var(--brand);
    color:#fff;
    padding:14px 26px;
    border-radius:14px;
    font-weight:700;
    border:none;
}

.btn-filled:hover{
    opacity:0.9;
}

.btn-line{
    background:#fff;
    border:2px solid var(--brand);
    color:var(--brand);
    padding:14px 26px;
    border-radius:14px;
    font-weight:700;
}


.thumb{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:0;
    cursor:pointer;
    opacity:0.6;
}
.active-thumb{
    color:gray;
}
/*footer*/

        :root{
            --teal-700:#005f5a;
            --teal-600:#00756f;
            --teal-500:#00aca0;
            --muted:#64748b;
            --shadow-soft:0 20px 50px rgba(0,0,0,0.06);
        }

        body{
            font-family:"Inter","Poppins",sans-serif;
            background:#f5fbfa;
            overflow-x:hidden;
        }

        .container-max{
            margin:auto;
            padding:20px 16px;
        }
        .desc-title, .key-title{
            font-size:25px!important;
            font-weight:800;
            margin-bottom:10px;
            color:var(--teal-700);
        }
.container-max h2{
    font-size:23px !important;
}
.container-max h3{
    font-size:20px !important;
}
        /* Fade animation */
        @keyframes fadeUp{
            0%{opacity:0;transform:translateY(25px);}
            100%{opacity:1;transform:translateY(0);}
        }
        [data-animate]{animation:fadeUp .8s ease forwards;}

        /* Highlight Box */
        .top-highlight{
            background:linear-gradient(90deg,rgba(0,172,160,.18),rgba(0,117,111,.14));
            padding:16px 20px;
            border-radius:12px;
            /*font-weight:600;*/
            margin-bottom:35px;
            font-size:14px;
            box-shadow:var(--shadow-soft);
        }

     

        @media(max-width:992px){
            .product-hero{
                grid-template-columns:1fr;
                gap:30px;
            }
        }

        /* IMAGE PANEL */
        .image-panel{
            background:#fff;
            padding:16px;
            border-radius:20px;
            box-shadow:var(--shadow-soft);
        }

        .main-image{
            width:100%;
            border-radius:14px;
            transition:opacity .3s ease;
        }

        /* Thumbnails */
        .thumb-row{
            margin-top:15px;
            display:flex;
            gap:14px;
            overflow-x:auto;
            padding-bottom:6px;
        }
        .thumb-row::-webkit-scrollbar{height:0;}

        .thumb{
            width:70px;
            height:70px;
            border-radius:10px;
            opacity:.6;
            cursor:pointer;
            object-fit:cover;
            border:2px solid transparent;
            transition:.3s ease;
        }
        .thumb:hover{opacity:1;}
        .active-thumb{
            opacity:1;
            border-color:var(--teal-500);
        }

        /* RIGHT CONTENT */
        .eco-badge{
            background:linear-gradient(90deg,var(--teal-500),var(--teal-600));
            padding:6px 14px;
            border-radius:50px;
            display:inline-block;
            color:#fff;
            font-size:12px;
            margin-bottom:5px;
        }

        .title{
            font-size:34px;
            font-weight:800;
            background:linear-gradient(90deg,var(--teal-700),var(--teal-500));
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        @media(max-width:576px){
            .title{font-size:28px;}
        }

        .subtitle{
            font-size:14px;
            color:var(--muted);
            margin-top:5px;
            line-height:1.6;
        }

        /* PRICE */
        .price-row{
            margin-top:15px;
            display:flex;
            align-items:center;
            gap:14px;
        }
        .price-current{
            font-size:28px;
            font-weight:800;
            color:var(--teal-700);
        }
        .price-old{
            text-decoration:line-through;
            color:#9ba1ab;
            font-size:14px;
        }
        .badge-save{
            background:rgba(0,172,160,.13);
            padding:4px 7px;
            border-radius:8px;
            font-size:12px;
            font-weight:600;
            color:var(--teal-600);
        }

        /* BUTTONS */
        .ctas{
            margin-top:18px;
            display:flex;
            gap:14px;
        }

        @media(max-width:576px){
            .ctas{flex-direction:column;}
        }

        .btn-filled{
            flex:1;
            background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
            color:#fff;
            padding:13px 16px;
            font-size:16px;
            font-weight:700;
            border:none;
            border-radius:12px;
        }

        .btn-line{
           flex:1;
            background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
            color:#fff;
            padding:13px 16px;
            font-size:16px;
            font-weight:700;
            border:none;
            border-radius:12px;
        }

        /* MINI CARDS */
        .mini-grid{
            margin-top:22px;
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:16px;
        }

        .mini-card{
            background:#fff;
            padding:14px;
            border-radius:12px;
            box-shadow:var(--shadow-soft);
            display:flex;
            align-items:center;
            gap:12px;
            font-size:14px;
            font-weight:600;
        }
        .mini-card i{font-size:20px;color:var(--teal-600);}

        /* BOTTOM DETAILS */
        .section-divider{
            text-align:center;
            margin:45px 0 20px;
            font-size:32px;
            letter-spacing:2px;
            font-weight:700;
            opacity:.65;
        }

        .bottom{
            display:grid;
            grid-template-columns:1fr 350px;
            gap:26px;
        }

        @media(max-width:992px){
            .bottom{
                grid-template-columns:1fr;
            }
        }

        .desc-box, .key-box{
            background:#fff;
            padding:22px;
            border-radius:16px;
            box-shadow:var(--shadow-soft);
        }

        .desc-text{
            font-size:15px;
            line-height:1.7;
            margin-bottom:10px;
        }

       .key-list {
    list-style: none;
    padding-left: 18px;
    border-left: 3px solid rgba(0,117,111,.20);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.key-list li {
    font-size: 12px;
    font-weight: 600;
    position: relative;
    padding-left: 22px; /* space for tick */
}

/* Premium Green Tick */
.key-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #0abf4f; /* premium green */
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
}

/*Product*/

:root{
  --brand:#009986;
  --bg:#ffffff;
  --muted:#6b6b6b;
  --card-shadow: 0 18px 45px rgba(6,21,28,0.08);
}

.products-row { 
  padding:60px 0;
   }

/* CARD */
.prod-card{
  background:#eafffa;
    padding:10px;
    border-radius:24px;
    border:1px solid #c7eee7;
    box-shadow:0 18px 45px rgba(0,0,0,0.06);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}

.prod-card:hover{
  transform:translateY(-10px);
  box-shadow: 0 30px 70px rgba(6,21,28,0.12);
  border-radius: 24px;
}

/* IMAGE */
.prod-media{
  position:relative;
  overflow:hidden;
  height:380px;
  background:#f6f8f7;
  border-radius: 24px;
}
.prod-media img{
  border-radius: 24px;
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .6s ease;
}
.prod-card:hover .prod-media img{
 transform: scale(1.06);
  }

/* BADGE + RATING on image */
.badge-pill{
  position:absolute;
  left:18px;
  top:18px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.08));
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06);
}
.rating {
  position:absolute;
  right:16px;
  bottom:12px;
  background: rgba(0,0,0,0.45);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  display:flex;
  gap:6px;
  align-items:center;
}

/* BODY */
.prod-body{ padding:26px 28px 34px; }
.prod-title{
  font-size:22px;
  font-weight:700;
  color:#0f1720;
  margin-bottom:8px;
}
.prod-sub{
  color:var(--muted);
  font-size:15px;
  margin-bottom:14px;
  line-height:1.45;
}

/* PRICE ROW */
.price-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.price-current{ color:var(--brand); font-size:22px; font-weight:800; }
.price-old{ color:#9aa0a0; text-decoration:line-through; font-size:15px; }

/* BUTTONS */
/* responsive */
@media (max-width:767px){
  .prod-media{ height:260px; }
  .prod-body{ padding:20px; }
  .products-row{ padding:30px 0; }
}