/* The configurator fills the viewport under the site header; site content continues below it.
   Same style guide as the site (site.css tokens): Open Sans, condensed bold titles, VersaCourt blues, orange pill for the call
   to action, square white cards. The chrome stays quiet: the colour in the view belongs to the court. */
#cfg { position: relative; padding: 0; height: calc(100dvh - var(--head-h)); min-height: 560px; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--rule);
  --k-field: var(--blue); --k-lane: var(--navy); --k-border: var(--navy); }
#stage, #gl, #labels { position: absolute; inset: 0; width: 100%; height: 100%; }
#gl { display: block; touch-action: none; }
#labels { pointer-events: none; overflow: hidden; z-index: 1; }      /* its own layer: the labels sort among themselves, under the title, the controls and the dock */

/* title block: the kit by name, its reference and size, and the court colours by name */
#title { position: absolute; z-index: 3; left: var(--gutter); top: clamp(14px, 2.2vw, 28px); pointer-events: none; max-width: min(64vw, 640px); }
#title h1 { font-size: clamp(34px, 4.6vw, 72px); line-height: .98; margin-top: 10px; max-width: 11em; text-wrap: balance; }
#title p { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 condensed clamp(14px, 1.25vw, 18px)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#kRef { background: var(--navy); color: var(--white); padding: 5px 9px; letter-spacing: .12em; }
#kCols { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }      /* stacked down the left edge, clear of the court */
#kCols .colchip { min-width: 214px; } #kCols .colchip svg { margin-left: auto; }
/* each zone's colour is a picker: the chip opens the full Game Outdoor list */
.colchip { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: inherit; text-align: left; color: var(--navy); background: rgba(255, 255, 255, .96); border: 1px solid var(--rule); padding: 5px 12px 5px 5px; box-shadow: 0 8px 18px -12px rgba(7, 53, 121, .45); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.colchip:hover, .colchip[aria-expanded="true"] { border-color: var(--blue); transform: translateY(-1px); }
.colchip i { width: 30px; height: 30px; display: block; flex: none; border: 1px solid rgba(0, 0, 0, .18); background-image: linear-gradient(rgba(0, 0, 0, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .13) 1px, transparent 1px); background-size: 50% 50%; }
.colchip span { display: grid; gap: 4px; }
.colchip em { font: 700 condensed 10.5px/1 var(--display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.colchip b { font: 700 condensed 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.colchip svg { width: 10px; height: 6px; color: var(--blue); transition: transform .2s var(--ease); } .colchip[aria-expanded="true"] svg { transform: rotate(180deg); }
.minebtn { margin-top: 2px; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font: 700 condensed 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); background: rgba(255, 255, 255, .96); border: 1px solid var(--blue); border-radius: var(--pill); padding: 0 16px 0 8px; min-height: 40px; box-shadow: 0 8px 18px -12px rgba(7, 53, 121, .45); transition: background .2s var(--ease), color .2s var(--ease); }
.minebtn span { display: inline-flex; } .minebtn i { width: 16px; height: 26px; display: block; border: 1px solid rgba(0, 0, 0, .2); margin-left: -1px; } .minebtn i:first-child { border-radius: 13px 0 0 13px; margin-left: 0; width: 20px; } .minebtn i:last-child { border-radius: 0 13px 13px 0; }
.minebtn:hover { background: var(--sky); }
.minebtn[aria-pressed="true"] { background: var(--blue); color: var(--white); }
#palette { position: absolute; z-index: 6; width: min(360px, calc(100vw - 24px)); background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--blue); box-shadow: 0 30px 60px -28px rgba(7, 53, 121, .75); padding: 12px 12px 14px; animation: titleIn .25s var(--ease) both; }
#palette header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#palette header .kicker::before { display: none; }
#palette [data-close] { border: 0; background: none; font: 400 24px/1 var(--text); color: var(--ink-3); cursor: pointer; padding: 0 4px; }
#palette .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: min(46dvh, 420px); overflow: auto; }
#palette .grid button { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; background: var(--white); border: 1px solid transparent; padding: 4px; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
#palette .grid button:hover { border-color: var(--blue); background: var(--sky); }
#palette .grid button[aria-selected="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
#palette .grid i { width: 30px; height: 30px; flex: none; border: 1px solid rgba(0, 0, 0, .18); background-image: linear-gradient(rgba(0, 0, 0, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .13) 1px, transparent 1px); background-size: 50% 50%; }
/* lines are paint, not tiles: their swatches are a plain solid, on the chip and in its list */
.colchip.linechip i, #palette[data-zone="lines"] .grid i { background-image: none; }
#palette .grid span { font: 700 condensed 12px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
#palette .grid span em { display: block; margin-top: 3px; font: 400 10px/1 var(--text); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--blue-deep); }
@media (max-width: 760px) { #palette .grid { grid-template-columns: repeat(2, 1fr); } }
#title.hit h1, #title.hit p, #title.hit #kCols { animation: titleIn .5s var(--ease) both; }
#title.hit p { animation-delay: .05s; } #title.hit #kCols { animation-delay: .1s; }
@keyframes titleIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #title.hit h1, #title.hit p, #title.hit #kCols { animation: none; } }

/* view controls: a pill segmented control, and the hoop tour with its play sign */
/* The two controls are one matched pair: the grid gives them the same width (whichever needs more), and they share one
   height, one type size, one radius and one shadow. */
#controls { position: absolute; z-index: 3; right: var(--gutter); top: clamp(14px, 2.2vw, 28px); display: grid; grid-template-columns: minmax(0, auto); justify-items: stretch; gap: 10px;
  --ctl-h: 40px; --ctl-font: 700 condensed 14px/1 var(--display); --ctl-shadow: 0 10px 22px -14px rgba(7, 53, 121, .6); }
#views, .tourbtn { box-sizing: border-box; height: var(--ctl-h); border-radius: var(--pill); box-shadow: var(--ctl-shadow); font: var(--ctl-font); letter-spacing: .12em; text-transform: uppercase; }
#views { display: flex; border: 1px solid var(--blue); overflow: hidden; background: var(--white); }
#views button { flex: 1 1 0; font: inherit; letter-spacing: inherit; text-transform: inherit; border: 0; border-right: 1px solid var(--blue); background: none; padding: 0 16px; cursor: pointer; color: var(--blue-deep); transition: background .2s var(--ease), color .2s var(--ease); }
#views button:last-child { border-right: 0; }
#views button:hover { background: var(--sky); }
#views button[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.tourbtn { display: flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; color: var(--white); background: var(--navy); border: 1px solid var(--navy); padding: 0 18px 0 10px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.tourbtn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.tourbtn.live { background: var(--white); color: var(--navy); padding: 0 18px; }
.pl { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--white); position: relative; flex: none; }
.pl::after { content: ""; position: absolute; left: 8.5px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--navy); }

/* the tour's captions */
#tourCard { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--dock-h, 150px) + 22px); transform: translate(-50%, 12px); opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none;
  display: grid; gap: 6px; justify-items: center; text-align: center; background: rgba(255, 255, 255, .96); border-top: 3px solid var(--blue); padding: 14px 26px 16px; box-shadow: 0 24px 48px -26px rgba(7, 53, 121, .7); max-width: min(86vw, 520px); }
