/* ── XAthletica restringing booking page ─────────────────────────────────────
   Everything is scoped under #xat-restring so the Shopify theme is untouched
   and the theme's own button/heading styles don't leak in.
   ─────────────────────────────────────────────────────────────────────────── */
#xat-restring{
  --xr-ink:#141414; --xr-ink2:#3F3F46; --xr-muted:#5F5F66; --xr-line:#E5E5E8; --xr-line2:#D4D4D8;
  --xr-soft:#F5F5F6; --xr-white:#FFFFFF; --xr-red:#FE0403; --xr-red-btn:#D00303; --xr-red-text:#C40202;
  --xr-red-soft:#FDECEC; --xr-red-dark:#A30202; --xr-green:#1A7F37; --xr-green-soft:#E8F5EC; --xr-amber-soft:#FFF7E6;
  font-family:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--xr-ink);
  font-size:15px; line-height:1.4; background:var(--xr-soft); -webkit-font-smoothing:antialiased;
  margin:0 auto; text-align:left; overflow-x:clip;
}
#xat-restring *,#xat-restring *::before,#xat-restring *::after{box-sizing:border-box}
#xat-restring button,#xat-restring input,#xat-restring select,#xat-restring a.xr-btn{
  font:inherit; letter-spacing:normal; text-transform:none; margin:0; box-shadow:none; min-width:0; color:inherit;
}
#xat-restring button{cursor:pointer; background:none; border:0; padding:0; line-height:1.2; -webkit-tap-highlight-color:transparent}
#xat-restring button:disabled{cursor:not-allowed}
#xat-restring button:focus-visible,#xat-restring a:focus-visible,#xat-restring input:focus-visible,#xat-restring select:focus-visible{outline:3px solid #2563EB; outline-offset:2px}
#xat-restring h1,#xat-restring h2,#xat-restring h3,#xat-restring p{margin:0; font-family:inherit; letter-spacing:normal; text-transform:none; color:inherit}
#xat-restring a{color:var(--xr-ink)}
#xat-restring a:hover{color:var(--xr-red-text)}
#xat-restring img{max-width:100%; display:block}
#xat-restring svg{flex-shrink:0}
#xat-restring .xr-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── Page frame ── */
.xr-app{padding-bottom:110px; max-width:1248px; margin:0 auto}
.xr-top{background:var(--xr-white); padding:16px 16px 16px; display:flex; flex-direction:column; gap:14px; border-bottom:1px solid var(--xr-line)}
.xr-toprow{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.xr-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; text-decoration:none; min-height:44px}
#xat-restring button.xr-link{color:var(--xr-ink)}
.xr-lang{display:flex; border:1px solid var(--xr-line); border-radius:999px; padding:3px; background:var(--xr-white)}
#xat-restring .xr-lang button{height:30px; min-width:42px; border-radius:999px; font-size:12px; font-weight:600; color:var(--xr-muted)}
#xat-restring .xr-lang button[aria-pressed="true"]{background:var(--xr-ink); color:var(--xr-white)}
.xr-eyebrow{font-size:12px; font-weight:600; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--xr-red-text) !important; margin-bottom:4px !important}
#xat-restring .xr-h1{font-size:28px; line-height:1.15; font-weight:700}
#xat-restring .xr-h1.is-small{font-size:24px}
.xr-progress{display:flex; flex-direction:column; gap:8px}
.xr-bars{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.xr-bars span{height:4px; border-radius:2px; background:var(--xr-line)}
.xr-bars span.is-done{background:var(--xr-ink)}
.xr-bars span.is-now{background:var(--xr-red)}
.xr-stepline{font-size:13px; color:var(--xr-muted)}
.xr-stepline strong{color:var(--xr-ink); font-weight:600}
.xr-steplabels{display:none}

.xr-layout{display:block}
.xr-main{padding:16px 10px; display:flex; flex-direction:column; gap:14px; min-width:0}
.xr-aside{display:none}

/* ── Cards & text ── */
.xr-card{background:var(--xr-white); border:1px solid var(--xr-line); border-radius:14px; padding:16px 14px; display:flex; flex-direction:column; gap:16px}
.xr-card.is-tight{gap:12px}
.xr-card.is-list{padding:4px 16px; gap:0}
.xr-row{display:flex; justify-content:space-between; align-items:center; gap:12px}
.xr-row.is-top{align-items:flex-start}
.xr-row.is-base{align-items:baseline}
#xat-restring .xr-title{font-size:15px; font-weight:600}
#xat-restring .xr-title.is-lg{font-size:17px; font-weight:700}
#xat-restring .xr-label{font-size:13px; font-weight:600; display:block}
#xat-restring .xr-label .xr-opt,.xr-opt{font-weight:400; color:var(--xr-muted)}
#xat-restring .xr-sub{font-size:12px; color:var(--xr-muted); margin-top:2px}
#xat-restring .xr-small{font-size:13px; color:var(--xr-muted); line-height:1.45}
#xat-restring .xr-strong{font-weight:600; color:var(--xr-ink)}
.xr-field{display:flex; flex-direction:column; gap:6px}
#xat-restring .xr-input{height:48px; width:100%; border:1px solid var(--xr-line2); border-radius:10px; padding:0 14px; font-size:16px; color:var(--xr-ink); background:var(--xr-white); outline:none}
#xat-restring .xr-input:focus{border-color:var(--xr-ink)}
#xat-restring .xr-input.is-error{border-color:var(--xr-red-text)}
.xr-group{display:flex; height:48px; border:1px solid var(--xr-line2); border-radius:10px; overflow:hidden; background:var(--xr-white)}
.xr-group:focus-within{border-color:var(--xr-ink)}
.xr-group-pre{display:flex; align-items:center; padding:0 12px; background:var(--xr-soft); border-right:1px solid var(--xr-line2); font-size:15px; color:var(--xr-ink2)}
#xat-restring .xr-group .xr-input{border:0; border-radius:0; height:46px}
#xat-restring .xr-error{font-size:12px; color:var(--xr-red-text); font-weight:500}
#xat-restring select.xr-input{appearance:auto; padding:0 10px}

/* ── Stepper / tabs / chips ── */
.xr-stepper{display:flex; align-items:center; gap:4px}
#xat-restring .xr-stepbtn{width:44px; height:44px; border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white); font-size:20px; display:flex; align-items:center; justify-content:center}
#xat-restring .xr-stepbtn.is-dark{background:var(--xr-ink); border-color:var(--xr-ink); color:var(--xr-white)}
#xat-restring .xr-stepbtn:disabled{opacity:.35}
#xat-restring .xr-stepbtn.is-sm{width:40px; height:40px; border-radius:10px; font-size:18px}
.xr-stepval{min-width:32px; text-align:center; font-size:18px; font-weight:700}
.xr-stepval.is-wide{min-width:64px; font-size:17px}
.xr-tabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
.xr-tabs::-webkit-scrollbar{display:none}
#xat-restring .xr-tab{flex:1 0 auto; min-width:112px; height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white); font-size:14px; color:var(--xr-muted); display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap}
#xat-restring .xr-tab[aria-selected="true"]{border:2px solid var(--xr-ink); color:var(--xr-ink); font-weight:600}
.xr-chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0; padding:0}
.xr-chips::-webkit-scrollbar{display:none}
#xat-restring .xr-chip{flex:0 0 auto; height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--xr-line); background:var(--xr-white); font-size:13px; white-space:nowrap}
#xat-restring .xr-chip[aria-pressed="true"]{background:var(--xr-ink); border-color:var(--xr-ink); color:var(--xr-white); font-weight:600}
#xat-restring .xr-textbtn{min-height:36px; font-size:13px; font-weight:500; text-decoration:underline; color:var(--xr-ink)}

