.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===================== SECTION 1: ZOLARY HERO (Scoped CSS) ===================== */
#zolary-hero{
  --zol-bg:#0b0b0d;
  --zol-text:#ffffff;
  --zol-muted:rgba(255,255,255,.72);
  --zol-stroke:rgba(255,255,255,.12);
  --zol-gold:#c9a24a;
  --zol-gold2:#f3d48a;
  --zol-shadow: 0 22px 60px rgba(0,0,0,.55);
  --zol-radius: 22px;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--zol-text);
  
 
}

#zolary-hero .zol-container{ width:min(1160px, 92%); 

margin: 0 auto;
    
}

#zolary-hero{
  position:relative;
  overflow:hidden;
 padding: 0px 0px !important;
  background:
    radial-gradient(900px 520px at 15% 22%, rgba(201,162,74,.28), transparent 55%),
    radial-gradient(700px 460px at 85% 25%, rgba(243,212,138,.14), transparent 55%),
    linear-gradient(180deg, #050506, var(--zol-bg));
}

#zolary-hero .zol-grid{
  display:grid;
  grid-template-columns: 1.12fr .69fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:center;
    padding: 0px 0px !important;
}


#zolary-hero .zol-mini-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.75);
  font-weight:700;
  font-size: 13px;
}
#zolary-hero .zol-mini-links a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid transparent;
}
#zolary-hero .zol-mini-links a:hover{
  border-color: var(--zol-stroke);
  background: rgba(255,255,255,.04);
}

#zolary-hero .zol-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(255,255,255,.72);
}
#zolary-hero .zol-kicker .dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(135deg, var(--zol-gold), var(--zol-gold2));
  box-shadow: 0 0 0 6px rgba(201,162,74,.12);
}

#zolary-hero .zol-h1{
  margin: 12px 0 10px;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.3;
  letter-spacing:-.02em;
  color: white;
}
#zolary-hero .zol-h1 .gold{
  background: linear-gradient(135deg, var(--zol-gold), var(--zol-gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#zolary-hero .zol-lead{
  margin:0;
  max-width: 60ch;
  color: var(--zol-muted);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
}

#zolary-hero .zol-btns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 20px;
}

#zolary-hero .zol-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight:900;
  letter-spacing:.2px;
  text-decoration:none;
  border: 1px solid var(--zol-stroke);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  will-change: transform;
}
#zolary-hero .zol-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.42); }

#zolary-hero .zol-btn.primary{
  color:#0b0b0d;
  border-color: transparent;
  background: linear-gradient(135deg, var(--zol-gold), var(--zol-gold2));
}
#zolary-hero .zol-btn.ghost{
  color: var(--zol-text);
  background: rgba(255,255,255,.04);
}

#zolary-hero .zol-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 16px;
}
#zolary-hero .zol-badge{
  font-size:12px;
  padding: 8px 10px;
  border-radius:999px;
  border:1px solid var(--zol-stroke);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
}

#zolary-hero .zol-card{
  
}

#zolary-hero .zol-product-frame{ padding: 14px; }

#zolary-hero .zol-product-hero{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#zolary-hero .zol-product-hero .img{
  border-radius: 18px;
  overflow:hidden;
  
}
#zolary-hero .zol-product-hero img{
  width:100%;

 
  display:block;
}

#zolary-hero .zol-mini-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#zolary-hero .zol-mini{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  min-height: 78px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#zolary-hero .zol-mini .t{
  font-weight:900;
  font-size: 12px;
  color: rgba(255,255,255,.9);
}
#zolary-hero .zol-mini .s{
  font-size: 11px;
  color: rgba(255,255,255,.65);
}
#zolary-hero .zol-mini .bar{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
#zolary-hero .zol-mini .bar span{
  display:block;
  height:100%;
  width: 60%;
  background: linear-gradient(135deg, var(--zol-gold), var(--zol-gold2));
}

#zolary-hero .zol-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* Responsive */
@media (max-width: 980px){
  #zolary-hero .zol-grid{ grid-template-columns: 1fr; }
  #zolary-hero .zol-mini-grid{ grid-template-columns: repeat(2, 1fr); }
  #zolary-hero .zol-product-hero img{ height: 300px; }
}
@media (max-width: 520px){
  #zolary-hero .zol-mini-links{ display:none; }
  #zolary-hero .zol-product-hero img{
      margin-top: -30PX;
    height: 120%;
      width: 120%;
      margin-bottom: -60PX;
      z-index: 500 !important;
  }
 #zolary-hero .zol-container{ width:min(1160px, 92%); 
