/* BeautyFull V37.3 — clean production overrides */

/* Preserve the exact V19 Home-Care layout and dimensions. */
.silk-promo-section{padding:88px 0!important}
.silk-promo-shell{grid-template-columns:.92fr 1.08fr!important;align-items:center!important;gap:54px!important}
.silk-visual{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;max-width:none!important;width:auto!important;justify-self:stretch!important}
.silk-product-card{position:relative!important;padding:12px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:28px!important;background:rgba(255,255,255,.07)!important;box-shadow:0 30px 70px rgba(0,0,0,.28)!important;overflow:hidden!important}
.silk-product-card img{display:block!important;width:100%!important;max-height:none!important;aspect-ratio:1.55/1!important;object-fit:cover!important;object-position:center!important;padding:0!important;border-radius:20px!important;background:transparent!important}
.silk-compare-card{max-width:none!important;padding:15px!important;border-radius:24px!important}
.silk-ba-slider{aspect-ratio:2.15/1!important}
.silk-copy h2{font-size:clamp(38px,4.2vw,56px)!important;margin:17px 0 7px!important}
.silk-name{font-size:22px!important;margin-bottom:16px!important}
.silk-lead{font-size:14.5px!important}
.silk-proof{margin:24px 0 20px!important}
.silk-points{grid-template-columns:1fr 1fr!important;gap:11px 20px!important;margin-bottom:24px!important}
.silk-offer{display:flex!important;align-items:flex-end!important;gap:18px!important;flex-wrap:wrap!important;margin:3px 0 24px!important;padding:18px 20px!important;max-width:500px!important}
.silk-now strong{font-size:54px!important}
.silk-name-link,.silk-card-link{display:block;color:inherit;text-decoration:none}
.silk-name-link:hover .silk-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.silk-card-link{border-radius:28px}
.silk-card-link:focus-visible{outline:2px solid #f4d594;outline-offset:4px}
.final-silk-link{display:none!important}

/* Safari / Chrome parity for all hero lead-form controls. */
#leadForm .field input,
#leadForm .field select{
  display:block!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  box-sizing:border-box!important;
  margin:0!important;
  border:1px solid #dfd3c4!important;
  border-radius:12px!important;
  background-color:#fff!important;
  color:var(--ink)!important;
  font-family:var(--sans)!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1!important;
  text-align:left!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  -webkit-text-size-adjust:100%!important;
}
#leadForm .field input{padding:0 13px!important;background-image:none!important}
#leadForm .field select{
  padding:0 44px 0 13px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23724b1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:14px 9px!important;
}
#leadForm .field select::-ms-expand{display:none}
#leadForm .field input:focus,#leadForm .field select:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(168,119,50,.12)!important}

/* Keep the original V19 gift icon and its slow dashed-ring rotation. */
.benefit-gift{animation:none!important}
.benefit-gift::before{content:none!important;display:none!important}

/* Restore the original image + attached information-card presentation. */
#approach .analysis-guide-row,#approach .analysis-cta-bar{display:none!important}
#approach .approach-visual{position:relative!important;min-height:620px!important;padding:0!important;overflow:hidden!important;display:block!important;border-radius:28px!important}
#approach .approach-visual>img{display:block!important;width:100%!important;height:100%!important;min-height:620px!important;object-fit:cover!important;object-position:center!important;border-radius:0!important}
#approach .analysis-card{position:absolute!important;left:22px!important;right:22px!important;bottom:22px!important;margin:0!important;z-index:5!important}

/* The guide is independent from steps 01–04 and sits over the image. */
#approach .analysis-guide-overlay{position:absolute!important;top:18px!important;left:18px!important;z-index:7!important;width:min(320px,calc(100% - 36px))!important}
#approach .analysis-guide-overlay a{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:100%!important;min-width:0!important;padding:13px 16px!important;border:1px solid rgba(168,119,50,.28)!important;border-radius:18px!important;background:rgba(255,253,249,.95)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;box-shadow:0 12px 30px rgba(52,37,23,.14)!important;color:var(--gold-deep)!important;text-decoration:none!important;transition:transform .22s ease,box-shadow .22s ease!important}
#approach .analysis-guide-overlay a:hover{transform:translateY(-2px)!important;box-shadow:0 16px 36px rgba(52,37,23,.18)!important}
#approach .analysis-guide-copy{display:block!important;min-width:0!important}
#approach .analysis-guide-copy small{display:block!important;margin:0 0 3px!important;color:#8a7763!important;font-size:10px!important;font-weight:700!important;letter-spacing:.1em!important;line-height:1.3!important;text-transform:uppercase!important}
#approach .analysis-guide-copy strong{display:block!important;color:var(--gold-deep)!important;font-size:14px!important;line-height:1.3!important}
#approach .analysis-guide-overlay i{flex:0 0 auto!important;font-size:18px!important;font-style:normal!important}

