/* GXMATCH-1025 Hair Bar NYC Professional G&C Color Matcher (separate module; STAGING until Beny approves).
   Locked franchise tokens: teal #0BA8CB / deep #0683A6 / deeper #02709D, purple #7359EA, pink #F898B8, ink #0A0A0A,
   Cormorant Garamond for big numbers/headings accents, Inter body, 10px cards, pill buttons, ease cubic-bezier(.2,.8,.2,1). */
#gcx .gm{--gm-teal:#0BA8CB;--gm-deep:#0683A6;--gm-deeper:#02709D;--gm-tint:#EAF7FA;--gm-tint2:#F5FBFD;--gm-pink:#F898B8;--gm-mag:#D80058;--gm-pur:#7359EA;--gm-ink:#0A0A0A;--gm-text:#14181b;--gm-muted:#5d6a72;--gm-line:#d5e9ef;--gm-ease:cubic-bezier(.2,.8,.2,1);
 --gm-serif:"Cormorant Garamond",Georgia,serif;--gm-sans:Inter,"Helvetica Neue",Arial,sans-serif;font-family:var(--gm-sans);color:var(--gm-text);position:relative}
#gcx .gm *{box-sizing:border-box}
#gcx .gm-head{max-width:820px}
#gcx .gm-eyebrow{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--gm-deep);margin:0 0 6px}
#gcx .gm h2 .gm-grad{background:linear-gradient(100deg,#0BA8CB 0%,#7359EA 55%,#F898B8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#gcx .gm-staging{display:inline-block;font-size:12.5px;border:1px dashed var(--gm-deep);color:var(--gm-deep);background:var(--gm-tint);border-radius:40px;padding:4px 12px;margin:2px 0 0}
#gcx .gm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
#gcx .gm-step{position:relative;background:#fff;border:1px solid var(--gm-line);border-radius:10px;padding:22px 20px 20px;box-shadow:0 20px 60px rgba(6,131,166,.07);min-width:0;transition:box-shadow .4s var(--gm-ease),transform .4s var(--gm-ease)}
#gcx .gm-step:focus-within{box-shadow:0 18px 40px rgba(6,131,166,.14)}
#gcx .gm-stepn{position:absolute;top:-14px;left:18px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#0683A6,#7359EA);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 6px 16px rgba(115,89,234,.3)}
#gcx .gm-step h3{font-family:var(--gm-serif);font-weight:600;font-size:24px;line-height:1.15;color:var(--gm-ink);margin:2px 0 10px}
#gcx .gm-lbl{display:block;font-size:13px;font-weight:600;color:var(--gm-text);margin:10px 0 5px}
#gcx .gm input[type=text],#gcx .gm input[type=number],#gcx .gm select{width:100%;min-height:46px;font-size:16px!important;font-family:var(--gm-sans);border:1.5px solid #c9dfe6;border-radius:10px;padding:10px 12px;background:#fff;color:var(--gm-text);max-width:100%;transition:border-color .2s,box-shadow .2s}
#gcx .gm input:focus,#gcx .gm select:focus{outline:none;border-color:var(--gm-pink);box-shadow:0 0 0 4px rgba(248,152,184,.18)}
#gcx .gm-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#gcx .gm-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin-top:12px;min-height:44px;cursor:pointer;line-height:1.35}
#gcx .gm-chk input{width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--gm-pur)}
#gcx .gm-combo{position:relative}
#gcx .gm-combo input{padding-right:44px}
#gcx .gm-clear{position:absolute;right:2px;top:1px;width:44px;height:44px;border:0;background:none;font-size:24px;color:var(--gm-muted);cursor:pointer;border-radius:10px}
#gcx .gm-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:min(360px,60vh);overflow:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--gm-line);border-radius:10px;box-shadow:0 18px 40px rgba(6,131,166,.18);-webkit-overflow-scrolling:touch}
#gcx .gm-list li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1.25}
#gcx .gm-list li[aria-selected=true],#gcx .gm-list li:hover{background:var(--gm-tint)}
#gcx .gm-list li[aria-disabled=true]{opacity:.55;cursor:default}
#gcx .gm-list .gm-grp{min-height:30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gm-muted);cursor:default;background:none!important}
#gcx .gm-list b{font-weight:700;min-width:44px}
#gcx .gm-list small{color:var(--gm-muted);font-size:12px;margin-left:auto;text-align:right}
#gcx .gm-dot{width:28px;height:28px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#gcx .gm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:40px;border:0;background:linear-gradient(135deg,#0683A6,#02709D);color:#fff;font-family:var(--gm-sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:background .35s,box-shadow .35s,transform .35s var(--gm-ease);box-shadow:0 10px 26px rgba(6,131,166,.22)}
#gcx .gm-btn:hover{background:linear-gradient(135deg,#7359EA,#0683A6);box-shadow:0 12px 34px rgba(115,89,234,.32);color:#fff}
#gcx .gm-btn.gm-ghost{background:#fff;color:var(--gm-deep);border:1.5px solid var(--gm-line);box-shadow:none}
#gcx .gm-btn.gm-ghost:hover{border-color:var(--gm-pur);color:var(--gm-pur);background:#fff}
#gcx .gm-step>.gm-btn{width:100%;margin-top:10px}
#gcx .gm-btn[disabled]{opacity:.5;cursor:not-allowed}
#gcx .gm-picked{margin-top:12px}
#gcx .gm-chip{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:var(--gm-tint2);border:1px solid var(--gm-line)}
#gcx .gm-chip img,#gcx .gm-chip .gm-sw{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
#gcx .gm-chip .gm-cn{font-family:var(--gm-serif);font-size:24px;font-weight:600;line-height:1;color:var(--gm-ink)}
#gcx .gm-chip .gm-cs{font-size:13px;color:var(--gm-muted);line-height:1.3}
#gcx .gm-results{margin-top:26px}
#gcx .gm-results h3,#gcx .gm-sample h4{font-family:var(--gm-serif);font-weight:600;font-size:28px;color:var(--gm-ink);margin:0 0 4px}
#gcx .gm-rsub{font-size:14px;color:var(--gm-muted);margin:0 0 14px;max-width:820px}
#gcx .gm-matches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#gcx .gm-m{background:#fff;border:1px solid var(--gm-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(6,131,166,.07);transition:transform .4s var(--gm-ease),box-shadow .4s var(--gm-ease),border-color .3s}
#gcx .gm-m:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,131,166,.14)}
#gcx .gm-m.on{border-color:var(--gm-pur);box-shadow:0 0 0 2px var(--gm-pur),0 18px 40px rgba(115,89,234,.2)}
#gcx .gm-mimg{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff;aspect-ratio:2/1}
#gcx .gm-mimg>*{width:100%;height:100%;object-fit:cover;display:block}
#gcx .gm-mimg.one{grid-template-columns:1fr}
#gcx .gm-mb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
#gcx .gm-mtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#gcx .gm-mn{font-family:var(--gm-serif);font-size:28px;font-weight:600;line-height:1;color:var(--gm-ink)}
#gcx .gm-mname{font-size:14px;color:var(--gm-text);line-height:1.3}
#gcx .gm-rank{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gm-muted)}
#gcx .gm-ring{--p:0;flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--gm-teal),var(--gm-pur) calc(var(--p)*.6%),var(--gm-pink) calc(var(--p)*1%),#e6f0f3 0);display:flex;align-items:center;justify-content:center}
#gcx .gm-ring span{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--gm-serif);font-weight:600;font-size:20px;color:var(--gm-ink)}
#gcx .gm-why{font-size:13px;color:var(--gm-muted);line-height:1.4;margin:0}
#gcx .gm-band{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-radius:40px;padding:3px 10px;background:var(--gm-tint);color:var(--gm-deeper);align-self:flex-start}
#gcx .gm-band.b2{background:#f1edfd;color:#4b36b8}
#gcx .gm-band.b3{background:#fdeef4;color:#a3134a}
#gcx .gm-mact{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
#gcx .gm-mact .gm-btn{flex:1 1 auto;padding:10px 14px}
#gcx .gm-link{font-size:13px;color:var(--gm-deep);text-decoration:underline;background:none;border:0;cursor:pointer;min-height:44px;padding:0 4px;font-family:var(--gm-sans)}
#gcx .gm-photo{margin-top:22px;background:var(--gm-tint2);border:1px solid var(--gm-line);border-radius:10px;padding:20px}
#gcx .gm-photo-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
#gcx .gm-photo-h h3{font-family:var(--gm-serif);font-weight:600;font-size:26px;margin:0;color:var(--gm-ink)}
#gcx .gm-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--gm-line);background:#fff;font-size:24px;cursor:pointer;color:var(--gm-text);flex:0 0 auto}
#gcx .gm-privacy{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--gm-deeper);margin:8px 0 12px}
#gcx .gm-privacy svg{flex:0 0 auto;margin-top:2px}
#gcx .gm-file{position:relative;overflow:hidden}
#gcx .gm-file input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
#gcx .gm-canvaswrap{margin-top:14px;position:relative;max-width:560px}
#gcx #gm-canvas{display:block;width:100%;height:auto;border-radius:10px;touch-action:none;cursor:crosshair;background:#fff;box-shadow:0 18px 40px rgba(6,131,166,.14)}
#gcx .gm-hint{font-size:13px;color:var(--gm-muted);margin-top:8px}
#gcx .gm-caveat{font-size:13.5px;margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--gm-pink);background:#fff;border-radius:0 8px 8px 0}
#gcx .gm-sample{margin-top:16px}
#gcx .gm-tones{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
#gcx .gm-tone{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 6px;border-radius:40px;border:1.5px solid var(--gm-line);background:#fff;cursor:pointer;font-size:13px;font-family:var(--gm-sans);color:var(--gm-text)}
#gcx .gm-tone[aria-pressed=true]{border-color:var(--gm-pink);box-shadow:0 0 0 3px rgba(248,152,184,.25)}
#gcx .gm-tone i{width:30px;height:30px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#gcx .gm-cardwrap{margin-top:28px}
#gcx .gm-card{background:#fff;border:1px solid var(--gm-line);border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(6,131,166,.1);color:var(--gm-text)}
#gcx .gm-card-h{background:radial-gradient(ellipse at top right,rgba(115,89,234,.35),transparent 50%),radial-gradient(ellipse at bottom left,rgba(11,168,203,.28),transparent 55%),#0A0A0A;color:#fff;padding:20px 22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-end;border-bottom:3px solid;border-image:linear-gradient(90deg,#0BA8CB,#7359EA,#F898B8) 1}
#gcx .gm-card-h .gm-eyebrow{color:#0BA8CB;margin:0}
#gcx .gm-card-h h3{font-family:var(--gm-serif);font-weight:600;font-size:30px;margin:2px 0 0;color:#fff;line-height:1.1}
#gcx .gm-card-h .gm-date{font-size:12.5px;color:#cfd8dc}
#gcx .gm-card-b{padding:20px 22px}
#gcx .gm-path{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;margin-bottom:16px}
#gcx .gm-path .gm-arrow{font-size:26px;color:var(--gm-pur)}
#gcx .gm-path .gm-chip{background:#fff}
#gcx .gm-flag{border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:14px;line-height:1.45}
#gcx .gm-flag.warn{background:#fff4f8;border:1.5px solid var(--gm-pink);color:#5a0b2a}
#gcx .gm-flag.info{background:var(--gm-tint);border:1px solid var(--gm-line);color:var(--gm-deeper)}
#gcx .gm-dl{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);border-top:1px solid var(--gm-line);margin:0}
#gcx .gm-dl dt,#gcx .gm-dl dd{padding:10px 0;border-bottom:1px solid var(--gm-line);margin:0;font-size:14.5px;line-height:1.45}
#gcx .gm-dl dt{font-weight:600;color:var(--gm-deeper);padding-right:12px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
#gcx .gm-dl dd b{font-weight:700;color:var(--gm-ink)}
#gcx .gm-tbc{display:inline-block;background:#fff7e6;border:1px solid #f0c060;color:#6b4a00;border-radius:40px;padding:1px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
#gcx .gm-src{font-size:12px;color:var(--gm-muted);display:block;margin-top:3px}
#gcx .gm-gen{font-size:11.5px;color:var(--gm-pur);font-style:italic;display:block;margin-top:3px}
#gcx .gm-fill{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13px;color:var(--gm-muted)}
#gcx .gm-fill span{display:block;border-bottom:1px solid #9fb6bd;height:30px}
#gcx .gm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
#gcx .gm-toast{font-size:13px;color:var(--gm-deeper)}
#gcx .gm-foot{font-size:12.5px;color:var(--gm-muted);margin-top:22px;max-width:900px}
#gcx .gm-empty{border:1.5px dashed var(--gm-line);border-radius:10px;padding:18px;color:var(--gm-muted);font-size:14px;background:var(--gm-tint2)}
#gcx .gm-reveal{opacity:0;transform:translateY(18px);animation:gmIn .7s var(--gm-ease) forwards}
@keyframes gmIn{to{opacity:1;transform:none}}
@media (max-width:980px){#gcx .gm-steps{grid-template-columns:1fr 1fr}#gcx #gm-s3{grid-column:1/-1}}
@media (max-width:860px){#gcx .gm-matches{grid-template-columns:1fr}#gcx .gm-mimg{aspect-ratio:3/1}}
@media (max-width:640px){#gcx .gm-steps{grid-template-columns:1fr;gap:24px}#gcx .gm-step{padding:20px 16px 16px}#gcx .gm-path{grid-template-columns:1fr}#gcx .gm-path .gm-arrow{transform:rotate(90deg);justify-self:center;line-height:1}
 #gcx .gm-dl{grid-template-columns:1fr}#gcx .gm-dl dt{border-bottom:0;padding-bottom:0}#gcx .gm-card-b,#gcx .gm-card-h{padding:16px}#gcx .gm-photo{padding:16px}#gcx .gm-actions .gm-btn{flex:1 1 140px}#gcx .gm-fill{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#gcx .gm *{animation:none!important;transition:none!important}#gcx .gm-reveal{opacity:1;transform:none}}
/* print: only the stylist card (cloned into #gm-printroot, a direct child of body) */
#gm-printroot{display:none}
@media print{
 html.gm-printing body>*:not(#gm-printroot){display:none!important}
 html.gm-printing body{background:#fff!important;margin:0!important;padding:0!important}
 html.gm-printing #gm-printroot{display:block!important;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:#000}
 #gm-printroot .gm{--gm-line:#bbb}
 #gm-printroot .gm-card{border:1px solid #888;border-radius:0;box-shadow:none}
 #gm-printroot .gm-card-h{background:#fff!important;color:#000!important;border-bottom:2px solid #000;padding:4px 0 6px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:6px}
 #gm-printroot .gm-card-h h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:19pt;margin:0;color:#000}
 #gm-printroot .gm-eyebrow{font-size:8pt;letter-spacing:.25em;text-transform:uppercase;font-weight:700;margin:0;color:#0683A6}
 #gm-printroot .gm-date{font-size:9pt;color:#333}
 #gm-printroot .gm-card-b{padding:8px 0}
 #gm-printroot .gm-path{display:flex;gap:12px;align-items:center;margin:4px 0 8px}
 #gm-printroot .gm-chip{display:flex;gap:8px;align-items:center;border:1px solid #bbb;border-radius:6px;padding:6px;flex:1}
 #gm-printroot .gm-chip img,#gm-printroot .gm-sw{width:40px;height:40px;border-radius:4px;object-fit:cover;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 #gm-printroot .gm-cn{font-family:"Cormorant Garamond",Georgia,serif;font-size:16pt;font-weight:600}
 #gm-printroot .gm-cs{font-size:9pt;color:#333}
 #gm-printroot .gm-flag{border:1.5px solid #000;padding:6px 8px;margin:0 0 8px;font-size:10pt}
 #gm-printroot .gm-dl{display:grid;grid-template-columns:42mm 1fr;margin:0;border-top:1px solid #999}
 #gm-printroot .gm-dl dt,#gm-printroot .gm-dl dd{margin:0;padding:3px 0;border-bottom:1px solid #ccc;font-size:9.5pt;line-height:1.22;break-inside:avoid}
 #gm-printroot .gm-rank{font-size:7.5pt;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#444;margin-bottom:2px}
 #gm-printroot .gm-arrow{font-size:14pt}
 #gm-printroot .gm-path>div:not(.gm-arrow){flex:1}
 #gm-printroot .gm-dl dt{font-weight:700;font-size:8.5pt;text-transform:uppercase;letter-spacing:.04em;padding-right:8px}
 #gm-printroot .gm-tbc{border:1px solid #000;border-radius:20px;padding:0 6px;font-size:9pt;font-weight:700}
 #gm-printroot .gm-src,#gm-printroot .gm-gen{display:block;font-size:7.5pt;line-height:1.25;color:#444}
 #gm-printroot .gm-fill{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px;font-size:8pt}
 #gm-printroot .gm-fill span{display:block;border-bottom:1px solid #000;height:18px}
 @page{margin:10mm}
}
/* theme overrides inside the matcher (theme uppercases buttons and bolds dd) */
#gcx .gm .gm-link{text-transform:none!important;letter-spacing:normal!important;font-weight:500;font-size:13.5px;display:inline-flex;align-items:center;min-width:44px;justify-content:center}
#gcx .gm .gm-tone{text-transform:none!important;letter-spacing:normal!important;font-weight:500}
#gcx .gm .gm-dl dd{font-weight:400}
#gcx .gm .gm-mact{align-items:center}
#gcx .gm .gm-mact .gm-btn{flex:1 1 100%}
#gcx .gm .gm-x,#gcx .gm .gm-clear{text-transform:none!important;letter-spacing:normal!important;padding:0;line-height:1}
/* QA fixes 10/25: placeholder clears the clear (×) button; content clears the floating WhatsApp bubble on phones (widget itself untouched) */
#gcx .gm .gm-combo input{padding-right:52px!important;text-overflow:ellipsis}
@media (max-width:768px){#gcx .gm-sample,#gcx .gm-cardwrap{padding-bottom:88px}#gcx .gm-tones{padding-right:64px}}