padding-top: 40PX;
padding-bottom: 30PX;
margin: 0 auto;
    
}
}

.etheme-product-grid .sales-booster-total-sales, .etheme-product-grid .single-waitlist {
  margin-bottom: 7px;
  font-size: 15px;
  display: none;
}

cart-countdown-message{
    display: none;
}

.elementor-1454 .elementor-element.elementor-element-6075b0c2 .etheme-elementor-off-canvas__toggle .elementor-button .elementor-button-icon-qty {
  background-color: #000 !important;
}
.elementor-1454 .elementor-element.elementor-element-18fe3c0b .etheme-elementor-off-canvas__toggle .elementor-button .elementor-button-icon-qty {
  background-color: #000 !important; }
  
  
  .etheme-sticky-cart .sticky_product_title {
  font-size: 114%;
  -webkit-padding-start: 20px;
  padding-inline-start: 20px;
  -webkit-padding-end: 20px;
  padding-inline-end: 20px;
  color: black !important;
  font-weight: 500 !important; }
  
.woocommerce-Price-currencySymbol{
     
     padding-right: 3px !important;
 }
 span .woocommerce-Price-amount .amount{
     
     font-weight: 500 !important;
     
 }

 
 
 
 
 /* Thicker strike-through for regular price */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    text-decoration: none; /* remove default */
    position: relative;
    opacity: 0.9 !important;
}

.woocommerce div.product p.price del::after,
.woocommerce div.product span.price del::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px; /* thickness (increase if needed) */
    background-color: black !important; /* strike color */
    transform: translateY(-50%);
}
.zol-total-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(201,162,74,.25);
  border-radius:12px;
  background: rgba(201,162,74,.06);
  width: fit-content;
}
.zol-total-label{ color:#111; }
.zol-total-amount{ font-weight:800; }


/*footer*/

/* ===================== ZOLARY FOOTER (Scoped) ===================== */
#zolary-footer{
  --bg:#0b0b0b;
  --text:#eaeaea;
  --muted:rgba(234,234,234,.65);
  --gold:#c9a24a;
  --gold2:#f3d48a;
  --stroke:rgba(255,255,255,.08);

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: linear-gradient(180deg, #0b0b0b, #121212);
  color: var(--text);
  padding: clamp(60px, 7vw, 110px) 0 28px;
}

#zolary-footer .wrap{
  width:min(1160px, 92%);
  margin:0 auto;
}

#zolary-footer .grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
}

#zolary-footer h4{
  margin:0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--gold);
}

#zolary-footer p{
  margin:0;
  color: var(--muted);
  line-height:1.75;
  font-size: 15px;
}

#zolary-footer .brand{
  max-width: 320px;
}

#zolary-footer .brand strong{
  color: var(--gold2);
}

#zolary-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

#zolary-footer a{
  color: var(--muted);
  text-decoration:none;
  font-weight:600;
  transition: color .2s ease, transform .2s ease;
  font-size: 17px;
}
#zolary-footer a:hover{
  color: var(--gold);
  transform: translateX(4px);
}

#zolary-footer .social{
  display:flex;
  gap: 12px;
  margin-top: 16px;
}

#zolary-footer .social a{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(201,162,74,.12);
  border: 1px solid rgba(201,162,74,.25);
}
#zolary-footer .social svg{
  width: 18px;
  height: 18px;
  fill: var(--gold);
}

#zolary-footer .divider{
  margin: 34px 0 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}

#zolary-footer .bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 14px;
}

#zolary-footer .bottom span{
  color: var(--gold);
  font-weight:900;
}

/* Responsive */
@media (max-width: 1024px){
  #zolary-footer .grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  #zolary-footer .grid{
    grid-template-columns: 1fr;
  }
  #zolary-footer{
    text-align:center;
  }
  #zolary-footer .social{
    justify-content:center;
  }
}

/*h3 section*/

/* ===================== ZOLARY INGREDIENTS / STORY SECTION (Scoped) ===================== */
#zolary-ingredients{
  --bg:#ffffff;
  --text:#121212;
  --muted:rgba(18,18,18,.72);
  --stroke:rgba(18,18,18,.10);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: clamp(44px, 6vw, 92px) 0;
  overflow:hidden;
}

#zolary-ingredients .wrap{
  width:min(1160px, 92%);
  margin:0 auto;
}

#zolary-ingredients .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3.2vw, 40px);
  align-items:center;
}

#zolary-ingredients .imgBox{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: #f7f7f7;
}

#zolary-ingredients .imgBox img{
  width:100%;
  height: 520px;
  object-fit: cover;
  display:block;
}

