/* Sound-Hire — exact port of the Claude Design "Signal" mockup's base styles + JS-rendered
 * component classes. Page-structure styling lives inline in build.mjs, copied directly from
 * the source .dc.html files for pixel fidelity — this file covers what the mockup's own
 * <helmet><style> block covered, plus classes for the elements app.js renders client-side. */

html { scroll-behavior: smooth; color-scheme: light; }
body { margin: 0; background: #FFFFFF; color: #0B1424; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #1A6AA8; text-decoration: none; }
a:hover { color: #0D293E; }
::selection { background: #1F79BF; color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #1F79BF; outline-offset: 2px; }
#rail::-webkit-scrollbar { display: none; }
@keyframes shFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shSlideIn { from { transform: translateX(64px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes shFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shDrop { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ---------- hero equipment collage: lighter card shadows, no background glow ---------- */
.sh-card { box-shadow: 0 10px 22px rgba(13,41,62,.08) !important; }
.sh-glow { display: none; }

/* ---------- responsive: collapse two-column hero/content splits below tablet ---------- */
@media (max-width:900px) {
  .sh-split { grid-template-columns: 1fr !important; }
  .sh-collage { min-height: 0 !important; margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
  .sh-collage .sh-decor, .sh-collage .sh-badge { display: none !important; }
  .sh-collage .sh-card { position: static !important; width: 100% !important; max-width: 420px; }
}

/* ---------- product card (rendered client-side by app.js, exact port of mockup markup) ---------- */
.p-card { background:#fff; border:1px solid #E3E9F2; border-radius:18px; overflow:hidden; cursor:pointer; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .2s; display:flex; flex-direction:column; }
.p-card:hover, .p-card:focus-visible { transform:translateY(-5px); box-shadow:0 22px 48px rgba(13,41,62,.12); border-color:#BFD7EA; }
.p-card.shortlisted { border-color:#1F79BF; }
.p-stage { position:relative; background:#F4F7FB; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:20px; border-bottom:1px solid #EDF2F8; }
.p-stage img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.p-card:hover .p-stage img { transform:scale(1.06); }
.p-badge { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92); border:1px solid #E3E9F2; border-radius:100px; padding:4px 10px; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:9.5px; letter-spacing:.06em; color:#54607A; }
.p-dot { width:7px; height:7px; border-radius:50%; }
.p-short { position:absolute; top:10px; right:10px; border:1px solid #E3E9F2; background:rgba(255,255,255,.92); border-radius:100px; padding:5px 11px; font-size:11.5px; font-weight:600; color:#1A6AA8; }
.p-short:hover { border-color:#1F79BF; }
.p-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.p-cat { font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:10px; letter-spacing:.12em; color:#5F6C80; margin:0; }
.p-body h3 { font-size:16.5px; font-weight:680; letter-spacing:-.015em; margin:0; line-height:1.25; }
.p-blurb { font-size:13.5px; color:#54607A; margin:0; line-height:1.45; flex:1; }
.p-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:12px; border-top:1px solid #F0F4F9; }
.p-price { font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.04em; }
.p-avail { border:0; background:#EAF2FA; color:#1A6AA8; border-radius:9px; padding:7px 12px; font-size:12.5px; font-weight:650; }
.p-avail:hover { background:#1F79BF; color:#fff; }
.tag { font-size:11.5px; font-weight:600; color:#1A6AA8; background:#EAF2FA; border-radius:100px; padding:5px 12px; }

/* ---------- quick-view drawer sub-parts ---------- */
.qv-thumb { width:64px; height:52px; padding:5px; background:#F4F7FB; border-radius:9px; border:1.5px solid #EDF2F8; cursor:pointer; }
.qv-thumb img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.qv-related { border:1px solid #EDF2F8; border-radius:12px; padding:10px; cursor:pointer; transition:border-color .2s, transform .25s; }
.qv-related:hover { border-color:#BFD7EA; transform:translateY(-2px); }
.qv-related-img { background:#F4F7FB; border-radius:8px; height:72px; display:flex; align-items:center; justify-content:center; padding:8px; margin-bottom:8px; }
.qv-related-img img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.qv-related p { font-size:11.5px; font-weight:600; color:#0B1424; margin:0; line-height:1.3; }

/* ---------- quote drawer shortlist rows ---------- */
.quote-short-row { display:flex; align-items:center; gap:12px; border:1px solid #EDF2F8; border-radius:12px; padding:9px 12px; }
.quote-short-thumb { background:#F4F7FB; border-radius:8px; width:52px; height:40px; display:flex; align-items:center; justify-content:center; padding:4px; flex-shrink:0; }
.quote-short-thumb img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.quote-short-row p { font-size:13px; font-weight:600; margin:0; flex:1; }
.quote-short-row button { border:0; background:none; color:#B54545; font-size:12px; font-weight:600; }

/* GOO-353 / GOO-492: visually hidden but announced (heading structure for the card grids). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Product name is the card's real control (opens quick view); the card stays clickable for pointer users. */
.p-open{all:unset;cursor:pointer;color:inherit;font:inherit}
.p-open:focus-visible{outline:2px solid #1A6AA8;outline-offset:3px;border-radius:4px}