/* ── String cards ── */
.xr-strs{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin:0; padding:2px 0 4px}
.xr-strs::-webkit-scrollbar{display:none}
#xat-restring .xr-str{flex:0 0 148px; scroll-snap-align:start; text-align:left; border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white); padding:10px; display:flex; flex-direction:column; gap:4px; position:relative}
#xat-restring .xr-str.is-sel{border:2px solid var(--xr-red); padding:9px}
.xr-str-img{width:100%; aspect-ratio:4/3; border-radius:8px; background:var(--xr-soft); object-fit:cover; margin-bottom:4px}
.xr-str-badge{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--xr-muted); min-height:14px}
.xr-str.is-top .xr-str-badge{color:var(--xr-red-text)}
.xr-str-brand{font-size:12px; color:var(--xr-muted)}
.xr-str-name{font-size:16px; font-weight:700; color:var(--xr-ink); line-height:1.15}
.xr-str-tag{font-size:12px; color:var(--xr-muted)}
.xr-str-price{font-size:15px; font-weight:600; color:var(--xr-ink); margin-top:2px}
.xr-str-check{position:absolute; top:16px; right:16px; width:24px; height:24px; border-radius:50%; background:var(--xr-red); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--xr-white)}

/* ── Chart + settings (side by side on desktop) ── */
.xr-split{display:flex; flex-direction:column; gap:16px}
.xr-split-a,.xr-split-b{display:flex; flex-direction:column; gap:16px; min-width:0}
.xr-g-colour,.xr-g-tension,.xr-g-pro,.xr-g-extra{display:flex; flex-direction:column; gap:12px; min-width:0}
.xr-g-colour:empty{display:none}
.xr-split-a:empty{display:none}
/* ── Chart ── */
.xr-chart{background:var(--xr-soft); border-radius:12px; padding:12px 8px 10px; display:flex; flex-direction:column; align-items:center; gap:8px}
.xr-chart > svg{width:100%; max-width:360px; height:auto}
.xr-chart-head{display:flex; width:100%; gap:10px; align-items:center; padding:0 6px}
#xat-restring .xr-chart-img{width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--xr-white); flex:0 0 56px}
.xr-legend{display:flex; gap:14px; font-size:12px; color:var(--xr-ink2); flex-wrap:wrap; justify-content:center}
.xr-legend span{display:inline-flex; align-items:center; gap:6px}
.xr-legend i{display:inline-block; width:18px; height:0; border-top:2px solid var(--xr-red)}
.xr-legend i.is-cmp{border-top:2px dashed var(--xr-ink)}
.xr-compare{display:flex; align-items:center; gap:8px; width:100%; padding:0 6px}
#xat-restring .xr-compare select{height:40px; flex:1; font-size:14px}
.xr-about{font-size:13px; color:var(--xr-ink2); line-height:1.5; padding:0 6px; width:100%}