/* soft overlay (like screenshot) */
#zolary-ingredients .imgBox:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.00), rgba(255,255,255,.00));
  pointer-events:none;
}

/* Right content */
#zolary-ingredients .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(18,18,18,.72);
}
#zolary-ingredients .kicker .line{
  width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 999px;
}

#zolary-ingredients h2{
  margin: 12px 0 12px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.02em;
  COLOR:BLACK;
}
#zolary-ingredients h2 .gold{
  color: var(--gold);
  font-weight: 700;
}

#zolary-ingredients p{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 16px;
}

#zolary-ingredients .badges{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

#zolary-ingredients .badge{
  font-size: 12px;
  font-weight: 900;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.12);
  background: rgba(201,162,74,.10);
  color: rgba(18,18,18,.86);
}

#zolary-ingredients .btnRow{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

#zolary-ingredients .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 950;
  letter-spacing:.2px;
  text-decoration:none;
  border: 1px solid rgba(18,18,18,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#zolary-ingredients .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }

#zolary-ingredients .btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1307;
}
#zolary-ingredients .btn.ghost{
  background: rgba(255,255,255,.7);
  color: var(--text);
}

/* Responsive */
@media (max-width: 980px){
  #zolary-ingredients .grid{ grid-template-columns: 1fr; }
  #zolary-ingredients .imgBox img{ height: 360px; }
}
@media (max-width: 520px){
  #zolary-ingredients p{ font-size: 15px; }
}



/* ===================== ZOLARY HAIR SCALP FOOD SECTION ===================== */
#zolary-hair-oil{
  --bg1:#0f1110;
  --bg2:#171a18;
  --text:#f5f5f4;
  --muted: rgba(245,245,244,.72);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  padding: clamp(50px, 6vw, 100px) 0;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(900px 500px at 15% 30%, rgba(201,162,74,.22), transparent 55%),
    radial-gradient(700px 400px at 85% 10%, rgba(243,212,138,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

#zolary-hair-oil .wrap{
  width: min(1160px, 92%);
  margin: 0 auto;
}

#zolary-hair-oil .grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr; /* IMAGE LEFT */
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* ================= IMAGE SIDE ================= */
#zolary-hair-oil .card{
  border-radius: 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  padding: 20px;
}

#zolary-hair-oil .imgWrap{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  padding: 20px;
  display:grid;
  place-items:center;
}

#zolary-hair-oil .imgWrap img{
  width: 100%;
  max-width: 420px;
  height: 420px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 25px 40px rgba(0,0,0,.45));
}

/* ================= TEXT SIDE ================= */
#zolary-hair-oil h2{
  margin: 0 0 14px;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.1;
  color: #fff;
}

#zolary-hair-oil .gold{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

#zolary-hair-oil .sub{
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15.5px;
}

/* clean bullets */
#zolary-hair-oil .bullets{
  margin: 0 0 25px;
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

#zolary-hair-oil .bullets li{
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

#zolary-hair-oil .bullets strong{
  display:block;
  font-size: 15px;
  font-weight: 700;
  color: rgba(245,245,244,.95);
}

#zolary-hair-oil .bullets span{
  display:block;
  margin-top: 6px;
  font-size: 13.5px;
  color: rgba(245,245,244,.70);
  line-height: 1.5;
}

/* buttons */
#zolary-hair-oil .btnRow{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

#zolary-hair-oil .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  border: 1px solid transparent;
  transition: all .2s ease;
}

#zolary-hair-oil .btn.primary{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1307;
}

#zolary-hair-oil .btn.outline{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}

#zolary-hair-oil .btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0,0,0,.35);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  #zolary-hair-oil .grid{
    grid-template-columns: 1fr;
  }

  #zolary-hair-oil .imgWrap img{
    height: 340px;
  }
}

@media (max-width: 520px){
  #zolary-hair-oil .btn{
    width: 100%;
  }
  #zolary-hair-oil .imgWrap img{
    height: 300px;
  }
}



/* ===================== ZOLARY NATURAL LINE SECTION (Scoped) ===================== */
#zolary-natural{
  --bg:#f6f0df;
  --text:#111;
  --muted:rgba(17,17,17,.70);
  --stroke:rgba(17,17,17,.14);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: clamp(44px, 6vw, 92px) 0;
  overflow:hidden;
  position:relative;
}

#zolary-natural .wrap{
  width:min(1160px, 92%);
  margin:0 auto;
}

#zolary-natural .grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:center;
}

#zolary-natural .badgeTop{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin: 0 auto 10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(17,17,17,.70);
}

