/* =========================================================
   MELLY KOSMETIK
   STYLE.CSS - COMPACT / MINIMALIS
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    linear-gradient(
      180deg,
      #080607 0%,
      #12070c 45%,
      #190810 100%
    );
  color:#f8edf2;
  font-family:"DM Sans",Arial,sans-serif;
  line-height:1.5;
}

body,
button,
input{
  font-family:"DM Sans",Arial,sans-serif;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(1060px,calc(100% - 32px));
  margin:0 auto;
}


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

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(7,6,7,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}

.header-main{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width:max-content;
}

.brand-mark{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:#160a10 url("../images/logo-melly-icon.png")
    center center / 88% 88% no-repeat !important;
  color:transparent !important;
  font-size:0 !important;
  overflow:hidden !important;
  flex:none !important;
  border:1px solid rgba(255,111,159,.35) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.04),
    0 5px 18px rgba(255,60,130,.22) !important;
}

.brand b{
  display:block;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:17px;
  line-height:1.05;
}

.brand small{
  display:block;
  margin-top:3px;
  color:#a998a0;
  font-size:9px;
}

.menu-btn{
  display:none;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  background:#181316;
  color:#fff;
}

.search{
  margin-left:auto;
  width:min(490px,42vw);
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:#151214;
}

.search span{
  color:#aaa;
  font-size:16px;
}

.search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:13px;
}

.search input::placeholder{
  color:#81777d;
}

.cart-btn{
  position:relative;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:#191518;
  color:#fff;
  font-size:17px;
  flex:none;
}

.cart-btn i{
  position:absolute;
  right:-2px;
  top:-3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:20px;
  background:#ec3d78;
  color:#fff;
  font-size:9px;
  font-style:normal;
  line-height:16px;
  text-align:center;
}

.nav{
  border-top:1px solid rgba(255,255,255,.04);
}

.nav-inner{
  display:flex;
  align-items:center;
  gap:30px;
  min-height:39px;
}

.nav a{
  position:relative;
  color:#b9aeb3;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.nav a:hover,
.nav a.active{
  color:#f35a91;
}

.nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:2px;
  background:#ed4380;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:360px;
  display:grid;
  grid-template-columns:1fr .8fr;
  align-items:center;
  gap:25px;
  padding-top:35px;
  padding-bottom:25px;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.eyebrow{
  color:#f05a91;
  font-size:12px;
  font-weight:700;
}

.hero h1{
  margin:12px 0;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-1px;
}

.hero h1 em{
  color:#f25b93;
  font-style:normal;
}

.hero p{
  max-width:550px;
  margin:0 0 20px;
  color:#b7a9af;
  font-size:14px;
}

.hero-art{
  position:relative;
  height:280px;
  overflow:hidden;
}

.hero-glow{
  position:absolute;
  width:260px;
  height:260px;
  right:40px;
  top:10px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(239,66,126,.3),
      rgba(239,66,126,0) 68%
    );
}

.product-shape{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.product-shape.s1{
  width:110px;
  height:170px;
  right:95px;
  top:50px;
  border-radius:18px 18px 25px 25px;
  background:linear-gradient(145deg,#f7c1d4,#c72965);
}

.product-shape.s2{
  width:85px;
  height:130px;
  right:10px;
  top:100px;
  border-radius:16px 16px 20px 20px;
  background:linear-gradient(145deg,#f9d6e2,#dd4d7d);
}

.product-shape.s3{
  width:70px;
  height:105px;
  right:205px;
  top:125px;
  border-radius:15px;
  background:linear-gradient(145deg,#eaa5bc,#9f204e);
}

.primary{
  border:0;
  border-radius:22px;
  padding:11px 18px;
  background:linear-gradient(135deg,#ff6b9e,#d92768);
  color:#fff;
  font-size:12px;
  font-weight:700;
  box-shadow:0 8px 20px rgba(226,42,105,.22);
}

.primary:hover{
  transform:translateY(-1px);
}


/* =========================================================
   BENEFITS
   ========================================================= */

.benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:12px 0 25px;
}