/* ── Colours, levels, folds ── */
.xr-swatches{display:flex; gap:10px; flex-wrap:wrap}
#xat-restring .xr-sw{width:44px; height:44px; border-radius:50%; border:2px solid transparent; background:var(--xr-white); padding:3px; position:relative}
#xat-restring .xr-sw[aria-pressed="true"]{border-color:var(--xr-ink)}
#xat-restring .xr-sw span{display:block; width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
#xat-restring .xr-sw:disabled{opacity:.35}
#xat-restring .xr-sw:disabled::after{content:''; position:absolute; left:6px; right:6px; top:50%; border-top:2px solid var(--xr-ink2); transform:rotate(-45deg)}
.xr-levels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
#xat-restring .xr-level{min-height:60px; border-radius:10px; border:1px solid var(--xr-line); background:var(--xr-white); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 2px; min-width:0}
#xat-restring .xr-level[aria-pressed="true"]{border:2px solid var(--xr-ink)}
.xr-level b{font-size:12px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap}
.xr-level small{font-size:11px; color:var(--xr-muted)}
#xat-restring .xr-fold{min-height:48px; border-radius:10px; border:1px dashed var(--xr-line2); background:var(--xr-white); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; font-size:13px; text-align:left; width:100%}
#xat-restring .xr-fold[aria-expanded="true"]{border-style:solid; border-color:var(--xr-ink)}
#xat-restring .xr-fold[aria-expanded="true"] svg{transform:rotate(180deg)}
.xr-pro{display:flex; flex-direction:column; gap:14px; padding:14px; border-radius:12px; background:var(--xr-soft)}
#xat-restring .xr-info{width:22px; height:22px; border-radius:50%; border:1px solid var(--xr-line2); font-size:12px; font-weight:700; color:var(--xr-ink2); display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-left:4px}
.xr-infotext{font-size:13px; line-height:1.5; color:var(--xr-ink2); background:var(--xr-white); border:1px solid var(--xr-line); border-radius:10px; padding:10px 12px}
.xr-caution{margin-top:8px; padding:8px 10px; border-radius:8px; background:var(--xr-amber-soft); font-size:12px}
#xat-restring .xr-addrow{min-height:52px; border-radius:10px; border:1px solid var(--xr-line); background:var(--xr-white); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; font-size:13px; width:100%; text-align:left}
.xr-grip-sel{display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; border:1px solid var(--xr-line)}
.xr-grip-sel img{width:52px; height:52px; border-radius:8px; object-fit:cover; background:var(--xr-soft)}

/* ── Option cards (radio) ── */
#xat-restring .xr-option{width:100%; text-align:left; border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white); padding:14px; display:flex; gap:12px; align-items:center}
#xat-restring .xr-option[aria-checked="true"]{border:2px solid var(--xr-ink); padding:13px}
.xr-option-icon{width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:var(--xr-soft); display:flex; align-items:center; justify-content:center}
.xr-option-text{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.xr-option-text b{font-size:15px; font-weight:600}
.xr-option-text small{font-size:13px; color:var(--xr-muted); line-height:1.4}
.xr-radio{width:22px; height:22px; flex:0 0 22px; border-radius:50%; border:2px solid var(--xr-line2)}
.xr-option[aria-checked="true"] .xr-radio{border:7px solid var(--xr-ink)}
.xr-days{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0; padding:0}
.xr-days::-webkit-scrollbar{display:none}
#xat-restring .xr-day{flex:0 0 62px; height:64px; border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white); display:flex; flex-direction:column; align-items:center; justify-content:center}
#xat-restring .xr-day small{font-size:11px; color:var(--xr-muted)}
#xat-restring .xr-day b{font-size:17px; font-weight:700}
#xat-restring .xr-day[aria-pressed="true"]{background:var(--xr-ink); border-color:var(--xr-ink); color:var(--xr-white)}
#xat-restring .xr-day[aria-pressed="true"] small{color:var(--xr-line2)}
.xr-slots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
#xat-restring .xr-slot{height:48px; border-radius:10px; border:1px solid var(--xr-line); background:var(--xr-white); font-size:13px}
#xat-restring .xr-slot[aria-pressed="true"]{border:2px solid var(--xr-ink); font-weight:600}
.xr-note{background:var(--xr-soft); border-radius:10px; padding:12px; display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--xr-ink2)}
.xr-note.is-green{background:var(--xr-green-soft)}
.xr-place{border:1px solid var(--xr-line); border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px}

