/* Global Contractor Group: extras for the shop and interiors pages
   (machinery, CNC tooling, wall panels, cabinetry, mirrors and counters, jewelry stores, studio visit).
   Loaded after gcg.css and only on the pages that use these parts. */

/* ---------- option chips on cards and builders ---------- */
.xlab{display:block;margin:10px 0 5px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--mute)}
.xopts{display:flex;flex-wrap:wrap;gap:6px}
.xopt{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 13px;border:2px solid var(--line);border-radius:99px;background:#fff;color:var(--g);font:600 13.5px/1.15 var(--body);text-align:left;transition:border-color .2s,background-color .2s,color .2s}
.xopt:hover{border-color:var(--g)}
.xopt[aria-pressed=true]{background:var(--g);border-color:var(--g);color:#fff}
.xopt[aria-pressed=true]::before{content:"";width:5px;height:9px;margin:-2px 1px 0 0;border:solid currentColor;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.xopt.card{flex-direction:column;align-items:flex-start;gap:1px;border-radius:14px;padding:8px 12px;min-height:54px}
.xopt.card::before{display:none}
.xopt.card b{font-size:14.5px}
.xopt.card small{font-weight:500;font-size:12.5px;color:var(--mute)}
.xopt.card[aria-pressed=true]{background:var(--or-l);border-color:var(--or);color:var(--g)}
.xopts.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.xfeat{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px}
.xfeat li{position:relative;padding-left:14px;font-size:14px;line-height:1.35;color:var(--g)}
.xfeat li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--or)}
.xsum{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--con);font-size:14.5px;color:var(--g)}
.xsum b{display:block;font-size:12.5px;color:var(--mute);margin-bottom:2px}
.xrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px}
.xrow .add.big{margin-top:0}
.xnote{font-size:13.5px;color:var(--mute)}