.benefits>div{
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.benefits strong{
  display:block;
  font-size:12px;
  color:#fff;
}

.benefits small{
  display:block;
  margin-top:3px;
  color:#887d82;
  font-size:10px;
}


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

.section{
  padding:35px 0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:18px;
}

.section-head h2{
  margin:0;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:28px;
  line-height:1.15;
}

.section-head p{
  margin:5px 0 0;
  color:#8e8187;
  font-size:11px;
}

.text-btn{
  border:0;
  background:transparent;
  color:#f25a91;
  font-size:11px;
  font-weight:700;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.category-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}

.category-card{
  min-height:92px;
  padding:15px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );
  transition:.2s ease;
}

.category-card:hover{
  transform:translateY(-2px);
  border-color:rgba(242,83,143,.4);
}

.category-card h3{
  margin:0 0 4px;
  color:#fff;
  font-size:13px;
}

.category-card p{
  margin:0;
  color:#8d8186;
  font-size:10px;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.product-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}


/* =========================================================
   PRODUCT CARD - COMPACT
   ========================================================= */

.product-card{
  min-width:0;
  overflow:hidden;
  border-radius:15px;
  background:#f7f4f5;
  color:#2d2529;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.25);
}


/* GAMBAR PRODUK
   Dibuat pendek agar tidak memakan ruang */
.product-card img,
.product-image{
  width:100%;
  height:145px !important;
  min-height:145px !important;
  object-fit:cover;
  object-position:center;
  background:#f5d9e3;
}


/* BAGIAN INFORMASI */
.product-info{
  padding:10px 11px 11px;
}

.product-card .category,
.product-card .product-category,
.product-card .cat,
.product-card small{
  color:#b22d5f;
  font-size:8px;
  font-weight:700;
}

.product-card h3,
.product-card .product-name,
.product-card .name{
  margin:3px 0 4px;
  color:#2c2529;
  font-size:14px;
  line-height:1.15;
  font-weight:700;
}

.product-card p,
.product-card .description,
.product-card .product-desc{
  margin:0 0 7px;
  color:#665d61;
  font-size:9px;
  line-height:1.35;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* HARGA */
.product-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}

.product-price strong,
.price{
  color:#2a2327;
  font-size:12px;
  font-weight:800;
}

.product-price del,
.old-price{
  color:#887d81;
  font-size:9px;
}


/* STOK + TOMBOL */
.product-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:7px;
}

.product-stock,
.stock{
  color:#9a8f93;
  font-size:8px;
}

