/* HB live /gc-color/ teal restyle (2026-11-14).
   Retints tags, chip frames, buttons and other non-shade UI to the teal
   blueprint (#075760 / #dcefed). Does not change shade swatch colors,
   wheel wedge fills, matcher hair previews, WhatsApp green, or the
   violet developer product card. Rollback: delete the mu-plugin or set
   hbgc_teal_ui_enabled=0. */
#gcx{
  --t:#075760;
  --td:#062b30;
  --tl:#dcefed;
  --p:#075760;
  --pl:#dcefed;
  --pk:#075760;
  --l:#dcefed;
}
#gcx .gx-btn{background:#075760;border-color:#075760;color:#fff}
#gcx .gx-btn:hover,#gcx .gx-btn:focus-visible{background:#062b30;border-color:#062b30;color:#fff}
#gcx :focus-visible{outline-color:#075760}
#gcx .gx-hero h1 span{color:#075760}
#gcx .gx-chip[aria-pressed=true]{background:#075760;border-color:#075760;color:#fff}
#gcx .gx-chip.pur[aria-pressed=true]{background:#075760;border-color:#075760}
#gcx svg.gx-wheel path.on{stroke:#075760}
#gcx .gx-card.hl{outline-color:#075760}
#gcx .gx-tag{background:#111;color:#fff}
#gcx .gx-tag.d,#gcx .gx-tag.s{background:#dcefed;color:#075760}
#gcx .gx-tag.f{background:#fff;color:#075760;border-color:#075760}
#gcx .gx-count.bump,#gcx .gx-traymsg{color:#dcefed}
#gcx .gx-pending{background:#dcefed;border-left-color:#075760;color:#075760}
#gcx .gx-pendtag{background:#dcefed;color:#075760}
#gcx .gx-warn{background:#dcefed;border-left-color:#075760;color:#075760}
#gcx .gx-sc .gx-arrow{color:#075760}
#gcx a.gx-dvcta:hover,#gcx a.gx-dvcta:focus-visible{border-color:#075760;box-shadow:0 12px 30px rgba(7,87,96,.18)}

/* Top control, flow prototype, start/fill/share/ring/cue/polish: cyan & pink chrome → teal.
   Selector-specific so JS shade fills are untouched. */
#gcx .gxtc-btn,
#gcx .gxtc-show{background:#075760;border-color:#075760;color:#fff}
#gcx .gxtc-clear{border-color:#075760;color:#075760;background:#fff}
#gcx .gx-card.gxtc-hl{outline-color:#075760}
#gcx .gxtc-f input[type=search]{border-color:#075760!important;color:#075760!important}

.gxf-mode .gxf-nav i,
.gxf-mode .gxf-next,
.gxf-mode .gxf-tabs button[aria-selected=true],
.gxf-mode .gxf-t em,
.gxf-mode .gxf-selrow em{background:#075760;border-color:#075760;color:#fff}
.gxf-mode .gxf-tabs button{border-color:#075760;color:#075760}
.gxf-mode .gxf-t.on{border-color:#075760;box-shadow:0 0 0 3px #075760;background:#dcefed}

#gcx{--gf-t:#075760;--gf-td:#062b30;--gf-ln:rgba(7,87,96,.22)}
#gcx .gf-btn,
#gcx .gf-pi-dev{background:#075760;background-image:none;color:#fff;box-shadow:0 8px 20px rgba(7,87,96,.22)}

#gcx{--gs-t:#075760}
#gcx #guide.gs2 .gs2-vols span.on,
#gcx #guide.gs2 .gs2-bar i,
#gcx #guide.gs2 .gs2-out .gx-btn,
#gcx #color-flow .gx-step:not(.gx-su) .gx-btn{
  background:#075760;background-image:none;border:0;color:#fff;box-shadow:0 8px 20px rgba(7,87,96,.22)
}
#gcx #guide.gs2 .gs2-bar.hi i{background:#075760}
#gcx #guide.gs2 .gs2-out .gx-out p::before{background:#075760}

#gcx .gsh-btn,
#gcx #gx-ring .gr-b,
#gcx #gx-ring .gr-view{
  background:#075760;background-image:none;color:#fff;box-shadow:0 8px 20px rgba(7,87,96,.22)
}
#gcx .gx-card.gsh-hl{box-shadow:0 0 0 3px #fff,0 0 0 6px #075760,0 0 34px rgba(7,87,96,.35)!important}
#gcx .gsh-panel::before{background:#075760}
#gcx #gx-ring .gr-ring:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 7px #075760}
#gcx .gcq-pill svg{color:#075760}
#gcx .gcq-dot{background:#075760}

/* Color Matcher: pink tokens, selected chips, flags, focus, title/chrome gradients → teal.
   Hair preview / recommended shade chips keep their own fill colors. */
#gcx .gm{
  --gm-teal:#075760;
  --gm-deep:#075760;
  --gm-deeper:#062b30;
  --gm-tint:#dcefed;
  --gm-tint2:#f6fbfc;
  --gm-pink:#075760;
  --gm-mag:#075760;
}
#gcx .gm h2 .gm-grad{
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:#075760
}
#gcx .gm input:focus,#gcx .gm select:focus{border-color:#075760;box-shadow:0 0 0 4px rgba(7,87,96,.18)}
#gcx .gm-band.b3{background:#dcefed;color:#075760}
#gcx .gm-caveat{border-left-color:#075760}
#gcx .gm-tone[aria-pressed=true]{border-color:#075760;box-shadow:0 0 0 3px rgba(7,87,96,.25)}
#gcx .gm-card-h{border-image:none;border-bottom-color:#075760}
#gcx .gm-card-h .gm-eyebrow{color:#075760}
#gcx .gm-flag.warn{background:#dcefed;border-color:#075760;color:#075760}
#gcx .gm-tbc{background:#dcefed;border-color:#075760;color:#075760}
#gcx .gm-ring{background:conic-gradient(#075760, #0a7a82 calc(var(--p)*.6%), #dcefed calc(var(--p)*1%), #e6f0f3 0)}

#gcx{
  --gtext:none;
}

/* Hero / heading chrome: polish applies a teal→purple→pink text gradient. Solid teal only. */
#gcx .gx-hero h1 span,
#gcx h2 .gm-grad,
#gcx .gm h2 .gm-grad,
#gcx [class*="gm-grad"]{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#075760!important;
  color:#075760!important
}
#gcx .gx-hero h1 span{color:#075760!important}
/* Small gradient ticks above section titles */
#gcx h2::before,#gcx .gx-chart h2::before,#gcx section>h2::before{
  background:#075760!important;background-image:none!important
}
/* Matcher step index badges were teal→purple. Solid teal. */
#gcx .gm-stepn{
  background:#075760!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(7,87,96,.3)!important
}
#gcx .gm-btn:hover{
  background:#062b30!important;
  background-image:none!important;
  box-shadow:0 12px 34px rgba(7,87,96,.22)!important;
  color:#fff!important
}

/* Phone: keep the in-page "Chat on WhatsApp" chip clear of the sitewide
   floating bubble. Scoped to #gcx (this page only). Bubble itself unchanged. */
@media (max-width:860px){
  /* Only the in-page WhatsApp chip, so other hero buttons stay two-up.
     72px right clearance keeps the label out from under the floating bubble. */
  #gcx .gx-cta a.gx-wa{
    margin-right:72px;
    max-width:calc(100% - 72px);
  }
}