.quartz-track-section { padding: 40px 0; }

/* ===== Track shell / rail ===== */
.swatch-track-shell { position: relative; background: #fff; margin-bottom: 0; padding: 6px 0; border-radius: 0 0 9px 9px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }

.swatch-track { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; margin-left: 9px; gap: 9px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 3px; scrollbar-width: none; }
.swatch-track::-webkit-scrollbar { display: none; }
.swatch-track .swatch { scroll-snap-align: start; min-width: 0; }

/* ===== Card ===== */
.swatch { text-align: center; cursor: default; transition: box-shadow 0.2s ease; }
.swatch:hover { transform: none; }
.swatch-media { position: relative; border-radius: 9px; overflow: hidden; }
.swatch-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; border: 1px solid #00000040; }
.swatch-item-name { display: block; margin-top: 6px; text-align: center; font-weight: 500; }

/* ===== Bottom overlay: mag | brand | tick ===== */
.swatch-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; height: 40px; background: rgba(20,20,20,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.swatch-zoom-btn,.swatch-select-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; transition: background 0.18s ease; }
.swatch-zoom-btn:hover,.swatch-zoom-btn:focus-visible,.swatch-select-btn:hover,.swatch-select-btn:focus-visible { background: rgba(255,255,255,0.12); outline: none; }
.swatch-zoom-btn svg,.swatch-select-btn svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 2; }
.swatch-tag { display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0; padding: 0 8px; background: transparent; box-shadow: none; color: #fff; font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Selected state ===== */
.swatch.is-selected .swatch-select-btn,.swatch-select-btn.is-selected { background: linear-gradient(180deg, #f6de67 0%, #f3d547 100%); }
.swatch.is-selected .swatch-select-btn svg,.swatch-select-btn.is-selected svg { stroke: #111; }
.swatch.is-selected .swatch-media::after { content: ""; position: absolute; inset: 0; z-index: 5; border: 1px solid #f3d547; border-radius: 9px; pointer-events: none; }

/* ===== Rail arrows ===== */
.swatch-track-nav { position: absolute; top: 0; bottom: 0; z-index: 4; display: flex; align-items: center; width: 72px; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: 0; transition: opacity 0.18s ease; }
.swatch-track-shell:hover .swatch-track-nav,.swatch-track-nav:focus-visible { opacity: 1; outline: none; }
.swatch-track-nav--prev { left: 0; justify-content: flex-start; }
.swatch-track-nav--next { right: 0; justify-content: flex-end; }
.swatch-track-nav::before { content: ""; display: block; width: 28px; height: 28px; margin-top: -100px; border-top: 4px solid rgba(255,255,255,0.92); border-right: 4px solid rgba(255,255,255,0.92); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }
.swatch-track-nav--prev::before { margin-left: 14px; transform: rotate(-135deg); }
.swatch-track-nav--next::before { margin-right: 14px; transform: rotate(45deg); }

/* soft side fade so chevrons sit naturally */
.swatch-track-shell::before,.swatch-track-shell::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 64px; pointer-events: none; opacity: 0; transition: opacity 0.28s ease; }
.swatch-track-shell:hover::before,.swatch-track-shell:hover::after { opacity: 1; }
.swatch-track-shell::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0) 63%); }
.swatch-track-shell::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0) 63%); }