/* rich catalog cards (machines, tooling, cladding) */
.thumbs.xrich{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.xrich .th-body{display:flex;flex-direction:column}
.xrich .th-img .draw,.xgrid .th-img .draw{display:grid;place-items:center;width:100%;height:100%;padding:10px;background:#F4F6F3}
.xrich .th-img svg,.xgrid .th-img svg{width:100%;height:100%}
.xrich .add,.xgrid .add{margin-top:auto}
.xgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.xgrid .th-body{flex:1;display:flex;flex-direction:column;padding-bottom:14px}
.xgrid .th p{font-size:14.5px}
.xbit{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.spec{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.spec li{padding:3px 8px;border-radius:8px;background:var(--con);font-size:12.5px;font-weight:600;color:var(--g)}

/* ---------- bit finder ---------- */
.xfind{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:60px}
.fhelp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--g);color:#fff;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.fhelp span{font-weight:600}
.fhelp select{min-height:42px;max-width:100%;border:2px solid transparent;border-radius:10px;padding:0 10px;background:#fff;color:var(--g);font:700 15px var(--body)}
.fhelp select:focus{outline:0;border-color:var(--cau)}
.fhelp output{flex-basis:100%;color:#C8D2D3;font-size:14.5px}
.fhelp output b{color:var(--cau)}
.finder{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(14px,2.4vw,28px);align-items:start}
.fsteps{display:grid;gap:12px}
.fstep h3{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:15px}
.fsteps{counter-reset:fs}.fsteps .fstep{counter-increment:fs}.fsteps .fstep h3 i::before{content:counter(fs)}
.fstep h3 i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--or);color:#fff;font:900 15px/1 var(--display);font-style:normal}
.bitcard{position:sticky;top:64px;background:var(--con);border:1px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:10px}
.bitcard .bv{background:#fff;border-radius:14px;display:grid;place-items:center;padding:6px}
.bitcard svg{width:100%;height:auto;max-height:300px}
.bitcard h3{font:900 28px/1 var(--display)}
.bitcard p{color:var(--mute);font-size:14.5px}
.bspec{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bspec div{background:#fff;border-radius:10px;padding:7px 10px}
.bspec small{display:block;font-size:12px;color:var(--mute);font-weight:600}
.bspec b{font:900 22px/1.05 var(--display)}
.bitcard .add.big{margin-top:0;align-self:stretch;width:100%}

/* ---------- parametric panel designer ---------- */
.pdes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.4vw,28px);align-items:start}
.pview{margin:0;position:sticky;top:64px;border-radius:20px;overflow:hidden;background:#121A1C;box-shadow:0 30px 60px -40px rgba(30,43,45,.7)}
.pview svg{display:block;width:100%;height:auto}
.pview figcaption{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;background:var(--g);color:#C8D2D3;font-size:13.5px}
.pview figcaption b{color:#fff}
.pats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.xopt.pat{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:0;padding:4px 4px 6px;border-radius:12px;font:700 12.5px/1.1 var(--body);text-align:center}
.xopt.pat::before{display:none}
.xopt.pat svg{display:block;width:100%;aspect-ratio:1;border-radius:8px;background:#E4E2DC}
.xopt.pat[aria-pressed=true]{border-color:var(--or);background:var(--or-l);color:var(--g)}
.krow{display:flex;align-items:center;gap:12px}
.krow output{font:900 24px/1 var(--display);min-width:3.3em}
.range{flex:1;min-width:0;height:40px;accent-color:var(--or)}
.xsize{display:flex;flex-wrap:wrap;gap:10px}
.xsize label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:700}
.xsize input{width:110px;min-height:42px;border:2px solid var(--line);border-radius:10px;padding:0 10px;background:#fff;font:600 16px var(--body);color:var(--g)}
.xsize input:focus{outline:0;border-color:var(--chalk);box-shadow:0 0 0 4px rgba(47,111,219,.15)}

/* ---------- two-column feature blocks (mirrors, counters, studio) ---------- */
.xsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center}
.xsplit.rev>:first-child{order:2}
.xpic{border-radius:20px;overflow:hidden;box-shadow:0 34px 60px -40px rgba(30,43,45,.7);background:var(--con2)}
.xpic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.xsplit h2+p,.xsplit .lead{margin-top:8px}
.xsplit .ticks{margin-top:10px}
.xband{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.addr{font-style:normal;margin-top:12px;display:grid;gap:6px}
.addr a,.addr span{display:inline-flex;align-items:center;gap:9px;font-weight:600;text-decoration:none}
.addr .ic{color:var(--or)}
.mapf{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--con2)}
.mapf iframe{display:block;width:100%;height:clamp(260px,30vw,380px);border:0}

/* ---------- jewelry: showcase features and case-light preview ---------- */
.xtabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.xtabs button{min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.25);border-radius:99px;background:transparent;color:#fff;font:600 14px var(--body);transition:background-color .2s,border-color .2s}
.xtabs button:hover{border-color:var(--cau)}
.xtabs button[aria-pressed=true]{background:var(--or);border-color:var(--or)}
.xtabp{margin-top:12px;min-height:3em;color:#E3E9EA!important}
.cctv{margin:0;position:relative;border-radius:20px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.cctv img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cctv i{position:absolute;inset:0;background:var(--tint,rgba(255,214,170,.5));mix-blend-mode:soft-light;pointer-events:none}
.cctv figcaption{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:10px;background:rgba(30,43,45,.8);color:#fff;font-size:13.5px}
.cctbar{display:flex;align-items:center;gap:12px;margin-top:10px;color:#C8D2D3;font-size:13.5px}
.cctbar output{font:900 26px/1 var(--display);color:var(--cau);min-width:3.3em}
.cctbar .range{accent-color:var(--cau)}
.xsteps .feat ul{margin-top:8px}
.xsteps .feat b.n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--or);color:#fff;font:900 20px/1 var(--display)}

/* consultation: four ways to meet */
@media(min-width:761px){.modes.m4{grid-template-columns:repeat(2,1fr)}}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .finder,.pdes,.xsplit{grid-template-columns:minmax(0,1fr)}
  .xsplit.rev>:first-child{order:0}
  .bitcard,.pview{position:static}
  .bitcard{order:-1;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .bitcard .bv{grid-row:span 3}
  .bitcard .bspec,.bitcard .add.big{grid-column:1/-1}
  .xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .xrich .th p,.xgrid .th p{-webkit-line-clamp:unset;display:block}
}
@media(max-width:600px){
  .thumbs.xrich,.xgrid{grid-template-columns:minmax(0,1fr);gap:10px}
  .xrich .th,.xgrid .th{display:grid;grid-template-columns:96px minmax(0,1fr)}
  .xrich .th-img,.xgrid .th-img{aspect-ratio:1;align-self:start;margin:10px 0 0 10px;border-radius:10px}
  .xrich .th .add,.xgrid .th .add{grid-column:1/-1}
  .pats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xopts.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bitcard h3{font-size:24px}
  .bspec b{font-size:19px}
}
.lhimg svg{display:block;width:100%;height:auto}
.ftabs button{min-height:40px}
.card[data-cfg] .fstep+.fstep{margin-top:12px}