#zolary-natural .badgeTop .ico{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(201,162,74,.35);
  background: linear-gradient(180deg, rgba(201,162,74,.16), rgba(243,212,138,.10));
}
#zolary-natural .badgeTop svg{ width:18px;height:18px; stroke:#7b5f23; }

#zolary-natural .content{
  text-align:center;
  padding-right: clamp(0px, 1vw, 10px);
}

#zolary-natural h2{
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.15;
  margin: 10px 0 10px;
  letter-spacing:-.02em;
  color:black;
}
#zolary-natural .gold{
  color: var(--gold);
  font-weight: 700;
}

#zolary-natural .sub{
  margin: 0 auto;
  max-width: 74ch;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15.5px;
}

#zolary-natural .btnRow{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
}

#zolary-natural .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 950;
  letter-spacing:.2px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#zolary-natural .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.18); }

#zolary-natural .btn.primary{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1307;
}
#zolary-natural .btn.ghost{
  background: rgba(255,255,255,.45);
  border-color: rgba(17,17,17,.10);
  color: var(--text);
}

#zolary-natural .features{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

#zolary-natural .feat{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.35);
}

#zolary-natural .feat .iconBox{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.55);
  flex:0 0 auto;
}

#zolary-natural .feat .iconBox svg{
  width: 26px; height: 26px;
  stroke: rgba(17,17,17,.75);
}

#zolary-natural .feat h4{
  margin: 0;
  font-size: 14px;
  color:black;
  font-weight: 700;
  letter-spacing:.02em;
}
#zolary-natural .feat p{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

#zolary-natural .right{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

#zolary-natural .imgWrap{
  width: min(520px, 100%);
  border-radius: 28px;
  padding: 18px;
  background: radial-gradient(520px 380px at 40% 35%, rgba(201,162,74,.20), transparent 60%),
              rgba(255,255,255,.30);
  border: 1px solid rgba(17,17,17,.10);
  position:relative;
  overflow:hidden;
}

#zolary-natural .imgWrap img{
  width:100%;
  height: 420px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.25));
}

/* Decorative leaf (optional) */
#zolary-natural .leaf{
  position:absolute;
  right: -14px;
  top: -14px;
  width: 120px;
  opacity: .30;
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  #zolary-natural .grid{ grid-template-columns: 1fr; }
  #zolary-natural .content{ text-align:center; }
  #zolary-natural .features{ grid-template-columns: 1fr; }
  #zolary-natural .imgWrap img{ height: 340px; }
}

/*about page */


#zol-about-banner{
  --bg1:#e9e1d5;
  --bg2:#f2eadf;
  --text:#111;
  --muted:rgba(0,0,0,.60);

  font-family: jost;
  padding: 42px 0; /* short height */

      background: linear-gradient(120deg, #0f0f0f 0%, #3a2f14 100%);
}
#zol-about-banner .wrap{ width:min(1160px,92%); margin:0 auto; text-align:center; }

#zol-about-banner h1{
  margin:0 0 8px;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing:-.02em;
  font-weight: 600;
  color: white;
}
#zol-about-banner .crumb{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color:white;
  text-transform: uppercase;
  
}
#zol-about-banner .crumb a{ color: inherit; text-decoration:none; }
#zol-about-banner .crumb a:hover{ text-decoration: underline; }



#zol-about-a{
  --bg:#
  #ffff;
  --text:#121212;
  --muted:rgba(18,18,18,.70);
  --stroke:rgba(18,18,18,.10);
  --gold:#c9a24a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: clamp(46px,6vw,88px) 0;
}
#zol-about-a .wrap{ width:min(1160px,92%); margin:0 auto; }
#zol-about-a .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items:center;
}
#zol-about-a .kicker{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(18,18,18,.70);
  display:flex; gap:10px; align-items:center;
}
#zol-about-a .kicker:before{
  content:"";
  width: 34px; height: 2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold), rgba(201,162,74,.25));
}
#zol-about-a h2{
  margin: 12px 0 12px;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing:-.02em;
  line-height:1.1;
  font-weight: 700;
  color: black;
}
#zol-about-a p{
  margin:0 0 14px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 18px;
}
#zol-about-a .line{
  margin: 18px 0 16px;
  height:1px;
  background: linear-gradient(90deg, rgba(18,18,18,.12), transparent);
}
#zol-about-a .meta{
  display:flex; gap:16px; flex-wrap:wrap;
  color: rgba(18,18,18,.82);
  font-weight: 500;
}
#zol-about-a .meta a{
  color: inherit; text-decoration:none;
  border-bottom:1px dashed rgba(18,18,18,.35);
  padding-bottom:2px;
}
#zol-about-a .imgBox{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background:#fff;
}
#zol-about-a .imgBox img{
  width:100%;
  height: 420px;
  object-fit: cover;
  display:block;
}
@media (max-width: 980px){
  #zol-about-a .grid{ grid-template-columns: 1fr; }
  #zol-about-a .imgBox img{ height: 320px; }
}




