/* ==========================================================
   Dermal Beauty Studio v9.1.0 — final layout/menu controls
   ========================================================== */

/* 1) COMPACT SITE-WIDE SECTION RHYTHM
   The user-facing content sections now use a consistent 25px vertical
   padding instead of the previous 60–110px bands. Heroes keep their
   own spacing so the first screen still feels intentional. */
.db-phase-home .section:not(.hero),
.dbn-page .dbn-section,
.dbn-page .dbn-pricing,
.dbn-page .dbn-final,
.db-final-hifu-page .section:not(.section--hero),
.db-final-pdo-page .section:not(.section--hero),
#dbs-lip-luxe-widget .section:not(.section--hero),
#dbs-lip-luxe-widget .db-section,
#dbs-lip-luxe-widget .lead-section,
#dbs-lip-luxe-widget .offer-strip,
.db-final-hifu-page .assessment-strip,
.db-final-pdo-page .assessment-strip {
  padding-top:25px!important;
  padding-bottom:25px!important;
}
#dbs-lip-luxe-widget .db-section{margin-top:0!important;margin-bottom:0!important}
.dbn-page .dbn-section__head,
.db-phase-home .section-head,
.db-final-hifu-page .section-heading,
.db-final-pdo-page .section-heading{margin-bottom:25px!important}

/* Keep intentional card interiors roomy even though section gaps are compact. */
.dbn-page .dbn-content-card{padding:clamp(24px,3vw,40px)!important}

/* 2) HOME — BOTH LEFT VISUAL RAILS STAY STICKY WHILE RIGHT COPY/CARDS SCROLL */
@media (min-width:901px){
  .db-phase-home,
  .db-phase-home .emotional-section,
  .db-phase-home .concerns-section,
  .db-phase-home .emotional-split,
  .db-phase-home .concerns-layout{
    overflow:visible!important;
  }
  .db-phase-home .emotional-split,
  .db-phase-home .concerns-layout{
    align-items:start!important;
  }
  .db-phase-home .emotional-media-rail,
  .db-phase-home .concern-rail{
    position:sticky!important;
    top:142px!important;
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
    overflow:visible!important;
  }
  body.admin-bar .db-phase-home .emotional-media-rail,
  body.admin-bar .db-phase-home .concern-rail{top:174px!important}
  .db-phase-home .emotional-media-sticky,
  .db-phase-home .concern-stage{
    height:min(64vh,590px)!important;
    max-height:calc(100vh - 180px)!important;
  }
}

/* Approved HIFU/PDO split sections also respect the fixed global header. */
@media (min-width:901px){
  .db-final-hifu-page .concern-grid,
  .db-final-pdo-page .concern-grid{align-items:start!important;overflow:visible!important}
  .db-final-hifu-page .concern-sticky,
  .db-final-pdo-page .concern-sticky{position:sticky!important;top:142px!important;align-self:start!important}
  body.admin-bar .db-final-hifu-page .concern-sticky,
  body.admin-bar .db-final-pdo-page .concern-sticky{top:174px!important}
}

/* 3) DESKTOP MEGA MENUS — REMOVE EXCESS EMPTY SPACE */
.dbs-treatment-mega,
.dbs-concern-mega{
  padding:12px!important;
  max-height:calc(100vh - 145px)!important;
}
.dbs-treatment-mega__header,
.dbs-concern-mega__header{
  padding:2px 4px 9px!important;
  margin-bottom:8px!important;
  gap:10px!important;
}
.dbs-treatment-mega__grid{gap:8px!important}
.dbs-treatment-mega__grid section{padding:12px!important;border-radius:16px!important}
.dbs-treatment-mega__grid h3{margin-bottom:6px!important;font-size:1.12rem!important}
.dbs-menu .sub-menu .dbs-treatment-mega__grid a{padding:6px 3px!important;min-height:34px!important}
.dbs-menu .sub-menu .dbs-treatment-mega__grid a:hover{padding-left:7px!important}

.dbs-concern-mega__layout{gap:9px!important;min-height:0!important}
.dbs-concern-tabs{gap:4px!important;padding:5px!important;border-radius:17px!important}
.dbs-menu .sub-menu .dbs-concern-tab{min-height:55px!important;padding:8px 10px!important;border-radius:13px!important}
.dbs-concern-tab>span{grid-template-columns:26px minmax(0,1fr)!important;gap:8px!important}
.dbs-concern-tab small{width:26px!important;height:26px!important}
.dbs-concern-tab strong{font-size:.79rem!important}
.dbs-concern-panels{border-radius:17px!important}
.dbs-concern-panel{padding:14px!important}
.dbs-concern-panel__intro{padding-bottom:9px!important;margin-bottom:6px!important;gap:12px!important}
.dbs-concern-panel__intro h3{font-size:1.45rem!important}
.dbs-concern-service-list{gap:2px 7px!important}
.dbs-menu .sub-menu .dbs-concern-service-list>a{padding:8px 7px!important;min-height:37px!important}

