.catalog-family-slot { min-width: 0; display: flex; flex-direction: column; }
.catalog-family-slot > .card { flex: 1 1 auto; height: 100%; display: flex; flex-direction: column; }
.card .config-options { flex-wrap: wrap; }
.card [data-config-axis="variant"] { min-height: 34px; }
/* Native details stay accessible without another script or extra downloads. */
.card .product-details {
    --details-border: var(--border-subtle, #e8e5e7);
    --details-ink: var(--text-color, #252126);
    --details-muted: var(--text-secondary, #716b71);
    min-width: 0;
    margin: 0 0 10px;
    border: 1px solid var(--details-border);
    border-radius: 16px;
    background: #faf9fa;
    color: var(--details-ink);
    text-align: left;
}
.card .product-details[open] { background: #fff; }
.card .product-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 50px;
    padding: 14px 16px;
    border-radius: 15px;
    color: var(--details-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease;
}
.card .product-details > summary::-webkit-details-marker { display: none; }
.card .product-details > summary::marker { content: ''; }
.card .product-details > summary::after {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin: -3px 3px 0 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--details-muted);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}
.card .product-details[open] > summary { border-radius: 15px 15px 0 0; }
.card .product-details[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.card .product-details > summary:focus-visible,
.card .band-select:focus-visible,
.card .band-input:focus-visible,
.card .band-request:focus-visible {
    outline: 2px solid var(--accent-color, #6c2d43);
    outline-offset: 3px;
}
.card .product-details[open] > :not(summary) { animation: shop-details-in 180ms ease-out; }
.card .product-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 0 14px;
    margin: 0;
    padding: 0 16px 7px;
    font-size: 12px;
    line-height: 1.65;
}
.card .product-facts > dt,
.card .product-facts > dd {
    min-width: 0;
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid var(--details-border);
    overflow-wrap: anywhere;
}
.card .product-facts > dt { color: var(--details-muted); font-weight: 400; }
.card .product-facts > dd { color: var(--details-ink); font-weight: 500; text-align: right; }
.card .band-note {
    margin: 0 16px 17px;
    padding: 12px 0 0;
    border-top: 1px solid var(--details-border);
    color: var(--details-muted);
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.card .band-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0 16px 14px;
    text-align: left;
}
.card .band-field > span {
    color: var(--details-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.card .band-select,
.card .band-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #dcd7dc;
    border-radius: 11px;
    background-color: #fff;
    color: var(--details-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.card .band-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 37px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23716b71' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    text-overflow: ellipsis;
}
.card .band-select > option { background: #fff; color: #252126; }
.card .band-input::placeholder { color: #807780; opacity: 1; }
.card .band-select:focus,
.card .band-input:focus { border-color: var(--accent-color, #6c2d43); box-shadow: 0 0 0 3px rgba(108, 45, 67, .09); }
.card .band-request {
    display: block;
    width: calc(100% - 32px);
    min-height: 46px;
    margin: 4px 16px 16px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--accent-color, #6c2d43);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    transition: background-color 160ms ease, transform 160ms ease;
}
.card .band-request:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
    .card .product-details > summary:hover { background: #f3f0f2; }
    .card .band-select:hover,
    .card .band-input:hover { border-color: #bcb2bb; }
    .card .band-request:hover { background: var(--accent-hover, #542236); color: #fff; }
}
@media (max-width: 380px) {
    .card .product-facts { grid-template-columns: minmax(0, 1fr); }
    .card .product-facts > dt { padding-bottom: 3px; }
    .card .product-facts > dd { padding-top: 0; border-top: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .card .product-details[open] > :not(summary) { animation: none; }
    .card .product-details > summary,
    .card .product-details > summary::after,
    .card .band-select,
    .card .band-input,
    .card .band-request { transition: none; }
    .card .band-request:active { transform: none; }
}
@media (forced-colors: active) {
    .card .band-select { appearance: auto; -webkit-appearance: auto; background-image: none; }
    .card .band-request { border-color: ButtonText; }
}
@keyframes shop-details-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Watch choices use the shop's font and colours, with full keyboard focus and touch targets. */
.card .product-stock{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:#41664d;font-size:11px;font-weight:600;letter-spacing:.03em}
.card .product-stock::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.card .band-picker-content{min-width:0;padding:2px 14px 14px}
.card .band-picker .band-field{display:block;min-width:0;padding:0;border:0;margin:0 0 18px}
.card .band-picker .band-field>legend{padding:0;margin:0 0 9px;color:var(--details-ink,#252126);font:inherit;font-size:12px;font-weight:600;line-height:1.5}
.card .band-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.card .band-type,.card .band-color,.card .band-size{box-sizing:border-box;position:relative;min-width:0;min-height:44px;margin:0;border:1px solid #e0dade;border-radius:12px;background:#fff;color:var(--details-ink,#252126);font:inherit;font-size:12px;line-height:1.4;cursor:pointer;transition:border-color 140ms ease,background-color 140ms ease,box-shadow 140ms ease}
.card .band-type{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:70px;padding:12px 24px 12px 11px;text-align:left}
.card .band-type-title{font-weight:600;overflow-wrap:anywhere}
.card .band-type-description{font-size:10px;line-height:1.4;color:var(--details-muted,#716b71);overflow-wrap:anywhere}
.card .band-type.is-selected,.card .band-color.is-selected,.card .band-size.is-selected{border-color:var(--accent-color,#6c2d43);background:#f8f2f5;box-shadow:inset 0 0 0 1px var(--accent-color,#6c2d43)}
.card .band-type.is-selected::after{content:'';position:absolute;right:10px;top:15px;width:6px;height:10px;border:solid var(--accent-color,#6c2d43);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.card .band-type:disabled{opacity:.4;background:#f7f6f7;box-shadow:none;cursor:not-allowed}
.card .band-colors{display:flex;flex-wrap:wrap;gap:7px}
.card .band-color{display:flex;align-items:center;justify-content:flex-start;gap:7px;max-width:100%;padding:8px 11px 8px 8px;text-align:left}
.card .band-swatch{position:relative;display:block;flex:0 0 23px;width:23px;height:23px;border-radius:50%;border:1px solid rgb(0 0 0 / 8%);box-shadow:inset 0 0 0 2px rgb(255 255 255 / 40%)}
.card .band-color-name{font-size:11px;font-weight:500;overflow-wrap:anywhere}
.card .band-color.is-selected .band-color-name{font-weight:650}
.card .band-sizes{display:flex;flex-wrap:wrap;gap:7px}
.card .band-size{min-width:44px;padding:9px 12px;text-align:center;font-size:12px;font-weight:550}
.card .band-size-guide{display:inline-block;max-width:100%;margin:-7px 0 14px;color:var(--accent-color,#6c2d43);font-size:11px;line-height:1.5;text-underline-offset:3px}
.card .band-size-guide[hidden]{display:none}
.card .band-picker-content>.band-note{margin:0 0 12px;padding:0;border:0;font-size:11px;line-height:1.6}
.card .band-picker-content>.band-request{width:100%;margin:0;min-height:46px;cursor:pointer}
.card .band-picker-content>.band-request:disabled{opacity:.45;cursor:not-allowed}
.card .band-selection-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.card .band-type:focus-visible,.card .band-color:focus-visible,.card .band-size:focus-visible,.card .band-size-guide:focus-visible{outline:2px solid var(--accent-color,#6c2d43);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.card .band-type:not(:disabled):hover,.card .band-color:hover,.card .band-size:hover{border-color:#a8929f;background:#fbf7f9}}
@media(prefers-reduced-motion:reduce){.card .band-type,.card .band-color,.card .band-size{transition:none}}
@media(forced-colors:active){.card .band-type.is-selected,.card .band-color.is-selected,.card .band-size.is-selected{outline:2px solid Highlight}.card .band-swatch{border:2px solid CanvasText;forced-color-adjust:none}}

@media (max-width:680px){.navbar .nav-links{flex-wrap:wrap;justify-content:flex-end;gap:7px}.navbar .logo{flex-shrink:0}}

/* Band selection uses text and colour samples; no band photographs. */
.card .band-fit-note { margin:0 0 12px; color:var(--details-muted,#716b71); font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.card .band-measuring-guide { margin:0 0 14px; padding:12px 14px; border:1px solid var(--details-border,#e8e5e7); border-radius:12px; background:#faf9fa; font-size:12px; line-height:1.65; }
.card .band-measuring-guide>strong { font-weight:600; }
.card .band-measuring-guide ol { margin:8px 0 0; padding-left:18px; }
.card .band-measuring-guide li+li { margin-top:7px; }
.card .band-selection-summary { margin:0 0 12px; padding:11px 12px; border-radius:11px; background:#f5f1f3; color:var(--details-ink,#252126); font-size:12px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:380px){.card .band-picker-content{padding:2px 12px 12px}.card .band-type{padding:10px 18px 10px 9px}.card .band-type-title{font-size:11px}.card .band-type-description{font-size:10px}}
