/* F1 shirt designer (custom-f1.html): the tee builder's studio layout (custom-tee.css) with a drawn F1 shirt. */
.f1-photo{width:min(100%,640px)}
.f1-photo svg{display:block;width:100%;height:auto;max-height:calc(100vh - var(--nav-h) - 250px);max-height:calc(100dvh - var(--nav-h) - 250px)}
.f1-photo.is-picking [data-part]{cursor:pointer}
.f1-photo.is-picking [data-part]:hover{filter:brightness(1.12) saturate(1.05)}
.f1-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.f1-share{font-size:13px}
.f1-share-box{margin:4px 0 22px;padding:14px;border-radius:8px;background:var(--sand)}
.f1-share-box .ct-label{font-size:14px;margin-bottom:8px}
.f1-share-box input{font-size:13px}
.f1-share-box .ct-help{margin:8px 0 0}
.f1-intro{margin:0 0 20px}
/* Starting styles: two per row, each a drawing of that style */
.f1-looks{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.f1-looks .ct-tile-media{max-width:none;aspect-ratio:1;background:#f1efec}
.f1-looks .ct-tile-media svg,.f1-detail-tiles .ct-tile-media svg{width:100%;height:100%}
/* Detail options: close-ups of the shirt */
.f1-detail-tiles .ct-tile-media{max-width:96px;overflow:hidden;background:#f1efec}
.f1-tiles-wide{grid-template-columns:1fr}
.f1-tiles-wide .ct-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left}
.f1-tiles-wide .ct-tile-media{grid-row:span 2;width:44px;height:44px}
.f1-tiles-wide .ct-tile-cap{font-size:14px}
/* Colour dots for combos and parts */
.f1-dot{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000002a}
.f1-combos,.f1-parts{grid-template-columns:repeat(4,minmax(0,1fr))}
.f1-combos .ct-tile-cap,.f1-parts .ct-tile-cap{font-size:12px}
.f1-combos .ct-tile-media,.f1-parts .ct-tile-media{max-width:56px}
/* Size chart */
.f1-chart{margin:0 0 22px;border:1px solid var(--line);border-radius:8px}
.f1-chart summary{padding:12px 14px;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer}
.f1-chart summary:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}
.f1-chart div{overflow-x:auto;padding:0 14px 14px}
.f1-chart table{width:100%;border-collapse:collapse;font-size:13px;text-align:center}
.f1-chart th,.f1-chart td{padding:6px 4px;border-top:1px solid var(--line)}
.f1-chart thead th{border-top:0;color:var(--muted);font-weight:600}
@media(max-width:900px){
  .f1-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .f1-photo svg{width:100%;height:100%;max-width:100%;max-height:calc(min(52vh,460px) - 50px)}
  .f1-looks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f1-combos,.f1-parts{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:480px){
  .f1-looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f1-combos,.f1-parts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Keep the tick next to small, centred tiles */
.f1-combos input:checked+.ct-tile:before,.f1-parts input:checked+.ct-tile:before{left:calc(50% - 36px)}
.f1-detail-tiles input:checked+.ct-tile:before{left:max(0px,calc(50% - 56px))}