/* ========================================================================== */
/* Dermal Beauty Studio v10.0 — GLOBAL LAYOUT GUARD                          */
/* ========================================================================== */
:root{
  --dbs-fixed-header-height:116px;
  --dbs-fixed-header-height-mobile:76px;
}

/* overflow-x:hidden can create sticky/containing-block side effects. */
html,body.dbs-theme{overflow-x:clip!important}

/* The header is fixed, so normal pages must reserve its real desktop height. */
body.dbs-theme .dbs-main{
  position:relative;
  z-index:1;
  min-height:70vh;
  padding-top:var(--dbs-fixed-header-height)!important;
  overflow:visible!important;
}

/* The approved Home owns its own hero/header geometry. */
body.dbs-layout-home-final .dbs-main,
body.home .dbs-main,
body.page-template-template-home-final-php .dbs-main{
  padding-top:0!important;
}

/* Keep all public content below navigation and above the page background. */
.dbs-main>.dbn-page,
.dbs-main>.db-final-hifu-page,
.dbs-main>.db-final-pdo-page,
.dbs-main>#dbs-lip-luxe-widget,
.dbs-main>.dbs-fallback-page{
  position:relative;
  z-index:1;
}

/* -------------------------------------------------------------------------- */
/* NEW CONTENT + CONCERNS HUB: header-safe hero geometry                       */
/* -------------------------------------------------------------------------- */
.dbn-page{
  overflow-x:clip!important;
  overflow-y:visible!important;
  position:relative!important;
  isolation:isolate;
}
.dbn-page .dbn-hero{
  position:relative!important;
  z-index:1!important;
  padding-top:clamp(38px,4vw,58px)!important;
  padding-bottom:clamp(42px,5vw,68px)!important;
  overflow:visible!important;
}
.dbn-page .dbn-hero__grid{
  position:relative!important;
  z-index:1!important;
  align-items:center!important;
}
.dbn-page .dbn-hero__copy,
.dbn-page .dbn-hero__visual{position:relative!important;z-index:1!important}
.dbn-page .dbn-hero h1{
  font-size:clamp(3rem,5.2vw,5.75rem)!important;
  line-height:.98!important;
  max-width:14ch!important;
  text-wrap:balance;
}
.dbn-page .dbn-hero__visual{
  min-height:clamp(470px,58vh,610px)!important;
  max-height:680px;
}

/* Compact, predictable rhythm across content-document pages. */
.dbn-page .dbn-section,
.dbn-page .dbn-pricing,
.dbn-page .dbn-final{
  padding-top:25px!important;
  padding-bottom:25px!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}
.dbn-page .dbn-section__head{margin-bottom:25px!important}
.dbn-page .dbn-content-card{margin:0!important}

/* Concerns hub uses the same protected first-screen geometry. */
body.dbs-layout-concerns-hub .dbn-hero{
  min-height:calc(100svh - var(--dbs-fixed-header-height));
  display:flex;
  align-items:center;
}
body.dbs-layout-concerns-hub .dbn-hero__grid{width:100%}

/* -------------------------------------------------------------------------- */
/* APPROVED SERVICE PAGES: never start beneath the fixed header               */
/* -------------------------------------------------------------------------- */
.db-final-hifu-page .section--hero,
.db-final-pdo-page .section--hero,
#dbs-lip-luxe-widget .section--hero{
  padding-top:clamp(38px,4vw,58px)!important;
}
.db-final-hifu-page,
.db-final-pdo-page,
#dbs-lip-luxe-widget{overflow-x:clip!important}

/* -------------------------------------------------------------------------- */
/* HOME: sticky rails must use the viewport, not a hidden-overflow ancestor.  */
/* -------------------------------------------------------------------------- */
.dermal-approved-home{
  overflow-x:clip!important;
  overflow-y:visible!important;
}
@media (min-width:901px){
  .dermal-approved-home .emotional-section,
  .dermal-approved-home .concerns-section,
  .dermal-approved-home .emotional-split,
  .dermal-approved-home .concerns-layout{
    overflow:visible!important;
    contain:none!important;
    transform:none!important;
  }
  .dermal-approved-home .emotional-split,
  .dermal-approved-home .concerns-layout{align-items:start!important}
  .dermal-approved-home .emotional-media-rail,
  .dermal-approved-home .concern-rail{
    position:sticky!important;
    top:var(--db-home-sticky-top,132px)!important;
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    transform:none!important;
  }
  .dermal-approved-home .emotional-copy{min-height:calc(100dvh + 260px)!important}
  .dermal-approved-home .concern-list{padding-top:18px!important;padding-bottom:48px!important}
}

