/****** FILE: themes/gamry/css/pages/ProductSelectorPage.css *****/
/* ===================================================================
   ProductSelectorPage — v2 blue reskin. Visual only; all JS hooks
   (#prod_filter inputs, .prod[data-options], .compare-toggle, compare
   form/tags, #prods_holder, #loading) are preserved from the template.
   =================================================================== */

.rd-sel { font-family: 'IBM Plex Sans', sans-serif; color: var(--gm-ink); }

/* header */
.rd-sel-head { border-bottom: 1px solid var(--gm-border); background: #fff; padding: 26px 40px 34px; }
.rd-sel-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 3vw, 42px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: var(--gm-ink); margin: 0 0 12px; }
.rd-sel-intro { font-size: 16px; line-height: 1.6; color: var(--gm-body); max-width: 46em; overflow-wrap: anywhere; word-break: break-word; }
.rd-sel-intro h1, .rd-sel-intro h2, .rd-sel-intro h3, .rd-sel-intro p, .rd-sel-intro strong { overflow-wrap: anywhere; word-break: break-word; }
.rd-sel-title { overflow-wrap: anywhere; }
.rd-sel-intro p { margin: 0 0 10px; color: var(--gm-body); }

/* tool section */
.rd-sel-tool { background: #eaeef0; border-bottom: 1px solid #dde3e6; padding: 34px 40px 44px; }
.rd-sel-tool-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.rd-sel-tool-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink); margin: 0; }

.rd-sel-grid { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 24px; align-items: start; }