.add-cart,
.product-card .cart-add,
.product-card button{
  border:0;
  border-radius:18px;
  padding:8px 11px;
  background:linear-gradient(135deg,#ff5f96,#d92a69);
  color:#fff;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 5px 12px rgba(217,42,105,.18);
}


/* =========================================================
   BADGE PROMO
   ========================================================= */

.product-card .badge,
.product-card .promo-badge{
  position:absolute;
  margin:9px;
  z-index:2;
  padding:4px 7px;
  border-radius:10px;
  background:#ec3975;
  color:#fff;
  font-size:8px;
  font-weight:700;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading{
  padding:35px 10px;
  color:#6f6369;
  text-align:center;
  font-size:11px;
}


/* =========================================================
   PROMO
   ========================================================= */

.promo{
  min-height:145px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px 30px;
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(
      110deg,
      #f3abc4,
      #ffdce7
    );
  color:#33262b;
}

.promo span{
  color:#cf2863;
  font-size:8px;
  font-weight:800;
}

.promo h2{
  margin:5px 0;
  font-family:"Playfair Display",serif;
  font-size:27px;
  line-height:1;
}

.promo p{
  margin:0 0 10px;
  color:#8c6673;
  font-size:9px;
}

.promo-bubbles{
  width:130px;
  height:130px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.55);
  flex:none;
}

.promo-bubbles b{
  color:#d82e69;
  font-size:30px;
  line-height:1;
}

.promo-bubbles i{
  margin-top:4px;
  color:#d82e69;
  font-size:10px;
  font-style:normal;
  font-weight:700;
}


/* =========================================================
   TESTIMONIAL
   ========================================================= */

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.testimonial-card{
  padding:16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.testimonial-card h3{
  margin:0;
  color:#fff;
  font-size:12px;
}

.testimonial-card p{
  color:#b0a2a8;
  font-size:10px;
  line-height:1.5;
}

.testimonial-card .stars{
  color:#f24b89;
  font-size:10px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  margin-top:30px;
  padding:45px 0 20px;
  background:#070607;
  border-top:1px solid rgba(255,255,255,.07);
}

.footer-main{
  display:block !important;
}

.footer-brand{
  margin-bottom:25px;
}

.footer-brand-name{
  color:#f5a8c3;
  font-family:"Playfair Display",serif;
  font-size:22px;
  font-weight:700;
}

.footer-brand p{
  max-width:550px;
  margin:6px 0 0;
  color:#8d8086;
  font-size:10px;
}

.footer-map-container{
  width:100%;
}

.map-title h3{
  margin:0 0 5px;
  color:#fff;
  font-size:12px;
}

.map-title p{
  margin:0 0 12px;
  color:#82767c;
  font-size:10px;
}

.map-box{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

.map-box iframe{
  display:block;
  width:100%;
  height:320px;
  border:0;
}

.map-button{
  display:inline-block;
  margin-top:10px;
  padding:9px 14px;
  border-radius:20px;
  background:#e83370;
  color:#fff;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
}

.copyright{
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#645b60;
  font-size:9px;
}


/* =========================================================
   SOCIAL FLOATING
   ========================================================= */

.social-floating{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.social-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  text-decoration:none !important;
  font-size:22px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .2s ease;
}

.social-icon:hover{
  transform:scale(1.08);
}

.social-icon.instagram{
  background:linear-gradient(
    135deg,
    #833ab4,
    #fd1d1d,
    #fcb045
  );
}

.social-icon.facebook{
  background:#1877f2;
}

.social-icon.whatsapp{
  background:#25d366;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(7px);
}

.modal.show,
.modal[aria-hidden="false"]{
  display:flex;
}

.modal-card{
  position:relative;
  width:min(500px,100%);
  max-height:90vh;
  overflow:auto;
  padding:20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:#171014;
  color:#fff;
  box-shadow:0 25px 80px rgba(0,0,0,.55);
}

.modal-card h2{
  margin:0 0 18px;
  font-family:"Playfair Display",serif;
  font-size:22px;
}

.close{
  position:absolute;
  right:14px;
  top:12px;
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:#292027;
  color:#fff;
  font-size:18px;
}

.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.08);
}

.cart-total strong{
  color:#f55c95;
}

.full{
  width:100%;
  margin-top:15px;
}

.toast{
  position:fixed;
  left:50%;
  bottom:25px;
  z-index:3000;
  transform:translateX(-50%) translateY(20px);
  padding:10px 15px;
  border-radius:10px;
  background:#21171c;
  color:#fff;
  font-size:11px;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.checkout-card{
  max-width:520px;
}

.checkout-info{
  color:#a99ba1;
  font-size:11px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .container{
    width:calc(100% - 20px);
  }

  .site-header{
    position:sticky;
    top:0;
  }

  .header-main{
    min-height:55px;
    gap:7px;
  }

  .menu-btn{
    display:block;
    flex:none;
  }

  .brand{
    gap:6px;
    min-width:0;
  }

  .brand-mark{
    width:36px !important;
    height:36px !important;
    background-size:90% 90% !important;
  }

  .brand b{
    font-size:13px;
  }

  .brand small{
    display:none;
  }

  .search{
    position:absolute;
    left:10px;
    right:10px;
    top:59px;
    width:auto;
    height:34px;
    margin:0;
    z-index:10;
  }

  .search input{
    font-size:11px;
  }

  .cart-btn{
    margin-left:auto;
    width:36px;
    height:36px;
    font-size:15px;
  }

  .nav{
    margin-top:38px;
    overflow-x:auto;
  }

  .nav-inner{
    min-height:34px;
    gap:22px;
    overflow-x:auto;
    white-space:nowrap;
  }

  .nav a{
    font-size:10px;
  }

  .nav a.active::after{
    bottom:-9px;
  }


  /* HERO MOBILE */

  .hero{
    min-height:auto;
    display:block;
    padding-top:55px;
    padding-bottom:15px;
  }

  .hero h1{
    font-size:31px;
    letter-spacing:-.5px;
  }

  .hero p{
    font-size:11px;
  }

  .hero-art{
    display:none;
  }

  .eyebrow{
    font-size:10px;
  }


  /* BENEFITS MOBILE */

  .benefits{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
    padding:8px 0 15px;
  }

  .benefits>div{
    padding:10px;
  }

  .benefits strong{
    font-size:9px;
  }

  .benefits small{
    font-size:8px;
  }


  /* SECTION MOBILE */

  .section{
    padding:20px 0;
  }

  .section-head{
    margin-bottom:10px;
  }

  .section-head h2{
    font-size:21px;
  }

  .section-head p{
    font-size:9px;
  }


  /* CATEGORY MOBILE */

  .category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }

  .category-card{
    min-height:70px;
    padding:10px;
    border-radius:11px;
  }

  .category-card h3{
    font-size:11px;
  }

  .category-card p{
    font-size:8px;
  }


  /* =====================================================
     PRODUK MOBILE - SANGAT COMPACT
     ===================================================== */

  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .product-card{
    border-radius:11px;
  }

  .product-card img,
  .product-image{
    height:125px !important;
    min-height:125px !important;
  }

  .product-info{
    padding:8px 8px 9px;
  }

  .product-card .category,
  .product-card .product-category,
  .product-card .cat,
  .product-card small{
    font-size:7px;
  }

  .product-card h3,
  .product-card .product-name,
  .product-card .name{
    margin:2px 0 3px;
    font-size:11px;
    line-height:1.15;
  }

  .product-card p,
  .product-card .description,
  .product-card .product-desc{
    margin-bottom:5px;
    font-size:8px;
    line-height:1.3;
    -webkit-line-clamp:2;
  }

  .product-price{
    gap:3px;
    margin-top:4px;
  }

  .product-price strong,
  .price{
    font-size:10px;
  }

  .product-price del,
  .old-price{
    font-size:7px;
  }

  .product-bottom{
    margin-top:5px;
    gap:3px;
  }

  .product-stock,
  .stock{
    font-size:7px;
  }

  .add-cart,
  .product-card .cart-add,
  .product-card button{
    padding:6px 8px;
    border-radius:15px;
    font-size:7px;
  }

  .product-card .badge,
  .product-card .promo-badge{
    margin:6px;
    padding:3px 5px;
    font-size:7px;
  }


  /* PROMO MOBILE */

  .promo{
    min-height:105px;
    padding:16px;
    border-radius:13px;
  }

  .promo span{
    font-size:7px;
  }

  .promo h2{
    margin:3px 0;
    font-size:18px;
  }

  .promo p{
    margin-bottom:6px;
    font-size:7px;
  }

  .promo .primary{
    padding:7px 10px;
    font-size:8px;
  }

  .promo-bubbles{
    width:78px;
    height:78px;
  }

  .promo-bubbles b{
    font-size:20px;
  }

  .promo-bubbles i{
    font-size:7px;
  }


  /* TESTIMONIAL MOBILE */

  .testimonial-grid{
    grid-template-columns:1fr;
    gap:7px;
  }

  .testimonial-card{
    padding:12px;
    border-radius:11px;
  }


  /* FOOTER MOBILE */

  footer{
    margin-top:15px;
    padding:30px 0 15px;
  }

  .footer-brand{
    margin-bottom:18px;
  }

  .footer-brand-name{
    font-size:19px;
  }

  .footer-brand p{
    font-size:9px;
  }

  .map-box iframe{
    height:230px;
  }

  .map-button{
    padding:8px 12px;
    font-size:9px;
  }


  /* SOCIAL MOBILE */

  .social-floating{
    right:10px;
    bottom:12px;
    gap:7px;
  }

  .social-icon{
    width:43px;
    height:43px;
    font-size:19px;
  }


  /* MODAL MOBILE */

  .modal{
    padding:10px;
  }

  .modal-card{
    width:100%;
    max-height:88vh;
    padding:16px;
    border-radius:15px;
  }

  .modal-card h2{
    font-size:19px;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:380px){

  .container{
    width:calc(100% - 16px);
  }

  .brand b{
    font-size:12px;
  }

  .product-grid{
    gap:5px;
  }

  .product-card img,
  .product-image{
    height:112px !important;
    min-height:112px !important;
  }

  .product-info{
    padding:7px;
  }

  .product-card h3,
  .product-card .product-name,
  .product-card .name{
    font-size:10px;
  }

  .product-card p,
  .product-card .description,
  .product-card .product-desc{
    font-size:7px;
  }

  .product-price strong,
  .price{
    font-size:9px;
  }

  .add-cart,
  .product-card .cart-add,
  .product-card button{
    padding:5px 7px;
    font-size:6.5px;
  }

  .promo-bubbles{
    width:68px;
    height:68px;
  }

  .promo-bubbles b{
    font-size:17px;
  }

}
/* =========================================================
   MELLY KOSMETIK - COMPACT EXTRA
   Dipasang paling bawah style.css
   ========================================================= */

/* DESKTOP */
.product-card img,
.product-card .product-image{
  height:125px !important;
  min-height:125px !important;
}

.product-info{
  padding:8px 9px 9px !important;
}

.product-card p,
.product-card .description,
.product-card .product-desc{
  -webkit-line-clamp:1 !important;
  margin-bottom:4px !important;
}

.product-card h3,
.product-card .product-name,
.product-card .name{
  margin:2px 0 3px !important;
}

.product-bottom{
  margin-top:4px !important;
}


/* =========================================================
   HP
   ========================================================= */

@media(max-width:700px){

  .product-grid{
    gap:6px !important;
  }

  .product-card{
    border-radius:10px !important;
  }

  /* GAMBAR LEBIH PENDEK */
  .product-card img,
  .product-card .product-image{
    height:100px !important;
    min-height:100px !important;
  }

  /* INFORMASI LEBIH PADAT */
  .product-info{
    padding:7px 7px 8px !important;
  }

  .product-card .category,
  .product-card .product-category,
  .product-card .cat,
  .product-card small{
    font-size:6.5px !important;
  }

  .product-card h3,
  .product-card .product-name,
  .product-card .name{
    font-size:10px !important;
    line-height:1.1 !important;
    margin:2px 0 !important;
  }

  /* DESKRIPSI CUKUP 1 BARIS */
  .product-card p,
  .product-card .description,
  .product-card .product-desc{
    font-size:7px !important;
    line-height:1.2 !important;
    margin-bottom:3px !important;
    -webkit-line-clamp:1 !important;
    max-height:9px !important;
  }

  /* HARGA */
  .product-price{
    margin-top:3px !important;
    gap:3px !important;
  }

  .product-price strong,
  .price{
    font-size:9px !important;
  }

  .product-price del,
  .old-price{
    font-size:6.5px !important;
  }

  /* STOK + TOMBOL */
  .product-bottom{
    margin-top:3px !important;
    gap:3px !important;
  }

  .product-stock,
  .stock{
    font-size:6.5px !important;
  }

  .add-cart,
  .product-card .cart-add,
  .product-card button{
    padding:5px 7px !important;
    border-radius:13px !important;
    font-size:6.5px !important;
  }

  /* BADGE */
  .product-card .badge,
  .product-card .promo-badge{
    margin:5px !important;
    padding:2px 5px !important;
    font-size:6px !important;
  }

}


/* HP KECIL */
@media(max-width:380px){

  .product-card img,
  .product-card .product-image{
    height:92px !important;
    min-height:92px !important;
  }

  .product-info{
    padding:6px !important;
  }

  .product-card h3,
  .product-card .product-name,
  .product-card .name{
    font-size:9px !important;
  }

  .product-card p,
  .product-card .description,
  .product-card .product-desc{
    font-size:6.5px !important;
  }

  .product-price strong,
  .price{
    font-size:8.5px !important;
  }

  .add-cart,
  .product-card .cart-add,
  .product-card button{
    padding:4px 6px !important;
    font-size:6px !important;
  }

}
/* =========================================================
   MELLY KOSMETIK
   TAMPILAN LANGSUNG KE PRODUK TERBARU
   ========================================================= */

/* HILANGKAN HERO / BELANJA SEKARANG ATAS */
.hero{
  display:none !important;
}

/* HILANGKAN BENEFIT */
.benefits{
  display:none !important;
}

/* HILANGKAN KATEGORI PRODUK */
#kategori{
  display:none !important;
}

/* HILANGKAN MENU KATEGORI */
.nav a[href="#kategori"]{
  display:none !important;
}

/* HILANGKAN TOMBOL BELANJA SEKARANG */
button[data-scroll="#produk"]{
  display:none !important;
}

/* PRODUK JADI BAGIAN PERTAMA SETELAH HEADER */
#produk{
  padding-top:24px !important;
  margin-top:0 !important;
}