/* Keep sections visible even when a browser delays motion observers. */
.reveal{opacity:1!important;transform:none!important}
.complimentary-section,.silk-promo-section,#issues,#results,#approach,.outcomes-section,#why,#locations,#faq,footer{content-visibility:visible!important;contain-intrinsic-size:auto!important}

/* Subtle professional movement on suitable elements — not on the gift icon itself. */
@keyframes bfFloatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bfGlowSoft{0%,100%{box-shadow:0 0 0 0 rgba(212,167,91,0)}50%{box-shadow:0 0 0 9px rgba(212,167,91,.10)}}
@keyframes bfPulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
@keyframes bfArrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes bfPinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.merdeka-badge{animation:bfFloatSoft 5s ease-in-out infinite}
.hero-include-icon{animation:bfGlowSoft 4.2s ease-in-out infinite}
.hero-include:nth-child(2) .hero-include-icon{animation-delay:.6s}
.hero-include:nth-child(3) .hero-include-icon{animation-delay:1.2s}
.silk-urgency i{animation:bfPulseDot 1.9s ease-in-out infinite}
#approach .analysis-guide-overlay i{animation:bfArrowNudge 1.7s ease-in-out infinite}
#locations .location-pin{animation:bfPinFloat 4.2s ease-in-out infinite}
#locations .location-card:nth-child(2n) .location-pin{animation-delay:.6s}
.issue-card img{transition:transform .35s ease,filter .35s ease}
.issue-card:hover img{transform:scale(1.035);filter:saturate(.92) contrast(.98)}

@media(max-width:1000px){
  .silk-promo-shell{grid-template-columns:1fr!important;gap:40px!important}
  .silk-visual{max-width:760px!important;justify-self:start!important}
}

@media(max-width:720px){
  .silk-promo-section{padding:68px 0!important}
  .silk-promo-shell{gap:28px!important}
  .silk-copy h2{font-size:35px!important}
  .silk-name{font-size:19px!important}
  .silk-lead{font-size:13.5px!important}
  .silk-points{grid-template-columns:1fr!important}
  .silk-offer{padding:15px 16px!important;gap:13px!important}
  .silk-now strong{font-size:46px!important}
  .silk-product-card{padding:9px!important;border-radius:21px!important}
  .silk-product-card img{aspect-ratio:1.25/1!important;border-radius:15px!important}
  .silk-compare-card{padding:11px!important;border-radius:20px!important}
  .silk-compare-head span{font-size:17px!important}
  .silk-compare-head small{display:none!important}
  .silk-ba-slider{aspect-ratio:1.55/1!important}

  #approach .approach-visual{min-height:470px!important}
  #approach .approach-visual>img{height:470px!important;min-height:470px!important}
  #approach .analysis-card{left:14px!important;right:14px!important;bottom:14px!important;padding:16px!important}
  #approach .analysis-guide-overlay{top:12px!important;left:12px!important;width:calc(100% - 24px)!important}
  #approach .analysis-guide-overlay a{padding:11px 13px!important;border-radius:15px!important}
  #approach .analysis-guide-copy small{font-size:9px!important}
  #approach .analysis-guide-copy strong{font-size:12.5px!important}

  /* Explicit placement avoids Safari auto-grid differences. */
  #locations .location-grid{width:100%!important;min-width:0!important;grid-template-columns:1fr!important}
  #locations .location-card{width:100%!important;min-width:0!important;grid-template-columns:44px minmax(0,1fr)!important;grid-template-rows:auto auto!important;grid-template-areas:none!important;align-items:start!important;gap:12px!important;padding:16px!important;border-radius:18px!important;background:#fff!important;overflow:hidden!important}
  #locations .location-pin{grid-area:auto!important;grid-column:1!important;grid-row:1!important;width:44px!important;height:44px!important;border-radius:14px!important;margin:0!important;background:var(--cream)!important}
  #locations .location-body{grid-area:auto!important;grid-column:2!important;grid-row:1!important;min-width:0!important;padding-top:1px!important}
  #locations .location-body h3{font-size:14px!important;line-height:1.3!important;margin:0 0 4px!important;overflow-wrap:anywhere!important}
  #locations .location-body p{font-size:11px!important;line-height:1.55!important;margin:0 0 8px!important;overflow-wrap:anywhere!important}
  #locations .phone-link{display:inline-flex!important;font-size:11.5px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
  #locations .location-actions{grid-area:auto!important;grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;margin-top:2px!important}
  #locations .location-detail-link,#locations .location-wa{grid-area:auto!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;min-width:0!important;min-height:42px!important;justify-content:center!important;text-align:center!important;white-space:normal!important;padding:10px 8px!important;overflow-wrap:anywhere!important}
}