/* Keep fixed mega panels open during the JS hover grace period. */
.dbs-menu>li.is-open>.sub-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.dbs-menu>li.dbs-nav-treatments.is-open>.dbs-treatment-mega{transform:translate(-50%,0)!important}
.dbs-menu>li.dbs-nav-concerns.is-open>.dbs-concern-mega{transform:translate(-50%,0)!important}

/* 4) NATIVE WORDPRESS MENU — mobile hierarchy created from Appearance > Menus */
@media(max-width:1080px){
  .dbs-mobile-native-submenu{display:none;padding:4px 0 16px!important}
  .dbs-mobile-native-submenu.is-open{display:block!important}
  .dbs-mobile-native-children{list-style:none;margin:0!important;padding:0!important}
  .dbs-mobile-native-children>li{border-top:1px solid rgba(55,31,28,.07);padding:0!important}
  .dbs-mobile-native-children a{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:12px!important;padding:11px 8px!important;color:#5f4d49!important;font-size:.88rem!important;
    font-family:var(--dbs-sans)!important;font-weight:700!important;
  }
  .dbs-mobile-native-children .dbs-mobile-native-children{padding:0 0 7px 14px!important}
  .dbs-mobile-group-label{display:block;padding:13px 8px 7px;color:var(--dbs-red);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
}

/* Small-screen section rhythm remains compact but not cramped. */
@media(max-width:700px){
  .db-phase-home .section:not(.hero),
  .dbn-page .dbn-section,
  .dbn-page .dbn-pricing,
  .dbn-page .dbn-final,
  .db-final-hifu-page .section:not(.section--hero),
  .db-final-pdo-page .section:not(.section--hero),
  #dbs-lip-luxe-widget .section:not(.section--hero),
  #dbs-lip-luxe-widget .db-section{padding-top:25px!important;padding-bottom:25px!important}
}

/* ========================================================================== */
/* v9.2.0 — GLOBAL POPUP / MODAL LAYERING + PREMIUM THEME MODAL SYSTEM       */
/* ========================================================================== */

/*
 * Site navigation must remain above page content, but never above a modal.
 * The Home template previously used 999999/1000000; v9.2 normalises those
 * layers so third-party and theme popups can reliably sit above navigation.
 */
.dbs-header,
#masthead,
header.site-header,
.elementor-location-header,
[data-elementor-type="header"]{
  z-index:1200!important;
}
.dbs-header .sub-menu,
.dbs-header .dbs-treatment-mega,
.dbs-header .dbs-concern-mega,
.elementor-location-header .sub-menu,
[data-elementor-type="header"] .sub-menu{
  z-index:1300!important;
}

/* Theme-native premium modal / popup system. */
.dbs-popup-overlay,
.dbs-modal-overlay,
[data-dbs-popup],
[data-dbs-modal]{
  position:fixed!important;
  inset:0!important;
  z-index:200000!important;
}
.dbs-popup-overlay,
.dbs-modal-overlay{
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,48px);
  background:rgba(29,16,15,.58);
  backdrop-filter:blur(14px) saturate(.9);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.dbs-popup-overlay.is-open,
.dbs-modal-overlay.is-open,
.dbs-popup-overlay[aria-hidden="false"],
.dbs-modal-overlay[aria-hidden="false"]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.dbs-popup,
.dbs-modal{
  position:relative;
  width:min(720px,100%);
  max-height:min(82vh,900px);
  overflow:auto;
  border:1px solid rgba(207,42,47,.14);
  border-radius:30px;
  background:
    radial-gradient(circle at 95% 0%,rgba(207,42,47,.09),transparent 34%),
    linear-gradient(145deg,#fff,#fff9f6);
  box-shadow:0 36px 110px rgba(39,20,18,.28);
  padding:clamp(26px,4vw,44px);
  color:var(--dbs-ink,#261918);
  opacity:0;
  transform:translateY(18px) scale(.975);
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.is-open>.dbs-popup,
.is-open>.dbs-modal,
[aria-hidden="false"]>.dbs-popup,
[aria-hidden="false"]>.dbs-modal{
  opacity:1;
  transform:none;
}
.dbs-popup__eyebrow,
.dbs-modal__eyebrow{
  margin:0 0 10px;
  color:var(--dbs-red,#cf2a2f);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.dbs-popup h2,
.dbs-modal h2{
  margin:0 0 14px;
  font-family:var(--dbs-serif,"DM Serif Display",Georgia,serif);
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.02;
  font-weight:400;
}
.dbs-popup p,
.dbs-modal p{color:#74615c;line-height:1.7}
.dbs-popup__close,
.dbs-modal__close,
[data-dbs-popup-close],
[data-dbs-modal-close]{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #ead8d2;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#332522;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(64,38,35,.08);
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.dbs-popup__close:hover,
.dbs-modal__close:hover,
[data-dbs-popup-close]:hover,
[data-dbs-modal-close]:hover{
  transform:rotate(6deg) scale(1.05);
  background:var(--dbs-red,#cf2a2f);
  color:#fff;
}
body.dbs-modal-open{overflow:hidden!important}

/*
 * Third-party popup/lightbox compatibility. We ONLY fix stacking/context here;
 * the plugin keeps its own visual design.
 */
.elementor-popup-modal,
.dialog-widget.dialog-lightbox-widget,
.dialog-widget.dialog-type-lightbox,
.elementor-lightbox,
.pum-overlay,
.pum-container,
.mfp-bg,
.mfp-wrap,
.fancybox__container,
.glightbox-container,
.pswp,
.featherlight,
.featherlight:last-of-type,
[class*="popup-overlay"],
[class*="modal-overlay"]{
  z-index:200000!important;
}

/* Some plugins split backdrop and panel into siblings. */
.pum-container,
.mfp-wrap,
.fancybox__container,
.glightbox-container,
.pswp,
.elementor-popup-modal .dialog-widget-content,
.dialog-lightbox-widget .dialog-widget-content{
  z-index:200001!important;
}

/* WordPress admin bar should not cut through front-end modals. */
body.admin-bar .dbs-popup-overlay,
body.admin-bar .dbs-modal-overlay,
body.admin-bar .elementor-popup-modal,
body.admin-bar .dialog-lightbox-widget{
  padding-top:max(48px,calc(32px + 16px))!important;
}
@media(max-width:782px){
  body.admin-bar .dbs-popup-overlay,
  body.admin-bar .dbs-modal-overlay,
  body.admin-bar .elementor-popup-modal,
  body.admin-bar .dialog-lightbox-widget{
    padding-top:max(62px,calc(46px + 16px))!important;
  }
}
@media(max-width:700px){
  .dbs-popup-overlay,.dbs-modal-overlay{padding:14px!important}
  .dbs-popup,.dbs-modal{max-height:88vh;border-radius:24px;padding:24px 20px}
  .dbs-popup__close,.dbs-modal__close,[data-dbs-popup-close],[data-dbs-modal-close]{top:12px;right:12px;width:38px;height:38px}
}

/* ========================================================================== */
/* v12.0 FINAL POLISH — spacing, CTA routing surfaces, page alignment         */
/* ========================================================================== */

/* User-requested global content rhythm: compact 25px between content bands. */
.db-phase-home .section:not(.hero),
.dermal-approved-home .section:not(.hero),
.dbn-page .dbn-section,
.dbn-page .dbn-pricing,
.dbn-page .dbn-final,
.dbc-page .dbc-section,
.dbc-page .dbc-treatment-section,
.dbc-page .dbc-final,
.db-results-page .db-section:not(.db-hero),
.db-contact-page .db-section:not(.db-hero),
.db-about-page .db-section:not(.db-hero),
.db-final-hifu-page .section:not(.section--hero),
.db-final-pdo-page .section:not(.section--hero),
#dbs-lip-luxe-widget .section:not(.section--hero),
#dbs-lip-luxe-widget .db-section{
  padding-top:25px!important;
  padding-bottom:25px!important;
}

/* Never show decorative numbered bullets beside section headings. */
.dbn-section__head>span,
.dbc-section-number{display:none!important}
.dbc-content-panel__head{grid-template-columns:1fr!important}

/* Home hero: extra breathing room below the location line. */
.db-phase-home .hero-copy>.eyebrow,
.dermal-approved-home .hero-copy>.eyebrow{margin-bottom:32px!important}

/* Home concern visual: real photos stay inside the rounded box. */
.db-phase-home .concern-stage,
.dermal-approved-home .concern-stage{overflow:hidden!important;isolation:isolate!important}
.db-phase-home .concern-stage img,
.dermal-approved-home .concern-stage img{
  inset:18px!important;
  width:calc(100% - 36px)!important;
  height:calc(100% - 36px)!important;
  padding:0!important;
  max-width:calc(100% - 36px)!important;
  max-height:calc(100% - 36px)!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#f8ece8!important;
  border-radius:28px 7px 28px 28px!important;
  filter:none!important;
}
.db-phase-home .concern-card .btn,
.dermal-approved-home .concern-card .btn{background:linear-gradient(135deg,#c92837,#ef4d5b)!important;color:#fff!important;border-color:transparent!important}

/* Why Dermal Beauty — give each supporting point room to breathe. */
.db-phase-home .approach-card h3,
.dermal-approved-home .approach-card h3{margin:0 0 18px!important}
.db-phase-home .approach-card p,
.dermal-approved-home .approach-card p{margin-top:0!important;line-height:1.7!important}
.db-phase-home .approach-card span,
.dermal-approved-home .approach-card span{margin-bottom:20px!important}

/* Concerns hub uses the same side margins as premium Home pages. */
body.dbs-layout-concerns-hub .dbn-shell{width:min(calc(100% - clamp(48px,8vw,152px)),1360px)!important}
body.dbs-layout-concerns-hub .dbn-section__head--center{
  display:block!important;
  max-width:900px!important;
  margin:0 auto 24px!important;
  text-align:center!important;
}
body.dbs-layout-concerns-hub .dbn-section__head--center .dbn-eyebrow,
body.dbs-layout-concerns-hub .dbn-section__head--center h2,
body.dbs-layout-concerns-hub .dbn-section-intro{text-align:center!important}
body.dbs-layout-concerns-hub .dbn-section-intro{max-width:720px;margin:12px auto 0;color:#76615c;line-height:1.7}

/* About Founder: premium hierarchy, no clipped portrait, centered section headings. */
.db-about-page .db-hero__copy h1{width:80%!important;max-width:80%!important;text-wrap:balance}
.db-about-page .db-about-portrait img{object-position:center top!important}
.db-about-page .db-section:not(.db-hero) .db-eyebrow,
.db-about-page .db-section:not(.db-hero) h2{text-align:center!important}
.db-about-page .db-section:not(.db-hero) .db-eyebrow{display:block!important}
.db-about-page .db-section:not(.db-hero) h2{max-width:900px!important;margin-left:auto!important;margin-right:auto!important}
.db-about-page .db-section:not(.db-hero) .db-about-split>div>.db-prose,
.db-about-page .db-section:not(.db-hero) .db-about-split>div>p:not(.db-eyebrow),
.db-about-page .db-section:not(.db-hero) .db-check-list{text-align:left}

/* Results page — smaller polished cards and centered hierarchy. */
.db-results-page .db-results-center,
.db-results-page .db-results-heading{text-align:center!important}
.db-results-page .db-results-heading{max-width:860px;margin:0 auto 22px}
.db-results-page .db-results-heading h2{max-width:none!important;margin-left:auto!important;margin-right:auto!important}
.db-results-page .db-review-card-grid,
.db-results-page .db-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.db-results-page .db-review-card,
.db-results-page .db-story-card{padding:22px!important;border:1px solid #ead8d2;border-radius:22px;background:#fff;box-shadow:0 16px 45px rgba(64,36,32,.07)}
.db-results-page .db-review-card p{font-size:.94rem;line-height:1.65}
.db-results-page .db-review-card__label,
.db-results-page .db-story-card>span{display:block;margin-bottom:12px;color:#cf2a2f;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.db-results-page .db-story-card h3{font-size:clamp(1.45rem,2vw,1.9rem);line-height:1.08;margin:0 0 12px}
.db-results-page .db-story-card p{color:#75615d;line-height:1.65;margin-bottom:18px}
.db-results-page .db-results-gallery{gap:14px!important}
.db-results-page .db-results-gallery figure{border-radius:20px!important;overflow:hidden!important}
.db-results-page .db-actions--center{justify-content:center!important}
.db-results-page .db-results-final{text-align:center!important}

/* Contact page — complete, compact, designed contact options. */
.db-contact-page .db-contact-heading{text-align:center;max-width:820px;margin:0 auto 22px}
.db-contact-page .db-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.db-contact-page .db-contact-card{display:block;padding:24px;border:1px solid #ead8d2;border-radius:22px;background:#fff;color:#281b19!important;text-decoration:none!important;box-shadow:0 16px 45px rgba(64,36,32,.07);transition:.25s ease}
.db-contact-page .db-contact-card:hover{transform:translateY(-4px);border-color:#dfb8b1;box-shadow:0 24px 58px rgba(64,36,32,.11)}
.db-contact-page .db-contact-icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:15px;border-radius:13px;background:#f9e3df;color:#cf2a2f;font-weight:900}
.db-contact-page .db-contact-card small{color:#cf2a2f;font-weight:900;letter-spacing:.12em}
.db-contact-page .db-contact-card h3{font-size:1.35rem;margin:8px 0}
.db-contact-page .db-contact-card p{color:#75615d;line-height:1.6;margin:0}
.db-contact-page .db-contact-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.db-contact-page .db-contact-step{padding:24px;border:1px solid #ead8d2;border-radius:22px;background:#fff}

/* All premium new-content section headings are intentional, centered and clean. */
.dbn-page .dbn-section__head--center{display:block!important;text-align:center!important;max-width:900px!important;margin:0 auto 22px!important}
.dbn-page .dbn-section__head--center h2{max-width:none!important;margin:0 auto!important}
.dbn-page .dbn-content-card{max-width:1120px!important;margin-left:auto!important;margin-right:auto!important}
.dbn-page .dbn-actions--center{justify-content:center!important}
.dbn-page .dbn-pricing__head{text-align:center!important;max-width:900px!important;margin:0 auto 26px!important}
.dbn-page .dbn-pricing__head h2{max-width:none!important}
.dbn-page .dbn-pricing__head p{max-width:760px!important;margin-left:auto!important;margin-right:auto!important}

@media(max-width:920px){
  .db-results-page .db-review-card-grid,.db-results-page .db-story-grid,
  .db-contact-page .db-contact-grid,.db-contact-page .db-contact-steps{grid-template-columns:1fr!important}
  .db-about-page .db-hero__copy h1{width:100%!important;max-width:100%!important}
}
@media(max-width:700px){
  body.dbs-layout-concerns-hub .dbn-shell{width:calc(100% - 30px)!important}
  .db-phase-home .concern-stage img,.dermal-approved-home .concern-stage img{inset:10px!important;width:calc(100% - 20px)!important;height:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important;max-height:calc(100% - 20px)!important}
}


/* =========================================================
 * v13.0.1 — TREATMENT PAGE WIDTH + LAYER HOTFIX
 * Only applies to the new-content treatment page system.
 * ========================================================= */

/* Normal treatment sections are page content, not popup layers. */
body.dbs-layout-new-content .dbn-page .dbn-section,
body.dbs-layout-new-content .dbn-page .dbn-reveal,
body.dbs-layout-new-content .dbn-page .dbn-reveal.is-visible{
  position:relative;
  z-index:auto;
}

/* Use the entire .dbn-shell width instead of the previous 1120px centered cap. */
body.dbs-layout-new-content .dbn-page .dbn-content-card{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:center!important;
}

/* Do not reduce treatment copy to 90%: let it use the complete card width. */
body.dbs-layout-new-content .dbn-page .dbn-content-card > p,
body.dbs-layout-new-content .dbn-page .dbn-content-card .dbn-rich-copy,
body.dbs-layout-new-content .dbn-page .dbn-content-card .dbn-rich-copy > p,
body.dbs-layout-new-content .dbn-page .dbn-content-card > h3,
body.dbs-layout-new-content .dbn-page .dbn-content-card > h4{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:center!important;
}

/* Checklist uses 100% of the content card, still cleanly centered internally. */
body.dbs-layout-new-content .dbn-page .dbn-checks{
  width:100%!important;
  max-width:none!important;
  margin:28px 0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px 18px!important;
}
body.dbs-layout-new-content .dbn-page .dbn-checks li{
  width:100%!important;
  min-height:68px!important;
  padding:16px 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  text-align:center!important;
}
body.dbs-layout-new-content .dbn-page .dbn-checks li::before{
  position:static!important;
  left:auto!important;
  flex:0 0 auto!important;
}

/* If a checklist has an odd final item, make that final item full-row/full-width. */
body.dbs-layout-new-content .dbn-page .dbn-checks li:last-child:nth-child(odd){
  grid-column:1 / -1!important;
  width:100%!important;
  justify-self:stretch!important;
}

@media(max-width:700px){
  body.dbs-layout-new-content .dbn-page .dbn-checks{
    grid-template-columns:1fr!important;
  }
  body.dbs-layout-new-content .dbn-page .dbn-checks li:last-child:nth-child(odd){
    grid-column:auto!important;
    width:100%!important;
  }
}