/* -------------------------------------------------------------------------- */
/* HEADER + CONCERNS MEGA: solid layer, never visually merges with the hero.  */
/* -------------------------------------------------------------------------- */
.dbs-header{z-index:1200!important}
.dbs-header .dbs-concern-mega{z-index:1300!important}
.dbs-concern-mega{
  background:#fffdfb!important;
  border-color:#ead9d4!important;
  box-shadow:0 36px 100px rgba(50,25,23,.24)!important;
  opacity:0!important;
}
.dbs-menu>li.dbs-nav-concerns:hover>.dbs-concern-mega,
.dbs-menu>li.dbs-nav-concerns:focus-within>.dbs-concern-mega,
.dbs-menu>li.dbs-nav-concerns.is-open>.dbs-concern-mega{
  opacity:1!important;
}
.dbs-concern-tabs{background:#fff8f5!important}
.dbs-concern-panel,.dbs-concern-panels{background:#fff!important}

/* When the mega menu is open, softly mask the page below it. This prevents a
   large hero heading/image from visually shooting through/around the panel. */
body.dbs-mega-open::before{
  content:"";
  position:fixed;
  z-index:1150;
  left:0;right:0;
  top:var(--dbs-fixed-header-height);
  bottom:0;
  background:rgba(255,248,245,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  pointer-events:none;
}
body.admin-bar.dbs-mega-open::before{top:calc(var(--dbs-fixed-header-height) + 32px)}

/* Prevent the retired Treatments mega from returning even if an old WordPress
   menu is still assigned while the new menu plugin is being installed. */
.dbs-desktop-nav .dbs-nav-treatments,
.dbs-mobile-panel .dbs-nav-treatments{display:none!important}

/* Never let generic fallback/editor content hug the fixed header. */
.dbs-fallback-page{padding-top:42px!important;padding-bottom:42px!important}
.dbs-fallback-page .dbs-editor-content{max-width:1000px;margin-inline:auto;padding:30px;border:1px solid var(--dbs-line);border-radius:28px;background:#fff}

@media(max-width:1080px){
  :root{--dbs-fixed-header-height:var(--dbs-fixed-header-height-mobile)}
  body.dbs-theme .dbs-main{padding-top:var(--dbs-fixed-header-height-mobile)!important}
  body.dbs-layout-home-final .dbs-main,body.home .dbs-main{padding-top:0!important}
  body.dbs-mega-open::before{display:none!important}
  .dbn-page .dbn-hero{padding-top:34px!important;padding-bottom:42px!important}
  .dbn-page .dbn-hero__grid{grid-template-columns:1fr!important;gap:30px!important}
  .dbn-page .dbn-hero__visual{min-height:450px!important}
}
@media(max-width:782px){body.admin-bar.dbs-mega-open::before{top:calc(var(--dbs-fixed-header-height) + 46px)}}
@media(max-width:700px){
  .dbn-page .dbn-hero h1{font-size:clamp(2.65rem,13vw,4.1rem)!important;max-width:none!important}
  .dbn-page .dbn-hero__visual{min-height:390px!important}
  .dbn-page .dbn-section,.dbn-page .dbn-pricing,.dbn-page .dbn-final{padding-top:25px!important;padding-bottom:25px!important}
}


/* ========================================================================== */
/* v11.0 — CONCERN DETAIL + MEDIA CONTAINMENT                                */
/* ========================================================================== */
body.dbs-layout-concern-detail .dbs-main{
  padding-top:var(--dbs-fixed-header-height)!important;
}
body.dbs-layout-concern-detail .dbc-page{
  position:relative;
  z-index:1;
  overflow-x:clip!important;
  overflow-y:visible!important;
}

/* Home concern artwork must remain completely inside its visual card. */
.dermal-approved-home .concern-stage{
  overflow:hidden!important;
  isolation:isolate!important;
}
.dermal-approved-home .concern-stage img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  box-sizing:border-box!important;
  padding:clamp(14px,1.6vw,24px)!important;
}
.dermal-approved-home .stage-meta{
  z-index:5!important;
}

/* No content/document image is allowed to escape its premium media frame. */
.dbc-page figure,
.dbc-treatment-card__media{
  overflow:hidden!important;
}
.dbc-page figure img,
.dbc-treatment-card__media img{
  max-width:100%!important;
  max-height:100%!important;
}