#zol-about-b{
  --bg:#f6efe4;
  --text:#121212;
  --muted:rgba(18,18,18,.70);
  --stroke:rgba(18,18,18,.10);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: clamp(46px,6vw,92px) 0;
}
#zol-about-b .wrap{ width:min(1160px,92%); margin:0 auto; }

#zol-about-b .grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px,3vw,40px);
  align-items:center;
}

#zol-about-b .imgs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
#zol-about-b .img{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background:#fff;
}
#zol-about-b .img img{
  width:100%;
  height: 360px;
  object-fit: cover;
  display:block;
}

#zol-about-b .k{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.2em;
  text-transform: uppercase;
  color: rgba(18,18,18,.65);
}
#zol-about-b h2{
  margin: 10px 0 12px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:700;
  color: black;
}
#zol-about-b p{
  margin:0 0 16px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 16px;
}

#zol-about-b .info{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
#zol-about-b .box{
  border:1px solid var(--stroke);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.45);
}
#zol-about-b .box h4{
  margin:0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(18,18,18,.70);
}
#zol-about-b .box .row{
  color: rgba(18,18,18,.80);
  font-weight: 550;
  font-size: 14px;
  margin: 6px 0;
}

#zol-about-b .btn{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 1000;
  text-decoration:none;
  color:#1a1307;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border: 1px solid rgba(201,162,74,.20);
  transition: transform .15s ease, box-shadow .15s ease;
}
#zol-about-b .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }

@media (max-width: 980px){
  #zol-about-b .grid{ grid-template-columns: 1fr; }
  #zol-about-b .img img{ height: 260px; }
  #zol-about-b .info{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  #zol-about-b .imgs{ grid-template-columns: 1fr; }
  #zol-about-b .imgs{ height: 480px; 
      display: none;
  }
}
/*faq*/

/* ===================== ZOLARY FAQ (Scoped) ===================== */
#zol-faq{
  --bg:#0b0b0b;
  --card:#121212;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --stroke:rgba(255,255,255,.10);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(800px 380px at 20% 10%, rgba(201,162,74,.14), transparent 60%),
              linear-gradient(180deg, #0b0b0b 0%, #0f0f0f 100%);
  color: var(--text);
  padding: clamp(36px, 6vw, 86px) 0;
}

#zol-faq .wrap{
  width:min(980px, 92%);
  margin:0 auto;
}

/* header */
#zol-faq .head{
  text-align:center;
  margin-bottom: 18px;
}
#zol-faq .kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:1000;
  color: rgba(243,212,138,.9);
}
#zol-faq h1{
  margin:10px 0 10px;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing:-.02em;
  color: white;
}
#zol-faq .sub{
  margin:0 auto;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.9;
  font-size:16px;
}

/* grid */
#zol-faq .grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* section titles inside FAQ */
#zol-faq .sectionTitle{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(201,162,74,.18);
  background: rgba(201,162,74,.08);
  font-weight: 700;
  letter-spacing:.06em;
  color: white;
}

/* accordion */
#zol-faq details{
  border:1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
#zol-faq summary{
  cursor:pointer;
  padding: 16px 18px;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  font-weight: 600;
  letter-spacing:-.01em;
}
#zol-faq summary::-webkit-details-marker{ display:none; }

#zol-faq .q{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
#zol-faq .badge{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 1000;
  color:#1a1307;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
}

/* arrow */
#zol-faq .arrow{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  transition: transform .18s ease;
}
#zol-faq details[open] .arrow{
  transform: rotate(180deg);
}

#zol-faq .a{
  padding: 0 18px 16px 18px;
  color: var(--muted);
  line-height: 1.9;
  font-size: 15px;
}

/* footer CTA */
#zol-faq .cta{
  margin-top: 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
  border:1px solid rgba(201,162,74,.22);
  background: radial-gradient(560px 240px at 20% 30%, rgba(201,162,74,.18), transparent 60%),
              rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 16px;
}
#zol-faq .cta strong{
  font-size: 16px;
}
#zol-faq .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 1000;
  text-decoration:none;
  color:#1a1307;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border:1px solid rgba(201,162,74,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
