/* Scoped to the catalogue; adapts to the block's available width. */
[data-ftd-catalog] { --ftd-catalog-border: #d8e1e7; --ftd-catalog-accent: #16646a; --ftd-catalog-surface: #fff; --ftd-catalog-gap: 14px; container-type: inline-size; }
[data-ftd-catalog] *, [data-ftd-catalog] *::before, [data-ftd-catalog] *::after { box-sizing: border-box; }
[data-ftd-catalog] [hidden] { display: none !important; }
[data-ftd-catalog] button, [data-ftd-catalog] input, [data-ftd-catalog] select { font: inherit; }
[data-ftd-catalog] button { cursor: pointer; }
[data-ftd-catalog] button:focus-visible, [data-ftd-catalog] input:focus-visible, [data-ftd-catalog] select:focus-visible { outline: 3px solid var(--ftd-catalog-accent); outline-offset: 3px; }
.ftd-catalog-statistics { margin: 0 0 18px; font-weight: 600; }
.ftd-catalog-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.ftd-catalog-toolbar label { flex: 1 1 180px; display: grid; gap: 5px; font-size: .9em; font-weight: 600; }
.ftd-catalog-toolbar input, .ftd-catalog-toolbar select { min-width: 0; width: 100%; border: 1px solid var(--ftd-catalog-border); border-radius: 8px; padding: 10px; background: var(--ftd-catalog-surface); color: #172e3b; }
.ftd-catalog-toolbar [role="status"] { font-size: .85em; padding-bottom: 10px; }
.ftd-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ftd-catalog-gap); align-items: stretch; }
.ftd-catalog-card { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--ftd-catalog-border); border-radius: 12px; background: var(--ftd-catalog-surface); color: #172e3b; }
.ftd-catalog-card.is-selected { border-color: var(--ftd-catalog-accent); box-shadow: 0 0 0 1px var(--ftd-catalog-accent); }
.ftd-catalog-slider { position: relative; padding: 8px; touch-action: pan-y; border-radius: 12px 12px 0 0; overflow: hidden; }
.ftd-catalog-images { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #f5f8fa; }
.ftd-catalog-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--ftd-catalog-fade, 400ms) ease, visibility var(--ftd-catalog-fade, 400ms); }
.ftd-catalog-slide.is-current { opacity: 1; visibility: visible; z-index: 1; }
.ftd-catalog-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ftd-catalog-slider-controls { position: absolute; inset: auto 12px 12px; display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none; }
.ftd-catalog-slider-controls button { display: grid; place-items: center; border: 1px solid #d8e1e7; border-radius: 50%; min-width: 32px; height: 32px; padding: 0; line-height: 1; background: #fffffff0; color: #172e3b; pointer-events: auto; font-weight: 700; }
.ftd-catalog-card-body { display: flex; flex: 1; flex-direction: column; padding: 12px; }
.ftd-catalog-card h3 { font: inherit; font-size: 1.05em; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; margin: 0 0 8px; }
.ftd-catalog-card p { font-size: .85em; line-height: 1.35; margin: 0 0 7px; }
.ftd-catalog-swatches { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 12px; }
.ftd-catalog-dot { display: grid; place-items: center; border: 2px solid transparent; border-radius: 50%; background: transparent; padding: 3px; width: 36px; height: 36px; }
.ftd-catalog-dot.is-current { border-color: var(--ftd-catalog-accent); }
.ftd-catalog-dot:disabled { cursor: default; opacity: 1; }
.ftd-catalog-swatch { position: relative; display: block; width: 24px; height: 24px; border: 1px solid #9ba8b2; border-radius: 50%; overflow: hidden; }
.ftd-catalog-swatch > span { position: absolute; }
.ftd-catalog-swatch-body { left: 0; bottom: 0; width: 100%; height: 50%; }
.ftd-catalog-swatch-beak { left: 0; top: 0; width: 50%; height: 50%; }
.ftd-catalog-swatch-eye { right: 0; top: 0; width: 50%; height: 50%; }
/* 0.22: individual 1-4 colour slots have no fixed body/beak/eye positions. */
.ftd-catalog-swatch.ftd-catalog-swatch-custom { display: flex; }
.ftd-catalog-swatch.ftd-catalog-swatch-custom > span { position: static; flex: 1 1 0; min-width: 0; height: 100%; }

/* Per-type design/licence attribution; closed by default and keyboard accessible. */
.ftd-catalog-credit { margin: 5px 0 12px; min-width: 0; border: 1px solid var(--ftd-catalog-border); border-radius: 7px; background: #f7fafb; font-size: .82em; }
.ftd-catalog-credit > summary { cursor: pointer; padding: 9px 10px; color: #172e3b; font-weight: 600; overflow-wrap: anywhere; }
.ftd-catalog-credit > summary:focus-visible { outline: 3px solid var(--ftd-catalog-accent); outline-offset: 2px; border-radius: 6px; }
.ftd-catalog-credit[open] > summary { border-bottom: 1px solid var(--ftd-catalog-border); }
.ftd-catalog-credit .ftd-design-credit { display: block; margin: 0; padding: 10px; overflow-wrap: anywhere; }
.ftd-catalog-credit .ftd-design-credit p { font-size: 1em; line-height: 1.6; margin: 0; }
.ftd-catalog-credit .ftd-design-credit a { color: var(--ftd-catalog-accent); text-decoration: underline; text-underline-offset: 2px; }

.ftd-catalog-expand { margin-top: auto; width: 100%; border: 1px solid var(--ftd-catalog-accent); border-radius: 7px; padding: 9px 5px; background: #eff8f7; color: var(--ftd-catalog-accent); font-size: .85em !important; line-height: 1.3; font-weight: 600 !important; }
.ftd-catalog-details { position: relative; min-width: 0; grid-column: 1 / -1; border: 2px solid var(--ftd-catalog-accent); border-radius: 12px; padding: 20px; background: var(--ftd-catalog-surface); color: #172e3b; }
.ftd-catalog-details::before { content: ''; position: absolute; top: -8px; left: clamp(18px, var(--ftd-connector-left, 50%), calc(100% - 18px)); width: 14px; height: 14px; background: var(--ftd-catalog-surface); border-top: 2px solid var(--ftd-catalog-accent); border-left: 2px solid var(--ftd-catalog-accent); transform: translateX(-50%) rotate(45deg); }
.ftd-catalog-details h3 { margin: 0 38px 12px 0; font: inherit; font-size: 1.3em; font-weight: 700; }
.ftd-catalog-details p { overflow-wrap: anywhere; }
.ftd-catalog-close { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eff8f7; color: var(--ftd-catalog-accent); font-size: 24px !important; padding: 0; line-height: 1; }
.ftd-catalog-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ftd-catalog-variant { min-width: 0; border: 1px solid var(--ftd-catalog-border); border-radius: 9px; padding: 10px; }
.ftd-catalog-variant > img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; background: #f5f8fa; border-radius: 6px; }
.ftd-catalog-variant dl { font-size: .85em; margin: 10px 0; }
.ftd-catalog-variant dl > div { margin-bottom: 5px; }
.ftd-catalog-variant dt { font-weight: 600; }
.ftd-catalog-variant dd { display: flex; align-items: center; gap: 5px; margin: 0; overflow-wrap: anywhere; }
.ftd-catalog-color { flex: 0 0 12px; height: 12px; border: 1px solid #9ba8b2; border-radius: 50%; }
.ftd-catalog-variant p { font-size: .85em; margin: 8px 0 0; }
@container (min-width: 640px) { .ftd-catalog-grid, .ftd-catalog-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 880px) { .ftd-catalog-grid, .ftd-catalog-variants { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1120px) { .ftd-catalog-grid, .ftd-catalog-variants { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (min-width: 1360px) { .ftd-catalog-grid, .ftd-catalog-variants { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (max-width: 360px) { .ftd-catalog-card-body { padding: 8px; } .ftd-catalog-details { padding: 12px; } .ftd-catalog-variant { padding: 7px; } }
@media (prefers-reduced-motion: reduce) { .ftd-catalog-slide { transition: none; } }

/* Keep attribution and the details action together at the bottom of each card. */
.ftd-catalog-card .ftd-catalog-card-body > .ftd-catalog-credit { margin-top: auto; }
.ftd-catalog-card .ftd-catalog-card-body > .ftd-catalog-credit + .ftd-catalog-expand { margin-top: 0 !important; }