/* Small components the CDN build of Tailwind 2 doesn't provide */

/* Product card name: at most 2 lines, and always 2 lines tall so cards line up */
.product-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5rem;
    min-height: 3rem;
}

/* Product card image frame: the same 4:3 shape for every card */
.product-card-media {
    aspect-ratio: 4 / 3;
}

/* Language switcher: hide the native <details> marker */
.locale-switcher > summary { list-style: none; }
.locale-switcher > summary::-webkit-details-marker { display: none; }

/* ---- Catalog filters ------------------------------------------------------ */
.sort-menu > summary { list-style: none; }
.sort-menu > summary::-webkit-details-marker { display: none; }

/* Without JavaScript: no brand search; with it: no "Apply" button (changes apply immediately) */
.js-only { display: none; }
.is-enhanced .js-only { display: block; }
.is-enhanced [data-apply] { display: none; }

/* Results while new ones load: dimmed, with a progress bar on top */
.catalog-results { position: relative; transition: opacity .15s; }
.catalog-results.is-loading { opacity: .55; }
.catalog-results.is-loading::before {
    content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 40%; border-radius: 9999px;
    background: #4f46e5; animation: catalog-progress 1s ease-in-out infinite;
}
@keyframes catalog-progress { from { left: -40%; } to { left: 100%; } }

/* Collapsible filter sections; a collapsed one shows its selected values */
.filter-section > details > summary { list-style: none; }
.filter-section > details > summary::-webkit-details-marker { display: none; }
.filter-section > details > summary:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.filter-chevron { transition: transform .15s; }
.filter-section > details:not([open]) .filter-chevron { transform: rotate(-90deg); }
.filter-summary { display: none; }
.filter-section > details:not([open]) .filter-summary { display: block; margin-top: 2px; }

/* Active filter chips: colour dot, brand logo */
.chip-dot { display: inline-block; width: 12px; height: 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex-shrink: 0; }
.chip-logo { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 9999px; background: #fff; flex-shrink: 0; }
.chip-logo img { width: 12px; height: 12px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
    .catalog-results.is-loading::before { animation: none; width: 100%; opacity: .5; }
    .filter-chevron, .catalog-results { transition: none; }
}

/* Dual-thumb price slider: two overlapping range inputs on one track */
.price-range-track, .price-range-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 9999px; }
.price-range-track { left: 0; right: 0; background: #e5e7eb; }
.price-range-fill { background: #4f46e5; }
.price-range input[type="range"] {
    position: absolute; inset: 0; width: 100%; margin: 0; background: none;
    pointer-events: none; -webkit-appearance: none; appearance: none;
}
.price-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 9999px;
    background: #fff; border: 2px solid #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer;
}
.price-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 14px; height: 14px; border-radius: 9999px;
    background: #fff; border: 2px solid #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer;
}
.price-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(79,70,229,.35); }
.price-range input[type="range"]::-moz-range-track { background: none; }

/* On/off toggle for "in stock only" */
.toggle { position: relative; width: 36px; height: 20px; border-radius: 9999px; background: #d1d5db; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.toggle-input:checked + .toggle { background: #4f46e5; }
.toggle-input:checked + .toggle::after { transform: translateX(16px); }
.toggle-input:focus-visible + .toggle { box-shadow: 0 0 0 3px rgba(79,70,229,.35); }

/* Colour swatches */
.swatch { cursor: pointer; border-radius: 9999px; padding: 3px; border: 2px solid transparent; transition: border-color .15s; }
.swatch-dot { display: block; width: 26px; height: 26px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch:hover { border-color: #c7d2fe; }
.swatch input:checked ~ .swatch-dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 4px #4f46e5; }
.swatch input:focus-visible ~ .swatch-dot { box-shadow: 0 0 0 3px rgba(79,70,229,.45); }

/* Option pills (RAM, display size, OS) */
.pill > span:last-child { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; border: 1px solid #d1d5db; font-size: .875rem; color: #374151; cursor: pointer; transition: all .15s; }
.pill:hover > span:last-child { border-color: #a5b4fc; }
.pill input:checked + span { background: #eef2ff; border-color: #4f46e5; color: #4338ca; font-weight: 500; }
.pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(79,70,229,.35); }
.pill-count { font-size: .75rem; color: #9ca3af; }
.pill input:checked + span .pill-count { color: #6366f1; }

/* Colour without matches: keep the real colour, strike it through */
.swatch.is-empty .swatch-dot { position: relative; opacity: .55; }
.swatch.is-empty .swatch-dot::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #6b7280; transform: rotate(45deg); border-radius: 1px; }

/* ---- Error page diagnostics (admins only) ----------------------------------- */
.diag-block > summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: #111827; list-style-position: inside; }
.diag-vendor > summary { cursor: pointer; padding: 4px 12px; font-size: .75rem; color: #6b7280; list-style-position: inside; }
.diag-frame > summary { cursor: pointer; list-style: none; }
.diag-frame > summary::-webkit-details-marker { display: none; }
.diag-code { margin: 0 12px 10px; padding: 8px 0; overflow-x: auto; border-radius: 6px; background: #111827; color: #e5e7eb; font-size: .75rem; line-height: 1.25rem; }
.diag-code > code > span { display: block; padding-right: 12px; white-space: pre; }
.diag-code .is-current { background: rgba(239, 68, 68, .3); }
.diag-line { display: inline-block; width: 3.5rem; padding-right: 12px; text-align: right; color: #6b7280; user-select: none; }