#zol-faq .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
/* contact us*/
<style>
#zol-about-banner{
  --bg1:#e9e1d5;
  --bg2:#f2eadf;
  --text:#111;
  --muted:rgba(0,0,0,.60);

  font-family: jost;
  padding: 42px 0; /* short height */

      background: linear-gradient(120deg, #0f0f0f 0%, #3a2f14 100%);
}
#zol-about-banner .wrap{ width:min(1160px,92%); margin:0 auto; text-align:center; }

#zol-about-banner h1{
  margin:0 0 8px;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing:-.02em;
  font-weight: 600;
  color: white;
}
#zol-about-banner .crumb{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color:white;
  text-transform: uppercase;
  
}
#zol-about-banner .crumb a{ color: inherit; text-decoration:none; }
#zol-about-banner .crumb a:hover{ text-decoration: underline; }


/* ===================== ZOLARY HELP SECTION (Scoped) ===================== */
#zolary-help{
  --bg:#ffffff;
  --text:#141414;
  --muted:rgba(20,20,20,.72);
  --stroke:rgba(20,20,20,.10);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: clamp(48px, 6vw, 92px) 0;
}

#zolary-help .wrap{
  width:min(1160px, 92%);
  margin:0 auto;
}

#zolary-help .top{
  text-align:center;
  margin-bottom: 26px;
}

#zolary-help .top h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.6vw, 54px);
  letter-spacing:-.02em;
  line-height: 1.05;
  color: black;
}

#zolary-help .top p{
  margin: 0 auto;
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
}

#zolary-help .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
  align-items: stretch;
}

#zolary-help .card{
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 22px 20px;
  background: linear-gradient(180deg, rgba(201,162,74,.06), rgba(255,255,255,.00));
  min-height: 220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

#zolary-help .label{
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(20,20,20,.65);
  display:flex;
  align-items:center;
  gap:10px;
}

#zolary-help .dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow: 0 0 0 6px rgba(201,162,74,.10);
}

#zolary-help .title{
  margin: 10px 0 10px;
  font-size: 22px;
  font-weight: 700;
  color:black !important;
  letter-spacing:-.01em;
}

#zolary-help .text{
  margin:0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 15.5px;
}

#zolary-help .cta{
  margin-top: 16px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight: 650;
  text-decoration:none;
  color: var(--text);
  width: fit-content;
  border-bottom: 1px dashed rgba(201,162,74,.65);
  padding-bottom: 3px;
}
#zolary-help .cta:hover{
  color: rgba(140,111,46,1);
}

#zolary-help .meta{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  color: rgba(20,20,20,.80);
  font-weight: 700;
  font-size: 17px;
}

#zolary-help .row{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(20,20,20,.80);
}

#zolary-help .icon{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(20,20,20,.12);
  background: rgba(201,162,74,.10);
  flex:0 0 auto;
}
#zolary-help .icon svg{
  width: 20px; height: 20px;
  stroke: rgba(20,20,20,.85);
}

/* Responsive */
@media (max-width: 1024px){
  #zolary-help .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  #zolary-help .grid{ grid-template-columns: 1fr; }
  #zolary-help .card{ padding: 20px 18px; }
}


#zol-contact-main{
  background: linear-gradient(180deg, #0b0b0b, #121212);
  padding: clamp(50px,7vw,100px) 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff;
}
#zol-contact-main .wrap{
  width:min(1160px,92%);
  margin:auto;
}
#zol-contact-main .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
#zol-contact-main .box{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow:hidden;
}
#zol-contact-main h3{
  margin:0 0 12px;
  font-size: 26px;
  font-weight:800;
  COLOR:WHITE;
}
#zol-contact-main .content{
  padding: 22px;
}
#zol-contact-main iframe{
  width:100%;
  height:100%;
  min-height:380px;
  border:0;
}
#zol-contact-main .cf7{
  padding:22px;
}
#zol-contact-main input,
#zol-contact-main textarea{
  width:100%;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
}
#zol-contact-main input::placeholder,
#zol-contact-main textarea::placeholder{
  color: rgba(255,255,255,.55);
}
#zol-contact-main input[type="submit"]{
  background: linear-gradient(135deg,#c9a24a,#f3d48a);
  color:#1a1307;
  font-weight:1000;
  border:none;
  cursor:pointer;
}
@media(max-width:980px){
  #zol-contact-main .grid{ grid-template-columns:1fr; }
}


/*lotion blog*/

