/* ═══ XKitchens shared visual components ═══════════════════════════════
   Process timeline · Before/After slider · Material visualizer.
   Relies on the palette custom properties (--cream/--sand/--taupe/--walnut/
   --espresso/--red, --serif/--sans) that every page defines on :root.
   Loaded on: /, /free-quote-countertops/, /countertop-replacement-newmarket/,
   /projects/, /colors/. Cache-bust with ?v=N on change. */

/* ── 1 · Process timeline ─────────────────────────────────────────── */
.xk-tl{max-width:1200px;margin:0 auto}
.xk-tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.xk-tl-step{position:relative;background:#fff;border:1px solid var(--sand);border-radius:14px;align-self:start}
.xk-tl-head{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon num chev" "icon title chev" "icon label chev";align-items:center;column-gap:16px;width:100%;background:none;border:0;padding:18px 18px 16px;text-align:left;cursor:pointer;font-family:var(--sans);color:inherit}
.xk-tl-icon{grid-area:icon;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--cream);border:1px solid var(--sand);color:var(--red);flex-shrink:0}
.xk-tl-icon svg{width:24px;height:24px;display:block}
.xk-tl-num{grid-area:num;font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:var(--taupe)}
.xk-tl-title{grid-area:title;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.12;margin:2px 0}
.xk-tl-label{grid-area:label;font-size:.83rem;color:var(--walnut)}
.xk-tl-chev{grid-area:chev;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--sand);color:var(--walnut);transition:transform .25s ease;flex-shrink:0}
.xk-tl-chev svg{width:14px;height:14px;display:block}
.xk-tl-head[aria-expanded="true"] .xk-tl-chev{transform:rotate(180deg);border-color:var(--red);color:var(--red)}
.xk-tl-detail{padding:0 18px 18px 82px;font-size:.95rem;line-height:1.6;color:#574b3e;margin:0}
.xk-tl-detail[hidden]{display:none}
.xk-tl-cta{text-align:center;margin-top:36px}
.xk-tl-cta .xk-tl-call{display:block;margin-top:14px;font-size:.95rem;color:var(--walnut)}

@media(min-width:861px){
  .xk-tl-steps{grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
  .xk-tl-head{grid-template-columns:1fr auto;grid-template-areas:"icon icon" "num chev" "title chev" "label chev";row-gap:2px;padding:22px 20px 18px}
  .xk-tl-icon{margin-bottom:14px}
  .xk-tl-detail{padding:0 20px 20px}
  /* connector line between cards */
  .xk-tl-step:not(:last-child)::after{content:"";position:absolute;top:44px;right:-20px;width:20px;height:1px;background:var(--sand)}
}

/* dark variant — for espresso sections (homepage #process) */
.xk-tl--dark .xk-tl-step{background:rgba(245,239,228,.05);border-color:rgba(245,239,228,.16)}
.xk-tl--dark .xk-tl-icon{background:rgba(245,239,228,.08);border-color:rgba(245,239,228,.2);color:var(--sand)}
.xk-tl--dark .xk-tl-title{color:var(--cream)}
.xk-tl--dark .xk-tl-num,.xk-tl--dark .xk-tl-label{color:var(--taupe)}
.xk-tl--dark .xk-tl-chev{border-color:rgba(245,239,228,.25);color:var(--taupe)}
.xk-tl--dark .xk-tl-head[aria-expanded="true"] .xk-tl-chev{border-color:var(--sand);color:var(--sand)}
.xk-tl--dark .xk-tl-detail{color:#cfc6b8}
.xk-tl--dark .xk-tl-step:not(:last-child)::after{background:rgba(168,148,120,.3)}
.xk-tl--dark .xk-tl-cta .xk-tl-call{color:var(--taupe)}

/* ── 2 · Before/After slider ──────────────────────────────────────── */
.xk-ba-gallery{display:grid;grid-template-columns:1fr;gap:22px;max-width:1200px;margin:0 auto}
@media(min-width:761px){.xk-ba-gallery{grid-template-columns:1fr 1fr}}
.xk-ba{margin:0}
.xk-ba-frame{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--sand);aspect-ratio:4/3;background:var(--sand);touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.xk-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;margin:0;display:block}
.xk-ba-after{clip-path:inset(0 0 0 var(--xk-pos,50%));-webkit-clip-path:inset(0 0 0 var(--xk-pos,50%))}
.xk-ba-divider{position:absolute;top:0;bottom:0;left:var(--xk-pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.4);pointer-events:none}
.xk-ba-handle{position:absolute;top:50%;left:var(--xk-pos,50%);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 12px rgba(0,0,0,.35);cursor:ew-resize;display:flex;align-items:center;justify-content:center;color:var(--espresso);padding:0}
.xk-ba-handle svg{width:20px;height:20px;display:block}
.xk-ba-handle:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.xk-ba-tag{position:absolute;top:12px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(42,33,26,.68);padding:4px 10px;border-radius:3px;pointer-events:none}
.xk-ba-tag--before{left:12px}
.xk-ba-tag--after{right:12px}
.xk-ba figcaption{font-family:var(--sans);font-size:.9rem;color:var(--walnut);margin-top:10px;line-height:1.5}
.xk-ba-empty{font-family:var(--sans);font-size:.95rem;color:var(--taupe);border:1.5px dashed var(--sand);border-radius:12px;padding:28px;text-align:center;grid-column:1/-1}

/* ── 3 · Material visualizer ──────────────────────────────────────── */
.xk-viz{display:grid;grid-template-columns:1fr;gap:26px;max-width:1200px;margin:0 auto}
@media(min-width:900px){.xk-viz{grid-template-columns:1.25fr .85fr;align-items:start}}
.xk-viz-scene{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--sand);aspect-ratio:16/10;background:var(--sand)}
.xk-viz-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xk-viz-layer{position:absolute;inset:0;background-size:cover;background-position:center;-webkit-mask-image:var(--xk-mask);mask-image:var(--xk-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:background-image .15s ease}
.xk-viz-counter::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(42,33,26,.16));pointer-events:none}
.xk-viz-splash{filter:brightness(1.14) saturate(.9);opacity:.96}
.xk-viz-splash[hidden]{display:none}
.xk-viz-current{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--sans);margin:12px 2px 0}
.xk-viz-current .xk-viz-name{font-family:var(--serif);font-size:1.25rem;color:var(--espresso)}
.xk-viz-current .xk-viz-tiername{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.xk-viz-toggle{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font-family:var(--sans);font-size:.92rem;color:var(--walnut);cursor:pointer;user-select:none}
.xk-viz-toggle input{width:18px;height:18px;accent-color:var(--red);cursor:pointer;margin:0}
.xk-viz-panel{font-family:var(--sans)}
.xk-viz-group{margin-bottom:20px}
.xk-viz-group-title{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--sand)}
.xk-viz-swrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.xk-viz-swwrap{display:flex;flex-direction:column;gap:5px;min-width:0}
.xk-viz-sw{aspect-ratio:1;width:100%;border-radius:8px;border:2px solid var(--sand);background-size:cover;background-position:center;cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease}
.xk-viz-sw:hover{transform:translateY(-2px)}
.xk-viz-sw[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 2px rgba(184,61,47,.25)}
.xk-viz-sw:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.xk-viz-sw-name{font-size:10.5px;line-height:1.3;color:var(--walnut);text-align:center;overflow-wrap:break-word}
.xk-viz-request{margin-top:6px}
.xk-viz-note{font-size:.83rem;color:var(--taupe);margin-top:10px;line-height:1.5}