/* ============================================================
   The Ten Shops — shared base styles
   Token-free utilities; every page defines its own :root tokens
   and brings its own personality. This file only supplies the
   craft floor (reveal machinery, focus, images, lightbox).
   ============================================================ */

/* ---- reveal (paired with data-reveal in common.js) ---- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-rv-delay="1"]{transition-delay:.08s}
[data-reveal][data-rv-delay="2"]{transition-delay:.16s}
[data-reveal][data-rv-delay="3"]{transition-delay:.24s}
[data-reveal][data-rv-delay="4"]{transition-delay:.32s}
[data-reveal][data-rv-delay="5"]{transition-delay:.4s}
html.rm [data-reveal]{opacity:1;transform:none;transition:none;}

/* ---- focus ----
   Each theme sets --focus (or falls back to currentColor) */
:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:3px;border-radius:2px;}
a,button,[data-tab-btn],[data-acc-head],[data-lb]{cursor:pointer;}

/* ---- images: shimmer while loading, then fade in ---- */
img{display:block;max-width:100%;height:auto;}
img[loading="lazy"],img[fetchpriority="high"]{background:
  linear-gradient(110deg,transparent 30%,rgba(128,128,128,.12) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
img.loaded,img.is-fallback{animation:none;background:none;}
html.rm img[loading="lazy"],html.rm img[fetchpriority="high"]{animation:none;background:none;}

/* ---- keep interactive elements clickable, min touch area ---- */
button,[data-tab-btn],[data-acc-head]{touch-action:manipulation;}

/* ---- lightbox ---- */
[data-lightbox]{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,12,.88);padding:4vw;opacity:0;transition:opacity .25s ease;
}
[data-lightbox].open{opacity:1;}
[data-lightbox][hidden]{display:none;}
[data-lightbox] img{max-width:min(1000px,90vw);max-height:80vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
[data-lightbox] .lb-cap{position:absolute;left:0;right:0;bottom:2.5vh;text-align:center;color:rgba(255,255,255,.85);font-size:.95rem;letter-spacing:.02em;}
[data-lightbox] [data-lb-close]{
  position:absolute;top:18px;right:22px;background:transparent;border:0;color:#fff;
  font-size:1.8rem;line-height:1;cursor:pointer;padding:.4rem .6rem;}
html.rm [data-lightbox]{transition:none;}

/* ---- utilities shared by themes ---- */
.tnum{font-variant-numeric:tabular-nums;}
.balance{text-wrap:balance;}
.container{width:min(1180px,100% - 2.4rem);margin-inline:auto;}
.skip{position:absolute;left:-999px;top:0;background:var(--ink,#111);color:var(--paper,#fff);
  padding:.7rem 1.2rem;z-index:100;}
.skip:focus{left:12px;top:12px;}

/* ---- marquee (rotating flyers / strips) ---- */
.marquee{overflow:hidden;position:relative;white-space:nowrap;}
.marquee .mq-track{display:inline-flex;gap:0;animation:mq-scroll var(--mq-speed,28s) linear infinite;will-change:transform;}
.marquee .mq-track.paused{animation-play-state:paused;}
.marquee:hover .mq-track{animation-play-state:paused;}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html.rm .marquee .mq-track{animation:none;}

/* ---- before/after slider ---- */
[data-ba] .ba-wrap{position:relative;overflow:hidden;user-select:none;}
[data-ba] .ba-top{position:absolute;inset:0;overflow:hidden;}
[data-ba] .ba-top img{width:100%;height:100%;object-fit:cover;display:block;}
[data-ba] .ba-rail{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);cursor:ew-resize;z-index:3;}
[data-ba] .ba-handle{position:absolute;top:50%;width:44px;height:44px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);font-size:1.05rem;color:#333;z-index:4;}
[data-ba] .ba-label{position:absolute;top:12px;left:14px;background:rgba(0,0,0,.55);color:#fff;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem;border-radius:4px;}
[data-ba] .ba-label.b{left:auto;right:14px;}

/* ---- steppers (tracking / process) ---- */
[data-stepper]{display:flex;gap:.4rem;align-items:flex-start;}
[data-stepper] .st-node{flex:1;position:relative;text-align:center;padding:0 .3rem;}
[data-stepper] .st-dot{width:34px;height:34px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;background:var(--st-idle,#E3E7E5);color:var(--st-idle-ink,#667);position:relative;z-index:2;transition:background .3s,color .3s;}
[data-stepper] .st-node.done .st-dot{background:var(--st-done,var(--accent,#2E8B83));color:#fff;}
[data-stepper] .st-node.active .st-dot{background:var(--accent,#2E8B83);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#2E8B83) 22%,transparent);}
[data-stepper] .st-node::after{content:"";position:absolute;top:17px;left:calc(50% + 17px);width:calc(100% - 34px);height:3px;background:var(--st-idle,#E3E7E5);z-index:1;}
[data-stepper] .st-node:last-child::after{display:none;}
[data-stepper] .st-node.done::after{background:var(--accent,#2E8B83);}
[data-stepper] .st-label{font-size:.78rem;margin-top:.5rem;color:var(--st-ink,#556);line-height:1.3;}
@media(max-width:640px){[data-stepper] .st-label{font-size:.68rem}}