/* ── Buttons ── */
#xat-restring .xr-btn{height:52px; padding:0 22px; border-radius:12px; font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; border:1px solid transparent; white-space:nowrap}
#xat-restring .xr-btn-dark{background:var(--xr-ink); color:var(--xr-white)}
#xat-restring .xr-btn-dark:hover{color:var(--xr-white); background:#000}
#xat-restring .xr-btn-red{background:var(--xr-red-btn); color:var(--xr-white); font-weight:700; font-size:16px}
#xat-restring .xr-btn-red:hover{color:var(--xr-white); background:#B80202}
#xat-restring .xr-btn-ghost{background:var(--xr-white); border-color:var(--xr-line2); color:var(--xr-ink)}
#xat-restring .xr-btn-sm{height:40px; padding:0 12px; border-radius:10px; font-size:13px}
#xat-restring .xr-btn.is-block{width:100%}
#xat-restring .xr-btn:disabled{opacity:.6}

/* ── Bottom bar (mobile) ── */
.xr-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--xr-white); border-top:1px solid var(--xr-line); box-shadow:0 -6px 20px rgba(0,0,0,.06); padding:12px 16px calc(14px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:'Lexend',system-ui,sans-serif}
.xr-bar.is-col{flex-direction:column; align-items:stretch; gap:8px}
.xr-bar-total{min-width:0}
.xr-bar-total small{display:block; font-size:12px; color:var(--xr-muted); white-space:nowrap}
.xr-bar-total b{font-size:20px; font-weight:700}
.xr-bar-total s{font-size:12px; color:var(--xr-muted); margin-left:6px; font-weight:400}