@media(max-width:380px){#locations .location-actions{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.merdeka-badge,.hero-include-icon,.silk-urgency i,#approach .analysis-guide-overlay i,#locations .location-pin{animation:none!important}.issue-card img{transition:none!important}}


/* V37.4 — final proportion, alignment and mobile refinements */
/* Home-care: keep the V19 structure while returning the product visual to a compact size. */
.silk-promo-shell{
  grid-template-columns:1.08fr .92fr!important;
  gap:46px!important;
  align-items:center!important;
}
.silk-visual{
  width:100%!important;
  max-width:520px!important;
  justify-self:end!important;
}
.silk-product-card,
.silk-compare-card{
  width:100%!important;
  max-width:520px!important;
}
.silk-product-card img{
  display:block!important;
  width:100%!important;
  max-height:330px!important;
  aspect-ratio:1.55/1!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Our Approach heading and explanatory copy stay on one clean left edge. */
#approach > .wrap > .section-head{
  max-width:760px!important;
  margin:0 0 34px!important;
  text-align:left!important;
}
#approach > .wrap > .section-head > p{
  max-width:680px!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
#approach > .wrap > .section-head .cn-copy{
  text-align:left!important;
}

@media(max-width:1000px){
  .silk-promo-shell{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  .silk-visual,
  .silk-product-card,
  .silk-compare-card{
    max-width:520px!important;
  }
  .silk-visual{
    justify-self:center!important;
    margin-inline:auto!important;
  }
}
@media(max-width:720px){
  .silk-promo-section{padding:58px 0!important}
  .silk-visual,
  .silk-product-card,
  .silk-compare-card{
    max-width:100%!important;
  }
  .silk-product-card img{
    max-height:220px!important;
    aspect-ratio:1.45/1!important;
    object-fit:contain!important;
  }
  #approach > .wrap > .section-head{
    margin-bottom:26px!important;
  }
}

/* V37.4 final alignment and mobile simplification */
#approach .section-head.left{
  max-width:760px!important;
  margin:0 0 34px 0!important;
  text-align:left!important;
}
#approach .section-head.left>h2,
#approach .section-head.left>p,
#approach .section-head.left .cn-copy{
  text-align:left!important;
}
#approach .section-head.left>p{
  max-width:680px!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:720px){
  #approach .section-head.left{margin-bottom:24px!important}
  #approach .section-head.left h2{font-size:33px!important}
  #approach .section-head.left>p{font-size:14px!important;line-height:1.65!important}
  #approach .analysis-guide-overlay a{padding:10px 12px!important}
  #approach .analysis-guide-copy small{display:none!important}
  #approach .analysis-guide-copy strong{font-size:12px!important}
}

/* V37.5 — final polish for home-care placement, mobile fit, and Why BeautyFull harmony */
.silk-topline{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin-bottom:6px!important;
}
.silk-urgency{
  margin:0!important;
  align-self:flex-start!important;
}
.silk-visual{
  max-width:500px!important;
}
.silk-product-card{
  padding:10px!important;
}
.silk-product-card img{
  width:100%!important;
  height:auto!important;
  max-height:300px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
}
#why .why-collage img{
  filter:saturate(.93) contrast(.98) brightness(1.01)!important;
}
#why .why-collage img:nth-child(3){
  filter:saturate(.9) contrast(.97) brightness(1.02) sepia(.04)!important;
}
@media(max-width:720px){
  .silk-topline{gap:8px!important}
  .silk-urgency{width:auto!important;justify-content:center!important}
  .silk-visual{max-width:100%!important}
  .silk-product-card{padding:8px!important}
  .silk-product-card img{
    max-height:230px!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0 auto!important;
  }
}