/* JUDUL PRODUK */
#produk .section-head{
  margin-top:0 !important;
}

/* HILANGKAN TOMBOL BELANJA SEKARANG DI PROMO */
#promo button[data-scroll="#produk"]{
  display:none !important;
}

/* RAPATKAN JARAK ANTAR BAGIAN */
.section{
  margin-top:20px !important;
}

/* MOBILE */
@media(max-width:700px){

  #produk{
    padding-top:16px !important;
  }

  #produk .section-head{
    margin-bottom:8px !important;
  }

  .section{
    margin-top:14px !important;
  }

}
/* =========================================================
   MELLY KOSMETIK
   HILANGKAN PROMO SPESIAL
   ========================================================= */

/* Hapus kolom PROMO SPESIAL */
#promo {
  display: none !important;
}

/* Hapus menu PROMO dari navigasi */
nav a[href="#promo"] {
  display: none !important;
}

/* Rapikan jarak produk setelah promo dihilangkan */
#produk {
  margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width: 700px) {

  #promo {
    display: none !important;
  }

  nav a[href="#promo"] {
    display: none !important;
  }

  #produk {
    margin-bottom: 15px !important;
  }

}
/* =========================================
   MELLY KOSMETIK - TULISAN PUTIH
   ========================================= */

.brand b,
.brand strong,
.brand span,
.footer-brand-name,
footer h2,
footer h3 {
  color: #ffffff !important;
}

