/* Hosted hire shop — Show Works storefront.
   ceg.rent-inspired structure (dark trust bar, big light headlines, warm neutrals,
   card grids with icon tiles) carried by the Show Works red instead of CEG's amber.
   The red is an ACCENT — chips, links, icon tiles, underline stubs — never a surface. */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/static/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/static/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --sw-red:#e23b2e; --red-soft:#fdf0ee; --ink:#17181c; --muted:#6f7680; --line:#e8e6e2;
  --dark:#1b1a19; --dark-h:#2a2927; --bg:#fff; --soft:#f7f5f2; --warm:#faf8f5; --ok:#1f9d55;
  --radius:14px; --shadow:0 1px 3px rgba(23,24,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* footer pins to the viewport bottom on short pages (the /portal lookup) — the main
   region flexes to fill whatever the content doesn't use */
/* padding/background:0 also overrides app.css's legacy .portal-body (2.5rem padded grey
   card look from before the shared customer chrome) — the chrome must touch the edges */
body.shop-body,body.portal-body{min-height:100vh;display:flex;flex-direction:column;padding:0;background:#fff}
body.shop-body>main,body.shop-body>.pl-main,body.shop-body>.rp-main,
body.portal-body>.portal-wrap{flex:1 0 auto;width:100%}
body.portal-body>.portal-wrap{padding:1.8rem 16px 2.5rem;box-sizing:border-box}
body{font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1{font-size:2.1rem;font-weight:500;letter-spacing:-.02em;margin:.2rem 0 .8rem}
h2{font-size:1.3rem;font-weight:500;letter-spacing:-.01em;margin:1.2rem 0 .6rem}

/* ---- dark trust bar ---- */
/* flex-wrap, not a magic width: the three claims are nowrap and 48px apart, so between the 760px
   "hide the extras" breakpoint and roughly 860px they did not fit and pushed the WHOLE page
   sideways — measured 26px of horizontal scroll at a 768px viewport, on the shop and every portal
   page. Wrapping to a second line is robust to the wording changing; a wider breakpoint would rot
   the next time the copy does. */
.sw-topbar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 48px;background:var(--dark);
  color:#f3efe9;font-size:.82rem;font-weight:500;letter-spacing:.01em;padding:8px 24px}
.sw-topbar span{white-space:nowrap}
@media (max-width:760px){.sw-topbar span:nth-child(n+2){display:none}}

/* ---- header ---- */
.shop-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:14px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.shop-logo{display:inline-flex;flex-direction:column;line-height:.92}
.login-appname{font-weight:800;font-size:.9rem;letter-spacing:.02em;color:#111827;margin-top:.3rem;text-align:center}
.shop-logo-img{max-height:46px;max-width:200px;display:block;object-fit:contain}
.lg-show{font-weight:800;font-size:1.45rem;letter-spacing:.01em;border-bottom:3px solid var(--sw-red);padding-bottom:2px}
.lg-works{font-weight:600;font-size:.72rem;letter-spacing:.5em;margin-top:3px;padding-left:.15em}
.shop-search{flex:1;max-width:460px;margin:0 auto;position:relative}
.shop-search input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 16px 10px 40px;font:inherit;
  background:#fff;box-shadow:var(--shadow)}
.shop-search input:focus{outline:none;border-color:var(--sw-red)}
.shop-search::before{content:"";position:absolute;left:14px;top:22px;width:16px;height:16px;transform:translateY(-50%);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7680' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
/* live search previews under the bar */
.sw-sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 36px rgba(23,24,28,.16);z-index:60;overflow:hidden;
  max-height:min(430px,70vh);overflow-y:auto}
.sw-sugg:empty{display:none}
.sw-sugg-row{display:flex;align-items:center;gap:11px;padding:9px 13px}
.sw-sugg-row:hover{background:var(--warm)}
.sw-sugg-row+.sw-sugg-row{border-top:1px solid var(--soft)}
.sw-sugg-photo{flex:0 0 42px;height:42px;background:#fff;border:1px solid var(--soft);border-radius:9px;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.sw-sugg-photo img{width:100%;height:100%;object-fit:contain}
.sw-sugg-name{flex:1;min-width:0;font-weight:500;font-size:.9rem;line-height:1.3}
.sw-sugg-price{color:var(--muted);font-size:.8rem;white-space:nowrap}
.sw-sugg-price small{font-size:.72rem}
.sw-sugg-all{display:block;padding:10px 13px;text-align:center;font-weight:600;font-size:.85rem;
  color:var(--sw-red);border-top:1px solid var(--line);background:var(--warm)}
.sw-sugg-all:hover{background:var(--red-soft)}
.sw-sugg-none{padding:14px;color:var(--muted);font-size:.88rem;text-align:center}
.shop-cartbtn{position:relative;border:0;background:transparent;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;padding:6px}
.sw-badge{position:absolute;top:-3px;right:-6px;min-width:18px;height:18px;border-radius:9px;
  background:var(--sw-red);color:#fff;font-size:.7rem;font-weight:700;display:none;align-items:center;
  justify-content:center;padding:0 5px}
.sw-badge.on{display:inline-flex}

/* ---- layout ---- */
.shop-main{max-width:1100px;margin:0 auto;padding:24px}
/* dark footer band bookends the page with the trust bar */
.shop-foot{margin-top:56px;background:var(--dark);color:#b7b1a9;font-size:.85rem}
.shop-foot-in{max-width:1100px;margin:0 auto;padding:28px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.shop-foot a{color:#f3efe9;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#4a4741}
.shop-foot a:hover{text-decoration-color:var(--sw-red)}
.shop-foot-co{color:#f3efe9;font-weight:500}
/* in-shop navigation reads as the button; the exit link is a quiet text link, so the
   two are never mistaken for one another */
.sw-back{display:inline-block;margin-bottom:10px;padding:.42rem .85rem;border:1px solid var(--line,#e5e7eb);
  border-radius:6px;font-size:.9rem;font-weight:600;color:inherit;text-decoration:none;background:#fff}
.sw-back:hover{border-color:var(--sw-red);color:var(--sw-red);text-decoration:none}
.sw-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:2rem}
/* section headings carry a short red underline stub — the one recurring brand mark */
.sw-section-head h2{position:relative;padding-bottom:10px;margin-bottom:.2rem}
.sw-section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;
  border-radius:2px;background:var(--sw-red)}
.sw-empty{color:var(--muted);padding:24px 0}
.sw-empty a{color:var(--sw-red);font-weight:600}
/* breadcrumbs */
.sw-crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;margin:.2rem 0 1rem;flex-wrap:wrap}
.sw-crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.sw-crumbs a:hover{color:var(--sw-red);text-decoration-color:var(--sw-red)}
.sw-crumbs .sep{color:#c9c5bf}

/* ---- hero + collections ---- */
.sw-hero{padding:26px 0 10px;max-width:720px}
.sw-hero.has-feat{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:3.5rem;align-items:center}
.sw-hero-l{max-width:720px}
.sw-hero h1{font-size:2.8rem;font-weight:400;letter-spacing:-.03em;line-height:1.12;margin-bottom:.5rem}
.sw-hero p{color:var(--muted);max-width:560px;margin:0;font-size:1.02rem}
@media (max-width:980px){.sw-hero.has-feat{grid-template-columns:1fr;gap:1.6rem}
  .sw-feat{max-width:400px}}

/* featured product card (ceg.rent-style hero card, Show Works red) */
.sw-feat{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 10px 30px rgba(23,24,28,.1);overflow:visible;
  transition:box-shadow .12s,transform .12s}
.sw-feat:hover{box-shadow:0 16px 40px rgba(23,24,28,.15);transform:translateY(-2px)}
.sw-feat-flag{position:absolute;top:-13px;left:14px;background:var(--sw-red);color:#fff;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 12px;border-radius:6px;box-shadow:var(--shadow)}
.sw-feat-cat{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--line);
  color:var(--muted);font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:6px}
.sw-feat-photo{height:230px;display:flex;align-items:center;justify-content:center;
  padding:34px 24px 12px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.sw-feat-photo img{max-width:100%;max-height:100%;object-fit:contain}
.sw-feat-body{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:14px 18px 20px;border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg,#fff,var(--red-soft))}
.sw-feat-name{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.sw-feat-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sw-feat-pills span{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:3px 10px;font-size:.75rem;font-weight:600;color:var(--ink-2,#3f4550)}
.sw-feat-chip{color:var(--ok);font-size:.78rem;font-weight:600}
.sw-feat-price{font-weight:700;font-size:1.02rem}
.sw-feat-price small{color:var(--muted);font-weight:500;font-size:.78rem}
/* big hero search — the page's anchor, same anatomy as the header one */
.sw-hero .shop-search{max-width:560px;margin:22px 0 0}
.sw-hero .shop-search input{padding:14px 16px 14px 44px;border-radius:14px;font-size:1rem}
.sw-hero .shop-search::before{top:27px;left:16px}
.sw-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:14px}
.sw-ccard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .12s,transform .12s,border-color .12s}
.sw-ccard:hover{box-shadow:0 8px 22px rgba(23,24,28,.1);transform:translateY(-2px);border-color:#ddd8d1}
/* warm gradient header zone: red-tinted icon tile left, chevron circle right */
.sw-ccard-top{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 16px 20px;
  background:linear-gradient(135deg,var(--warm),#fdf3ef)}
.sw-ccard-tile{width:64px;height:64px;border-radius:16px;background:#fff;border:1px solid #f3ded8;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
/* Uploaded icons render AS UPLOADED — no greyscale, no tint (operator, 2026-08-08). The old
   grayscale(1) brightness(.38) washed thin-stroked art out to grey, and a red mask-tint was
   tried and rejected: the artwork is the operator's own and should look like itself. Only the
   built-in placeholder is brand-coloured, because it is ours to draw. */
.sw-ccard-icon{width:46px;height:46px;object-fit:contain;margin:0}
.sw-ccard-icon-ph{color:var(--sw-red);opacity:.75}  /* built-in flight-case placeholder */
.sw-ccard-chev{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .12s}
.sw-ccard:hover .sw-ccard-chev{background:var(--sw-red);border-color:var(--sw-red);color:#fff}
.sw-ccard-body{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.sw-brand-h{font-size:1.05rem;margin:1.2rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.sw-sub-h{font-size:.72rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;margin:.7rem 0 .35rem}
.sw-pgrid+.sw-brand-h{margin-top:2.5rem}
.sw-ccard-name{font-weight:500;font-size:1.08rem;letter-spacing:-.01em}
.sw-ccard-n{color:var(--muted);font-size:.85rem}
.sw-ccard-go{color:var(--sw-red);font-weight:600;font-size:.85rem;margin-top:6px}

/* ---- product grid + cards ---- */
.sw-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:6px}
.sw-pcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .12s,transform .12s,border-color .12s}
.sw-pcard:hover{box-shadow:0 8px 22px rgba(23,24,28,.1);transform:translateY(-2px);border-color:#ddd8d1}
.sw-pcard-photo{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1px solid var(--soft);padding:10px}
.sw-pcard-photo img{width:100%;height:100%;object-fit:contain;transition:transform .15s}
.sw-pcard:hover .sw-pcard-photo img{transform:scale(1.03)}
.noimg{color:#c4c8cf;font-size:.8rem}
.sw-pcard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.sw-pcard-name{font-weight:500;font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.sw-pcard-name:hover{color:var(--sw-red)}
.sw-pcard-price{font-weight:700}
.sw-pcard-price small{color:var(--muted);font-weight:500;font-size:.78rem}
.sw-pcard-ex{color:var(--muted);font-size:.84rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sw-addf{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.sw-addf.big{margin-top:14px}
.sw-qn{width:58px;border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center;font:inherit}
.sw-addbtn{flex:1;border:0;border-radius:8px;background:var(--sw-red);color:#fff;font-weight:700;font-size:.88rem;
  padding:9px 10px;cursor:pointer}
.sw-addbtn:hover{filter:brightness(.95)}
.sw-moreinfo{display:inline-block;margin-top:6px;color:var(--sw-red);font-weight:600;font-size:.84rem;text-decoration:none}
.sw-moreinfo:hover{text-decoration:underline}

/* ---- date bar ---- */
.sw-datebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 16px;margin:6px 0 18px}
.sw-datebar.inline{margin:14px 0;background:transparent;border:0;padding:0}
.sw-datebar-l{font-weight:600}
.sw-datebar input[type=date]{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.sw-arrow{color:var(--muted)}

/* ---- product detail ---- */
.sw-detail{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.sw-detail-photo{flex:0 0 380px;max-width:100%;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:18px;box-shadow:var(--shadow)}
.sw-detail-photo img{width:100%;height:100%;object-fit:contain}
.sw-detail-info{flex:1 1 320px;min-width:280px}
.sw-detail-price{font-size:1.3rem;font-weight:800;margin:.2rem 0}
.sw-detail-price small{color:var(--muted);font-weight:500;font-size:.85rem}
.sw-detail-ex{color:var(--muted)}
.sw-detail-desc{margin-top:18px;color:#374151;font-size:.92rem;line-height:1.55;border-top:1px solid var(--line);padding-top:14px}
.sw-detail-desc p{margin:.4rem 0}
.sw-detail-desc ul,.sw-detail-desc ol{margin:.4rem 0;padding-left:1.3rem}
.sw-detail-desc li{margin:.15rem 0}
.sw-addf.big .sw-addbtn{padding:12px;font-size:.95rem}
.sw-detail-pills{margin:.2rem 0 .6rem}
/* live availability tick under the hire-period bar */
.sw-avail{display:flex;align-items:center;gap:8px;margin:.4rem 0 0;font-size:.9rem;font-weight:600}
.sw-avail::before{content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sw-avail.ok{color:var(--ok)} .sw-avail.ok::before{background:var(--ok)}
.sw-avail.warn{color:#b45309} .sw-avail.warn::before{background:#f59e0b}

/* ---- buttons / CTA ---- */
.sw-cta{display:block;text-align:center;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  font-weight:700;font-size:.9rem;color:var(--ink);background:#fff;cursor:pointer;margin-top:8px}
.sw-cta:hover{background:var(--soft)}
.sw-cta.primary{background:var(--dark);color:#fff;border-color:var(--dark)}
.sw-cta.primary:hover{background:var(--dark-h)}
.sw-cta.big{padding:14px}
/* a destructive secondary — quiet until hovered, so Delete never competes with Open */
.sw-cta.sw-cta-quiet{color:var(--muted);font-weight:600}
.sw-cta.sw-cta-quiet:hover{color:var(--accent,#d02b2b);border-color:var(--accent,#d02b2b);background:#fdf3f3}
/* row actions sit side by side; .sw-cta is display:block with a top margin of its own */
.sw-rackrow-acts{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.sw-rackrow-acts .sw-cta{margin-top:0}

/* ---- floating MY ORDER drawer ---- */
.sw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;opacity:0;visibility:hidden;transition:opacity .2s}
.sw-drawer{position:fixed;top:0;right:0;height:100%;width:380px;max-width:90vw;background:#fff;z-index:50;
  box-shadow:-4px 0 24px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column}
body.sw-cart-open .sw-overlay{opacity:1;visibility:visible}
body.sw-cart-open .sw-drawer{transform:none}
.sw-cart{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:18px}
.sw-cart-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}
.sw-cart-title{font-weight:800;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase}
.sw-cart-x{border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.sw-cart-dates{display:flex;align-items:flex-end;gap:8px;margin:14px 0;flex-wrap:wrap}
.sw-cart-dates label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--muted);font-weight:600;flex:1}
.sw-cart-dates input{border:1px solid var(--line);border-radius:8px;padding:7px;font:inherit}
.sw-cart-items{list-style:none;margin:0;padding:0;flex:1}
.sw-ci{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.sw-ci-photo{flex:0 0 46px;width:46px;height:46px;background:var(--soft);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sw-ci-photo img{width:100%;height:100%;object-fit:contain}
.sw-ci-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sw-ci-name{font-weight:600;font-size:.9rem;line-height:1.25}
.sw-ci-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;width:fit-content}
.sw-ci-step button{border:0;background:transparent;width:28px;height:28px;font-size:1rem;cursor:pointer;color:var(--ink)}
.sw-ci-step button:hover{background:var(--soft)}
.sw-ci-qty{min-width:26px;text-align:center;font-size:.88rem;font-weight:600}
.sw-ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sw-ci-price{font-weight:700;font-size:.9rem;white-space:nowrap}
.sw-ci-price small{color:var(--muted);font-weight:500;font-size:.7rem}
.sw-ci-rm{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:2px}
.sw-ci-rm:hover{color:var(--sw-red)}
.sw-cart-sub{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);
  padding-top:12px;margin-top:8px;font-size:1.05rem}
.sw-cart-sub strong{font-size:1.2rem}
.sw-cart-sub small{display:block;color:var(--muted);font-size:.7rem;font-weight:500}
.sw-cart-note{color:var(--muted);font-size:.74rem;margin:8px 0 0;text-align:center}
/* "nothing fits" is an ANSWER, not a footnote — it replaces the parts list, so it has to carry
   the weight of one rather than sit under the stats in .74rem grey. */
.sw-build-none{margin:14px 0 0;padding:14px 16px;border:1px solid #f6c6c6;border-left:4px solid #c62828;
  border-radius:10px;background:#fdf3f3;color:#7f1d1d}
.sw-build-none strong{display:block;font-size:1.02rem;margin-bottom:4px}
.sw-build-none p{margin:0;font-size:.86rem;line-height:1.45;color:#8b3a3a}
.sw-build-none a{color:#7f1d1d;text-decoration:underline}
.sw-cart-empty{color:var(--muted);text-align:center;padding:30px 0}

/* ---- cart page ---- */
.sw-cartpage{max-width:980px;margin:0 auto}
.sw-cp-dates{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.sw-cp-date{flex:1;padding:14px 18px}
.sw-cp-date+.sw-cp-date{border-left:1px solid var(--line)}
.sw-cp-date span{display:block;font-weight:700;font-size:.9rem;margin-bottom:4px}
.sw-cp-date input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.sw-cp-h{font-size:1.8rem;border-bottom:1px solid var(--line);padding-bottom:12px}
.sw-cp-table{width:100%;border-collapse:collapse}
.sw-cp-table td{padding:16px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.sw-cp-photo{width:72px}
.sw-cp-photo img{width:64px;height:64px;object-fit:contain;background:var(--soft);border-radius:8px}
.sw-cp-name{font-weight:700}
.sw-cp-name a:hover{color:var(--sw-red)}
.sw-cp-controls{white-space:nowrap;text-align:right}
.sw-inl{display:inline}
.sw-cp-trash{border:0;background:transparent;color:var(--muted);cursor:pointer;vertical-align:middle;margin-right:14px}
.sw-cp-trash:hover{color:var(--sw-red)}
.sw-cp-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;vertical-align:middle}
.sw-cp-step button{border:0;background:transparent;width:34px;height:34px;font-size:1.1rem;cursor:pointer}
.sw-cp-step button:hover{background:var(--soft)}
.sw-cp-qty{min-width:34px;text-align:center;font-weight:600}
.sw-cp-price{text-align:right;font-weight:700;white-space:nowrap}
.sw-cp-price small{display:block;margin-top:.15rem;color:var(--muted);font-weight:500;font-size:.72rem}
.sw-cp-summary{margin-top:20px;margin-left:auto;max-width:420px}
.sw-cp-subrow{display:flex;justify-content:space-between;align-items:baseline;font-size:1.2rem;font-weight:700;
  border-top:2px solid var(--ink);padding-top:14px}
.sw-cp-subrow small{color:var(--muted);font-weight:500;font-size:.78rem}
.sw-cp-period{color:var(--muted);font-size:.8rem;margin:10px 0 16px}

/* ---- checkout ---- */
.sw-checkout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.sw-co-form h1{margin-top:0}
.sw-frow{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.sw-co-form label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);font-weight:600}
.sw-frow label{flex:1 1 200px}
.sw-fwide{margin-bottom:12px}
.sw-co-form input,.sw-co-form textarea{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;color:var(--ink)}
.sw-co-form input:focus,.sw-co-form textarea:focus{outline:none;border-color:var(--sw-red)}
.sw-co-fine{color:var(--muted);font-size:.78rem;margin-top:10px}
.sw-fulfil{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.sw-radio{flex:1;min-width:160px;display:flex!important;flex-direction:row!important;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--ink)!important;font-weight:600}
.sw-radio:has(input:checked){border-color:var(--sw-red);background:#fff5f5}
.sw-radio input{width:auto}
#sw-delivery-block{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 16px;background:#fafbfc}
#sw-delivery-block h2{margin-top:0}
.sw-del-fee{margin-top:6px;font-size:.85rem;min-height:1.2em}
.sw-del-est strong{color:var(--ink)}
.sw-del-hint{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.sw-co-summary{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.sw-co-summary h2{margin-top:0}
.sw-co-dates{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:.85rem;font-weight:600;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sw-co-items{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.sw-co-items li{display:flex;gap:8px;align-items:baseline;font-size:.88rem}
.sw-co-qn{color:var(--muted);font-weight:700;flex:0 0 auto}
.sw-co-nm{flex:1;min-width:0}
.sw-co-lp{font-weight:700;white-space:nowrap}
.sw-co-lp small{color:var(--muted);font-weight:500;font-size:.7rem}
.sw-co-line{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line);font-size:.92rem}
.sw-co-line.total{font-weight:800;font-size:1.1rem;border-top:2px solid var(--ink);margin-top:4px;padding-top:10px}
.sw-co-line small{color:var(--muted);font-weight:500;font-size:.72rem}
.sw-co-note{color:var(--muted);font-size:.76rem;margin:12px 0 0}

/* ---- done ---- */
.sw-done{max-width:560px;margin:30px auto;text-align:center}
.sw-done-tick{color:#1f9d55;margin-bottom:8px}
.sw-done p{color:var(--muted)}
.sw-done .sw-cta{max-width:260px;margin:20px auto 0}

@media (max-width:760px){
  .shop-head{flex-wrap:wrap;gap:12px;padding:12px 16px}
  .shop-search{order:3;flex-basis:100%;max-width:none}
  .shop-main{padding:16px}
  .sw-checkout{grid-template-columns:1fr}
  .sw-co-summary{order:-1}
}

/* ---- prebuilt rack diagram (light shop theme; info left, diagram right) ---- */
.sw-rackcard .sw-ccard-go{color:#b3122b}
.sw-rack-detail{display:grid;grid-template-columns:1fr minmax(300px,400px);gap:2.5rem;align-items:start;margin-top:1rem}
.sw-rack-info h1{margin:0 0 .4rem}
.sw-rack-tag{display:inline-block;background:#111;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:6px;margin-bottom:.6rem}
.sw-rack-h{margin:1.4rem 0 .5rem;font-size:1rem}
.sw-rack-contents{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.sw-rack-contents li{padding:.45rem .7rem;background:#f5f6f8;border-radius:7px;font-size:.92rem}
.sw-rack-qty{font-weight:700;color:#b3122b;margin-right:.3rem}
/* The right-hand column: photo, then the rack layout under its own heading.
   NOT sticky — it used to be `position:sticky;top:1rem`, so the diagram slid down the page with
   the header while the contents list scrolled past it. Stacked with a container gap rather than
   margins on the children, so adding another block here cannot land flush against its neighbour. */
.sw-rack-side{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.sw-rack-side .sw-detail-photo{flex:0 0 auto;width:100%}
.sw-rack-side .sw-rack-h{margin-top:0}
/* rack look comes from _rack_css.html (shared with staff + portal) */
/* With the U/weight meta gone on the shop, the name gets the whole tile — it was being cut to
   "Sennheiser …" purely to make room for fitting detail a hirer does not need. */
.sw-rack-diagram .ri-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;
  font-weight:600;flex:1 1 auto;min-width:0}
.sw-rack-diagram .ri-meta{color:#8a93a3;white-space:nowrap;display:flex;align-items:center;gap:.35rem}
.sw-rack-diagram .rack-over{background:#fee2e2;color:#b91c1c;text-align:center;padding:5px;border-radius:4px;
  font-size:.78rem;font-weight:700;margin-top:4px}
@media(max-width:720px){.sw-rack-detail{grid-template-columns:1fr}}

/* Inline glyph icons (icon(...,'ig')) — shop.css lacked these, so portal/shop SVGs
   with a viewBox but no width/height stretched to fill their container. Size to 1em. */
.ig{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.14em}
.ig-lg{width:1.25em;height:1.25em}
.ic{width:18px;height:18px;flex-shrink:0;fill:none;stroke:#9aa0ad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* iOS (incl. the in-app checkout WebView) zooms into any focused form
   control whose effective font-size is < 16px, then leaves the page
   zoomed/overflowing. Several shop inputs inherit a small label font
   (0.7-0.8rem) via font:inherit, which made checkout jump on focus and
   overflow horizontally. Pin text-entry controls to 16px — stops the
   auto-zoom without disabling pinch-zoom (accessibility-friendly). */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=date],input[type=password],input:not([type]),textarea,select{font-size:16px}
.shop-mainsite{white-space:nowrap;font-size:.82rem;font-weight:500;color:var(--muted,#6b7280);text-decoration:none}
.shop-mainsite:hover{color:#e60000;text-decoration:underline}
@media (max-width:560px){.shop-mainsite{display:none}}
/* account button: sits with the cart button, so it keeps the same icon treatment —
   the label collapses on phones but the icon (the recognised "person = account"
   affordance) stays, unlike the text-only .shop-mainsite links */
.shop-acctbtn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px;
  color:var(--ink);text-decoration:none}
.shop-acctbtn:hover{color:#e60000}
.shop-acctlbl{white-space:nowrap;font-size:.82rem;font-weight:500}
.sw-acct-dot{position:absolute;top:2px;left:21px;width:9px;height:9px;border-radius:50%;
  background:#16a34a;border:2px solid var(--bg,#fff)}   /* anchored to the icon's corner, not the label */
@media (max-width:560px){.shop-acctlbl{display:none}}

/* "Most hired" ticker on /shop — scrolls continuously, pauses on hover/focus, and
   degrades to a plain horizontal scroller when the visitor prefers reduced motion. */
.sw-ticker{overflow:hidden;margin:.2rem 0 1.4rem;position:relative}
.sw-ticker::before,.sw-ticker::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:2;pointer-events:none}
.sw-ticker::before{left:0;background:linear-gradient(90deg,var(--bg,#fff),transparent)}
.sw-ticker::after{right:0;background:linear-gradient(270deg,var(--bg,#fff),transparent)}
/* slow enough to read a card as it passes; the strip is ~40 cards wide (the list twice) */
.sw-ticker-track{display:flex;width:max-content;animation:sw-tick-scroll 150s linear infinite}
.sw-ticker:hover .sw-ticker-track,.sw-ticker:focus-within .sw-ticker-track{animation-play-state:paused}
.sw-ticker-run{display:flex;gap:12px;padding-right:12px}
@keyframes sw-tick-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sw-tick{display:flex;align-items:center;gap:10px;width:250px;padding:8px 12px 8px 8px;background:#fff;
  border:1px solid var(--line,#e5e7eb);border-radius:14px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
.sw-tick:hover{border-color:var(--sw-red);text-decoration:none;box-shadow:0 4px 14px rgba(23,24,28,.08)}
.sw-tick-photo{flex:0 0 48px;height:48px;background:#fff;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.sw-tick-photo img{width:100%;height:100%;object-fit:contain}
.sw-tick-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sw-tick-name{font-size:.85rem;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sw-tick-price{font-size:.75rem;color:var(--muted,#6b7280)}
@media (prefers-reduced-motion:reduce){
  .sw-ticker{overflow-x:auto}
  .sw-ticker-track{animation:none}
  .sw-ticker-run[aria-hidden="true"]{display:none}
}

/* What's included (dependencies) — same type as .sw-detail-desc so the two lists beneath a
   product read as one voice; they used to differ (.92rem desc vs inherited 1rem here), which is
   what "different sizes/maybe font between each other" was. */
.sw-included{margin-top:1.2rem;padding:1rem 1.2rem;background:#f8fafc;border-radius:10px;
  color:#374151;font-size:.92rem;line-height:1.55}
.sw-included h3{margin:0 0 .5rem;font-size:1rem;color:#111827}
.sw-included ul{margin:0;padding-left:1.3rem}
.sw-included li{margin:.15rem 0}
.sw-included-note{margin:.6rem 0 0;font-size:.8rem;color:#6b7280}

/* postcode delivery estimator — homepage band */
.sw-delband{display:flex;gap:2.5rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  background:var(--warm);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin-top:2.6rem}
.sw-delband-l{flex:1 1 320px;max-width:480px}
.sw-delband-l h2{position:relative;margin:0 0 .6rem;padding-bottom:10px}
.sw-delband-l h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;
  border-radius:2px;background:var(--sw-red)}
.sw-delband-l p{margin:0;color:var(--muted);font-size:.95rem}
.sw-delband-form{flex:1 1 300px;max-width:380px}
.sw-delband-row{display:flex;gap:10px}
.sw-delband-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font:inherit;text-transform:uppercase;background:#fff}
.sw-delband-row input:focus{outline:none;border-color:var(--sw-red)}
.sw-delband-row .sw-addbtn{flex:0 0 auto;padding:10px 22px}
#sw-del-home .sw-del-result{margin-top:12px}

/* postcode delivery estimator (cart page) */
.sw-del{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.sw-del h3{margin:0 0 .5rem;font-size:1rem}
.sw-del-form{display:flex;gap:.5rem}
.sw-del-form input{flex:1;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit;text-transform:uppercase}
.sw-del-result{margin-top:.7rem;padding:.7rem .9rem;background:#f0fdf4;border-radius:8px;font-size:.92rem}
.sw-del-result strong{font-size:1.15rem}
.sw-del-err{background:#fef2f2;color:#b91c1c}
.sw-del-note{margin:.35rem 0 0;font-size:.78rem;color:#6b7280}

/* cart: bundle + dependency presentation */
.sw-cp-photo img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line,#e5e7eb)}
.sw-cp-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:6px;background:#f1f3f6;color:#555;font-size:.72rem;font-weight:600;vertical-align:middle}
.sw-cp-combo{margin:6px 0 0;padding-left:16px;color:#777;font-size:.82rem}
.sw-cp-combo li{margin:1px 0}
.sw-cp-deprow td{border-top:none;padding-top:0}
.sw-cp-deprow .sw-cp-photo img{width:40px;height:40px;opacity:.85}
.sw-cp-depmark{color:#aaa;margin-right:2px}
.sw-cp-depqty{color:#777}
.sw-co-dep{color:#777;font-size:.9em}

/* save-as-kit-list: part of the cart's button stack, not a stray form */
/* saving a kit list is a separate intent from checking out, so it sits apart from the two CTAs
   rather than reading as a third button in the same stack */
.sw-savelist{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.sw-savelist input{border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:inherit;
  width:100%;box-sizing:border-box;background:#fff}
.sw-savelist input:focus{outline:none;border-color:var(--dark)}
/* the flex gap alone spaces these — .sw-cta's own margin-top stacked on top of it, so the
   name/Save gap rendered at 16px against the 8px between Checkout and Continue shopping */
.sw-savelist button{width:100%;cursor:pointer;font:inherit;margin-top:0}
.sw-hiredwith{margin-top:34px}

.sw-account-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;max-width:520px;margin-top:14px}
.sw-account-card p{margin:0 0 12px}
/* sign-in landing: the two ways in side by side, benefits alongside. Each card states its own
   purpose — one box for both left customers guessing which sign-in they wanted. */
.sw-signin-grid{display:grid;grid-template-columns:1fr 1fr minmax(260px,.9fr);gap:16px;align-items:start;margin-top:14px}
/* one card, two ways in (2026-08-10): the sign-in column widens and the second card is gone */
.sw-signin-one{grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr)}
.sw-signin-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--muted);font-size:.82rem}
.sw-signin-or::before,.sw-signin-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.sw-findhire{display:flex;flex-direction:column;gap:8px}
.sw-signin-grid .sw-account-card{max-width:none;margin-top:0;height:100%}
.sw-signin-h{font-size:1.02rem;font-weight:700;margin:0 0 6px}
.sw-signin-lead{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0 0 14px}
.sw-benefits{background:var(--red-soft);border:1px solid #f6d9d4;border-radius:12px;padding:18px 20px}
.sw-benefits-h{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sw-red);margin:0 0 10px}
.sw-benefits ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sw-benefits li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.45}
.sw-benefits li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;
  border-left:2px solid var(--sw-red);border-bottom:2px solid var(--sw-red);transform:rotate(-45deg)}
@media (max-width:900px){.sw-signin-grid{grid-template-columns:1fr}}

/* ---- Build tab (rack/stage/LED/projector builders) ---- */
.shop-buildbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;
  font-weight:700;color:inherit;text-decoration:none;border:1.5px solid transparent;
  margin-inline:clamp(8px,3.5vw,64px)}   /* equal air on both sides, between the logo and the search */
.shop-buildbtn:hover,.shop-buildbtn.on{border-color:var(--sw-red,#d02b2b);color:var(--sw-red,#d02b2b)}
.sw-build-grid .sw-ccard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px}
.sw-build-grid .sw-ccard span{font-weight:400;font-size:.86rem;opacity:.75}
.sw-build-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:16px}
.sw-build-form label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
.sw-build-form input[type=number],.sw-build-form input[type=text],.sw-build-form input[type=search],
.sw-build-form select{padding:8px 10px;border:1px solid #d9d9d9;border-radius:8px;font:inherit;min-width:9rem}
/* FIELD forms only (:not(.sw-build-opts) — the LED/stage/projector toolbars wear the same class
   but are rows of pills, and stretching those labels would wreck them). Fields share the row and
   every control stands the same height, so the name box, the case picker and the button sit on
   one line instead of the name hogging the width and shoving the rest onto a second row
   (operator, 2026-08-15, "Start a new rack"). */
.sw-build-form:not(.sw-build-opts){--sw-ctl-h:42px;align-items:flex-end}
.sw-build-form:not(.sw-build-opts) label{flex:1 1 13rem;min-width:0}
.sw-build-form:not(.sw-build-opts) label.chk{flex:0 0 auto}
.sw-build-form:not(.sw-build-opts) input[type=number],
.sw-build-form:not(.sw-build-opts) input[type=text],
.sw-build-form:not(.sw-build-opts) input[type=search],
.sw-build-form:not(.sw-build-opts) select{width:100%;min-width:0;height:var(--sw-ctl-h);box-sizing:border-box}
.sw-build-form:not(.sw-build-opts) .sw-cta{flex:0 0 auto;height:var(--sw-ctl-h);margin-top:0;padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center}
.sw-build-form .chk{flex-direction:row;align-items:center;gap:6px;font-weight:500}
.sw-build-checks{display:flex;gap:12px;border:1px solid #e5e5e5;border-radius:8px;padding:8px 12px}
.sw-build-checks legend{font-size:.78rem;padding:0 4px}
.sw-build-short{background:#fbe9e9;color:#9d1f1f}
.sw-build-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0;padding:14px 18px;
  border:1.5px solid var(--sw-red,#d02b2b);border-radius:12px;text-decoration:none;color:inherit}
.sw-build-banner-t{font-weight:800;font-size:1.05rem}
.sw-build-banner-d{flex:1 1 18rem;font-size:.86rem;opacity:.8}
.sw-build-combo{margin-top:14px}
.sw-build-combo.ok{border-left:3px solid #1d8a44}
.sw-build-combo h3{margin:0 0 8px;font-size:1rem}
.sw-build-rack-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
@media (max-width:760px){.sw-build-rack-cols{grid-template-columns:minmax(0,1fr)}}
.sw-build-hit{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid #eee;font-size:.9rem}
.sw-scenebox{margin:10px 0 16px;padding:14px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa;overflow-x:auto}
.sw-scene{display:block;max-width:640px;width:100%;height:auto;margin:0 auto}
.sw-build-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-build-thumb{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid #eee;flex:0 0 auto}
.sw-build-combo .sw-build-thumb{width:52px;height:52px}
.sw-handle{cursor:grab;touch-action:none}
.sw-handle:active{cursor:grabbing}
.sw-handle circle:hover{fill-opacity:1}
.sw-build-details{margin:6px 0 14px}
.sw-build-details summary{cursor:pointer;font-size:.85rem;color:#666;font-weight:600}
.sw-build-details .sw-account-card{margin-top:8px}
.sw-proj-hero{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start}
@media (max-width:820px){.sw-proj-hero{grid-template-columns:minmax(0,1fr)}}
.sw-proj-best{margin-top:0}
.sw-proj-bestlbl{margin:0 0 6px;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sw-red,#d02b2b)}
.sw-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sw-proj-grid .sw-build-combo{margin-top:0}
.sw-proj-hero{align-items:stretch}
.sw-proj-hero .sw-scenebox{display:flex;align-items:center;margin:0}
.sw-proj-best{display:flex;flex-direction:column;min-height:0;overflow:auto}

.sw-proj-grid .sw-build-combo{display:flex;flex-direction:column}

/* the two CTAs wrap unpredictably at grid-card widths — stack them, so every card's buttons
   sit at identical heights across a row */
.sw-build-add{margin-top:14px}
.sw-proj-grid .sw-build-combo .sw-build-add,
.sw-proj-best .sw-build-add{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-top:auto;padding-top:14px}
.sw-proj-grid .sw-build-combo .sw-build-add .sw-cta,
.sw-proj-best .sw-build-add .sw-cta{text-align:center;margin:0}
/* internal rows align across a card row: reserve worst-case space for the title+tag block and a
   consistent height per product row, so photos and prices sit level card to card */
.sw-proj-grid .sw-build-combo h3{min-height:6.2em;margin:0 0 8px}
.sw-proj-grid .sw-build-combo .sw-build-row{min-height:76px}
.sw-proj-grid .sw-build-combo .sw-cart-note{min-height:2.6em}
/* slim option pills above the scene — the drag handles own the dimensions */
.sw-build-opts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:0;margin:4px 0 10px}
.sw-opt-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sw-opt-lbl{font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a8f9c;margin-right:2px}
.sw-opt-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid #ddd;
  border-radius:6px;font-size:.84rem;font-weight:600;cursor:pointer;user-select:none;background:#fff}
.sw-opt-pill:has(input:checked){border-color:var(--sw-red,#d02b2b);color:var(--sw-red,#d02b2b);background:#fdf3f3}
.sw-opt-pill input{position:absolute;opacity:0;pointer-events:none}
/* ---- the size editor that sits ON its axis, in the drawing ----
   A <foreignObject> at each drag handle (shop_build._handle) holds a real form field, so a
   dimension is typed exactly where it is measured. Sizes are in viewBox units and scale with
   the scene, which is what keeps the box glued to its axis at any width. */
/* Everything inside is in `em` so the one inline font-size shop_build._fit_handle_boxes writes
   scales the whole badge — border, radius and padding included. (A `px` here would be a viewBox
   unit, which is the very thing that made these render three different sizes.) */
.sw-handle-box{display:flex;align-items:center;justify-content:center;gap:.15em;height:100%;
  background:#fff;border:.14em solid var(--sw-red,#d02b2b);border-radius:.5em;
  box-shadow:0 .08em .25em rgba(0,0,0,.16);font-weight:700;line-height:1;
  font-family:system-ui,sans-serif;overflow:hidden}
.sw-handle-box:focus-within{box-shadow:0 0 0 .18em rgba(208,43,43,.25)}
/* input.` / select.` — NOT a bare class. The iOS-zoom guard further up this file sets
   `input[type=number],…,select{font-size:16px}`, which is specificity (0,1,1) and beat a
   single-class `font:inherit`. Inside a foreignObject that 16px is 16 VIEWBOX UNITS, so the
   figure rendered ~33px while the unit beside it scaled correctly to 10.5px — the number
   towering over its own box (operator, 2026-08-04). The guard exists to stop Safari zooming on
   focus; it has no business inside the drawing, where nothing is a tappable form field at
   16px anyway. */
.sw-handle-box input.sw-handle-lbl,.sw-handle-box select.sw-handle-lbl{
  width:100%;min-width:0;border:0;background:none;padding:0 0 0 .35em;
  font:inherit;color:var(--sw-red,#d02b2b);text-align:right;font-variant-numeric:tabular-nums}
.sw-handle-box select.sw-handle-lbl{text-align:left;padding-left:.2em;cursor:pointer;appearance:none}
.sw-handle-lbl:focus{outline:none}
.sw-handle-unit{color:var(--sw-red,#d02b2b);opacity:.75;padding-right:.4em;font:inherit}
/* spinners will not fit a box this size; arrow keys and dragging the dot both still work */
.sw-handle-lbl::-webkit-outer-spin-button,.sw-handle-lbl::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.sw-handle-lbl[type=number]{-moz-appearance:textfield;appearance:textfield}
/* the dot stays the drag grip; the box must not inherit the grab cursor */
.sw-handle{cursor:grab}
.sw-handle-fo,.sw-handle-box{cursor:auto}
.sw-stepmark{cursor:pointer}
.sw-stepmark:hover circle{stroke:#d02b2b;stroke-dasharray:none}

/* ---- builder stat chips (shared results header on /shop/build/{stage,led,projector}) ---- */
.sw-build-stats{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 4px}
.sw-bstat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 16px 8px;
  display:flex;flex-direction:column;gap:1px;min-width:110px}
.sw-bstat-v{font-weight:800;font-size:1.12rem;letter-spacing:.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.sw-bstat-l{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* Builder embedded at the top of its category page (Settings -> Hire shop -> Shop builders).
   The iframe height comes from the builder's own postMessage, so no inner scrollbar; 620px is
   only the first paint before that message lands. */
/* the embedded builder is a WORKING part of the category page: no card border, no header
   strip — it reads as page content. Height comes from the builder's own postMessage. */
.sw-build-frame{display:block;width:100%;border:0;height:620px;margin:6px 0 8px}
/* inside the iframe: chrome-less, and the page's own h1/crumbs/intro go too — the CATEGORY
   page already says where the visitor is, so repeating "Stage Builder" inside the frame is
   what made it feel shoehorned in */
.shop-main.sw-embed{padding-top:4px;padding-bottom:10px}
.shop-main.sw-embed .sw-crumbs,.shop-main.sw-embed>h1,.shop-main.sw-embed .sw-cart-note{display:none}

/* Power Planner (/shop/build/power) */
.pw-mode{padding:8px 16px;border:1px solid var(--sw-line,#e5e3dd);border-radius:6px;background:#fff;
  font:inherit;font-weight:700;cursor:pointer}
.pw-mode.on{background:#20222a;color:#fff;border-color:#20222a}
.pw-stage{position:relative;border:1px solid var(--sw-line,#e5e3dd);border-radius:14px;background:#fff;
  padding:10px;overflow:hidden}
.pw-stage svg{display:block;width:100%;height:auto}
/* the scene speaks the site's own face — Space Grotesk, like every heading around it */
.pw-lbl{font:700 9px/1 'Space Grotesk',ui-sans-serif,system-ui;fill:#5b6472;letter-spacing:.08em;text-anchor:middle}
.pw-hud-t{font:700 15px/1 'Space Grotesk',ui-sans-serif,system-ui;fill:#20222a}
.pw-hud-s{font:600 10px/1 'Space Grotesk',ui-sans-serif,system-ui;fill:#5b6472;letter-spacing:.06em}
.pw-hot{cursor:pointer}
.pw-hot:hover polygon{filter:brightness(1.06)}
.pw-caption{min-height:2.6em;margin:10px 2px 18px;font-size:.95rem;color:#3d434e}
/* max-height + inner scroll: when the shelf list is taller than the scene itself (two full
   generator spec blocks), the card scrolls in place instead of clipping at the box edge */
#pw-card{position:absolute;z-index:5;max-width:22rem;max-height:calc(100% - 16px);overflow-y:auto;
  background:#fff;border:1px solid #d5d9e0;
  border-radius:10px;box-shadow:0 10px 28px rgba(16,24,40,.16);padding:.65rem 1.8rem .7rem .8rem;
  font-size:.83rem}
.pw-card-x{position:absolute;top:.3rem;right:.35rem;border:0;background:none;font-size:1.15rem;
  line-height:1;cursor:pointer;color:#5b6472;padding:.15rem}
#pw-card .pw-card-item{display:block;margin-top:.45rem}
#pw-card .pw-card-item a{font-weight:700;color:inherit;text-decoration:none}
#pw-card .pw-card-meta{display:block;color:#5b6472}
/* specs as label/value ROWS — a run-on dot-separated sentence was the operator's complaint
   (2026-08-08); a two-column grid is what a datasheet looks like */
.pw-card-specs{display:grid;grid-template-columns:auto 1fr;gap:.05rem .7rem;margin:.25rem 0 0;
  font-size:.76rem}
.pw-card-specs dt{color:#7a8190;font-weight:500}
.pw-card-specs dd{margin:0;color:#3d434e;font-weight:600;text-align:right}
.pw-card-more{display:block;margin-top:.55rem;font-size:.8rem;font-weight:700;color:inherit}
#pw-card .pw-card-p{margin:.3rem 0 0;color:#5b6472}

.pw-chip-t{font:700 8.5px/1 'Space Grotesk',ui-sans-serif,system-ui;fill:#fff;text-anchor:middle;letter-spacing:.06em}


/* Embedded builders: the closed cart drawer sits exactly at the viewport edge and its
   box-shadow (-4px 0 24px) bled back INTO the narrow iframe as a black band down the right
   (operator, 2026-08-08, twice). overflow-x:clip was the first try and CANNOT work — the
   drawer is position:fixed, which body overflow never clips. visibility does: a closed drawer
   paints nothing at all (shadow included), an opening one becomes visible and slides in. */
.sw-embedded:not(.sw-cart-open) .sw-drawer{visibility:hidden}

/* Fit a builder on a laptop screen (operator, 2026-08-08: "can't see all of the features
   without scrolling"). Wide screens: options, stats and the parts list stack in a left rail,
   the scene sits sticky beside them and is capped to the viewport; phones keep today's order. */
.sw-build-fit{display:grid;gap:0 22px}
@media (min-width:1000px){
  /* scene on the LEFT, controls/stats/parts in the right rail (operator, 2026-08-08) */
  .sw-build-fit{grid-template-columns:1fr minmax(300px,380px);align-items:start;
    grid-template-areas:"scene opts" "scene stats" "scene parts";
    /* explicit rows: the scene spans all three, and without this the browser DISTRIBUTED its
       height across them — a void opened between the option pills and the parts list
       (operator, 2026-08-09) */
    grid-template-rows:auto auto 1fr}
  .sw-build-fit>.sw-build-opts{grid-area:opts}
  /* the scene adopts the RAIL's height exactly (operator, 2026-08-09: "match the height of
     the tab on the right, so you don't have to scroll"): the box stretches to the grid's
     height — which the rail's rows define — and the drawing scales to fit inside it. The svg
     is absolutely positioned so its natural size never feeds back into the row heights. */
  .sw-build-fit>.sw-scenebox{grid-area:scene;align-self:stretch;position:relative;
    min-height:340px;margin:0}
  .sw-build-fit>.sw-build-stats{grid-area:stats}
  .sw-build-fit>.sw-build-parts{grid-area:parts}
  .sw-build-fit .sw-scenebox svg{position:absolute;inset:12px;width:calc(100% - 24px);
    height:calc(100% - 24px)}
  .sw-build-fit .pw-stage{position:static}
  /* stat chips: as many per row as FIT WHOLE — clipping "1024 × ..." told the visitor less
     than wrapping to a second row does (operator, 2026-08-08, twice) */
  .sw-build-fit .sw-build-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
  .sw-build-fit .sw-bstat{flex:1 1 8.5rem;padding:8px 10px}
  .sw-build-fit .sw-bstat-v{white-space:nowrap}
  .sw-build-fit .sw-bstat-l{font-size:.62rem;white-space:nowrap}
  /* one line per product in the parts list: no thumbnail (a 40px photo cost a third of the
     rail), the name ellipsises, price stays whole — one clean row each */
  .sw-build-fit .sw-cp-table{table-layout:fixed;width:100%}
  .sw-build-fit .sw-build-thumb{display:none}
  /* the base .sw-build-row is a wrapping flex with a 76px min-height (built for thumbnails).
     In the rail: one product = one line, QTY FIRST so the ellipsis can never eat it —
     "16 × LEDFUL K03.9 Video Wall Pan…", never "LEDFUL … Panel 100…" with the count gone */
  .sw-build-fit .sw-build-row{display:flex;align-items:baseline;gap:.35rem;flex-wrap:nowrap;
    min-height:0;overflow:hidden;padding:.3rem 0}
  .sw-build-fit .sw-build-row small{order:-1;flex:0 0 auto;font-weight:700}
  .sw-build-fit .sw-cp-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .sw-build-fit .sw-cp-tag{display:none}
  /* the ROW owns the divider and the price sits inline on the same line — per-cell borders
     drew underlines at different heights and the two columns read as separate broken lists */
  .sw-build-fit .sw-cp-table tr{display:flex;align-items:center;gap:.5rem;
    border-bottom:1px solid #ececec;padding:.15rem 0}
  .sw-build-fit .sw-cp-table td{border:0;padding:.2rem 0}
  .sw-build-fit .sw-cp-table td.sw-build-row{flex:1 1 auto;min-width:0}
  /* natural width, NOT a fixed one: "£240.00/ 48 hours" is wider than any fixed column and
     nowrap made the excess run off the rail — the name cell is the one that yields space */
  .sw-build-fit .sw-cp-price{flex:0 0 auto;width:auto;white-space:nowrap;text-align:right}
  .sw-build-fit .sw-cp-price small{display:inline;margin-left:2px}
  .sw-build-fit .sw-bstat-v{font-size:.85rem;overflow:hidden;text-overflow:ellipsis}
  .sw-proj-hero .sw-scenebox svg,.pw-stage svg{max-height:56vh}
}
/* inside an iframe 100vh is the frame's own (growing) height — cap in px instead */

/* the parts list is the tall pole everywhere: it scrolls in place so the rail — and with it
   the scene, which stretches to match — stays within one screen */
.sw-build-fit .sw-build-parts{max-height:340px;overflow-y:auto;padding-right:4px}


/* power page inside the standard builder grid: the scenebox provides the frame, so the inner
   stage sheds its own border; group headings in the rail's shelf list */
.pw-scenebox .pw-stage{border:0;padding:0;background:transparent}
.pw-modes .pw-caption{flex-basis:100%;margin:2px 2px 0;min-height:2.6em}
.pw-group td{padding:.65rem 0 .15rem;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#8a919e;border:0}
.sw-build-fit .sw-cp-table tr.pw-group{border-bottom:0}
.pw-modes{display:flex;gap:8px;margin:6px 0 12px;flex-wrap:wrap}

/* the Rack Builder's front-of-shop card */
/* margins match .sw-delband's 2.6rem top so the collapsed gap is EQUAL above and below the
   card in its home between the Categories grid and the delivery band (operator, 2026-08-08) */
.sw-rackhero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:2.6rem 0;
  padding:16px 20px;border:1px solid var(--sw-line,#e5e3dd);border-radius:14px;background:#fff;
  text-decoration:none;color:inherit}
.sw-rackhero-t{font-weight:800;font-size:1.1rem}
.sw-rackhero-d{flex:1 1 20rem;font-size:.88rem;opacity:.8}
.sw-rackhero .sw-cta{white-space:nowrap}

/* Honeypot on the sign-in forms. Off-screen rather than display:none — some form-fillers skip
   hidden inputs, and the point is that they DO fill this one. Never focusable, never announced
   (2026-08-13; see app/shop_account.py account_login). */
.sw-nope{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Category page copy (Settings → the category's page, drafts from the nightly LLM job).
   The intro reads before the grid; FAQ + related sit after it so kit stays above the fold. */
/* Full content width, single column (operator, 2026-08-17 — asked for the grid's width, then
   for the two-column experiment to go). Plain full-width paragraphs. */
.sw-cat-intro{color:#3c4450;margin:.2rem 0 .9rem}
.sw-cat-intro p{margin:.45rem 0;line-height:1.6}
.sw-cat-popular{margin:.2rem 0 1rem;font-size:.92rem;color:var(--muted)}
.sw-cat-popular a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sw-cat-popular a:hover{color:var(--accent,#d02b2b)}
.sw-cat-faq{max-width:46rem;margin:2.2rem 0 0}
.sw-cat-faq h2{font-size:1.05rem;margin:0 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.sw-faq-item{border-bottom:1px solid var(--line);padding:.35rem 0}
.sw-faq-item summary{cursor:pointer;font-weight:600;padding:.3rem 0}
.sw-faq-item p{margin:.3rem 0 .5rem;line-height:1.5;color:#3c4450}
.sw-cat-related{margin:1.6rem 0 0}
.sw-cat-related h2{font-size:1.05rem;margin:0 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.sw-rel-chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.25rem .8rem;
             margin:0 .35rem .45rem 0;color:inherit;text-decoration:none;font-size:.9rem}
.sw-rel-chip:hover{border-color:var(--accent,#d02b2b);color:var(--accent,#d02b2b)}

/* Brand index (/shop/brands) */
.sw-brandix{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;margin:1rem 0}
.sw-brandix-card{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.sw-brandix-name{font-weight:700;font-size:1.05rem;color:inherit;text-decoration:none}
.sw-brandix-name:hover{color:var(--accent,#d02b2b)}
.sw-brandix-n{display:block;color:var(--muted);font-size:.85rem;margin:.15rem 0 .35rem}
.sw-brandix-series{margin:.15rem 0 0;font-size:.88rem;line-height:1.7;color:var(--muted,#6b7280)}
.sw-brandix-series a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.sw-brandix-series a:hover{color:var(--sw-red,#d02b2b)}

/* the quiet side-link in a section head ("View the full DiGiCo range →") — a text link on the
   heading's baseline, not a boxed pill jammed against it */
.sw-range-link{font-size:.9rem;color:var(--muted,#6b7280);text-decoration:none;white-space:nowrap}
.sw-range-link:hover{color:var(--sw-red,#d02b2b);text-decoration:underline;text-underline-offset:3px}

/* the brand strip after the category tiles — its own banded section, clear of the hero */
.sw-brandband{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin:26px 0 6px;
              padding:14px 0 10px;border-top:1px solid var(--line,#e5e7eb)}
.sw-brandband-l{font-weight:700;font-size:.92rem;margin-right:.4rem}
.sw-brandband .sw-rel-chip{margin:0}
.sw-rel-all{color:var(--muted,#6b7280)}

/* ---- Start a new rack: searchable case picker + live size preview (2026-08-16) ----
   The chooser was a drop-down of names, so picking a case meant knowing the fleet by heart.
   Now you search it and SEE it: one column per bay, one cell per U, drawn to the case's real
   shape, with the depth/packed-size/weight underneath. */
.sw-newrack{max-width:none}
.sw-newrack-cols{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:18px;align-items:start}
@media (max-width:720px){.sw-newrack-cols{grid-template-columns:minmax(0,1fr)}}
.sw-nr-field{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;margin-bottom:10px}
.sw-nr-field input{padding:9px 11px;border:1px solid #d9d9d9;border-radius:8px;font:inherit;width:100%;box-sizing:border-box}
/* the list scrolls rather than running the page long — 29 cases and counting */
.sw-nr-list{max-height:16rem;overflow:auto;border:1px solid #e5e5e5;border-radius:10px;padding:4px}
.sw-nr-opt{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:8px;cursor:pointer;
  position:relative;padding-left:30px}
.sw-nr-opt:hover{background:var(--sw-soft,#f6f6f6)}
.sw-nr-opt.is-on{background:#eef2ff;box-shadow:inset 0 0 0 1px #c7d2fe}
.sw-nr-opt input{position:absolute;left:9px;top:11px;margin:0}
.sw-nr-opt-t{font-weight:600;font-size:.9rem}
.sw-nr-opt-m{font-size:.78rem;opacity:.72}
.sw-nr-none{font-size:.85rem;opacity:.8;margin:8px 2px 0}
.sw-nr-eg{border:1px solid #d9d9d9;background:#fff;border-radius:6px;padding:1px 7px;font:inherit;
  font-size:.8rem;cursor:pointer}
/* preview: bays side by side, each a stack of U cells at a readable scale */
.sw-nr-preview{border:1px solid #e5e5e5;border-radius:10px;padding:12px;background:#fafafa}
.sw-nr-prev-head{font-weight:700;font-size:.9rem;margin-bottom:8px;line-height:1.3}
.sw-nr-bays{display:flex;justify-content:center;align-items:flex-end;min-height:60px;margin-bottom:24px}
/* the case SHELL: a two-bay case is one case, so the bays sit joined inside a single outline
   sharing a centre divider, rather than floating apart as two boxes (operator, 2026-08-16) */
.sw-nr-shell{display:flex;border:1.5px solid #cfcfcf;border-radius:4px;background:#fff;padding:3px;
  gap:0;box-sizing:border-box;position:relative}
.sw-nr-shell.is-multi .sw-nr-bay + .sw-nr-bay{border-left:1.5px solid #cfcfcf;margin-left:3px;padding-left:4px}
/* FLEX column, not grid: `repeat(var(--u), …)` is invalid — a custom property cannot supply a
   repeat count, so the U cells never laid out and the tall two-bay cases drew as empty boxes
   (operator, 2026-08-16: "the double racks do not render correctly"). Each U is a flex child. */
.sw-nr-bay{display:flex;flex-direction:column;gap:1px;width:62px;
  height:calc(clamp(60px, var(--u) * 7px, 190px));box-sizing:border-box;position:relative}
.sw-nr-bay span{flex:1 1 0;min-height:2px}
.sw-nr-bay span{background:#e8ebf3;border-radius:1px}
.sw-nr-bay b{position:absolute;left:-3px;right:-3px;bottom:-17px;text-align:center;font-size:.68rem;opacity:.7;
  white-space:nowrap}
.sw-nr-specs{margin:14px 0 0;font-size:.8rem;display:flex;flex-direction:column;gap:6px}
.sw-nr-specs div{display:flex;justify-content:space-between;gap:10px}
.sw-nr-specs dt{opacity:.7}
.sw-nr-specs dd{margin:0;font-weight:600;text-align:right}
.sw-nr-go{margin-top:14px;max-width:14rem}

/* Warehouse opening-hours notices (2026-08-19): the shop refuses a pickup booking that
   starts or ends on a closed day, and says so where the dates are chosen. */
.sw-co-warn{background:var(--red-soft);border:1px solid #f3c9c3;border-radius:10px;
  color:#a32b1f;padding:.6rem .8rem;font-size:.9rem;margin:.4rem 0}
.sw-co-warn a{text-decoration:underline;font-weight:600}
.sw-co-hours{margin:.3rem 0 0}