/* ── Summary rows ── */
.xr-sumrow{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #F0F0F2; font-size:13px}
.xr-sumrow:first-of-type{border-top:0}

.xr-sumrow > span:last-child{font-weight:500; text-align:right}
.xr-item{display:flex; gap:12px; padding:12px 0; border-top:1px solid #F0F0F2}
.xr-dot{width:12px; height:12px; flex:0 0 12px; margin-top:5px; border-radius:50%; box-shadow:0 0 0 1px var(--xr-line2)}
.xr-tag{display:inline-block; margin-top:6px; padding:3px 8px; border-radius:6px; background:var(--xr-red-soft); color:var(--xr-red-dark); font-size:12px; font-weight:600}
.xr-totals{display:flex; flex-direction:column; gap:8px}
.xr-totals .xr-row{font-size:13px}
.xr-totals .is-disc{color:var(--xr-red-dark)}
.xr-totals .is-grand{padding-top:10px; border-top:1px solid var(--xr-line); align-items:baseline}
.xr-totals .is-grand b{font-size:22px}
.xr-banner{background:var(--xr-ink); color:var(--xr-white); border-radius:14px; padding:14px 16px; display:flex; gap:12px; align-items:center}
.xr-banner-icon{width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:var(--xr-red); display:flex; align-items:center; justify-content:center}
.xr-banner small{display:block; color:var(--xr-line2); font-size:12px; margin-top:2px}

/* ── Confirmation ── */
.xr-done-head{background:var(--xr-white); padding:28px 16px 22px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; border-bottom:1px solid var(--xr-line)}
.xr-done-check{width:64px; height:64px; border-radius:50%; background:var(--xr-green-soft); display:flex; align-items:center; justify-content:center}
.xr-ordpill{margin-top:6px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--xr-line)}
.xr-ordpill b{font-size:18px; font-weight:700; letter-spacing:.02em}
.xr-pay{background:var(--xr-ink); color:var(--xr-white); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px}
.xr-pay small{display:block; font-size:12px; color:#A1A1AA}
.xr-pay-num{font-size:20px; font-weight:600; letter-spacing:.06em}
.xr-pay-sep{padding-top:14px; border-top:1px solid #2E2E33}
#xat-restring .xr-copy{height:40px; padding:0 12px; border-radius:10px; border:1px solid #3F3F46; background:#262626; color:var(--xr-white); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px}
#xat-restring .xr-copy.is-light{background:var(--xr-white); color:var(--xr-ink); border-color:var(--xr-line2)}
.xr-pay p{font-size:13px; line-height:1.5; color:var(--xr-line2)}
.xr-pay p strong{color:var(--xr-white)}
.xr-next{display:flex; gap:12px}
.xr-next-n{width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--xr-soft); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center}
.xr-next-n.is-on{background:var(--xr-ink); color:var(--xr-white)}

/* ── Tracking ── */
.xr-tgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.xr-trk{display:flex; flex-direction:column; gap:8px}
.xr-trk + .xr-trk{padding-top:14px; border-top:1px solid #F0F0F2}
.xr-segs{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px}
.xr-segs span{height:6px; border-radius:3px; background:var(--xr-line)}
.xr-segs span.is-on{background:var(--xr-green)}
.xr-status{font-size:12px; font-weight:600; color:var(--xr-green); white-space:nowrap}
.xr-topay{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-radius:10px; background:var(--xr-amber-soft)}
.xr-topay.is-paid{background:var(--xr-green-soft)}
.xr-stamps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-width:340px}
.xr-stamp{aspect-ratio:1; border-radius:50%; border:2px dashed var(--xr-line2); display:flex; align-items:center; justify-content:center}
.xr-stamp.is-on{background:var(--xr-ink); border:0}
.xr-stamp.is-gift{background:var(--xr-red-soft); border:2px solid var(--xr-red)}
.xr-stamp.is-gift.is-ready{background:var(--xr-red); }
.xr-hist{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #F0F0F2}
.xr-hist > div{flex:1; min-width:0}
.xr-msg{padding:12px; border-radius:10px; background:var(--xr-soft); font-size:13px; line-height:1.45}

/* ── Sheet (grips, image) ── */
.xr-sheet-bg{position:fixed; inset:0; z-index:100; background:rgba(20,20,20,.45); display:flex; align-items:flex-end; justify-content:center; font-family:'Lexend',system-ui,sans-serif; color:var(--xr-ink)}
.xr-sheet{background:var(--xr-white); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; border-radius:18px 18px 0 0; padding:8px 16px calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px}
.xr-sheet-grab{width:40px; height:4px; border-radius:2px; background:var(--xr-line2); margin:4px auto 0}
.xr-sheet-head{display:flex; justify-content:space-between; align-items:center; gap:10px; position:sticky; top:-8px; background:var(--xr-white); padding:8px 0; z-index:1}
.xr-grips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.xr-grip{border:1px solid var(--xr-line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; text-align:left; background:var(--xr-white)}
.xr-grip img{width:100%; aspect-ratio:1; object-fit:cover; background:var(--xr-soft)}
.xr-grip div{padding:10px; display:flex; flex-direction:column; gap:4px; flex:1}
.xr-grip b{font-size:13px; font-weight:600; line-height:1.3}
.xr-grip small{font-size:13px; color:var(--xr-ink2)}
.xr-grip.is-oos{opacity:.5}
.xr-gallery{position:relative; border-radius:12px; overflow:hidden; background:var(--xr-soft)}
.xr-gallery img{width:100%; aspect-ratio:1; object-fit:contain}
.xr-thumbs{display:flex; gap:8px; overflow-x:auto}
#xat-restring .xr-thumb,.xr-sheet .xr-thumb{width:56px; height:56px; flex:0 0 56px; border-radius:8px; overflow:hidden; border:2px solid transparent; padding:0; background:var(--xr-soft)}
.xr-sheet .xr-thumb[aria-pressed="true"]{border-color:var(--xr-ink)}
.xr-sheet .xr-thumb img{width:100%; height:100%; object-fit:cover}
.xr-sheet button{font:inherit; cursor:pointer; background:none; border:0; padding:0; color:inherit; letter-spacing:normal; text-transform:none}
.xr-sheet .xr-chip{height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--xr-line); background:var(--xr-white); font-size:13px; white-space:nowrap}
.xr-sheet .xr-chip[aria-pressed="true"]{background:var(--xr-ink); border-color:var(--xr-ink); color:var(--xr-white); font-weight:600}
.xr-sheet .xr-chip:disabled{opacity:.4; text-decoration:line-through}
.xr-sheet .xr-btn{height:52px; padding:0 22px; border-radius:12px; font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%}
.xr-sheet .xr-btn-dark{background:var(--xr-ink); color:var(--xr-white)}
.xr-sheet .xr-stepbtn{width:44px; height:44px; border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white); font-size:20px; display:flex; align-items:center; justify-content:center}
.xr-sheet .xr-close{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--xr-soft)}
.xr-sheet .xr-title{font-size:17px; font-weight:700}
.xr-sheet .xr-small{font-size:13px; color:var(--xr-muted)}
.xr-sheet .xr-row{display:flex; justify-content:space-between; align-items:center; gap:12px}
.xr-sheet .xr-chips{display:flex; gap:6px; flex-wrap:wrap}
.xr-sheet .xr-stepper{display:flex; align-items:center; gap:4px}
.xr-sheet .xr-stepval{min-width:32px; text-align:center; font-size:18px; font-weight:700}
.xr-sheet button:focus-visible{outline:3px solid #2563EB; outline-offset:2px}

/* ── Toast ── */
.xr-toast{display:none; position:fixed; left:50%; bottom:104px; transform:translateX(-50%); z-index:2147483000; max-width:calc(100% - 32px); width:max-content; background:#141414; color:#FFFFFF; padding:12px 16px; border-radius:12px; font-family:'Lexend',system-ui,sans-serif; font-size:14px; line-height:1.4; box-shadow:0 8px 30px rgba(0,0,0,.25)}

.xr-loading{padding:40px 16px; text-align:center; color:var(--xr-muted); font-size:14px}
.xr-spin{width:28px; height:28px; border-radius:50%; border:3px solid var(--xr-line); border-top-color:var(--xr-ink); margin:0 auto 12px; animation:xr-spin .8s linear infinite}
@keyframes xr-spin{to{transform:rotate(360deg)}}


/* ── Step guide (tap to jump) ── */
.xr-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
#xat-restring .xr-stepb{display:flex; flex-direction:column; gap:7px; align-items:stretch; text-align:left; min-height:40px; padding:4px 0}
.xr-stepb-bar{height:4px; border-radius:2px; background:var(--xr-line)}
.xr-stepb.is-done .xr-stepb-bar{background:var(--xr-ink)}
.xr-stepb.is-now .xr-stepb-bar{background:var(--xr-red)}
.xr-stepb-lab{font-size:12px; color:var(--xr-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xr-stepb.is-now .xr-stepb-lab,.xr-stepb.is-done .xr-stepb-lab{color:var(--xr-ink); font-weight:600}
.xr-stepb.is-locked .xr-stepb-lab{color:#8E8E96}
.xr-hide-m{display:none}

/* ── Rackets: folded lines, editor, add box ── */
.xr-fline{background:var(--xr-white); border:1px solid var(--xr-line); border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:12px}
.xr-fline.is-todo{border-color:#F0B429; background:#FFFBEB}
.xr-tick{width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:var(--xr-green); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700}
.xr-tick.is-todo{background:#B45309}
.xr-editor{border:2px solid var(--xr-ink)}
#xat-restring .xr-btn-green{background:var(--xr-green); color:var(--xr-white)}
#xat-restring .xr-btn-green:hover{background:#15692D; color:var(--xr-white)}
.xr-addbox{border:1.5px dashed var(--xr-line2); border-radius:14px; padding:14px 16px; background:var(--xr-white); display:flex; flex-direction:column; gap:10px}
.xr-addbtns{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px}

/* ── Tension card + slider ── */
.xr-tension{border:1.5px dashed var(--xr-ink); border-radius:14px; background:#FAFAFA; padding:12px; display:flex; flex-direction:column; gap:12px}
.xr-tval{min-width:70px; text-align:center; font-size:22px; font-weight:700}
.xr-tval small{font-size:13px; font-weight:500}
#xat-restring .xr-range{-webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; cursor:pointer; touch-action:pan-y}
#xat-restring .xr-range::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(to right,#141414 0,#141414 var(--xr-pct,40%),#E5E5E8 var(--xr-pct,40%))}
#xat-restring .xr-range::-moz-range-track{height:6px; border-radius:3px; background:#E5E5E8}
#xat-restring .xr-range::-moz-range-progress{height:6px; border-radius:3px; background:#141414}
#xat-restring .xr-range::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%; background:#fff; border:2px solid #141414; box-shadow:0 2px 6px rgba(0,0,0,.15)}
#xat-restring .xr-range::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid #141414}

/* ── Missing information ── */
.is-invalid{border-radius:12px; outline:2px solid var(--xr-red-text); outline-offset:6px; background:#FFF5F5}
.xr-card.is-invalid{outline-offset:-2px}
.is-invalid .xr-input{border-color:var(--xr-red-text)}

/* ── Review: inline editing ── */
.xr-inline{margin:4px -8px 10px; padding:12px 10px; border:2px solid var(--xr-ink); border-radius:12px; display:flex; flex-direction:column; gap:14px}
.xr-editwrap{display:flex; flex-direction:column; gap:12px; padding:6px; border:2px solid var(--xr-ink); border-radius:16px}
.xr-sumrow .xr-tick{width:20px; height:20px; flex:0 0 20px; font-size:11px}
.xr-sumrow{align-items:center}
.xr-sumrow > span:nth-child(2){color:var(--xr-muted)}
#xat-restring .xr-day.is-now{flex:0 0 auto; padding:0 14px}
#xat-restring .xr-day.is-now b{font-size:15px}

/* ── Desktop ── */
@media (min-width:960px){
  .xr-app{padding:0 24px 56px; max-width:1248px}
  .xr-top{background:transparent; border:0; padding:32px 0 24px; gap:20px}
  #xat-restring .xr-h1{font-size:36px}
  #xat-restring .xr-h1.is-small{font-size:30px}
  .xr-hide-m{display:inline}
  .xr-hide-d{display:none}
  .xr-stepb-lab{font-size:13px}
  .xr-steplabels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; font-size:13px; color:var(--xr-muted)}
  .xr-steplabels .is-now{color:var(--xr-ink); font-weight:600}
  .xr-layout{display:flex; gap:24px; align-items:flex-start}
  .xr-main{flex:1 1 auto; padding:0}
  /* Computer: string summary/chart across the full width, then tension | colour + options */
  .xr-split{display:flex; flex-direction:column; gap:20px}
  .xr-split-a .xr-chart:not(.is-open){padding:10px 14px}
  .xr-chart.is-open .xr-chart-body{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 32px}
  .xr-chart.is-open .xr-chart-body > svg{flex:0 1 360px}
  .xr-chart.is-open .xr-chart-body .xr-compare{flex:1 1 280px; max-width:460px}
  .xr-chart.is-open .xr-chart-body .xr-compare .xr-chips{flex-wrap:wrap}
  .xr-chart.is-open .xr-chart-body .xr-legend,.xr-chart.is-open .xr-chart-body .xr-about{flex:1 1 100%}
  .xr-split-b{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"tension colour" "tension pro" "tension extra" "tension ."; gap:14px 24px; align-items:start}
  .xr-g-tension{grid-area:tension} .xr-g-colour{grid-area:colour} .xr-g-pro{grid-area:pro} .xr-g-extra{grid-area:extra}
  .xr-g-colour:empty{display:none}
  .xr-aside{display:flex; flex:0 0 340px; position:sticky; top:24px; background:var(--xr-white); border:1px solid var(--xr-line); border-radius:16px; padding:20px; flex-direction:column; gap:14px}
  .xr-bar{display:none}
  .xr-tabs,.xr-chips,.xr-days{margin:0; padding:0; flex-wrap:wrap}
  .xr-strs{margin:0; padding:2px; flex-wrap:wrap; overflow:visible; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  #xat-restring .xr-str{flex:auto}
  .xr-done-head{background:var(--xr-white); border:1px solid var(--xr-line); border-radius:16px; margin-top:24px}
  .xr-narrow{max-width:640px; margin:0 auto; width:100%}
  .xr-toast{bottom:32px}
  .xr-sheet-bg{align-items:center}
  .xr-sheet{border-radius:18px; max-height:84vh}
  .xr-grips{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Drop-off option with the map link built in */
.xr-optwrap{border-radius:12px; border:1px solid var(--xr-line); background:var(--xr-white)}
.xr-optwrap.is-sel{border:2px solid var(--xr-ink)}
#xat-restring .xr-optwrap .xr-option,#xat-restring .xr-optwrap .xr-option[aria-checked="true"]{border:0; padding:14px 14px 4px}
.xr-optwrap .xr-maplink{display:flex; justify-content:center; align-items:center; gap:6px; margin:2px 14px 0; padding:4px 0 12px; border-top:1px solid #F0F0F2; min-height:36px; font-size:13px; font-weight:600; color:var(--xr-red-text); text-decoration:underline; text-underline-offset:3px}
#xat-restring .xr-optwrap .xr-maplink:hover{color:var(--xr-red-dark)}
@media (min-width:960px){ .xr-main{padding:0} .xr-card{padding:16px} }

/* Chart folded by default on phones (tap the row to open) */
.xr-chart{gap:10px}
.xr-chart:not(.is-open){padding:8px}
.xr-chart-head{padding:0 !important}
#xat-restring .xr-chart-thumb{flex:0 0 56px; border-radius:10px; overflow:hidden; background:#fff; padding:0}
#xat-restring .xr-chart-toggle{flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left; min-height:56px; padding:0 6px}
#xat-restring .xr-chart-toggle svg{width:18px; height:18px; flex:0 0 18px}
#xat-restring .xr-chart-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.xr-chart-head{display:flex; width:100%; align-items:center; gap:10px}
/* String photo viewer */
.xr-photo{background:#fff; border:1px solid var(--xr-line); border-radius:12px; display:flex; align-items:center; justify-content:center; padding:8px}
.xr-photo img{max-width:100%; max-height:62vh; object-fit:contain; border-radius:8px}
/* Grip colours: one row that scrolls sideways */
.xr-sheet .xr-chips{flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:2px 0 6px; margin:0}
.xr-sheet .xr-chips::-webkit-scrollbar{display:none}
.xr-sheet .xr-chip{flex:0 0 auto}
.xr-sheet .xr-thumbs{scrollbar-width:none}
.xr-sheet .xr-thumbs::-webkit-scrollbar{display:none}

/* ── Motion: short, soft transitions (switched off for people who ask for less motion) ── */
.xr-chart-body{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%}
@keyframes xr-in-fwd{from{opacity:0; transform:translateX(22px)}to{opacity:1; transform:none}}
@keyframes xr-in-back{from{opacity:0; transform:translateX(-22px)}to{opacity:1; transform:none}}
@keyframes xr-pop{from{opacity:0; transform:translateY(8px) scale(.985)}to{opacity:1; transform:none}}
@keyframes xr-reveal{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
@keyframes xr-fade-in{from{opacity:0}to{opacity:1}}
@keyframes xr-fade-out{from{opacity:1}to{opacity:0}}
@keyframes xr-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes xr-sheet-down{from{transform:none}to{transform:translateY(100%)}}
@keyframes xr-sheet-zoom{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
@keyframes xr-toast-in{from{opacity:0; transform:translate(-50%,10px)}to{opacity:1; transform:translate(-50%,0)}}
.xr-go-fwd > .xr-layout,.xr-go-fwd > .xr-narrow,.xr-go-fwd > .xr-main,.xr-go-fwd .xr-top .xr-h1{animation:xr-in-fwd .28s cubic-bezier(.2,.8,.2,1) both}
.xr-go-back > .xr-layout,.xr-go-back .xr-top .xr-h1{animation:xr-in-back .28s cubic-bezier(.2,.8,.2,1) both}
.xr-pop{animation:xr-pop .26s cubic-bezier(.2,.8,.2,1) both}
[data-reveal].xr-pop{animation:xr-reveal .22s ease-out both}
.xr-sheet-bg.is-in{animation:xr-fade-in .2s ease-out both}
.xr-sheet-bg.is-in .xr-sheet{animation:xr-sheet-up .3s cubic-bezier(.2,.8,.2,1) both}
.xr-sheet-bg.is-out{animation:xr-fade-out .19s ease-in both}
.xr-sheet-bg.is-out .xr-sheet{animation:xr-sheet-down .19s ease-in both}
.xr-toast.is-in{animation:xr-toast-in .22s ease-out both}
.xr-stepb-bar{transition:background-color .3s ease}
#xat-restring button,#xat-restring a.xr-btn,.xr-sheet button{transition:transform .12s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease}
#xat-restring button:not(:disabled):active,#xat-restring a.xr-btn:active,.xr-sheet button:not(:disabled):active{transform:scale(.97)}
#xat-restring .xr-str:not(:disabled):active{transform:scale(.98)}
.xr-fold svg,.xr-chart-toggle svg{transition:transform .2s ease}
.xr-input{transition:border-color .16s ease, box-shadow .16s ease}
@media (min-width:960px){
  .xr-sheet-bg.is-in .xr-sheet{animation:xr-sheet-zoom .22s cubic-bezier(.2,.8,.2,1) both}
  .xr-sheet-bg.is-out .xr-sheet{animation:xr-fade-out .19s ease-in both}
}
@media (prefers-reduced-motion: reduce){
  #xat-restring *,#xat-restring *::before,#xat-restring *::after,.xr-toast{animation:none !important; transition:none !important}
}

/* Sheet content never shrinks (it scrolls instead) — fixes cropped grip colours */
.xr-sheet > *{flex-shrink:0}

/* ── Smooth state changes (elements now stay in place between taps, so these play) ── */
.xr-lang{position:relative; isolation:isolate}
.xr-lang::before{content:''; position:absolute; z-index:-1; top:3px; left:3px; width:42px; height:30px; border-radius:999px; background:var(--xr-ink); transition:transform .32s cubic-bezier(.3,.9,.3,1)}
.xr-lang[data-l="fr"]::before{transform:translateX(42px)}
#xat-restring .xr-lang button[aria-pressed="true"]{background:transparent; color:var(--xr-white)}
#xat-restring .xr-lang button{transition:color .25s ease}
.xr-go-fade > *{animation:xr-fade-in .28s ease both}
#xat-restring .xr-chip,#xat-restring .xr-day,#xat-restring .xr-slot,#xat-restring .xr-level,#xat-restring .xr-sw,#xat-restring .xr-tab,#xat-restring .xr-option,#xat-restring .xr-str,.xr-sheet .xr-chip,.xr-sheet .xr-thumb{transition:background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .14s ease}
.xr-radio{transition:border-width .22s cubic-bezier(.3,.9,.3,1), border-color .22s ease}
.xr-optwrap{transition:border-color .22s ease}
.xr-str-check{animation:xr-pop .22s ease-out both}
.xr-fold svg,.xr-chart-toggle svg{transition:transform .3s cubic-bezier(.3,.9,.3,1)}
.xr-stepb-bar,.xr-stepb-lab{transition:background-color .35s ease, color .35s ease}
.xr-tick{transition:background-color .25s ease}
.xr-fline,.xr-card,.xr-inline,.xr-editwrap{transition:border-color .22s ease, background-color .22s ease}
.is-invalid{transition:outline-color .2s ease, background-color .2s ease}
.xr-bar-total b{transition:color .2s ease}

/* Grab handle: bigger touch area, drag down to close */
.xr-sheet-grab{width:40px; height:4px; margin:4px auto 0; position:relative}
.xr-sheet-grab::after{content:''; position:absolute; left:-40px; right:-40px; top:-14px; bottom:-14px}
.xr-sheet-head{touch-action:none}
/* Grip detail: smaller photo so the whole choice fits in about 3/4 of the screen */
.xr-gallery img{aspect-ratio:auto; height:30vh; max-height:260px; width:100%; object-fit:contain}
.xr-sheet .xr-thumb{width:48px; height:48px; flex:0 0 48px}
.xr-sheet{gap:12px}

/* Page behind a sheet doesn't scroll */
.xr-sheet-bg{overscroll-behavior:contain; touch-action:none}
.xr-sheet{overscroll-behavior:contain; touch-action:pan-y}
/* Grip photo: the frame hugs the photo (no side bars) */
.xr-gallery{background:none; display:flex; justify-content:center}
.xr-gallery img{width:auto; max-width:100%; height:auto; max-height:min(30vh,260px); aspect-ratio:auto; object-fit:contain; border-radius:12px}
/* Compare: tap a string chip instead of a dropdown */
.xr-compare{flex-direction:column; align-items:stretch; gap:8px}
#xat-restring .xr-cmpchip{height:auto; min-height:44px; padding:6px 14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; line-height:1.15}
#xat-restring .xr-cmpchip span{font-size:13px; font-weight:600}
#xat-restring .xr-cmpchip small{font-size:11px; opacity:.75}
/* Drop-off time: rows of time chips by part of the day */
.xr-timerow{display:flex; flex-direction:column; gap:6px}
#xat-restring .xr-timechip{min-width:72px; height:42px; font-variant-numeric:tabular-nums}

.xr-locmsg{font-size:13px; line-height:1.45; color:#7A4A00; background:var(--xr-amber-soft); border:1px solid #F0D9A8; border-radius:10px; padding:10px 12px}