/* ===================== ZOLARY LOTION BLOG (Unique Style / Scoped) ===================== */
#zol-lotion-blog{
  --bg:#0b0b0d;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.12);
  --text:#ffffff;
  --muted: rgba(255,255,255,.74);
  --muted2: rgba(255,255,255,.62);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  background:
    radial-gradient(800px 420px at 20% 10%, rgba(201,162,74,.18), transparent 60%),
    radial-gradient(700px 380px at 85% 30%, rgba(243,212,138,.10), transparent 62%),
    linear-gradient(180deg, #070708 0%, #0d0d10 55%, #070708 100%);
  padding: clamp(30px, 5vw, 70px) 0;
  overflow:hidden;
}

#zol-lotion-blog .wrap{
  width:min(1080px, 92%);
  margin:0 auto;
}

#zol-lotion-blog .topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

#zol-lotion-blog .crumb{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,74,.28);
  background: linear-gradient(180deg, rgba(201,162,74,.10), rgba(255,255,255,.02));
  color: rgba(255,255,255,.82);
  font-weight: 900;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: 12px;
}
#zol-lotion-blog .crumb .dot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow: 0 0 0 4px rgba(201,162,74,.14);
}

#zol-lotion-blog .share{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#zol-lotion-blog .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.76);
  font-weight: 500;
  font-size: 12px;
}

/* HERO */
#zol-lotion-blog .hero{
  border:1px solid var(--stroke);
  border-radius: 26px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

#zol-lotion-blog .heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
  align-items:stretch;
}

#zol-lotion-blog .heroLeft{
  padding: clamp(18px, 3vw, 34px);
}

#zol-lotion-blog h1{
  margin: 10px 0 12px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.10;
  letter-spacing:-.02em;
  color: white;
}

#zol-lotion-blog .tagline{
  margin: 0 0 14px;
  font-size: clamp(16px, 2.2vw, 20px);
  color: rgba(243,212,138,.95);
  font-weight: 900;
  letter-spacing:-.01em;
}

#zol-lotion-blog .intro{
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 16px;
  max-width: 70ch;
}

#zol-lotion-blog .brandline{
  margin-top: 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(201,162,74,.22);
  background: rgba(201,162,74,.10);
  color: rgba(255,255,255,.88);
  font-weight: 700;
}

#zol-lotion-blog .heroRight{
  border-left:1px solid var(--stroke);
  background:
    radial-gradient(420px 240px at 50% 30%, rgba(201,162,74,.22), transparent 60%),
    rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
}

#zol-lotion-blog .heroImg{
  width:100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display:block;
}

/* CONTENT */
#zol-lotion-blog .content{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

#zol-lotion-blog .article{
  border:1px solid var(--stroke);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: clamp(18px, 3vw, 34px);
}

#zol-lotion-blog .article p{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.95;
  font-size: 16px;
}

#zol-lotion-blog .article h2{
  margin: 22px 0 12px;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing:-.01em;
  color: #fff;
}

#zol-lotion-blog .callout{
  margin: 18px 0;
  padding: 16px 16px;
  border-radius: 20px;
  border:1px solid rgba(201,162,74,.26);
  background: radial-gradient(420px 220px at 20% 20%, rgba(201,162,74,.18), transparent 60%),
              rgba(255,255,255,.03);
  color: rgba(255,255,255,.85);
  line-height: 1.85;
}

#zol-lotion-blog .list{
  display:grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
#zol-lotion-blog .list li{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  line-height: 1.8;
  font-size: 15.5px;
}
#zol-lotion-blog .list li b{
  color: rgba(243,212,138,.95);
}

/* Sidebar */
#zol-lotion-blog .side{
  position: sticky;
  top: 18px;
  align-self:start;
  display:grid;
  gap: 14px;
}

#zol-lotion-blog .card{
  border:1px solid var(--stroke);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 16px;
}

#zol-lotion-blog .card h3{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  font-weight: 1000;
}

#zol-lotion-blog .chips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
#zol-lotion-blog .chip{
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.74);
  font-weight: 800;
  font-size: 13px;
}

#zol-lotion-blog .btn{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  width:100%;
  padding: 13px 14px;
  border-radius: 18px;
  font-weight: 1000;
  text-decoration:none;
  color:#1a1307;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border:1px solid rgba(201,162,74,.24);
  transition: transform .15s ease, box-shadow .15s ease;
}
#zol-lotion-blog .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

#zol-lotion-blog .mutedSmall{
  margin: 10px 0 0;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.7;
}

