/* OEM Parts Finder - works alongside the Skeletal/Bootstrap theme styles. Adjust the variables to match your brand. */
.ds-app {
  --ds-accent: #faa632;
  --ds-accent-soft: rgba(200, 16, 46, .12);
  --ds-border: #dee2e6;
  --ds-muted: #6c757d;
  --ds-bg: #f8f9fa;
  margin: 1rem 0 3rem;
  position: relative;
}
.ds-app .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 
/* brands */
.ds-brands { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ds-brand { padding: .45rem 1rem; border: 1px solid var(--ds-border); border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; }
.ds-brand:hover { border-color: var(--ds-accent); text-decoration: none; }
.ds-brand.active { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
 
/* search */
.ds-search { margin-bottom: 1rem; }
.ds-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; border-bottom: 1px solid var(--ds-border); }
.ds-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: .5rem .9rem; font-weight: 600; color: var(--ds-muted); cursor: pointer; }
.ds-tab.active { color: inherit; border-bottom-color: var(--ds-accent); }
.ds-form { display: flex; gap: .5rem; }
.ds-form .ds-input { flex: 1; min-width: 0; }
 
/* crumbs */
.ds-crumb-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.ds-crumb-list li + li::before { content: "\203A"; padding: 0 .5rem; color: var(--ds-muted); }
 