/* Nama Melly Kosmetik di header */
.brand b {
  color: #ffffff !important;
}

/* Nama Melly Kosmetik di footer */
.footer-brand-name {
  color: #ffffff !important;
}

/* Judul footer */
footer h2,
footer h3 {
  color: #ffffff !important;
}
/* =====================================================
   MELLY KOSMETIK
   WARNA MENU NAVIGASI MENJADI PUTIH
   ===================================================== */

/* Semua tulisan menu navigasi */
.nav a {
  color: #ffffff !important;
}

/* Saat mouse diarahkan ke menu */
.nav a:hover {
  color: #ffffff !important;
}

/* Menu yang sedang aktif */
.nav a.active {
  color: #ffffff !important;
}

/* Pastikan menu tetap putih di HP */
@media (max-width: 700px) {
  .nav a {
    color: #ffffff !important;
  }

  .nav a:hover,
  .nav a.active {
    color: #ffffff !important;
  }
}
/* =========================================
   MELLY KOSMETIK
   MENU NAVIGASI WARNA PUTIH
   ========================================= */

/* Beranda, Produk, Testimoni, Kontak */
.nav a {
  color: #ffffff !important;
}

/* Saat disentuh / hover tetap putih */
.nav a:hover {
  color: #ffffff !important;
}