/* Urdu block */
#zol-lotion-blog .urdu{
  border:1px solid rgba(201,162,74,.22);
  background: rgba(201,162,74,.09);
  border-radius: 22px;
  padding: 16px;
}
#zol-lotion-blog .urdu h3{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-weight: 1000;
}
#zol-lotion-blog .urdu p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.82);
  line-height: 1.95;
  font-size: 15.5px;
}
#zol-lotion-blog .urdu ul{
  margin: 0 0 10px 18px;
  color: rgba(255,255,255,.82);
  line-height: 1.95;
}
#zol-lotion-blog .urdu li{ margin: 6px 0; }

/* Responsive */
@media (max-width: 900px){
  #zol-lotion-blog .heroGrid{ grid-template-columns: 1fr; }
  #zol-lotion-blog .heroRight{ border-left: 0; border-top:1px solid var(--stroke); }
  #zol-lotion-blog .heroImg{ min-height: 240px; }
  #zol-lotion-blog .content{ grid-template-columns: 1fr; }
  #zol-lotion-blog .side{ position: static; }
}

/*hair oil */

/* ===================== ZOLARY BLOG POST (Scoped) ===================== */
#zol-blog{
  --bg:#0b0b0b;
  --card:#121212;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --stroke:rgba(255,255,255,.10);
  --gold:#c9a24a;
  --gold2:#f3d48a;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  background: radial-gradient(900px 420px at 20% 20%, rgba(201,162,74,.14), transparent 65%),
              linear-gradient(180deg, #0b0b0b 0%, #0f0f0f 100%);
  padding: clamp(28px, 5vw, 64px) 0;
}

#zol-blog .wrap{
  width:min(980px, 92%);
  margin:0 auto;
}

#zol-blog .hero{
  border:1px solid var(--stroke);
  border-radius: 26px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

#zol-blog .heroTop{
  padding: clamp(18px, 3vw, 30px);
}

#zol-blog .kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight: 1000;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
#zol-blog .kicker i{
  width:28px; height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  display:inline-block;
}
#zol-blog h1{
  margin: 10px 0 12px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing:-.02em;
  line-height:1.12;
  COLOR:WHITE;
}
#zol-blog .meta{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.68);
  font-weight: 800;
  font-size: 13px;
}
#zol-blog .meta span{
  display:inline-flex;
  gap:8px;
  align-items:center;
}
#zol-blog .meta b{
  color: rgba(243,212,138,.92);
}

#zol-blog .heroImg{
  width:100%;
  height: clamp(220px, 38vw, 360px);
  object-fit: cover;
  display:block;
  border-top:1px solid var(--stroke);
}

#zol-blog .content{
  margin-top: 22px;
  border:1px solid var(--stroke);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: clamp(18px, 3vw, 34px);
}

#zol-blog .content p{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.95;
  font-size: 16px;
}

#zol-blog .content h2{
  margin: 26px 0 12px;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing:-.01em;
  color: #fff;
}
#zol-blog .content h3{
  margin: 18px 0 10px;
  font-size: 18px;
  color: rgba(243,212,138,.95);
  letter-spacing: .01em;
}

#zol-blog .content ul{
  margin: 0 0 18px 18px;
  color: var(--muted);
  line-height: 1.9;
}
#zol-blog .content li{
  margin: 6px 0;
}

#zol-blog .tip{
  margin: 18px 0;
  padding: 16px 16px;
  border-radius: 18px;
  border:1px solid rgba(201,162,74,.25);
  background: rgba(201,162,74,.10);
  color: rgba(255,255,255,.85);
  line-height: 1.8;
}
#zol-blog .tip b{ color: var(--gold2); }

#zol-blog .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 8px;
}
#zol-blog .box{
  border:1px solid var(--stroke);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.04);
}
#zol-blog .box h4{
  margin:0 0 8px;
  font-weight: 1000;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.80);
}
#zol-blog .box p{ margin:0; color: var(--muted); }

#zol-blog .cta{
  margin-top: 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
  border:1px solid rgba(201,162,74,.22);
  background: radial-gradient(520px 240px at 20% 30%, rgba(201,162,74,.18), transparent 60%),
              rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 16px 16px;
}
#zol-blog .cta strong{
  font-size: 16px;
  letter-spacing:-.01em;
}
#zol-blog .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 1000;
  text-decoration:none;
  color:#1a1307;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border:1px solid rgba(201,162,74,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
#zol-blog .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

@media (max-width: 760px){
  #zol-blog .grid{ grid-template-columns: 1fr; }
}


#zolary-testimonials .avatar {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 4px solid #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(201,162,74,.25), rgba(0,0,0,.05));
  display: none;
}
#zolary-testimonials .card {
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 26px;
  background: #fff;
  padding: 25px 22px 22px !impoertant; }/* End custom CSS */