/* filter panel */
.rd-sel-filters { background: #fff; border: 1px solid #dde3e6; border-radius: 16px; box-shadow: 0 2px 6px rgba(23,36,43,0.04); padding: 20px 20px 12px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.rd-sel-filters-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; color: var(--gm-ink); margin: 0 0 6px; }
.rd-sel-group { border-top: 1px solid #eef1f2; padding: 14px 0 10px; }
.rd-sel-group h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted); margin: 0 0 10px; font-weight: 500; cursor: pointer; }
.rd-sel-group .field, .rd-sel-group .optionset { margin: 0; padding: 0; }
.rd-sel-group .optionset { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rd-sel-group .optionset li { position: relative; margin: 0; padding: 0; }
/* hide native input, style the label as the clickable row + custom check box */
.rd-sel-group .optionset input { position: absolute; opacity: 0; width: 0; height: 0; }
.rd-sel-group .optionset label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--gm-body); }
.rd-sel-group .optionset label:hover { background: var(--gm-panel); }
.rd-sel-group .optionset label::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid #c4ccd1; background: #fff; box-sizing: border-box; transition: border-color .12s, background .12s; }
.rd-sel-group .optionset input[type="radio"] + label::before { border-radius: 50%; }
.rd-sel-group .optionset input:checked + label { color: var(--gm-ink); }
.rd-sel-group .optionset input:checked + label::before { border-color: var(--gm-navy); background: var(--gm-navy); box-shadow: inset 0 0 0 2px #fff; }
.rd-sel-group .optionset input:focus-visible + label { outline: 2px solid var(--gm-navy); outline-offset: 2px; }

/* results */
.rd-sel-results { min-width: 0; }

/* product cards (.prod) — horizontal result cards; Isotope stacks full-width items */
#prods_holder { position: relative; width: 100%; }
.rd-sel-card { width: 100%; box-sizing: border-box; display: flex; gap: 20px; align-items: stretch; background: #fff; border: 1px solid #dde3e6; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.rd-sel-card .rd-sel-card-img { width: 196px; flex-shrink: 0; }
.rd-sel-card .rd-sel-card-img a, .rd-sel-card .rd-sel-card-ph { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 11px; overflow: hidden; background: #e7edf0; }
.rd-sel-card .rd-sel-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-sel-card .rd-sel-card-ph { background: linear-gradient(135deg, #1a3a52, #0f2231); }
.rd-sel-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.rd-sel-card-main h2 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--gm-ink); margin: 0 0 7px; line-height: 1.2; }
.rd-sel-card-main h2 a { color: var(--gm-ink); }
.rd-sel-card-main h2 a:hover { color: var(--gm-navy); text-decoration: none; }
.rd-sel-card-main .desc { font-size: 14px; line-height: 1.5; color: var(--gm-body); overflow-wrap: anywhere; word-break: break-word; }
.rd-sel-card-main .desc p { margin: 0 0 8px; color: var(--gm-body); }
.rd-sel-card-actions { width: 176px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 14px; padding-left: 20px; border-left: 1px solid #eef1f2; }
.rd-sel-card-actions .more { font-weight: 600; font-size: 14px; color: var(--gm-navy); }
.rd-sel-card-actions .compare-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--gm-body); cursor: pointer; margin: 0; }
.rd-sel-card-actions .compare-btn input { accent-color: var(--gm-navy); width: 16px; height: 16px; }

#loading { display: none; margin: 20px auto; }
.rd-sel-empty { background: #fff; border: 1px dashed #d5dcdf; border-radius: 16px; padding: 40px 30px; text-align: center; color: var(--gm-body); }

/* compare container */
.rd-sel-compare { background: #fff; border: 1px solid var(--gm-navy); border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.rd-sel-compare .compare-tags { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #eef1f2; background: #f7fafc; flex-wrap: wrap; }
.rd-sel-compare .compare-tags ul { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.rd-sel-compare .compare-tag { display: inline-flex; align-items: center; gap: 8px; background: #e6eff6; border: 1px solid #cfe0ec; border-radius: 999px; padding: 6px 12px; }
.rd-sel-compare .compare-tag--inside { display: inline-flex; align-items: center; gap: 8px; }
.rd-sel-compare .compare-tag--title { font-size: 13px; font-weight: 500; color: var(--gm-navy); }
.rd-sel-compare .compare-tag--remove { color: #5b87a5; font-size: 15px; line-height: 1; }
.rd-sel-compare .compare-tags--submit { background: var(--gm-navy); border: none; border-radius: 9px; padding: 10px 20px; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; }

@media (max-width: 860px) {
	.rd-sel-grid { grid-template-columns: 1fr; }
	.rd-sel-filters { position: static; max-height: none; overflow-y: visible; }
	.rd-sel-card { flex-wrap: wrap; }
	.rd-sel-card-actions { width: 100%; flex-direction: row; padding-left: 0; border-left: none; border-top: 1px solid #eef1f2; padding-top: 12px; }
}
@media (max-width: 700px) {
	.rd-sel-head { padding: 22px 24px 28px; }
	.rd-sel-tool { padding: 28px 24px 36px; }
}

/* --- win over legacy .typography rules (page renders inside #page_type.typography) --- */
.rd-sel .rd-sel-title { color: var(--gm-ink); margin: 0 0 12px; }
.rd-sel .rd-sel-intro, .rd-sel .rd-sel-intro p { color: var(--gm-body); }
.rd-sel .rd-sel-tool-title { color: var(--gm-ink); margin: 0; }
.rd-sel .rd-sel-filters-title { color: var(--gm-ink); margin: 0 0 6px; }
.rd-sel .rd-sel-group h4 { color: var(--gm-muted); margin: 0 0 10px; }
.rd-sel .rd-sel-card-main h2 { color: var(--gm-ink); margin: 0 0 7px; }
.rd-sel .rd-sel-card-main h2 a { color: var(--gm-ink); }
.rd-sel .rd-sel-card-main h2 a:hover { color: var(--gm-navy); }
.rd-sel .rd-sel-card-main .desc, .rd-sel .rd-sel-card-main .desc p { color: var(--gm-body); }
.rd-sel .rd-sel-card-actions .more { color: var(--gm-navy); }