/* Menu yang sedang aktif tetap putih */
.nav a.active {
  color: #ffffff !important;
}

/* Garis bawah aktif tetap pink */
.nav a.active::after {
  background: #ff4f91 !important;
}
/* =========================================================
   MELLY KOSMETIK - TESTIMONI SUPER MINIMALIS
   TEMPEL DI PALING BAWAH style.css
   ========================================================= */

/* Bagian testimoni dibuat lebih rapat */
#testimoni,
#testimonials,
section[id*="testimoni"],
section[id*="testimonial"] {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Judul testimoni */
#testimoni h2,
#testimonials h2,
section[id*="testimoni"] h2,
section[id*="testimonial"] h2 {
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 3px !important;
  font-size: 25px !important;
}

/* Subjudul */
#testimoni .section-head p,
#testimonials .section-head p,
section[id*="testimoni"] .section-head p,
section[id*="testimonial"] .section-head p {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
}

/* GRID TESTIMONI */
#testimonialGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

/* SEMUA KARTU TESTIMONI */
#testimonialGrid > * {
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* Nama */
#testimonialGrid strong,
#testimonialGrid b {
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* Huruf/inisial */
#testimonialGrid .avatar,
#testimonialGrid [class*="avatar"] {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

/* Bintang */
#testimonialGrid .stars,
#testimonialGrid [class*="star"] {
  color: #ff4f91 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* Isi komentar */
#testimonialGrid p {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  #testimoni,
  #testimonials,
  section[id*="testimoni"],
  section[id*="testimonial"] {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  #testimoni h2,
  #testimonials h2,
  section[id*="testimoni"] h2,
  section[id*="testimonial"] h2 {
    font-size: 21px !important;
    margin-bottom: 2px !important;
  }

  #testimoni .section-head p,
  #testimonials .section-head p,
  section[id*="testimoni"] .section-head p,
  section[id*="testimonial"] .section-head p {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }

  /* 2 kolom di HP supaya jauh lebih hemat ruang */
  #testimonialGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #testimonialGrid > * {
    padding: 8px 9px !important;
    border-radius: 8px !important;
  }

  #testimonialGrid strong,
  #testimonialGrid b {
    font-size: 11px !important;
  }

  #testimonialGrid .avatar,
  #testimonialGrid [class*="avatar"] {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
  }

  #testimonialGrid .stars,
  #testimonialGrid [class*="star"] {
    font-size: 9px !important;
  }

  #testimonialGrid p {
    font-size: 9px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
  }
}
/* =========================================================
   MELLY KOSMETIK - KONTAK & FOOTER MINIMALIS
   TEMPEL DI PALING BAWAH style.css
   ========================================================= */

