/* V23.12 — restore 125% visual balance + administrator-controlled scale/card design */
html[data-view-mode="public"]{
  --home-lower-max:1320px;--home-lower-py:78px;--home-lower-title-max:56px;--home-compare-gap:48px;
  --home-quote-size:20px;--home-lead-size:15.5px;--home-process-gap:14px;--home-step-min:235px;
  --home-step-py:24px;--home-step-px:22px;--home-step-n:32px;--home-step-title:20px;--home-step-body:14.5px;
  --home-step-title-gap:38px;--home-band-max:1320px;--home-band-my:64px;--home-band-py:48px;--home-band-px:45px;
  --home-band-title-max:54px;--home-location-gap:36px;
}
html[data-view-mode="public"][data-home-scale="100"]{
  --home-lower-max:1120px;--home-lower-py:62px;--home-lower-title-max:46px;--home-compare-gap:38px;
  --home-quote-size:17px;--home-lead-size:14px;--home-process-gap:9px;--home-step-min:188px;
  --home-step-py:19px;--home-step-px:16px;--home-step-n:26px;--home-step-title:17px;--home-step-body:12px;
  --home-step-title-gap:30px;--home-band-max:1120px;--home-band-my:52px;--home-band-py:38px;--home-band-px:36px;
  --home-band-title-max:44px;--home-location-gap:30px;
}
html[data-view-mode="public"][data-home-scale="110"]{
  --home-lower-max:1230px;--home-lower-py:69px;--home-lower-title-max:51px;--home-compare-gap:42px;
  --home-quote-size:18.5px;--home-lead-size:15px;--home-process-gap:12px;--home-step-min:212px;
  --home-step-py:22px;--home-step-px:19px;--home-step-n:29px;--home-step-title:18.5px;--home-step-body:13.3px;
  --home-step-title-gap:34px;--home-band-max:1230px;--home-band-my:58px;--home-band-py:43px;--home-band-px:40px;
  --home-band-title-max:49px;--home-location-gap:33px;
}
html[data-view-mode="public"][data-home-scale="135"]{
  --home-lower-max:1400px;--home-lower-py:84px;--home-lower-title-max:61px;--home-compare-gap:53px;
  --home-quote-size:22px;--home-lead-size:17px;--home-process-gap:16px;--home-step-min:255px;
  --home-step-py:27px;--home-step-px:24px;--home-step-n:35px;--home-step-title:22px;--home-step-body:15.5px;
  --home-step-title-gap:42px;--home-band-max:1400px;--home-band-my:70px;--home-band-py:53px;--home-band-px:50px;
  --home-band-title-max:59px;--home-location-gap:40px;
}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact{
  width:min(var(--home-lower-max),calc(100% - 36px))!important;
  padding-top:var(--home-lower-py)!important;padding-bottom:var(--home-lower-py)!important;
}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact>.section-head{width:100%!important;margin-bottom:calc(var(--home-lower-py) * .52)!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact h2{font-size:clamp(34px,4.35vw,var(--home-lower-title-max))!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-compare{gap:var(--home-compare-gap)!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-quote{font-size:var(--home-quote-size)!important;margin:26px 0!important;line-height:1.78!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .lead{font-size:var(--home-lead-size)!important;line-height:1.9!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-process{width:100%!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:var(--home-process-gap)!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-step{min-height:var(--home-step-min)!important;padding:var(--home-step-py) var(--home-step-px)!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-step .n{font-size:var(--home-step-n)!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-step h3{margin-top:var(--home-step-title-gap)!important;font-size:var(--home-step-title)!important;line-height:1.35!important;word-break:keep-all}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-step p{font-size:var(--home-step-body)!important;line-height:1.72!important;word-break:keep-all}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-band{
  width:min(var(--home-band-max),calc(100% - 36px))!important;margin:var(--home-band-my) auto!important;
  padding:var(--home-band-py) var(--home-band-px)!important;
}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-band h3{font-size:clamp(34px,4.15vw,var(--home-band-title-max))!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location{gap:var(--home-location-gap)!important}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location-info{padding:16px 0!important}

/* V23.13 — Grooming Process wide-layout correction
   The five process cards now use the real desktop viewport width instead of being
   trapped inside the lower-section max-width. This intentionally matches the
   user-approved wide reference composition even when browser zoom is reduced. */
@media(min-width:1100px){
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide{
    width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
    padding:18px 40px 24px!important;border-radius:0!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide>.section-head{
    width:100%!important;margin:0 0 58px!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(52px,4.6vw,66px)!important;
    line-height:1.02!important;letter-spacing:-.055em!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-process{
    width:100%!important;max-width:none!important;display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!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:326px!important;padding:34px 28px!important;border-radius:22px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step .n{
    font-size:38px!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:56px 0 14px!important;font-size:22px!important;line-height:1.35!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step p{
    font-size:16px!important;line-height:1.82!important;word-break:keep-all!important;
  }
}

/* administrator-selectable public card language */
html[data-view-mode="public"][data-card-style="soft"] #app :where(.salon-step,.case-card,.care-card,.price-card,.panel,.review,.my-data-card,.my-list-row,.crew-info-board-row){border-radius:20px!important;box-shadow:none!important}
html[data-view-mode="public"][data-card-style="line"] #app :where(.salon-step,.case-card,.care-card,.price-card,.panel,.review,.my-data-card,.my-list-row,.crew-info-board-row){border-radius:9px!important;box-shadow:none!important;background:var(--ui-surface)!important}
html[data-view-mode="public"][data-card-style="floating"] #app :where(.salon-step,.case-card,.care-card,.price-card,.panel,.review,.my-data-card,.my-list-row,.crew-info-board-row){border-radius:24px!important;box-shadow:0 16px 42px color-mix(in srgb,var(--ui-text) 10%,transparent)!important;border-color:color-mix(in srgb,var(--ui-line) 72%,transparent)!important}
html[data-view-mode="public"][data-card-style="minimal"] #app :where(.salon-step,.case-card,.care-card,.price-card,.panel,.review,.my-data-card,.my-list-row,.crew-info-board-row){border-radius:0!important;box-shadow:none!important;background:transparent!important;border-left:0!important;border-right:0!important}

/* Design control preview */
.design-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.design-system-preview{margin:18px 0;padding:22px;border:1px solid #e6ded9;border-radius:18px;background:#f7f4f1;transition:.2s}.dsp-title small{display:block;font-size:9px;letter-spacing:.16em;color:#8c756a}.dsp-title b{display:block;margin-top:6px;font-size:21px}.dsp-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.dsp-cards span{display:grid;place-items:center;min-height:70px;background:#fff;border:1px solid #e2d9d4;border-radius:14px;font-weight:800;color:#6f584e;transition:.2s}.design-system-preview[data-preview-scale="100"]{font-size:12px;max-width:660px}.design-system-preview[data-preview-scale="110"]{font-size:13px;max-width:720px}.design-system-preview[data-preview-scale="125"]{font-size:14px;max-width:820px}.design-system-preview[data-preview-scale="135"]{font-size:15px;max-width:900px}.design-system-preview[data-preview-card="line"] .dsp-cards span{border-radius:6px;box-shadow:none}.design-system-preview[data-preview-card="floating"] .dsp-cards span{border-radius:18px;box-shadow:0 10px 24px rgba(65,45,37,.10)}.design-system-preview[data-preview-card="minimal"] .dsp-cards span{border-radius:0;background:transparent;border-left:0;border-right:0;border-top:1px solid #cabcb4}

@media(max-width:900px){.design-control-grid{grid-template-columns:1fr}}
@media(max-width:720px){
 html[data-view-mode="public"]{--home-lower-py:58px;--home-lower-title-max:45px;--home-quote-size:18px;--home-lead-size:15px;--home-step-min:205px;--home-step-n:29px;--home-step-title:18px;--home-step-body:13.5px;--home-step-title-gap:32px;--home-band-my:46px;--home-band-py:34px;--home-band-px:24px;--home-band-title-max:44px;--home-location-gap:24px}
 html[data-public-layout="classic"] #app .home-lower-compact{width:calc(100% - 20px)!important;padding-left:18px!important;padding-right:18px!important}
 html[data-public-layout="classic"] #app .home-lower-compact .salon-process{display:flex!important;overflow-x:auto!important;grid-template-columns:none!important;gap:12px!important;padding-bottom:6px!important}
 html[data-public-layout="classic"] #app .home-lower-compact .salon-step{flex:0 0 min(78vw,300px)!important;scroll-snap-align:start}
 html[data-public-layout="classic"] #app .home-lower-band{width:calc(100% - 20px)!important}
 .dsp-cards{grid-template-columns:repeat(5,70px);overflow-x:auto}.design-system-preview{padding:16px}
}



/* CATNARA_HF21_9_26_ABOUT_INSPECTION: About page spacing + inspection item */
main .about-primary-section{
  padding-top:28px!important;
}
.timeline-item.inspection-item{
  grid-template-columns:112px minmax(0,1fr);
}
.timeline-num.inspection{
  width:auto!important;
  min-width:104px;
  padding:0 14px;
  border-radius:999px!important;
  white-space:nowrap;
  font-size:13px;
}
.about-inspection-admin-label{
  margin:18px 0 8px;
  padding:10px 12px;
  border-radius:12px;
  background:#f1f5f0;
  border:1px solid #d9e2d8;
  font-weight:800;
  letter-spacing:-.02em;
}
@media(max-width:720px){
 main .about-primary-section{padding-top:20px!important}
 .timeline-item.inspection-item{grid-template-columns:96px minmax(0,1fr)}
 .timeline-num.inspection{min-width:90px;padding:0 10px;font-size:12px}
}

/* CATNARA PC Classic homepage compact rhythm, 2026-10-25 v3.
   Use the existing desktop CSS asset rather than an extra blocking file.
   Scope by Classic-specific home markup and desktop viewport only.
   This overrides Phase 4 density and Phase 5 process height !important rules.
   Never change member pages, CMS, PWA, or the other public layouts. */
@media (min-width:821px) {
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-menu-section {
    padding-top:13px!important;
    padding-bottom:9px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-menu-section .salon-menu-head {
    margin-bottom:18px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-menu-section .salon-menu+div {
    margin-top:12px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-promise {
    margin:4px auto!important;
    padding-top:15px!important;
    padding-bottom:15px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-promise .section-head {
    margin-bottom:18px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-promise .salon-promises {
    margin-top:18px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-promise .salon-promise-card {
    min-height:150px!important;
    padding:18px 20px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-promise .salon-promise-card .icon {
    margin-bottom:14px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-gallery {
    padding-top:15px!important;
    padding-bottom:15px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.salon-gallery>.section-head {
    margin-bottom:18px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-lower-compact:not(.home-process-wide) {
    padding-top:13px!important;
    padding-bottom:13px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-lower-compact>.section-head {
    margin-bottom:18px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-lower-band {
    margin-top:5px!important;
    margin-bottom:5px!important;
    padding-top:14px!important;
    padding-bottom:14px!important;
  }
}
@media (min-width:821px) and (max-width:1099px) {
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide {
    padding-top:13px!important;
    padding-bottom:13px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide .salon-step {
    min-height:172px!important;
    padding:19px 17px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide .salon-step h3 {
    margin-top:22px!important;
  }
}
@media (min-width:1100px) {
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide {
    padding-top:10px!important;
    padding-bottom:11px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide>.section-head {
    margin-bottom:24px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide .salon-step {
    min-height:210px!important;
    padding:23px 22px!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"][data-site-theme] #app main>.home-process-wide .salon-step h3 {
    margin-top:24px!important;
  }
}

/* Same Classic DOM, different layout ID (mint-breeze, emerald, etc.).
   The prior shared-template desktop section is 105px each side, promise 64px
   and booking CTA 45px. These source values are halved within this V3
   authority, not by adding a second site-wide override. */
@media(min-width:821px){
 /* PC themed homepage: tighten only the grooming menu outer gap. */
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.salon-menu-section{
  padding-top:26px!important;padding-bottom:26px!important;
 }
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.salon-gallery,
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.home-compare-section,
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.home-process-wide,
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.home-lower-compact:has(>.salon-location){
  padding-top:52.5px!important;padding-bottom:52.5px!important;
 }
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.salon-promise{
  margin-top:32px!important;margin-bottom:32px!important;
  padding-top:32px!important;padding-bottom:32px!important;
 }
 html[data-view-mode="public"]:not([data-public-layout="classic"]) #app main:has(>.salon-menu-section)>.home-lower-band{
  margin-top:10px!important;margin-bottom:10px!important;
  padding-top:22.5px!important;padding-bottom:22.5px!important;
 }
}

/* CATNARA_BOOKING_TEMPLATE_CONTRAST_V6: both the booking heading and
   phone/hours must be readable on the actual CTA paint, not the page body.
   White-first for classic gradient CTA, browser contrast resolves light variants.
   Desktop public homepage only: PWA, CMS, members and booking buttons untouched. */
@media (min-width:821px) {
 html[data-view-mode="public"] #app main>.appointment-band.home-lower-band>div>h3,
 html[data-view-mode="public"] #app main>.appointment-band.home-lower-band>div>p {
  color:#fff!important;
  opacity:1!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.55)!important;
 }
 html[data-view-mode="public"] #app main>.appointment-band.home-lower-band>div>p {
  font-weight:700;
  line-height:1.6;
 }
 html[data-view-mode="public"][data-home-cta-variant="outline"] #app main>.appointment-band.home-lower-band>div>h3,
 html[data-view-mode="public"][data-home-cta-variant="outline"] #app main>.appointment-band.home-lower-band>div>p {
  color:var(--ui-text,#181515)!important;
  text-shadow:none!important;
 }
 html[data-view-mode="public"] #app main>.impact-contact :where(h2,.impact-contact-info>p),
 html[data-view-mode="public"] #app main>.editorial-book>div:last-child :where(h2,p),
 html[data-view-mode="public"] #app main>.minimal-booking>div:first-child :where(h2,p),
 html[data-view-mode="public"] #app main>.cat-location-book>div:first-child :where(h2,p) {
  opacity:1!important;
 }
}

/* CATNARA_PC_HEADER_DOMAIN_REMOVAL_V1, 2026-10-25.
   Default desktop header only: use the space vacated by the decorative
   domain label for the real navigation. Other layouts, PWA & admin untouched. */
@media (min-width:821px) {
 html[data-view-mode="public"] #app .public-header > .nav {
  justify-content:flex-start;
  min-width:0;
 }
 /* Approved 181 x 60 desktop-only logo. Keep original image on mobile. */
 html[data-view-mode="public"] #app .public-header > a.brand {
  flex:0 0 181px;
  width:181px;
  min-width:181px;
  padding:0;
  line-height:0;
 }
 html[data-view-mode="public"] #app .public-header > a.brand > .pc-header-logo-picture {
  display:flex;
  align-items:center;
  width:100%;
  height:60px;
 }
 html[data-view-mode="public"] #app .public-header > a.brand > .pc-header-logo-picture > img.logo-img {
  width:100%!important;
  height:auto!important;
  max-height:60px;
  object-fit:contain!important;
  object-position:left center;
 }
}
@media (min-width:821px) and (max-width:1099px) {
 html[data-view-mode="public"] #app .public-header > a.brand {
  flex-basis:clamp(128px,16vw,181px);
  width:clamp(128px,16vw,181px);
  min-width:0;
 }
}

/* The heading uses the same section gutters as the white About detail card. */
html[data-view-mode="public"] #app > main.about-page > .about-heading-section {
  padding-top:22px!important;
  padding-bottom:0!important;
}
html[data-view-mode="public"] #app > main.about-page > .about-heading-section > :is(
 .page-hero,.impact-page-hero,.editorial-page-hero,.minimal-page-hero,.cat-page-hero){
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding-top:20px!important;
  padding-bottom:20px!important;
}

html[data-view-mode="public"] #app > main.about-page > .about-heading-section
 :is(.editorial-page-kicker,.editorial-page-title,.editorial-page-desc){
  padding-top:0!important;
  padding-bottom:0!important;
}
html[data-view-mode="public"] #app > main.about-page > .about-heading-section p:last-child{
  margin-bottom:0!important;
}
html[data-view-mode="public"] #app > main.about-page .about-detail.detail-elevated{
  padding:6px!important;
  gap:8px!important;
}
html[data-view-mode="public"] #app > main.about-page .about-detail > .detail-media-padded{
  padding:4px!important;
}
html[data-view-mode="public"] #app > main.about-page .about-detail > .about-copy-panel{
  padding:16px!important;
}


/* About workflow 1–3: round number + bold title, then independent white body. */
html[data-view-mode="public"] #app > main.about-page .timeline .timeline-item.about-workflow-step{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  min-width:0;
  width:100%;
}
html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-head{
  display:flex;align-items:center;gap:14px;min-width:0;padding:0 3px;
}
html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-head .timeline-num{
  width:44px;height:44px;flex:0 0 44px;margin:0;
}
html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-title{
  display:block;min-width:0;flex:1 1 auto;
  font-size:clamp(16px,1.8vw,18px);font-weight:800;line-height:1.45;
  color:var(--ui-text,#302b29)!important;overflow-wrap:anywhere;
}
html[data-view-mode="public"] #app > main.about-page .timeline .timeline-item.about-workflow-step > .timeline-box.about-workflow-step-body{
  box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0;
  margin:0!important;padding:18px 20px!important;
  border:1px solid #e9e1df!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 2px 12px rgba(42,31,31,.035)!important;
}
html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-body > p.meta{
  margin:0!important;font-size:15px;line-height:1.8;font-weight:400;
  color:#3b3635!important;opacity:1!important;white-space:pre-wrap;overflow-wrap:anywhere;
}
@media(max-width:720px){
 html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-head{gap:12px}
 html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-head .timeline-num{width:40px;height:40px;flex-basis:40px}
 html[data-view-mode="public"] #app > main.about-page .timeline .timeline-item.about-workflow-step > .timeline-box.about-workflow-step-body{padding:15px 16px!important}
 html[data-view-mode="public"] #app > main.about-page .timeline .about-workflow-step-body > p.meta{font-size:14px;line-height:1.75}
}