/* states */
.ds-loading, .ds-loading-init { padding: 2rem 0; color: var(--ds-muted); display: flex; align-items: center; gap: .75rem; }
.ds-spinner { width: 1.25rem; height: 1.25rem; border: 3px solid var(--ds-border); border-top-color: var(--ds-accent); border-radius: 50%; animation: ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-empty, .ds-hint { padding: 1.5rem 0; color: var(--ds-muted); }
.ds-count, .ds-sub { color: var(--ds-muted); margin-bottom: .75rem; }
.ds-intro-panel { background: var(--ds-bg); border-radius: .5rem; padding: 1.25rem 1.5rem; }
.ds-filter { max-width: 360px; margin-bottom: .75rem; }
 
/* lists & tiles */
.ds-list { list-style: none; padding: 0; columns: 2 280px; column-gap: 2rem; }
.ds-list li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid var(--ds-border); }
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.ds-tile { display: flex; flex-direction: column; border: 1px solid var(--ds-border); border-radius: .5rem; overflow: hidden; color: inherit; text-decoration: none; background: #fff; transition: box-shadow .15s, border-color .15s; }
.ds-tile:hover { border-color: var(--ds-accent); box-shadow: 0 2px 10px rgba(0,0,0,.08); text-decoration: none; }
.ds-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--ds-border); }
.ds-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ds-thumb-ph img { max-width: 60%; max-height: 60%; opacity: .8; }
.ds-thumb-empty { font-size: 2rem; color: var(--ds-muted); background: var(--ds-bg); }
.ds-tile-name { padding: .5rem .65rem; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.ds-folder .ds-tile-name::after { content: " \203A"; color: var(--ds-accent); }
 
/* assembly */
.ds-assembly { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 992px) {
  .ds-assembly { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .ds-diagram-col { position: sticky; top: 1rem; }
}
.ds-zoom-bar { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.ds-zoom-bar small { margin-left: .5rem; }
.ds-diagram-scroll { overflow: auto; max-height: 80vh; border: 1px solid var(--ds-border); border-radius: .5rem; background: #fff; }
.ds-diagram { position: relative; }
.ds-diagram-img { display: block; width: 100%; height: auto; user-select: none; }
.ds-hotspots { position: absolute; inset: 0; }
.ds-hotspot { position: absolute; padding: 0; border: 2px solid transparent; border-radius: 4px; background: transparent; cursor: pointer; }
.ds-hotspot:hover, .ds-hotspot:focus, .ds-hotspot.ds-hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); outline: none; }
.ds-hotspot.ds-active { border-color: var(--ds-accent); background: rgba(200, 16, 46, .28); }
 
/* parts table */
.ds-parts { font-size: .9rem; }
.ds-parts th { white-space: nowrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ds-muted); }
.ds-parts td { vertical-align: middle; }
.ds-part.ds-active > td { background: var(--ds-accent-soft); }
.ds-ref { min-width: 2rem; padding: .1rem .4rem; border: 1px solid var(--ds-border); border-radius: 4px; background: #fff; font-weight: 700; cursor: pointer; }
.ds-part.ds-active .ds-ref { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.ds-sup, .ds-ctx, .ds-gst, .ds-stock { display: block; font-size: .75rem; color: var(--ds-muted); }
.ds-sup { color: #b06d00; }
.ds-where { display: inline-block; margin-top: .2rem; font-size: .8rem; }
.ds-price { font-weight: 700; white-space: nowrap; }
.ds-was, .ds-rrp, .ds-poa { color: var(--ds-muted); white-space: nowrap; }
.ds-buy { display: flex; gap: .35rem; align-items: center; }
.ds-qty { width: 4.25rem; }
.ds-stock.in { color: #198754; }
.ds-stock.out { color: #b06d00; }
.ds-c-sel, .ds-c-ref, .ds-c-qty { width: 1%; text-align: center; }
.ds-c-buy { white-space: nowrap; }
.ds-multi { display: flex; justify-content: flex-end; margin: .5rem 0 1rem; }
 
@media (max-width: 575.98px) {
  .ds-parts thead { display: none; }
  .ds-parts tr { display: grid; grid-template-columns: auto auto 1fr; gap: .25rem .5rem; padding: .6rem 0; border-bottom: 1px solid var(--ds-border); }
  .ds-parts td { border: 0; padding: 0; }
  .ds-parts .ds-c-desc, .ds-parts .ds-c-price, .ds-parts .ds-c-buy { grid-column: 1 / -1; }
  .ds-parts .ds-c-qty::before { content: "Qty "; color: var(--ds-muted); }
}
 
.ds-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem 0; }
 
/* toast */
.ds-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 150%); z-index: 1080; max-width: calc(100% - 2rem); padding: .75rem 1.1rem; border-radius: .5rem; background: #212529; color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25); visibility: hidden; opacity: 0; transition: transform .25s ease, opacity .25s, visibility .25s; }
.ds-toast.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.ds-toast a { color: #fff; text-decoration: underline; font-weight: 600; margin-left: .35rem; }
 
/* home-page quick search include */
.ds-quicksearch { margin: 1rem 0; }
 
/* enquiry popup */
.ds-modal-open, .ds-modal-open body { overflow: hidden; }
.ds-modal { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ds-modal[hidden] { display: none; }
.ds-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.ds-modal-box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; height: min(85vh, 820px); background: #fff; border-radius: .5rem; box-shadow: 0 12px 40px rgba(0,0,0,.3); overflow: hidden; }
.ds-modal-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid #dee2e6; }
.ds-modal-head h2 { margin: 0; flex: 1; }
.ds-modal-newtab { font-size: .85rem; white-space: nowrap; }
.ds-modal-close { border: 0; background: none; font-size: 1.75rem; line-height: 1; padding: 0 .25rem; cursor: pointer; color: #6c757d; }
.ds-modal-close:hover { color: #212529; }
.ds-modal-body { position: relative; flex: 1; }
.ds-modal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .2s; }
.ds-modal.ds-loaded .ds-modal-frame { opacity: 1; }
.ds-modal.ds-loaded .ds-modal-loading { display: none; }
.ds-modal-loading { display: flex; align-items: center; gap: .75rem; justify-content: center; height: 100%; color: #6c757d; }
.ds-modal .ds-spinner { width: 1.25rem; height: 1.25rem; border: 3px solid #dee2e6; border-top-color: #c8102e; border-radius: 50%; animation: ds-spin .8s linear infinite; }
@media (max-width: 575.98px) {
  .ds-modal { padding: 0; }
  .ds-modal-box { max-width: none; height: 100%; border-radius: 0; }
  .ds-modal-newtab { display: none; }
}
 
/* bike thumbnails */
.ds-model-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ds-bike img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.ds-model-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.ds-model-head .ds-title { margin: 0; }
.ds-model-photo { width: 160px; max-width: 35%; height: auto; border: 1px solid var(--ds-border); border-radius: .5rem; background: #fff; }