/* V37.5.1 — restore V19 urgency placement */
.silk-topline{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  margin-bottom:4px!important;
}
.silk-topline .silk-urgency{
  width:auto!important;
  margin:0!important;
  align-self:auto!important;
  justify-content:center!important;
}
@media(max-width:720px){
  .silk-topline{align-items:flex-start!important;gap:10px!important}
  .silk-topline .silk-urgency{width:100%!important;justify-content:center!important}
}


/* V37.6 — stable skin-analysis CTA and shared product-image refresh */
#approach .analysis-guide-overlay,#approach .analysis-guide-standalone,#approach .approach-heading-row,#approach .analysis-guide-row{display:none!important}
#approach .approach-head-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:28px!important;align-items:end!important;margin:0 0 32px!important}
#approach .approach-head-row .section-head{margin:0!important;max-width:760px!important;text-align:left!important}
#approach .approach-head-row .section-head h2,#approach .approach-head-row .section-head p,#approach .approach-head-row .section-head .cn-copy{text-align:left!important}
#approach .analysis-guide-panel{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:min(100%,330px)!important;padding:14px 16px!important;border:1px solid rgba(168,119,50,.28)!important;border-radius:18px!important;background:linear-gradient(145deg,#fffdf9,#f2e4d0)!important;box-shadow:0 12px 30px rgba(52,37,23,.10)!important;color:var(--gold-deep)!important;text-decoration:none!important;transition:transform .22s ease,box-shadow .22s ease!important}
#approach .analysis-guide-panel:hover{transform:translateY(-2px)!important;box-shadow:0 16px 36px rgba(52,37,23,.15)!important}
#approach .analysis-guide-panel .analysis-guide-copy{display:block!important;min-width:0!important}
#approach .analysis-guide-panel small{display:block!important;margin:0 0 3px!important;color:#8a7763!important;font-size:10px!important;font-weight:700!important;letter-spacing:.1em!important;line-height:1.3!important;text-transform:uppercase!important}
#approach .analysis-guide-panel strong{display:block!important;color:var(--gold-deep)!important;font-size:14px!important;line-height:1.35!important}
#approach .analysis-guide-panel i{flex:0 0 auto!important;font-size:18px!important;font-style:normal!important;animation:bfArrowNudge 1.7s ease-in-out infinite!important}
@media(max-width:900px){#approach .approach-head-row{grid-template-columns:1fr!important;align-items:start!important;gap:18px!important}#approach .analysis-guide-panel{justify-self:start!important}}
@media(max-width:720px){#approach .approach-head-row{margin-bottom:24px!important;gap:14px!important}#approach .analysis-guide-panel{width:100%!important;max-width:360px!important;padding:12px 14px!important}#approach .analysis-guide-panel small{font-size:9px!important}#approach .analysis-guide-panel strong{font-size:12.5px!important}}
@media(prefers-reduced-motion:reduce){#approach .analysis-guide-panel i{animation:none!important}}


/* V37.7 — exact V19 urgency placement, compact email row, and fully-contained mobile product image. */
.silk-topline{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  margin-bottom:4px!important;
}
.silk-topline .silk-urgency{
  width:auto!important;
  margin:0!important;
  align-self:auto!important;
  justify-content:center!important;
}
#leadForm .form-row-contact{align-items:end!important}
@media(max-width:720px){
  .silk-topline{align-items:flex-start!important;gap:10px!important}
  .silk-topline .silk-urgency{width:100%!important;justify-content:center!important}
  .silk-card-link{display:block!important;width:100%!important;min-width:0!important}
  .silk-product-card{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  .silk-product-card img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:14 / 9!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:0 auto!important;
    padding:0!important;
  }
  #leadForm .form-row-contact{align-items:stretch!important}
}

/* V37.8 — final form simplification and campaign-badge polish */
/* Keep the stock message directly below the Home-Care eyebrow on every viewport. */
.silk-topline{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
.silk-topline .silk-urgency{
  width:auto!important;
  margin:0!important;
  align-self:flex-start!important;
  justify-content:flex-start!important;
}

/* The Merdeka campaign badge stays calm and premium instead of floating. */
.merdeka-badge{
  animation:none!important;
  transform:none!important;
}

/* Balanced two-row form after removing the redundant phone field. */
#leadForm .form-row,
#leadForm .form-row-preferences{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:end!important;
}
@media(max-width:720px){
  .silk-topline{gap:8px!important}
  .silk-topline .silk-urgency{
    width:auto!important;
    align-self:flex-start!important;
    justify-content:flex-start!important;
  }
  #leadForm .form-row,
  #leadForm .form-row-preferences{
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:stretch!important;
  }
}