#tourCard.on { opacity: 1; transform: translate(-50%, 0); }
#tourCard strong { font: 800 condensed clamp(22px, 2.6vw, 36px)/1.02 var(--display); text-transform: uppercase; color: var(--navy); letter-spacing: -.01em; }
#tourCard strong em { font-style: normal; color: var(--blue); }
#tourCard > span:last-child:not(.kicker) { font-size: 13.5px; color: var(--ink-2); }
#tourCard .kicker::before { display: none; }

/* 3D labels. Only opacity is ever animated on these: their transform belongs to the label renderer. */
.dim { font: 700 condensed 13.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: rgba(255, 255, 255, .95); padding: 4px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 6px 14px -8px rgba(7, 53, 121, .5); animation: labelIn .35s ease-out both; }
@keyframes labelIn { from { opacity: 0; } to { opacity: 1; } }
.dim.hot { color: var(--white); background: var(--navy); }
.dim.go { pointer-events: auto; cursor: pointer; padding-right: 22px; transition: background-color .2s var(--ease); } .dim.go::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); } .dim.go:hover { background: var(--blue); } .dim.go.back { padding: 4px 8px 4px 22px; } .dim.go.back::after { right: auto; left: 10px; transform: rotate(-135deg); }
/* the MegaSlam clearance cluster reads quieter than the court's own figures: grey, smaller, as it is in the SlamSpace Visualizer */
#kCols { transition: opacity .3s var(--ease); } #cfg.hoopdims #title #kCols { animation: none; opacity: 0; pointer-events: none; } #cfg.hoopdims #kCols * { pointer-events: none; }
.dim.two small { display: block; margin-top: 3px; font: 400 10.5px/1.1 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.dim.clear { color: #4a5160; font-size: 11.5px; letter-spacing: .05em; padding: 3px 7px; background: rgba(255, 255, 255, .92); border-left: 2px solid #6b7079; }
.dim.tick { color: var(--ink-3); font-size: 11.5px; padding: 1px 4px; background: transparent; box-shadow: none; }
.dim.tick.pin { color: var(--blue); font-size: 10.5px; letter-spacing: .06em; padding: 2px 5px; }
.dim.tick.pin.on { animation: pinFlash .8s ease-out 1; }
@keyframes pinFlash { 0% { background: var(--blue); color: #fff; box-shadow: 0 0 0 7px rgba(0, 145, 226, .22); } 100% { background: transparent; color: var(--blue); box-shadow: 0 0 0 0 rgba(0, 145, 226, 0); } }
.dim.height { color: var(--blue); font-size: 17px; padding: 5px 10px; border: 1.5px solid var(--blue); background: var(--white); }
.dim.height.overhang { color: var(--ink-3); font-size: 11.5px; letter-spacing: .05em; padding: 2px 5px; border: 0; background: rgba(255, 255, 255, .8); box-shadow: none; }
.dim.hint { color: var(--white); background: var(--navy); font-size: 12.5px; padding: 7px 11px; border-radius: var(--pill); }
@media (prefers-reduced-motion: reduce) { .dim { animation: none; } .dim.tick.pin.on { animation: none; background: var(--blue); color: #fff; } }
@media (max-width: 760px) { .dim.height:not(.overhang) { font-size: 14px; } }

/* dock: option tray over a white bar */
#dock { z-index: 3; position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; pointer-events: none; }
#dock > * { pointer-events: auto; }
#tray { padding: 0 var(--gutter) 10px; pointer-events: none !important; }
#tray .pane > * { pointer-events: auto; }
.trayhead { display: flex; align-items: baseline; gap: 14px; padding: 0 2px 2px; pointer-events: none !important; }
.trayhead .kicker { color: var(--navy); background: rgba(255, 255, 255, .9); padding: 5px 8px; } .trayhead .kicker::before { background: var(--blue); }
/* a carousel reads as one: an arrow at each end, and the cards fade out where there is more to come */
.carousel { position: relative; }
.carousel .nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--blue); background: var(--white); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgba(7, 53, 121, .7); transition: opacity .2s var(--ease), background .2s var(--ease); }
.carousel .nav.prev { left: -12px; } .carousel .nav.next { right: -12px; }
.carousel .nav i { width: 9px; height: 9px; border: solid var(--blue-deep); border-width: 0 2.5px 2.5px 0; transform: rotate(-45deg); margin-left: -3px; } .carousel .nav.prev i { transform: rotate(135deg); margin-left: 3px; }
.carousel .nav:hover { background: var(--blue); } .carousel .nav:hover i { border-color: var(--white); }
.carousel .nav:disabled { opacity: 0; pointer-events: none; } .carousel.static .nav { display: none; }
.carousel.more-right .scroller { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); }
.carousel.more-left .scroller { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 70px), transparent); }
.carousel.more-left.more-right .scroller { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.scroller { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none; } .scroller::-webkit-scrollbar { display: none; }
.card { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; background: rgba(255, 255, 255, .97); border: 1px solid var(--rule); padding: 8px 16px 8px 8px; scroll-snap-align: center; box-shadow: 0 12px 24px -18px rgba(7, 53, 121, .55); transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover { transform: translateY(-2px); border-color: var(--blue); }
.card[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), 0 16px 28px -16px rgba(7, 53, 121, .6); transform: translateY(-3px); }
.kitcard[aria-pressed="true"]::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 5px; background: linear-gradient(90deg, var(--k-field) 0 60%, var(--k-lane) 60% 85%, var(--k-border) 85%); }
.card .plan { width: 58px; height: 58px; display: grid; place-items: center; flex: none; }
.card .plan svg { max-width: 58px; max-height: 58px; width: auto; height: 58px; transform: rotate(180deg); }
.card .meta { display: grid; gap: 4px; }
.card b { font: 800 condensed 17px/1.02 var(--display); text-transform: uppercase; color: var(--navy); max-width: 9.5em; }
.card em { font: 700 condensed 12px/1 var(--display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); }
.card small { font-size: 12px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.optcard { min-width: 270px; } .optcard b { font-size: 20px; max-width: none; }
.timg { width: 96px; height: 60px; display: grid; place-items: center; flex: none; }
.timg img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 6px 6px rgba(7, 53, 121, .25)); }
.optcard .sw { width: 58px; height: 58px; flex: none; border: 1px solid var(--rule); }
.sw.hoop { background: var(--white) center/70% no-repeat; }
.sw.hoop.none { background-image: linear-gradient(45deg, transparent 47%, var(--ink-3) 47% 53%, transparent 53%); }
/* the MegaSlam hoops carry their own logos as the card title */
.optcard.rig { padding-left: 16px; } .mslogo { display: block; height: 20px; width: auto; margin: 2px 0 5px; }
.sw.hoop.own { background: var(--white); } .sw.hoop.own svg { display: block; width: 100%; height: 100%; }     /* drawn in the court's own colours: the baseline, and the pad stepping off it */
.sizecard { cursor: default; gap: 18px; padding: 8px 16px; } .sizecard:hover { transform: none; border-color: var(--rule); }
.sizecard .meta b { font-size: 20px; max-width: none; } .sizecard .meta small { max-width: 17em; line-height: 1.25; white-space: normal; }
.steps { display: grid; gap: 6px; }
.stepper { display: grid; grid-template-columns: 52px 32px 74px 32px; align-items: center; gap: 4px; }
.stepper span { font: 700 condensed 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stepper output { text-align: center; font: 700 condensed 17px/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.stepper button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--blue); background: var(--white); color: var(--blue-deep); font: 700 18px/1 var(--text); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; transition: background .15s var(--ease), color .15s var(--ease); }
.stepper button:hover { background: var(--blue); color: var(--white); } .stepper button:disabled { opacity: .3; pointer-events: none; }
.opt { position: relative; flex: 0 0 auto; display: flex; scroll-snap-align: center; }
.opt .card { padding-right: 58px; }
.opt .play { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--navy); cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease), transform .2s var(--ease); }
.opt .play:hover { background: var(--blue); transform: translateY(-50%) scale(1.08); }
.opt .play .pl { background: transparent; } .opt .play .pl::after { border-left-color: var(--white); left: 8px; }

