/* Country of origin: the searchable picker (js/country.js) and its pieces in the product list. All of it is classes: no inline styles, no inline scripts. */
.cty-box { position: relative; }
.cty-input { padding-inline-end: 44px; }
.cty-clear { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); }
.cty-clear[hidden] { display: none; }
.cty-clear:hover { color: var(--ink); }
.cty-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cty-pop { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 40; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.cty-pop[hidden], .cty-none[hidden] { display: none; }
.cty-list { list-style: none; margin: 0; padding: var(--s-1); max-block-size: min(280px, 42vh); overflow-y: auto; overscroll-behavior: contain; }
.cty-opt { display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; }
.cty-opt[hidden] { display: none; }
.cty-opt.active { background: var(--accent-soft); color: var(--accent-soft-ink); }
.cty-opt[aria-selected='true'] .cty-name { font-weight: 700; }
.cty-opt[aria-selected='true']::before { content: '\2713'; font-weight: 700; margin-inline-end: -2px; }
.cty-alt { color: var(--muted); font-size: var(--fs-xs); }
.cty-opt.active .cty-alt, .cty-opt.active .cty-code { color: inherit; opacity: 0.8; }
.cty-code { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cty-none { padding: 14px 12px; color: var(--muted); }
dialog.cty-dialog { overflow: visible; inline-size: min(480px, 94vw); }
dialog.cty-dialog .muted { margin-block-end: var(--s-4); }
dialog.cty-dialog .field { margin-block-end: var(--s-4); }
/* the product list: the count line carries the "no country" chip, the table a Country column (desktop) or the name in the sub-line (phones) */
.cty-sub { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cty-chip { border: 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; min-block-size: 32px; }
.cty-chip[hidden] { display: none; }
.cty-chip[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--warn); }
.cty-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cty-cell.none { color: var(--muted); }
@media (min-width: 900px) { .cty-inline { display: none; } }
@media (max-width: 899px) { table.data.cards td.slot-country { display: none; } }
.filters > .field.cty-filter { flex: 0 1 240px; }
@media (max-width: 640px) { .filters > .field.cty-filter { flex: 1 1 150px; } }