/* ==========================================================================
   Medspa_Theme — Detail Blocks Layouts (20)
   Two families: SERIES layouts paint per-block .dt-band; COLLAPSED layouts use
   the section ground. Both carry the full token set — a band IS a ground, so it
   obeys the GROUND RULE exactly like a section does.
   BLUSH RULE: --coral-ink 4.18:1 and --muted 4.11:1 FAIL on blush.
   ========================================================================== */
.msvc-details{position:relative;
  --d-bg:var(--white); --d-fg:var(--ink); --d-fg2:var(--body); --d-fg3:var(--muted);
  --d-line:var(--border); --d-accent:var(--coral-ink); --d-card:#fff;
  background:var(--d-bg);color:var(--d-fg2);padding-block:var(--gap);
  display:block;grid-template-columns:none}
/* Series layouts paint their own bands, each with its own padding. */
.msvc-details.is-series{padding-block:0;background:transparent}

/* One tone vocabulary, applied to BOTH the section and any band. */
.msvc-details.t-white,.dt-band.t-white{--d-bg:var(--white); --d-fg:var(--ink); --d-fg2:var(--body);
  --d-fg3:var(--muted); --d-line:var(--border); --d-accent:var(--coral-ink); --d-card:#fff}
.msvc-details.t-cream,.dt-band.t-cream{--d-bg:var(--cream); --d-fg:var(--ink); --d-fg2:var(--body);
  --d-fg3:var(--muted); --d-line:var(--border); --d-accent:var(--coral-ink); --d-card:#fff}
.msvc-details.t-sand,.dt-band.t-sand{--d-bg:var(--sand); --d-fg:var(--ink); --d-fg2:var(--body);
  --d-fg3:var(--muted); --d-line:var(--border); --d-accent:var(--coral-ink); --d-card:#fff}
.msvc-details.t-blush,.dt-band.t-blush{--d-bg:var(--blush); --d-fg:var(--ink); --d-fg2:var(--body);
  --d-fg3:var(--body); --d-line:var(--border); --d-accent:var(--coral-dk); --d-card:#fff}
.msvc-details.t-ink,.dt-band.t-ink{--d-bg:var(--ink); --d-fg:#fff; --d-fg2:var(--on-dark-2);
  --d-fg3:var(--on-dark-2); --d-line:var(--border-lt); --d-accent:var(--nude); --d-card:var(--dark)}

.dt-band{background:var(--d-bg);color:var(--d-fg2);padding-block:var(--gap)}
.msvc-details .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.msvc-details .msvc-eyebrow{color:var(--d-accent)}
.msvc-details h2{color:var(--d-fg)}
.msvc-details h3{color:var(--d-fg);font-size:1rem;font-weight:700;margin:0 0 8px;line-height:1.35}
.msvc-details .dt-h2{margin-top:10px}
.msvc-details .dt-d{color:var(--d-fg2);font-size:.9rem;line-height:1.7;margin:16px 0 0}
.msvc-details .dt-checks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.msvc-details .dt-checks li{display:flex;gap:10px;font-size:.85rem;color:var(--d-fg2);line-height:1.5}
.msvc-details .dt-checks li span{color:var(--d-accent);font-weight:700;flex:none}
.msvc-details .ph{display:grid;place-items:center;background:var(--sand);color:var(--muted);
  border-radius:var(--rl);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.msvc-details .ph.dk{background:var(--dark);color:var(--on-dark-2)}
.msvc-details img{border-radius:var(--rl);display:block}
.dt-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.dt-two.rev>:first-child{order:2}

/* 2 · full-bleed image half
   Keep the band edge-to-edge without allowing the image, intrinsic media width,
   or grid min-content sizing to extend beyond the viewport. */
.msvc-details.dt-2,.msvc-details.dt-2 .dt-band,.msvc-details.dt-2 .dt2-g{
  width:100%;max-width:100%}
.msvc-details.dt-2,.msvc-details.dt-2 .dt-band{overflow:hidden}
.dt2-b{padding-block:0}
.dt2-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;min-width:0;max-width:100%}
.dt2-g.rev .dt2-i{order:2}
.dt2-i,.dt2-t{min-width:0;max-width:100%;box-sizing:border-box}
.dt2-i{position:relative;overflow:hidden;min-height:clamp(340px,24vw,620px)}
.dt2-i img,.dt2-i .ph{position:absolute;inset:0;display:block;border-radius:0;
  width:100%;max-width:100%;height:100%;min-height:0;aspect-ratio:auto!important;
  object-fit:cover;object-position:center center}
.dt2-t{padding:clamp(30px,5vw,72px);overflow-wrap:anywhere}
/* 3 · offset coral frame */
.dt3-f{position:relative}
.dt3-f::before{content:'';position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--coral-btn);
  border-radius:var(--rl);z-index:0}
.dt3-f img,.dt3-f .ph{position:relative;z-index:1}
/* 5 · stacked 3-up */
.dt5-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.dt5-c .b{padding-top:18px}
/* 6 · text-only checklist */
.dt6-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(26px,4vw,52px)}
/* 7 · card grid */
.dt7-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.dt7-c{--d-fg:var(--ink); --d-fg2:var(--body); --d-fg3:var(--muted); --d-accent:var(--coral-ink);
  background:#fff;border:1px solid var(--border);border-radius:var(--rl);padding:26px}
/* 8 · accordion */
.dt8-w{border-top:1px solid var(--d-line);max-width:900px;margin-inline:auto}
.dt8-i{border-bottom:1px solid var(--d-line)}
.dt8-i summary{cursor:pointer;padding:20px 0;list-style:none;display:flex;flex-direction:column;gap:5px}
.dt8-i summary::-webkit-details-marker{display:none}
.dt8-i summary::after{content:'+';position:absolute;right:0;color:var(--d-accent);font-size:1.3rem;line-height:1}
.dt8-i{position:relative}
.dt8-i[open] summary::after{content:'–'}
.dt8-i .e{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--d-accent)}
.dt8-i .t{font-size:1rem;font-weight:700;color:var(--d-fg)}
.dt8-i .b{padding-bottom:22px;max-width:72ch}
.dt8-i .b .dt-d{margin-top:0}
/* 9 · tabs */
.dt9-w{max-width:960px;margin-inline:auto}
.dt9-tl{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--d-line);margin-bottom:26px}
.dt9-tl button{--d-fg3:var(--d-fg3);
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:12px 18px;font:inherit;font-size:.86rem;font-weight:700;color:var(--d-fg3);
  cursor:pointer;transition:color .18s,border-color .18s}
.dt9-tl button:hover{color:var(--d-fg)}
.dt9-tl button[aria-selected="true"]{color:var(--d-accent);border-bottom-color:var(--d-accent)}
.dt9-tl button:focus-visible{outline:2px solid var(--d-accent);outline-offset:2px}
.dt9-pn [role="tabpanel"]:focus-visible{outline:2px solid var(--d-accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.dt9-tl button{transition:none}}
/* 10 · sticky image */
.dt10-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:start}
.dt10-s{position:sticky;top:96px}
.dt10-l{display:grid}
.dt10-i{padding-block:26px;border-bottom:1px solid var(--d-line)}
.dt10-i:first-child{padding-top:0}
.dt10-i:last-child{border-bottom:0}
/* 11 · numbered */
.dt11-i{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.dt11-i .n{font-family:var(--fd);font-size:3rem;line-height:1;color:var(--d-accent);opacity:.5}
/* 12 · arch */
.dt12-a img,.dt12-a .ph{border-radius:999px 999px var(--rl) var(--rl)}
/* 13 · overlapping card */
.dt13-g{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:center}
.dt13-g.rev .dt13-i{order:2}
.dt13-c{--d-fg:var(--ink); --d-fg2:var(--body); --d-fg3:var(--muted); --d-accent:var(--coral-ink);
  background:#fff;border-radius:var(--rl);padding:clamp(24px,3vw,40px);
  margin-left:-42px;box-shadow:0 22px 60px rgba(0,0,0,.12);position:relative;z-index:2}
.dt13-g.rev .dt13-c{margin-left:0;margin-right:-42px}
/* 14 · three-column checklist */
.dt14-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px)}
.dt14-c{padding-top:18px;border-top:2px solid var(--d-accent)}
/* 15 · price-led */
.dt15-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.dt15-c{--d-fg:var(--ink); --d-fg2:var(--body); --d-fg3:var(--muted); --d-accent:var(--coral-ink);
  background:#fff;border:1px solid var(--border);border-radius:var(--rl);padding:26px}
.dt15-c .p{font-family:var(--fd);font-size:2rem;line-height:1;
  color:var(--d-accent);margin-bottom:14px}
/* 16 · magazine */
.dt16-i{max-width:860px;margin-inline:auto}
.dt16-i + .dt16-i{margin-top:clamp(30px,4vw,54px);padding-top:clamp(30px,4vw,54px);border-top:1px solid var(--d-line)}
.dt16-c{column-count:2;column-gap:44px;margin-top:16px}
.dt16-c .dt-d{margin-top:0}
.dt16-c .dt-d::first-letter{float:left;font-family:var(--fd);font-size:3.2em;
  line-height:.82;padding:5px 9px 0 0;color:var(--d-accent)}
.dt16-c .dt-checks{break-inside:avoid}
/* 17 · notched frame */
.dt17-fr{--d-fg:var(--ink); --d-fg2:var(--body); --d-fg3:var(--muted); --d-accent:var(--coral-ink);
  --d-line:var(--border);
  background:#fff;border:1px solid var(--ink);padding:clamp(26px,4vw,52px);
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px))}
.dt17-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3vw,42px)}
/* 18 · two-tone split */
.dt18-g{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.dt18-g.rev .dt18-i{order:-1}
.dt18-p{--d-fg:#fff; --d-fg2:var(--on-dark-2); --d-fg3:var(--on-dark-2); --d-accent:var(--nude);
  background:var(--ink);border-radius:var(--rl);padding:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center}
.dt18-i img,.dt18-i .ph{height:100%;object-fit:cover}
/* 19 · zigzag compact */
.dt19-w{display:grid;gap:clamp(24px,3vw,42px)}
.dt19-r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:center}
.dt19-r.rev .dt19-i{order:2}
/* 20 · blush block — the band is t-blush, tokens already remapped above */

@media(max-width:900px){
  .dt-two,.dt2-g,.dt10-g,.dt13-g,.dt18-g,.dt19-r{grid-template-columns:1fr}
  .dt2-g{width:100%;max-width:100%;overflow:hidden}
  .dt2-i{width:100%;max-width:100%;min-height:clamp(260px,70vw,480px)}
  .dt-two.rev>:first-child,.dt2-g.rev .dt2-i,.dt13-g.rev .dt13-i,
  .dt18-g.rev .dt18-i,.dt19-r.rev .dt19-i{order:0}
  .dt13-c,.dt13-g.rev .dt13-c{margin:-30px 16px 0}
  .dt16-c{column-count:1}
  .dt10-s{position:static}
  .dt11-i{grid-template-columns:1fr}
  .dt3-f::before{inset:12px -12px -12px 12px}
}