/* ============================================================
   shop-customiser.css (leg L21): the one element that places logos, <hr-customiser> (root class .cz), and the small
   position guide (.guide) a basket line, an order line and a My designs card draw.
   Source: designs/shop-till-2026-11-13/till.css section C (rev 2), copied rule for rule. Three changes, each marked "L21":
     1. the logo's touch area: a pin's button is never smaller than 44 by 44 CSS px, however small the pin is drawn
     2. the stage is a size container, so a pin's width is a share of the FACE (its width in container units), not of the page
     3. the colour bars of both faces share one grid cell, so the column keeps ONE height when the face changes
   The .guide base rules and .pin-n (section B of till.css) now live once, in shop.css, which every page loads (L98 join-up).
   No colour, font, radius or shadow is new: every value is a token already in shop.css.
   ============================================================ */

hr-customiser{display:block}

.cz{container-type:inline-size;margin:26px 0;padding:0;border:0;min-width:0}
.cz-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:12px;padding-top:18px;border-top:2px solid var(--ink)}
.cz-head h2,.cz-head legend{padding:0;font-size:17px;font-weight:700}
.cz-count{font-size:16px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cz-body{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
/* rev 2 (ruling A1): the face takes the whole width of its column, never narrower than 420px on a computer. */
.cz-stagecol{min-width:0;max-width:max(420px,calc((100dvh - 130px) * .8))}
/* front and back: the range filter's leaning tabs */
.cz-faces{display:flex;gap:12px;margin-bottom:12px;padding-left:6px}
.cz-faces .filter{min-height:44px;padding:0 18px;font-size:15px}
.cz-faces .filter small{margin-left:8px;font-size:inherit;font-weight:600;opacity:.8}
/* the face, 4 wide by 5 high. White with the kit's hairline round it. A blank picture IS the tile and fills it edge to edge;
   until a product has a blank its own photo is the front (contained) and the plain panel is the back. Nothing is ever tinted.
   L21: a size container, so .cz-logo can size a pin in the face's own width (cqw). */
.cz-stage{position:relative;container-type:inline-size;aspect-ratio:4/5;border:1px solid rgba(6,32,26,.32);background:var(--white);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.cz-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cz-face.is-blank{object-fit:cover}
.cz-stage.is-plain{background:var(--plate)}
.cz-plain{position:absolute;left:18px;top:14px;margin:0;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:34px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--base)}
.cz-plain small{display:block;margin-top:6px;font-family:Figtree,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
/* a print area: two dashed rings, ink inside and white outside, so an area shows on a white garment, a black one and the plain panel alike */
.cz-area{position:absolute;border:2px dashed var(--ink);outline:2px dashed rgba(255,255,255,.95);transition:background .2s;pointer-events:none}
.cz-area.is-target{background:color-mix(in srgb,var(--accent) 38%,transparent)}
.cz-area.is-refused{border-color:var(--danger);background:rgba(154,43,27,.18)}
/* a placed logo: drawn flat, with its number on the corner.
   L21: the BUTTON is the touch area and is never smaller than 44 by 44 CSS px; the picture inside (.cz-art) is drawn at the pin's real
   size. --w is the pin's width as a percentage of the face's width, --r the logo's height over its width; both are set per logo. */
.cz-logo{position:absolute;display:grid;place-items:center;width:max(calc(var(--w) * 1cqw),44px);height:max(calc(var(--w) * 1cqw * var(--r,1)),44px);margin:calc(max(var(--w) * 1cqw * var(--r,1),44px) / -2) 0 0 calc(max(var(--w) * 1cqw,44px) / -2);padding:0;border:0;background:none;cursor:grab;touch-action:none}
.cz-logo[aria-pressed=true]{z-index:2}
.cz-logo:active{cursor:grabbing}
.cz-art{position:relative;display:block;width:calc(var(--w) * 1cqw);height:calc(var(--w) * 1cqw * var(--r,1))}
.cz-art>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cz-lost{display:block;width:100%;height:100%;border:2px dashed var(--ink);background:rgba(255,255,255,.6)}
/* the picked logo: a white line inside an ink line, so the ring shows on any garment colour */
.cz-logo[aria-pressed=true] .cz-art::after{content:"";position:absolute;inset:-7px;border:2px solid var(--white);outline:2px solid var(--ink);pointer-events:none}
.cz-logo:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.cz-logo:focus-visible .cz-art::after{content:"";position:absolute;inset:-7px;border:2px solid var(--white);outline:3px solid var(--ink);pointer-events:none}
/* F1 (R43.1): every logo's number is drawn in ONE layer above all the logos, so an overlapped logo keeps a readable number. The layer takes no taps. */
.cz-nums{position:absolute;inset:0;z-index:3;pointer-events:none}
.cz-pin{position:absolute;left:calc(var(--x) - var(--w) * .5cqw - 12px);top:calc(var(--y) - var(--w) * var(--r,1) * .5cqw - 12px);display:grid;place-items:center;min-width:28px;height:28px;padding:0 4px;border:2px solid var(--white);background:var(--ink);color:var(--paper);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:15px;line-height:1}
.cz-pin.is-picked{background:var(--accent);color:var(--ink)}
/* the standing label: this is a guide to where, not a picture of the finished garment */
.cz-guide{margin:10px 0 0;font-size:16px;font-weight:600;color:var(--ink-soft)}
/* the colour bar is the foot of the tile on every face. L21: the bars of every face sit in ONE grid cell and the unshown one is
   only hidden, so the column is as tall as its tallest bar on both faces and nothing under the tile moves when the face changes. */
.cz-bars{display:grid}
.cz-bar{grid-area:1/1;min-width:0}
.cz-bar[aria-hidden=true]{visibility:hidden}
/* named places for the picked logo: the quick way on a phone */
.cz-spots{margin-top:14px}
.cz-spots p{margin:0 0 8px;font-size:16px;font-weight:700}
.cz-spots .filters{padding-left:6px}
.cz-spots .filter{min-height:44px;padding:0 14px;font-size:14px}
/* the list: one row a logo, the picked one open */
.cz-listcol{min-width:0}
.cz-list{margin:0;padding:0;list-style:none;border-bottom:2px solid var(--ink)}
.cz-item{border-top:2px solid var(--ink)}
.cz-row{display:grid;grid-template-columns:auto 56px minmax(0,1fr) 24px;align-items:center;gap:14px;width:100%;min-height:76px;padding:10px 4px;border:0;background:none;text-align:left;color:inherit;font:inherit}
.cz-row .pin-n{min-width:30px;height:30px;font-size:16px}
.cz-item.is-open .cz-row .pin-n{background:var(--base);color:var(--accent)}
.cz-thumb{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;width:56px;height:56px;padding:6px;background:var(--white)}
.cz-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.cz-row strong{display:block;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.cz-row span span{display:block;font-size:16px;color:var(--ink-soft)}
.cz-chev{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.cz-item.is-open .cz-chev{transform:rotate(180deg)}
.cz-row:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cz-edit{padding:4px 4px 20px}
.cz-edit .field{margin:14px 0 0}
.cz-edit .field textarea{min-height:84px}
.cz-seg{display:flex;flex-wrap:wrap;gap:10px 12px;padding-left:6px}
.cz-seg .filter{min-height:44px;padding:0 16px;font-size:15px}
.cz-edit .line-controls{margin-top:12px}
.cz-add{margin-top:18px;padding-left:6px}
.cz-add .notice{margin-top:10px}
.cz-empty{margin:0;padding:18px 20px;background:var(--white);border-left:6px solid var(--base);font-weight:600}
.cz-live{min-height:0}
.cz-status{margin-top:12px}
/* only a wide holder (the sheet) puts the face on the left and the list on the right; the product page's column stays one column */
@container (min-width:760px){
  .cz-body{grid-template-columns:minmax(420px,48%) minmax(0,1fr);gap:24px;align-items:start}
  .cz-row{grid-template-columns:auto 44px minmax(0,1fr) 24px;gap:12px}
  .cz-thumb{width:44px;height:44px;padding:4px}
}
/* the customiser opened over a page (a kit garment, a saved design): the shop's sheet, full height */
dialog.sheet.cz-sheet{width:min(980px,calc(100% - 32px))}
.cz-sheet .cz{margin:0}
.cz-sheet .cz-head{border-top:0;padding-top:0}
.cz-sheet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:20px}
/* add a logo: pick from the library, or add a new file */
.logo-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin:10px 0 0;padding:0;list-style:none}
.logo-pick button{display:grid;gap:8px;width:100%;padding:10px;border:2px solid var(--ink);background:var(--white);font-size:16px;font-weight:600;line-height:1.2;text-align:left;overflow-wrap:anywhere}
.logo-pick button:hover{background:var(--plate)}
.logo-pick img{width:100%;aspect-ratio:1/1;object-fit:contain}
.sheet h3{margin:22px 0 4px;font-size:19px}

/* the numbered square (.pin-n) and the small position guide's base rules (.guide, .g-logo) live in shop.css, loaded on every page (L98).
   Here only what the customiser adds: a placement design draws .g-box. */
.guide .g-box{position:absolute;display:grid;place-items:center;border:2px dashed var(--ink);outline:2px dashed rgba(255,255,255,.95)}
.guide .g-box img{display:block;width:72%;height:72%;padding:0;background:none;object-fit:contain}
.guide .cz-plain{left:10%;top:8%;font-size:22px}

@media (max-width:700px){
  .cz-stagecol{max-width:none}
  .cz-faces .filter,.cz-spots .filter,.cz-seg .filter{font-size:16px}
  .cz-pin,.cz-row .pin-n{font-size:16px}
  .cz-row{grid-template-columns:auto 48px minmax(0,1fr) 24px;gap:12px}
  .cz-thumb{width:48px;height:48px}
  dialog.sheet.cz-sheet{width:100%;max-width:none;max-height:100dvh;height:100dvh;margin:0}
}