/* Area kontak */
#kontak {
  padding-top: 28px !important;
  padding-bottom: 18px !important;
  margin-top: 0 !important;
}

/* Judul utama kontak */
#kontak h2,
#kontak h3 {
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Semua teks kontak */
#kontak p {
  color: rgba(255,255,255,.68) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* Judul lokasi */
#kontak .map-title,
#kontak [class*="map-title"] {
  color: #ffffff !important;
}

/* Kotak peta */
#kontak .map-box {
  margin-top: 10px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* Peta desktop */
#kontak .map-box iframe {
  height: 260px !important;
  display: block !important;
}

/* Tombol Google Maps */
#kontak .map-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  padding: 7px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-top: 0 !important;
  min-height: 0 !important;
}

footer p {
  margin: 0 !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  #kontak {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
  }

  #kontak h2 {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }

  #kontak h3 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  #kontak p {
    font-size: 10px !important;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
  }

  /* Peta lebih pendek di HP */
  #kontak .map-box {
    margin-top: 7px !important;
    border-radius: 8px !important;
  }

  #kontak .map-box iframe {
    height: 170px !important;
  }

  #kontak .map-button {
    margin-top: 6px !important;
    padding: 6px 10px !important;
    font-size: 9px !important;
    border-radius: 16px !important;
  }

  footer {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  footer p {
    font-size: 8px !important;
  }
}