#summary { background: var(--white); border: 1px solid var(--rule); box-shadow: 0 24px 48px -26px rgba(7, 53, 121, .6); padding: 16px 20px 18px; max-width: 860px; max-height: 46dvh; overflow: auto; margin-bottom: 10px; }
#summary table, #oSpec { border-collapse: collapse; width: 100%; font-size: 14.5px; }
#summary th, #oSpec th { text-align: left; font: 700 condensed 12px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding: 8px 18px 6px 0; white-space: nowrap; vertical-align: top; }
#summary td, #oSpec td { padding: 6px 0; border-bottom: 1px solid var(--rule); font-weight: 600; color: var(--ink); }
#summary .note, .note { font-size: 13.5px; background: var(--sky); border-left: 3px solid var(--blue); padding: 9px 12px; margin: 12px 0 0; }
#summary .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* the bar: steps on the left; on the right the hoop switch (which is also the hoop's price line), the total once, and Buy now */
#bar { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); background: var(--white); border-top: 1px solid var(--rule); box-shadow: 0 -14px 30px -22px rgba(7, 53, 121, .5); padding: 10px var(--gutter) 10px; }
/* the steps: the one you are in is a solid blue pill with its label and number reversed out, so it holds its place as you work; the others stay quiet */
#stepper { display: flex; gap: clamp(2px, .6vw, 8px); list-style: none; margin: 0 auto 0 0; padding: 0; }
#stepper li { display: flex; }
#stepper button { font: 700 condensed 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: none; border: 0; border-radius: var(--pill); padding: 8px 16px 8px 9px; cursor: pointer; display: flex; gap: 8px; align-items: center; white-space: nowrap; transition: background-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease); }
#stepper button b { font: 700 11px/1 var(--text); color: inherit; border: 1px solid currentColor; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; flex: none; transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); }
#stepper button:hover { color: var(--navy); background: var(--sky); }
#stepper button[aria-current], #stepper button[aria-current]:hover { color: var(--white); background: var(--blue); box-shadow: 0 10px 20px -12px rgba(0, 110, 190, .95); }
#stepper button[aria-current] b { background: var(--white); border-color: var(--white); color: var(--blue-deep); }
#stepper button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: 400 13px/1 var(--text); color: var(--ink-2); white-space: nowrap; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { width: 34px; height: 20px; border-radius: 10px; background: var(--rule); position: relative; transition: background .2s var(--ease); flex: none; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.switch input:checked + i { background: var(--blue); } .switch input:checked + i::after { transform: translateX(14px); }
.switch input:focus-visible + i { outline: 2px solid var(--navy); outline-offset: 2px; }
#price { display: grid; justify-items: end; gap: 4px; }
#price small { font: 700 condensed 10.5px/1.15 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
#price b { font: 800 condensed 26px/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
#bar .btn { padding: 12px 26px; font-size: 16px; white-space: nowrap; flex: none; } #price { flex: none; } #price small { white-space: nowrap; }
@media (max-width: 1100px) { #price small { white-space: normal; max-width: 13em; } }
.switch span { overflow: hidden; text-overflow: ellipsis; } .switch .s { display: none; }
@media (max-width: 1240px) { .switch .l { display: none; } .switch .s { display: inline; } }
@media (max-width: 1000px) { #stepper { gap: 2px; } #stepper button { font-size: 13.5px; gap: 6px; padding: 8px 12px 8px 8px; } #bar { gap: 12px; } #bar .btn { padding: 11px 18px; font-size: 14.5px; } }
/* a narrower bar (a tablet held upright, a phone) takes two rows: the steps across the top sharing the width, then the hoop switch, the total and Buy now */
@media (max-width: 900px) {
  #bar { flex-wrap: wrap; gap: 8px 12px; padding-top: 8px; }
  #stepper { width: 100%; margin: 0; gap: 4px; } #stepper li { flex: 1 1 auto; } #stepper li:last-child { flex-grow: 1.3; }
  #stepper button { width: 100%; justify-content: center; }
  .switch { margin-right: auto; min-width: 0; }
}
#summary .total { font: 800 condensed 22px/1 var(--display); color: var(--navy); } #summary .fine { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.oprice { margin: 16px 0 0; font: 800 condensed 30px/1 var(--display); color: var(--navy); } .oprice small { display: block; margin-top: 6px; font: 400 12.5px/1.3 var(--text); color: var(--ink-3); }
@media (max-width: 900px) { #title { max-width: 58vw; } .optcard { min-width: 230px; } #controls { right: 12px; top: 12px; } #views button { padding: 0 11px; } }

#loader { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); z-index: 5; transition: opacity .5s var(--ease), visibility 0s .5s; text-align: center; }
#loader.done { opacity: 0; visibility: hidden; }
#loader span { font-size: clamp(30px, 4.4vw, 60px); display: block; }
#loader i { display: block; width: 200px; height: 4px; margin: 20px auto 0; background: var(--sky); position: relative; overflow: hidden; }
#loader i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--blue); animation: lay 1.1s var(--ease) infinite; }
@keyframes lay { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* checkout (the order page), in the familiar shop pattern: information on the left, the order on the right on a quieter ground */
.checkout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: calc(100dvh - var(--head-h)); background: var(--white); }
.co-main { padding: clamp(22px, 3.4vw, 44px) clamp(18px, 4.5vw, 64px) 56px; max-width: 700px; width: 100%; justify-self: end; }
.co-side { background: var(--paper); border-left: 1px solid var(--rule); padding: clamp(22px, 3.4vw, 44px) clamp(18px, 4vw, 56px); }
.co-side > * { max-width: 470px; } .co-side { position: relative; } .co-side .co-items, .co-side .co-totals { position: sticky; } .co-side .co-items { top: calc(var(--head-h) + 28px); }
.co-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-3); margin-bottom: 26px; }
.co-crumbs a { color: var(--blue); text-decoration: none; } .co-crumbs a:hover { text-decoration: underline; } .co-crumbs b { color: var(--ink); font-weight: 600; }
.co-crumbs i { width: 6px; height: 6px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); opacity: .7; }
.checkout h2 { font: 600 19px/1.2 var(--text); font-stretch: 100%; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 12px; }
.checkout section { padding: 0; margin: 0 0 30px; }
.co-note { margin: -4px 0 12px; font-size: 13.5px; color: var(--ink-3); }
.f { position: relative; display: block; margin-bottom: 12px; }
.f input, .f select, .f textarea { display: block; width: 100%; font: 400 15px/1.3 var(--text); color: var(--ink); background: var(--white); border: 1px solid #cfd6de; border-radius: 6px; padding: 21px 12px 7px; appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s; }
.f textarea { resize: vertical; min-height: 64px; }
.f select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23737b86' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px; }
.f span { position: absolute; left: 13px; top: 14px; font-size: 15px; color: var(--ink-3); pointer-events: none; transform-origin: 0 0; transition: transform .15s var(--ease), color .15s; }
.f input:focus + span, .f input:not(:placeholder-shown) + span, .f textarea:focus + span, .f textarea:not(:placeholder-shown) + span, .f select:focus + span, .f select:valid + span { transform: translateY(-8px) scale(.78); }
.f input:focus, .f select:focus, .f textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
form.tried .f :invalid { border-color: #d0342c; box-shadow: 0 0 0 1px #d0342c; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.co-actions .btn { border-radius: 6px; padding: 17px 28px; font: 600 15px/1 var(--text); letter-spacing: 0; text-transform: none; font-stretch: 100%; }
.co-back { font-size: 14px; color: var(--blue); text-decoration: none; } .co-back:hover { text-decoration: underline; }
#oMsg { margin: 14px 0 0; font-size: 14px; color: var(--navy); font-weight: 600; min-height: 1.2em; }
.co-fine { font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 14px; }
.co-item { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 16px; }
/* the court's tiles, colour by colour: a quiet ledger under its line item */
.co-tiles { margin: -2px 0 20px; padding: 12px 14px 10px; background: var(--white); border: 1px solid var(--rule); border-radius: 8px; }
.co-tiles .hd { display: flex; justify-content: space-between; gap: 12px; font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.co-tiles .tr { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; } .co-tiles .tr + .tr { border-top: 1px solid #eef2f6; }
.co-tiles .tr i { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .18); } .co-tiles .tr.edge i { background: #111; }
.co-tiles .tr b { display: block; font: 600 13.5px/1.2 var(--text); color: var(--ink); } .co-tiles .tr small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.co-tiles .tr em { font: 600 13.5px/1 var(--text); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-tiles .ft { margin: 8px 0 2px; padding-top: 9px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.thumb { position: relative; width: 66px; height: 66px; border: 1px solid var(--rule); border-radius: 8px; background: var(--white); display: grid; place-items: center; }
.thumb img { width: 58px; height: 58px; object-fit: contain; } .thumb svg { width: 40px; height: 40px; }
.thumb em { position: absolute; right: -8px; top: -8px; min-width: 21px; height: 21px; border-radius: 11px; background: rgba(51, 51, 51, .82); color: var(--white); font: 600 12px/21px var(--text); font-style: normal; text-align: center; padding: 0 5px; }
.what { display: grid; gap: 3px; min-width: 0; } .what b { font: 600 14.5px/1.25 var(--text); color: var(--ink); } .what span { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.what .sw { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .what .sw i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .2); }
.amt { font: 400 14.5px/1 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-totals { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 16px; top: auto; }
.co-totals .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; margin-bottom: 9px; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-totals .muted, .muted { color: var(--ink-3); } .co-totals .fine { font-size: 12px; margin: 12px 0 0; }
.co-totals .total { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 16px; font-size: 16px; font-weight: 600; } .co-totals .total span:last-child { font-size: 23px; font-weight: 600; } .co-totals .total small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-right: 8px; }
.co-mobile { display: none; }
@media (max-width: 860px) {
  .checkout { grid-template-columns: 1fr; } .co-side { display: none; } .co-main { justify-self: stretch; max-width: none; padding: 0 16px 44px; }
  .co-crumbs { margin: 20px 0 22px; }
  .co-mobile { display: block; margin: 0 -16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .co-mobile summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; cursor: pointer; font-size: 14px; color: var(--blue); } .co-mobile summary::-webkit-details-marker { display: none; }
  .co-mobile summary span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 9px; border: solid var(--blue); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; } .co-mobile[open] summary span::after { transform: rotate(-135deg); margin-bottom: -1px; }
  .co-mobile summary b { font-size: 18px; color: var(--ink); } #coMobileBody { padding: 18px 16px 18px; border-top: 1px solid var(--rule); }
  .co-actions { flex-direction: column-reverse; align-items: stretch; } .co-actions .btn { justify-content: center; } .co-back { text-align: center; }
}

/* ---------------------------------------------------------------- phones
   The court keeps the screen. The title shrinks and clears the controls, the colour pickers collapse to a column of swatches on the left edge
   (the sheet names the zone), the palette becomes a bottom sheet, the trays swipe, and the bar takes two rows: the steps, then hoop switch, total, Buy now. */
@media (max-width: 760px) {
  /* The page scrolls as any page does, with the rest of the site below the configurator. The viewer's height is the SMALL viewport (the screen with
     Safari's bars showing), which never changes: when a swipe on the dock tucks the bars away the canvas is not resized, so the model holds still
     (it used to twitch, because the dynamic viewport unit resized it mid-scroll). */
  #cfg { height: calc(100dvh - var(--head-h)); height: calc(100svh - var(--head-h)); min-height: 520px; }
  #title { left: 12px; top: 10px; max-width: calc(100vw - 24px - 158px); }
  #title .kicker { font-size: 10px; letter-spacing: .14em; gap: 6px; } #title .kicker::before { width: 12px; }
  #title h1 { font-size: clamp(22px, 7vw, 30px); margin-top: 6px; }
  #title p { font-size: 11px; gap: 6px; margin-top: 6px; letter-spacing: .06em; } #kRef { padding: 3px 6px; }
  #kCols { gap: 5px; margin-top: 10px; }
  #kCols .colchip { min-width: 0; padding: 3px; gap: 0; } #kCols .colchip span, #kCols .colchip svg { display: none; } .colchip i { width: 30px; height: 30px; }
  .minebtn { min-height: 32px; padding: 0 11px 0 5px; font-size: 10.5px; gap: 6px; } .minebtn i { height: 18px; width: 10px; } .minebtn i:first-child { width: 13px; }
  #controls { right: 12px; top: 10px; gap: 6px; --ctl-h: 34px; --ctl-font: 700 condensed 12px/1 var(--display); }
  #views button { padding: 0 9px; } .tourbtn { padding: 0 12px 0 7px; gap: 6px; } .pl { width: 18px; height: 18px; } .pl::after { left: 7px; top: 4.5px; border-width: 4.5px 0 4.5px 7px; }
  #palette { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; border-left: 0; border-right: 0; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; box-shadow: 0 -24px 60px -20px rgba(7, 53, 121, .6); }
  #palette .grid { grid-template-columns: repeat(3, 1fr); max-height: 44dvh; }
  #tray { padding: 0 12px 6px; } .trayhead .kicker { font-size: 10px; padding: 4px 6px; letter-spacing: .16em; }
  .carousel .nav { display: none; }
  .scroller { gap: 8px; padding: 6px 2px 8px; }
  .card { padding: 6px 12px 6px 6px; gap: 9px; } .card .plan { width: 44px; height: 44px; } .card .plan svg { height: 44px; max-width: 44px; max-height: 44px; }
  .card b { font-size: 14.5px; } .optcard b { font-size: 16px; } .card em { font-size: 10.5px; } .card small { font-size: 11px; }
  .optcard { min-width: 0; } .timg { width: 70px; height: 44px; } .optcard .sw { width: 44px; height: 44px; }
  .opt .card { padding-right: 50px; } .opt .play { width: 32px; height: 32px; right: 9px; }
  .optcard.rig { padding-left: 12px; } .mslogo { height: 16px; margin: 1px 0 4px; }
  .sizecard { gap: 12px; } .stepper { grid-template-columns: 44px 30px 62px 30px; } .stepper button { width: 30px; height: 30px; } .stepper output { font-size: 15px; } .sizecard .meta small { max-width: 12em; }
  #summary { max-height: 38dvh; padding: 12px 14px; margin-bottom: 6px; } #summary table { font-size: 13px; } #summary th { padding-right: 10px; white-space: normal; font-size: 10.5px; }
  #bar { flex-wrap: wrap; gap: 6px 10px; padding: 4px 12px 8px; }      /* no safe-area padding here: it made the bar stretch as Safari's toolbar slid away mid-scroll */
  /* on a phone the steps share the full row; the current one is the same solid blue pill */
  #stepper { margin: 2px 0; gap: 2px; }
  #stepper button { font-size: 13.5px; letter-spacing: .08em; color: var(--ink-2); padding: 8px 6px; gap: 6px; }
  #stepper button b { width: 20px; height: 20px; font-size: 11.5px; border-width: 1.5px; }
  .switch { font-size: 12px; gap: 6px; margin-right: auto; min-width: 0; } .switch span { overflow: hidden; text-overflow: ellipsis; max-width: 36vw; }
  #price small { font-size: 8.5px; letter-spacing: .1em; max-width: 11.5em; } #price b { font-size: 21px; }      /* two short lines: TOTAL PRICE / EXCLUDING SHIPPING */
  #bar .btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; flex: none; } #price { flex: none; }
  #tourCard { padding: 10px 16px 12px; max-width: 92vw; } .dim { font-size: 11px; padding: 3px 6px; } .dim.height { font-size: 13px; padding: 4px 7px; } .dim.tick { font-size: 10px; }
}
/* the height readout carries a second, quieter line (the overhang, or "on the safety pin"), and flashes once as it lands on the pin */
.dim.height small { display: block; margin-top: 4px; font: 400 10.5px/1 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink-3); text-align: center; }
.dim.height.on { animation: pinFlash .8s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .dim.height.on { animation: none; } }
/* the smallest phones: four steps still sit on one row */
@media (max-width: 350px) { #stepper { gap: 0; } #stepper button { font-size: 12px; letter-spacing: .04em; padding: 8px 3px; gap: 4px; } #stepper button b { width: 18px; height: 18px; font-size: 10.5px; } }
/* under the configurator: the way out to a custom, multi-sport design for anyone a kit does not fit */
#custom { background: var(--navy); color: var(--white); padding: clamp(22px, 3.2vw, 40px) var(--gutter); }
#custom .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
#custom .kicker { color: var(--sky-2, #7cc4ea); } #custom .kicker::before { background: currentColor; }
#custom h2 { font: 800 condensed clamp(24px, 3vw, 38px)/1.02 var(--display); text-transform: uppercase; color: var(--white); margin: 8px 0 6px; }
#custom p { margin: 0; max-width: 46em; color: #c5d3e6; font-size: 15px; }
#custom .btn { flex: none; }

/* the Summary panel: a header that stays put (the floating tile, the court's name, a close cross) over the scrolling figures */
#sumWrap { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 24px 48px -26px rgba(7, 53, 121, .6); max-width: 860px; max-height: 46dvh; margin-bottom: 10px; }
#sumWrap #summary { background: none; border: 0; box-shadow: none; max-width: none; max-height: none; margin: 0; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 20px 18px; }
#sumHead { flex: none; display: grid; gap: 3px; justify-items: center; text-align: center; padding: 84px 58px 12px; border-bottom: 1px solid var(--rule); }
#sumHead .kicker { font-size: 10.5px; } #sumHead .kicker::before { display: none; }
#sumHead b { font: 800 condensed clamp(19px, 2vw, 25px)/1.02 var(--display); text-transform: uppercase; color: var(--navy); letter-spacing: -.005em; }
#sumHead span:last-child { font-size: 13px; color: var(--ink-2); } #sumHead span:last-child i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(11, 13, 18, .18); }
/* the floating tile has the whole width of the panel to itself, centred, riding half above the panel's top edge */
#sumTile { position: absolute; left: 0; top: -96px; width: 100%; height: 184px; pointer-events: none !important; z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 66%, transparent 97%); mask-image: linear-gradient(to bottom, #000 0, #000 66%, transparent 97%); }      /* the soft shadow under the tile melts away before the canvas ends: no hard edge across the panel */
/* the tile can be taken hold of: a grab area over the tile alone (the rest of the band still lets the court behind be turned) */
#sumGrab { position: absolute; z-index: 3; left: 50%; top: -96px; width: min(64%, 360px); height: 172px; transform: translateX(-50%); cursor: grab; touch-action: none; display: grid; align-items: end; justify-items: center; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#sumGrab.held { cursor: grabbing; }
#sumGrab span { font: 700 condensed 10px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); background: rgba(255, 255, 255, .85); padding: 3px 7px; margin-bottom: 2px; opacity: .9; transition: opacity .5s var(--ease); pointer-events: none; }
#sumWrap.turned #sumGrab span { opacity: 0; }
#sumClose { position: absolute; right: 12px; top: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
#sumClose:hover, #sumClose:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* below the surface: the sub base card (the hoop tour's card, in the same place) */
#subCard { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--dock-h, 150px) + 22px); transform: translate(-50%, 12px); opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none;
  display: grid; gap: 6px; justify-items: center; text-align: center; background: rgba(255, 255, 255, .96); border-top: 3px solid var(--blue); padding: 14px 26px 16px; box-shadow: 0 24px 48px -26px rgba(7, 53, 121, .7); width: max-content; max-width: min(92vw, 600px); }      /* width: max-content, or a box hung from left: 50% can only ever be half its parent wide and the copy stacks up tall */
#subCard.on { opacity: 1; transform: translate(-50%, 0); }
#subClose { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; pointer-events: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
#subCard.on #subClose { pointer-events: auto; } #subClose:hover, #subClose:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--white); }
#subCard { padding-left: 46px; padding-right: 46px; }
#subCard strong { font: 800 condensed clamp(22px, 2.6vw, 34px)/1.02 var(--display); text-transform: uppercase; color: var(--navy); letter-spacing: -.01em; } #subCard strong em { font-style: normal; color: var(--blue); }
#subCard > span:last-child { font-size: 13.5px; color: var(--ink-2); } #subCard .kicker::before { display: none; }
@media (max-width: 760px) {
  #sumWrap { max-height: 44dvh; margin-bottom: 6px; } #sumWrap #summary { padding: 2px 14px 12px; } #sumHead { padding: 66px 48px 9px; } #sumHead b { font-size: 18px; } #sumHead span:last-child { font-size: 12px; }
  #sumTile { top: -84px; height: 152px; } #sumGrab { top: -84px; height: 142px; width: 70%; } #sumClose { right: 8px; top: 9px; width: 32px; height: 32px; }
  /* wide and short, in the clear ground between the court and the option tray: it never sits over the slab it describes, and the tray stays where it is.
     18px clear of the dock: the tray's "Select your ..." tab stands 12px proud of the dock's own box */
  #subCard { bottom: calc(var(--dock-h, 150px) + 18px); gap: 3px; padding: 8px 14px 10px; width: 94vw; max-width: 94vw; background: var(--white); } #subCard .kicker { font-size: 9.5px; letter-spacing: .2em; } #subCard strong { font-size: 17px; }
  #subCard > span:last-child { font-size: 11.5px; line-height: 1.32; }
}

/* ---- A phone on its side. One screen, nothing below the fold: the viewer is exactly the screen under the header, the bar takes one slim row, and the option
   tray stays folded away until a step is tapped (tap the step again to fold it back), so the court has the whole width and nearly all the height to itself.
   Turn the phone upright and the portrait layout, and its framing, take over again. */
@media (orientation: landscape) and (max-height: 540px) {
  #cfg { height: calc(100dvh - var(--head-h)); height: calc(100svh - var(--head-h)); min-height: 0; }
  #title { left: 12px; top: 8px; max-width: 44vw; } #title .kicker { display: none; } #title h1 { font-size: 20px; margin-top: 0; max-width: none; } #title p { font-size: 10.5px; gap: 6px; margin-top: 4px; letter-spacing: .06em; } #kRef { padding: 3px 6px; }
  #kCols { flex-direction: row; gap: 5px; margin-top: 7px; } #kCols .colchip { min-width: 0; padding: 3px; gap: 0; } #kCols .colchip span, #kCols .colchip svg { display: none; } .colchip i { width: 26px; height: 26px; }
  .minebtn { min-height: 28px; padding: 0 10px 0 5px; font-size: 10px; gap: 6px; }
  #controls { right: 12px; top: 8px; gap: 6px; --ctl-h: 32px; --ctl-font: 700 condensed 12px/1 var(--display); } #views button { padding: 0 9px; } .tourbtn { padding: 0 12px 0 7px; gap: 6px; }
  #bar { flex-wrap: nowrap; gap: 10px; padding: 5px 12px; }
  #stepper { width: auto; margin: 0 auto 0 0; gap: 2px; } #stepper li, #stepper li:last-child { flex: 0 0 auto; }
  #stepper button { width: auto; font-size: 12.5px; letter-spacing: .08em; padding: 6px 11px 6px 7px; gap: 6px; } #stepper button b { width: 18px; height: 18px; font-size: 10.5px; }
  .switch { margin-right: 0; font-size: 12px; gap: 6px; } .switch .l { display: none; } .switch .s { display: inline; }
  #price { gap: 1px; } #price small { font-size: 8px; letter-spacing: .1em; max-width: none; white-space: nowrap; } #price b { font-size: 20px; }
  #bar .btn { padding: 8px 16px; font-size: 13.5px; }
  #tray { display: none; padding: 0 12px 4px; } #cfg.trayopen #tray { display: block; }
  .carousel .nav { display: none; } .scroller { gap: 8px; padding: 4px 2px 6px; } .trayhead .kicker { font-size: 10px; padding: 4px 6px; letter-spacing: .16em; }
  .card { padding: 5px 12px 5px 6px; gap: 9px; } .card .plan { width: 40px; height: 40px; } .card .plan svg { height: 40px; max-width: 40px; max-height: 40px; }
  .card b { font-size: 14px; } .optcard b { font-size: 15px; } .card em { font-size: 10.5px; } .card small { font-size: 11px; }
  .optcard { min-width: 0; } .timg { width: 64px; height: 40px; } .optcard .sw { width: 40px; height: 40px; }
  #sumWrap { max-height: calc(100svh - var(--head-h) - 66px); margin-bottom: 4px; } #sumTile, #sumGrab { display: none; } #sumHead { padding: 8px 50px 8px 14px; justify-items: start; text-align: left; }
  #sumWrap #summary { padding: 2px 14px 10px; } #summary table { font-size: 13px; } #sumClose { right: 8px; top: 7px; width: 30px; height: 30px; }
  #subCard { bottom: calc(var(--dock-h, 60px) + 8px); padding: 8px 40px 10px; width: max-content; max-width: 62vw; gap: 3px; } #subCard strong { font-size: 17px; } #subCard > span:last-child { font-size: 11.5px; line-height: 1.32; }
  #tourCard { padding: 8px 16px 10px; max-width: 60vw; } #tourCard strong { font-size: 20px; }
  .dim { font-size: 11px; padding: 3px 6px; }
}

/* ---- A tablet held upright. The colour pickers keep to the left edge as small swatches (as on a phone): as full drop-downs they stood over the left third of the court. */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  #kCols { gap: 6px; margin-top: 12px; } #kCols .colchip { min-width: 0; padding: 4px; gap: 0; } #kCols .colchip span, #kCols .colchip svg { display: none; } #kCols .colchip i { width: 38px; height: 38px; }
}