/* CATNARA classic-design-engine.css
   Consolidated in the exact former load order. No selector/declaration rewrites. */

/* SOURCE: public/css/p2/00-v6-design-tokens.css */
/* =========================================================
   PHASE 2 — V6 DESIGN SYSTEM FOUNDATION
   Semantic aliases only. Existing theme values remain source of truth.
   ========================================================= */
html[data-view-mode="public"]{
  /* semantic color aliases */
  --v6-color-bg:var(--ui-bg,#fffaf7);
  --v6-color-surface:var(--ui-surface,#fff);
  --v6-color-text:var(--ui-text,#27211f);
  --v6-color-muted:var(--ui-muted,#7f716b);
  --v6-color-line:var(--ui-line,#e5dad4);
  --v6-color-accent:var(--ui-accent,#b89583);

  /* layout aliases */
  --v6-container-home:var(--home-lower-max,1320px);
  --v6-section-y:var(--home-lower-py,78px);
  --v6-section-title-max:var(--home-lower-title-max,56px);
  --v6-page-gutter:clamp(18px,3vw,40px);

  /* grooming process aliases */
  --v6-process-gap:var(--home-process-gap,14px);
  --v6-process-card-min:var(--home-step-min,235px);
  --v6-process-card-py:var(--home-step-py,24px);
  --v6-process-card-px:var(--home-step-px,22px);
  --v6-process-number-size:var(--home-step-n,32px);
  --v6-process-title-size:var(--home-step-title,20px);
  --v6-process-body-size:var(--home-step-body,14.5px);
  --v6-process-title-gap:var(--home-step-title-gap,38px);
  --v6-process-card-radius:20px;

  /* shared shape aliases */
  --v6-card-radius:var(--st-cardradius,18px);
  --v6-shadow:var(--st-shadow,none);
}

/* SOURCE: public/css/p2/90-grooming-process-balance.css */
/* =========================================================
   PHASE 2 — GROOMING PROCESS DESKTOP BALANCE FIX

   Keeps the alternate section background full-width, but constrains the
   actual content to the administrator-selected home scale. This replaces
   V23.13's hard-coded full-viewport card sizing with Design System tokens.
   ========================================================= */
@media(min-width:1100px){
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-top:var(--v6-section-y)!important;
    padding-bottom:var(--v6-section-y)!important;
    padding-left:max(var(--v6-page-gutter),calc((100vw - var(--v6-container-home))/2))!important;
    padding-right:max(var(--v6-page-gutter),calc((100vw - var(--v6-container-home))/2))!important;
    border-radius:0!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide>.section-head{
    width:100%!important;
    max-width:var(--v6-container-home)!important;
    margin:0 auto calc(var(--v6-section-y) * .52)!important;
    align-items:flex-start!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .kicker{
    font-size:11px!important;
    letter-spacing:.18em!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide h2{
    max-width:560px!important;
    margin:14px 0 0!important;
    font-size:clamp(38px,3.8vw,var(--v6-section-title-max))!important;
    line-height:1.04!important;
    letter-spacing:-.05em!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-process{
    width:100%!important;
    max-width:var(--v6-container-home)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:var(--v6-process-gap)!important;
    overflow:visible!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step{
    min-width:0!important;
    min-height:var(--v6-process-card-min)!important;
    padding:var(--v6-process-card-py) var(--v6-process-card-px)!important;
    border-radius:var(--v6-process-card-radius)!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step .n{
    font-size:var(--v6-process-number-size)!important;
    line-height:1!important;
    letter-spacing:.10em!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step h3{
    margin:var(--v6-process-title-gap) 0 10px!important;
    font-size:var(--v6-process-title-size)!important;
    line-height:1.35!important;
  }

  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step p{
    font-size:var(--v6-process-body-size)!important;
    line-height:1.72!important;
    word-break:keep-all!important;
  }
}

/* SOURCE: public/css/p3/00-theme-engine-v2.css */
/* =========================================================
   PHASE 3 — THEME ENGINE 2
   Independent Layout / Palette / Density / Card / Image / Motion.
   Loaded after Phase 2 so palette tokens win over legacy layout palettes.
   ========================================================= */

/* Preserve the original four layout-specific looks as selectable palettes. */
html[data-site-theme="impact-champagne"]{
  --st-bg:#11100f;--st-surface:#171513;--st-soft:#211d19;--st-line:#3d342b;
  --st-ink:#f8f1e7;--st-muted:#b9aa99;--st-accent:#c7a46c;--st-accent2:#e0c99f;
  --st-dark:#090909;--st-darktext:#fff8ed;--st-herocopy:#0b0a09;--st-herotext:#fff8ed;--st-heromuted:#d3c5b4;
  --st-stage:#211d19;--st-radius:4px;--st-cardradius:4px;--st-shadow:none;
  --st-display:system-ui,-apple-system,"Pretendard","Noto Sans KR",sans-serif;
  --phase3-accent-text:#15110d;--ui-accent-text:#15110d;
}
html[data-site-theme="editorial-warm"]{
  --st-bg:#f7f3ee;--st-surface:#fbf9f6;--st-soft:#eee6de;--st-line:#d9cec3;
  --st-ink:#302b28;--st-muted:#716760;--st-accent:#a48671;--st-accent2:#c5aa94;
  --st-dark:#332d29;--st-darktext:#fff;--st-herocopy:#f8f4ef;--st-herotext:#302b28;--st-heromuted:#756b65;
  --st-stage:#e8dfd6;--st-radius:0px;--st-cardradius:0px;--st-shadow:none;
  --st-display:Georgia,"Noto Serif KR",serif;
  --phase3-accent-text:#302b28;--ui-accent-text:#302b28;
}
html[data-site-theme="minimal-clean"]{
  --st-bg:#fff;--st-surface:#fff;--st-soft:#f8f6f4;--st-line:#ece8e5;
  --st-ink:#24211f;--st-muted:#6f6863;--st-accent:#c7a39c;--st-accent2:#ddc3bc;
  --st-dark:#24211f;--st-darktext:#fff;--st-herocopy:#fff;--st-herotext:#24211f;--st-heromuted:#756f6a;
  --st-stage:#f3efec;--st-radius:26px;--st-cardradius:18px;--st-shadow:0 16px 48px rgba(31,27,25,.045);
  --st-display:system-ui,-apple-system,"Pretendard","Noto Sans KR",sans-serif;
  --phase3-accent-text:#24211f;--ui-accent-text:#24211f;
}
html[data-site-theme="cat-pink"]{
  --st-bg:#fffaf7;--st-surface:#fff;--st-soft:#fff0ec;--st-line:#efd9d4;
  --st-ink:#5b4039;--st-muted:#775d57;--st-accent:#d77f86;--st-accent2:#e7a99b;
  --st-dark:#6a4941;--st-darktext:#fffaf7;--st-herocopy:#fff2ee;--st-herotext:#573d37;--st-heromuted:#7c625c;
  --st-stage:#f5dfd8;--st-radius:30px;--st-cardradius:22px;--st-shadow:0 16px 44px rgba(108,67,58,.07);
  --st-display:system-ui,-apple-system,"Pretendard","Noto Sans KR",sans-serif;
  --phase3-accent-text:#3d2925;--ui-accent-text:#3d2925;
}

/* Palette is the color authority. Legacy layout CSS may still set --ui-* earlier,
   but Phase 3 rebinds semantic UI tokens to the selected palette here. */
html[data-view-mode="public"][data-site-palette]{
  --ui-bg:var(--st-bg)!important;
  --ui-surface:var(--st-surface)!important;
  --ui-soft:var(--st-soft)!important;
  --ui-line:var(--st-line)!important;
  --ui-text:var(--st-ink)!important;
  --ui-muted:var(--st-muted)!important;
  --ui-accent:var(--st-accent)!important;
  --ui-accent2:var(--st-accent2)!important;
  --ui-dark:var(--st-dark)!important;
  --ui-dark-text:var(--st-darktext)!important;
  --ui-hero:var(--st-herocopy)!important;
  --ui-hero-text:var(--st-herotext)!important;
  --ui-hero-muted:var(--st-heromuted)!important;
  --ui-radius:var(--st-radius)!important;
  --ui-card-radius:var(--st-cardradius)!important;
  --ui-shadow:var(--st-shadow)!important;
  color-scheme:light!important;
}
html[data-view-mode="public"][data-site-palette="midnight-purple"],
html[data-view-mode="public"][data-site-palette="impact-champagne"]{color-scheme:dark!important}

/* Global image-style axis. It changes presentation only; content and aspect ratios remain intact. */
html[data-view-mode="public"][data-image-style="soft"] #app :where(.salon-main-photo,.case-card img,.salon-map img,.map-card img,.salon-compare img,.public-care-card img){border-radius:14px!important}
html[data-view-mode="public"][data-image-style="rounded"] #app :where(.salon-main-photo,.case-card img,.salon-map img,.map-card img,.salon-compare img,.public-care-card img){border-radius:26px!important}
html[data-view-mode="public"][data-image-style="editorial"] #app :where(.salon-main-photo,.case-card img,.salon-map img,.map-card img,.salon-compare img,.public-care-card img){border-radius:0!important}

/* Global motion axis. Reduced-motion OS preference still has the final say in mobile CSS. */
html[data-view-mode="public"][data-site-motion="subtle"] #app :where(.reveal,.case-card,.btn,.salon-main-photo,.signature-preview img){transition-duration:.16s!important;animation-duration:.22s!important}
html[data-view-mode="public"][data-site-motion="off"] #app *,
html[data-view-mode="public"][data-site-motion="off"] #app *::before,
html[data-view-mode="public"][data-site-motion="off"] #app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* Admin Theme Engine 2 helpers. */
.phase3-axis-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.phase3-axis-status span{display:inline-flex;gap:7px;align-items:center;padding:8px 11px;border:1px solid #e5ddd8;border-radius:999px;background:#faf8f6;font-size:10px;letter-spacing:.08em;color:#81746f}
.phase3-axis-status b{font-size:11px;color:#403733;letter-spacing:0}
.phase3-classic-preview{display:grid!important;grid-template-columns:42% 58%;background:#f8f3f0!important}
.phase3-classic-copy{background:linear-gradient(180deg,#f8f3f0,#fff);position:relative}
.phase3-classic-copy:before{content:"";position:absolute;left:12%;top:22%;width:58%;height:8px;background:#2d2927;box-shadow:0 18px 0 rgba(45,41,39,.24),0 32px 0 rgba(45,41,39,.14)}
.phase3-classic-photo{background:linear-gradient(145deg,#eadbd5,#b27677)}
.phase3-control-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1050px){.phase3-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.phase3-control-grid{grid-template-columns:1fr}}

/* =========================================================
   Layout chroma neutralization
   Structural layout CSS remains intact, but palette owns color.
   ========================================================= */

/* Fullscreen Impact */
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-home{background:var(--ui-bg)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-sidebar,
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-portfolio,
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-standard,
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-footer,
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-page-hero{background:var(--ui-dark)!important;border-color:var(--ui-line)!important;color:var(--ui-dark-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-services{background:var(--ui-soft)!important;color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-contact{background:var(--ui-accent)!important;color:var(--ui-accent-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app :where(.impact-brand,.impact-nav button,.impact-service-list,.impact-service-list button,.impact-standard-grid,.impact-standard-grid article,.impact-footer,.impact-page-hero){border-color:var(--ui-line)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app :where(.impact-overline,.impact-nav button small,.impact-section-label span,.impact-section-head span,.impact-standard-title>span,.impact-contact>div>span,.impact-service-list em,.impact-service-list i,.impact-standard-grid span,.impact-page-line){color:var(--ui-accent)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app :where(.impact-section-label b,.impact-service-list b,.impact-services h1,.impact-services h2,.impact-services h3){color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app :where(.impact-section-label p,.impact-service-list small){color:var(--ui-muted)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app :where(.impact-section-head h2,.impact-standard-title h2,.impact-standard-grid b,.impact-footer b,.impact-page-hero h1){color:var(--ui-dark-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app :where(.impact-standard-grid p,.impact-footer span,.impact-footer div,.impact-page-hero p){color:color-mix(in srgb,var(--ui-dark-text) 68%,transparent)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-contact :where(h1,h2,h3,p){color:var(--ui-accent-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-contact .btn{background:var(--ui-dark)!important;border-color:var(--ui-dark)!important;color:var(--ui-dark-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .impact-contact .btn.secondary{background:transparent!important;border-color:color-mix(in srgb,var(--ui-accent-text) 45%,transparent)!important;color:var(--ui-accent-text)!important}
html[data-view-mode="public"][data-public-layout="fullscreen-impact"] #app .appointment-band .btn{background:var(--ui-dark)!important;border-color:var(--ui-dark)!important;color:var(--ui-dark-text)!important}

/* Editorial Magazine */
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app :where(.editorial-header,.editorial-home,.editorial-cover,.editorial-spread,.editorial-works,.editorial-standard,.editorial-book,.editorial-page-hero){background:var(--ui-bg)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app :where(.editorial-nav,.editorial-nav button,.editorial-cover-photo,.editorial-philosophy,.editorial-copy-block,.editorial-mini-services,.editorial-mini-services button,.editorial-works-grid,.editorial-standard-grid article,.editorial-page-kicker,.editorial-page-desc){border-color:var(--ui-line)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app .editorial-works-grid{background:var(--ui-line)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app .editorial-works-grid article{background:var(--ui-surface)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app .editorial-footer{background:var(--ui-soft)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app :where(.editorial-brand,.editorial-cover-copy h1,.editorial-cover-note p,.editorial-copy-block h2,.editorial-menu-block h2,.editorial-mini-services b,.editorial-works-title h2,.editorial-works-grid span,.editorial-standard h2,.editorial-standard-grid b,.editorial-book h2,.editorial-page-title h1,.editorial-footer>div,.editorial-footer button){color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app :where(.editorial-issue,.editorial-cover-copy p,.editorial-cover-note span,.editorial-copy-block p,.editorial-standard-grid p,.editorial-page-desc p,.editorial-footer-brand small){color:var(--ui-muted)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app :where(.editorial-cover-copy>small,.editorial-copy-block>small,.editorial-menu-block>small,.editorial-works-title>small,.editorial-standard>div>small,.editorial-book small,.editorial-mini-services span,.editorial-standard-grid span,.editorial-page-kicker,.editorial-page-desc span){color:var(--ui-accent)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app .editorial-nav button{color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app .editorial-nav button.active,
html[data-view-mode="public"][data-public-layout="editorial-magazine"] #app .editorial-nav button:hover{background:var(--ui-soft)!important;color:var(--ui-text)!important}

/* Minimal Premium */
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app :where(.minimal-header,.minimal-home,.minimal-footer){background:var(--ui-bg)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app :where(.minimal-hero,.minimal-services,.minimal-process,.minimal-portfolio,.minimal-booking,.minimal-page-hero){color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app :where(.minimal-nav button,.minimal-hero-copy h1,.minimal-section-title h2,.minimal-booking h2,.minimal-page-hero h1,.minimal-footer a){color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app :where(.minimal-hero-copy p,.minimal-booking p,.minimal-page-hero p,.minimal-footer,.minimal-footer-links button){color:var(--ui-muted)!important}
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app :where(.minimal-hero-copy>span,.minimal-section-title>span,.minimal-process>div>span,.minimal-booking span,.minimal-page-hero .kicker){color:var(--ui-accent)!important}
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app .minimal-nav button.active,
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app .minimal-nav button:hover{background:var(--ui-soft)!important}
html[data-view-mode="public"][data-public-layout="minimal-premium"] #app :where(.minimal-header,.minimal-values article,.minimal-home .layout-notice,.minimal-booking,.minimal-footer){border-color:var(--ui-line)!important}

/* Cat Illustration */
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.cat-home,.cat-header,.cat-quick button,.cat-menu-cards article,.cat-care-card,.cat-review-card,.cat-portfolio,.cat-location-book>div){background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app .cat-home{background:var(--ui-bg)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.cat-menu-panel,.cat-review-card blockquote,.cat-footer,.cat-page-hero){background:var(--ui-soft)!important;border-color:var(--ui-line)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app .cat-hero{background:linear-gradient(135deg,var(--ui-soft),color-mix(in srgb,var(--ui-accent) 16%,var(--ui-surface)))!important;border-color:var(--ui-line)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.cat-brand span,.cat-nav button,.cat-hero-copy h1,.cat-quick b,.cat-menu-panel h2,.cat-care-card h2,.cat-review-card h2,.cat-portfolio h2,.cat-location-book h2,.cat-menu-cards b,.cat-review-card blockquote b,.cat-portfolio-grid b,.cat-footer-brand b,.cat-page-copy h1){color:var(--ui-text)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.cat-hero-copy p,.cat-quick small,.cat-menu-panel p,.cat-menu-cards p,.cat-care-card p,.cat-review-card p,.cat-portfolio-grid span,.cat-location-book p,.cat-footer-brand span,.cat-footer-info,.cat-footer-links button,.cat-page-copy p){color:var(--ui-muted)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.cat-nav button.active,.cat-nav button:hover){background:var(--ui-soft)!important;color:var(--ui-accent)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.cat-hero-copy>span,.cat-doodle,.cat-quick button>span,.cat-menu-panel small,.cat-middle-grid small,.cat-portfolio small,.cat-location-book small){color:var(--ui-accent)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app .cat-location-book>div:last-child{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 78%,var(--ui-surface)),var(--ui-accent))!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app .cat-location-book>div:last-child h2{color:var(--ui-accent-text)!important}
html[data-view-mode="public"][data-public-layout="cat-illustration"] #app :where(.member-badge,.review-cat-chip,.badge,.status,.care-chip,.filter,.review-page-btn){background:var(--ui-soft)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}

/* SOURCE: public/css/p3/90-regression-fixes.css */
/* =========================================================
   PHASE 3 — APPROVED VISUAL REGRESSION FIXES
   These rules lock user-approved visuals that must not regress again.
   ========================================================= */

/* Home > VISIT SALON / 예뻐지냥 오시는 길
   User-approved state: no visible outer border around either column.
   Internal ADDRESS / PHONE / OPEN divider lines remain intact. */
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location>.salon-map,
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location>.salon-location-info{
  border:0!important;
  box-shadow:none!important;
}

/* SOURCE: public/css/p4/00-section-variant-engine.css */
/* =========================================================
   PHASE 4 — HOME SECTION / VARIANT ENGINE
   Classic V6 only. Content and business logic are untouched.
   ========================================================= */
html[data-view-mode="public"]{
  --p4-home-section-y:74px;
  --p4-home-section-gap:40px;
  --p4-home-promise-y:58px;
  --p4-home-menu-head-gap:34px;
}
html[data-view-mode="public"][data-design-density="compact"]{
  --p4-home-section-y:56px;
  --p4-home-section-gap:26px;
  --p4-home-promise-y:48px;
  --p4-home-menu-head-gap:28px;
}
html[data-view-mode="public"][data-design-density="balanced"]{
  --p4-home-section-y:64px;
  --p4-home-section-gap:32px;
  --p4-home-promise-y:52px;
  --p4-home-menu-head-gap:30px;
}
html[data-view-mode="public"][data-design-density="spacious"]{
  --p4-home-section-y:74px;
  --p4-home-section-gap:40px;
  --p4-home-promise-y:58px;
  --p4-home-menu-head-gap:34px;
}
html[data-view-mode="public"][data-design-density="showcase"]{
  --p4-home-section-y:84px;
  --p4-home-section-gap:48px;
  --p4-home-promise-y:66px;
  --p4-home-menu-head-gap:40px;
}

/* Fix the excessive vertical whitespace reported after Phase 3.
   The menu and standard blocks now follow the selected density. */
@media(min-width:721px){
 html[data-view-mode="public"][data-public-layout="classic"] #app main>.salon-menu-section{
   padding-top:var(--p4-home-section-y)!important;
   padding-bottom:var(--p4-home-section-y)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"] #app .salon-menu-head{
   margin-bottom:var(--p4-home-menu-head-gap)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"] #app main>.salon-promise{
   margin:var(--p4-home-section-gap) auto!important;
   padding-top:var(--p4-home-promise-y)!important;
   padding-bottom:var(--p4-home-promise-y)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"] #app main>.salon-gallery{
   padding-top:var(--p4-home-section-y)!important;
   padding-bottom:var(--p4-home-section-y)!important;
 }
}

/* HERO */
@media(min-width:901px){
 html[data-view-mode="public"][data-public-layout="classic"][data-home-hero-variant="photo-led"] #app .salon-hero{
   grid-template-columns:minmax(330px,.76fr) minmax(0,1.24fr)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-hero-variant="editorial"] #app .salon-hero{
   grid-template-columns:minmax(380px,.92fr) minmax(0,1.08fr)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-hero-variant="editorial"] #app .salon-hero-copy{
   padding-left:clamp(28px,5vw,78px)!important;padding-right:clamp(28px,5vw,70px)!important;
 }
}

/* SERVICES */
html[data-view-mode="public"][data-public-layout="classic"][data-home-services-variant="compact"] #app .salon-menu-row{
  padding-top:14px!important;padding-bottom:14px!important;
}
html[data-view-mode="public"][data-public-layout="classic"][data-home-services-variant="compact"] #app .salon-menu-head{
  margin-bottom:24px!important;
}
@media(min-width:821px){
 html[data-view-mode="public"][data-public-layout="classic"][data-home-services-variant="cards"] #app .salon-menu{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
   border:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-services-variant="cards"] #app .salon-menu-row{
   display:grid!important;grid-template-columns:42px 1fr!important;gap:10px 14px!important;
   align-items:start!important;padding:24px!important;border:1px solid var(--ui-line)!important;
   border-radius:var(--ui-card-radius)!important;background:var(--ui-surface)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-services-variant="cards"] #app .salon-menu-row p,
 html[data-view-mode="public"][data-public-layout="classic"][data-home-services-variant="cards"] #app .salon-menu-row .tag{grid-column:2!important;text-align:left!important}
}

/* PORTFOLIO */
@media(min-width:821px){
 html[data-view-mode="public"][data-public-layout="classic"][data-home-portfolio-variant="equal-grid"] #app .salon-gallery-grid{
   grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-portfolio-variant="equal-grid"] #app .salon-feature,
 html[data-view-mode="public"][data-public-layout="classic"][data-home-portfolio-variant="equal-grid"] #app .salon-stack-card{
   height:320px!important;min-height:320px!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-portfolio-variant="equal-grid"] #app .salon-stack{display:contents!important}
 html[data-view-mode="public"][data-public-layout="classic"][data-home-portfolio-variant="editorial"] #app .salon-gallery-grid{
   grid-template-columns:1.35fr .65fr!important;gap:22px!important;
 }
}

/* BEFORE & AFTER */
@media(min-width:821px){
 html[data-view-mode="public"][data-public-layout="classic"][data-home-compare-variant="image-first"] #app .salon-compare>.salon-compare-copy{order:2}
 html[data-view-mode="public"][data-public-layout="classic"][data-home-compare-variant="image-first"] #app .salon-compare>.compare,
 html[data-view-mode="public"][data-public-layout="classic"][data-home-compare-variant="image-first"] #app .salon-compare>.home-compare-empty{order:1}
}
html[data-view-mode="public"][data-public-layout="classic"][data-home-compare-variant="compact"] #app .home-compare-section{
  padding-top:calc(var(--home-lower-py) * .72)!important;padding-bottom:calc(var(--home-lower-py) * .72)!important;
}
html[data-view-mode="public"][data-public-layout="classic"][data-home-compare-variant="compact"] #app .salon-compare{gap:26px!important}

/* PROCESS */
html[data-view-mode="public"][data-public-layout="classic"][data-home-process-variant="compact"] #app .home-process-wide .salon-step{
  min-height:170px!important;padding:16px 15px!important;
}
html[data-view-mode="public"][data-public-layout="classic"][data-home-process-variant="compact"] #app .home-process-wide .salon-step h3{margin-top:20px!important}
@media(min-width:901px){
 html[data-view-mode="public"][data-public-layout="classic"][data-home-process-variant="timeline"] #app .home-process-wide .salon-process{
   gap:0!important;border-top:1px solid var(--ui-line)!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-process-variant="timeline"] #app .home-process-wide .salon-step{
   min-height:190px!important;border:0!important;border-radius:0!important;border-right:1px solid var(--ui-line)!important;background:transparent!important;box-shadow:none!important;
 }
 html[data-view-mode="public"][data-public-layout="classic"][data-home-process-variant="timeline"] #app .home-process-wide .salon-step:last-child{border-right:0!important}
}

/* CTA */
html[data-view-mode="public"][data-public-layout="classic"][data-home-cta-variant="outline"] #app .home-lower-band{
  background:var(--ui-surface)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;
}
html[data-view-mode="public"][data-public-layout="classic"][data-home-cta-variant="outline"] #app .home-lower-band p{color:var(--ui-muted)!important}
html[data-view-mode="public"][data-public-layout="classic"][data-home-cta-variant="compact"] #app .home-lower-band{
  margin-top:34px!important;margin-bottom:34px!important;padding-top:28px!important;padding-bottom:28px!important;
}

/* LOCATION */
@media(min-width:821px){
 html[data-view-mode="public"][data-public-layout="classic"][data-home-location-variant="map-wide"] #app .salon-location{grid-template-columns:1.35fr .75fr!important}
 html[data-view-mode="public"][data-public-layout="classic"][data-home-location-variant="compact"] #app .salon-location{grid-template-columns:1fr .85fr!important;gap:22px!important}
 html[data-view-mode="public"][data-public-layout="classic"][data-home-location-variant="compact"] #app .home-lower-compact:last-of-type{padding-top:48px!important;padding-bottom:48px!important}
}

/* Phase 4 Admin controls */
.phase4-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.phase4-quick-grid .field{margin:0}
.phase4-section-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.phase4-section-control{margin:0}
.phase4-variant-note{margin-top:14px;padding:11px 13px;border:1px solid #e9e1dc;border-radius:12px;background:#faf8f6;color:#766963;font-size:11px;line-height:1.6}
.phase4-axis-status{margin-top:14px}
@media(max-width:1050px){.phase4-quick-grid,.phase4-section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.phase4-quick-grid,.phase4-section-grid{grid-template-columns:1fr}}

/* SOURCE: public/css/p4/90-phase4-regression-fixes.css */
/* =========================================================
   PHASE 4 — REGRESSION LOCKS
   Previously approved user-visible corrections stay protected.
   ========================================================= */

/* VISIT SALON outer frames must remain invisible. Internal info dividers remain. */
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location>.salon-map,
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location>.salon-location-info{
  border:0!important;box-shadow:none!important;outline:0!important;
}

/* Grooming Process geometry is owned by Phase 5 single-authority tokens.
   Do not constrain .home-process-wide itself here; the full-width section and
   bounded inner content are intentionally separate responsibilities. */