/* ===== Help text ===== */
.swatch-select-guide { margin-top: 16px; }
.swatch-select-guide p { margin: 0; font-size: 14px; line-height: 1.4; }
.swatch-select-guide a { font-weight: 600; text-decoration: none; }
.inline-tick-roundel { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 4px; vertical-align: -3px; border-radius: 3px; background: linear-gradient(180deg, #f6de67 0%, #f3d547 100%); }
.inline-tick-roundel svg { width: 18px; height: 18px; fill: none; stroke: #111; stroke-width: 2.4; }
.swatch-select-guide-button { height: 40px; padding: 6px 10px; background: var(--pill-hover-blue); color: #fff; font-size: 15px; font-weight: 400; text-decoration: none; }
.swatch-select-guide-button:hover { text-decoration: none; }

/* ===== Chosen colours box ===== */
.chosen-colours-box { margin-top: 28px; padding: 18px; border-radius: 18px; background: #f7f5ef; }
.chosen-colours-box h3 { margin: 0 0 14px; }
.chosen-colours-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.chosen-colour-card { min-width: 0; }
.chosen-colour-media { position: relative; border-radius: 9px; overflow: hidden; }
.chosen-colour-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.chosen-colour-brand { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; height: 32px; background: rgba(20,20,20,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 500; }
.chosen-colour-name { display: block; margin-top: 8px; text-align: center; font-weight: 500; }
.chosen-colours-empty { color: #fff; }
.chosen-colour-remove { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.92); box-shadow: 0 2px 10px rgba(0,0,0,0.18); cursor: pointer; font-size: 20px; line-height: 1; }
.chosen-colours-note { margin: 10px 0 0; font-size: 13px; color: #fff; }

/* ===== Lightbox ===== */
.swatch-lightbox[hidden] { display: none; }
.swatch-lightbox { position: fixed; inset: 0; z-index: 9999; }
.swatch-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.60); }
.swatch-lightbox-dialog { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: center; width: 100vw; height: 100vh; background: transparent; overflow: hidden; }

.swatch-lightbox-figure { display: flex; flex-direction: column; width: 100%; height: 100%; }
.swatch-lightbox-image-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 96px; touch-action: pan-y; }
.swatch-lightbox-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.swatch-lightbox-controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: 81px 1fr 81px; align-items: center; min-height: 96px; padding: 0 15px env(safe-area-inset-bottom); background: var(--brand); }

.swatch-lightbox-close,.swatch-lightbox-select { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 96px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; transition: background 0.18s ease; }
.swatch-lightbox-close:hover,.swatch-lightbox-close:focus-visible,.swatch-lightbox-select:hover,.swatch-lightbox-select:focus-visible { background: rgba(255,255,255,0.12); outline: none; }
.swatch-lightbox-close svg,.swatch-lightbox-select svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.2; }
.swatch-lightbox-meta { min-width: 0; padding: 10px 18px; text-align: center; color: #fff; }
.swatch-lightbox-brand { display: block; margin: 0 0 6px; font-size: 14px; line-height: 1.1; font-weight: 600; letter-spacing: 0.02em; opacity: 0.9; }
.swatch-lightbox-title { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 600; color: #fff; }

/* selected state for modal tick */
.swatch-lightbox-select.is-selected { background: linear-gradient(180deg, #f6de67 0%, #f3d547 100%); }
.swatch-lightbox-select.is-selected svg { stroke: #111; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .swatch-track-nav { width: 54px; }
  .swatch-track-nav::before { width: 22px; height: 22px; margin-top: 150px; border-top-width: 3px; border-right-width: 3px; }
  .swatch-track-nav--prev::before { margin-left: 10px; }
  .swatch-track-nav--next::before { margin-right: 10px; }
  .swatch-track-shell::before,.swatch-track-shell::after { width: 44px; }
  .swatch-lightbox-title { font-size: 21px; }
  .swatch-lightbox-brand { font-size: 12px; }
  .swatch-lightbox-close svg,.swatch-lightbox-select svg { width: 28px; height: 28px; }
  .swatch-lightbox-close,.swatch-lightbox-select { width: 72px; height: 82px; }
  .swatch-track { grid-auto-columns: 220px; gap: 12px; }
  .swatch-track-nav { width: 34px; height: 34px; font-size: 24px; }
  .swatch-track-nav--prev { left: -6px; }
  .swatch-track-nav--next { right: -6px; }
  .swatch-overlay { height: 50px; grid-template-columns: 50px 1fr 50px; }
  .swatch-zoom-btn svg,.swatch-select-btn svg { width: 27px; height: 27px; }
  .swatch-tag { font-size: 11px; }
  .chosen-colours-grid { grid-template-columns: 1fr; }
  .swatch-lightbox-image-wrap { padding: 10px 10px 4px; }
  .t-mid { padding-top: 40px; } }