/* Shop owns its container; all layout decisions follow the available page width. */
.sw-page { --sw-ink:#163300; --sw-lime:#9FE870; --sw-muted:#4A5A3C; --sw-line:#E1E2DD; container:sw / inline-size; background:#F1F1EF; color:var(--sw-ink); font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif; font-size:15px; line-height:1.5; width:100%; min-width:0; }
.sw-page *, .sw-page *::before, .sw-page *::after { box-sizing:border-box; }
.sw-page [hidden] { display:none!important; }
.sw-page button,.sw-page input,.sw-page select,.sw-page summary { font:inherit; color:inherit; letter-spacing:normal; }
.sw-page button,.sw-page summary { cursor:pointer; }
.sw-page button { margin:0; text-transform:none; box-shadow:none; }
.sw-page a { color:inherit; text-decoration:none; }
.sw-page svg { flex-shrink:0; vertical-align:middle; }
.sw-page button:disabled { cursor:default; }
.sw-page :is(button,a,input,select,summary):focus,
.sw-page :is(button,a,input,select,summary):focus-visible,
.sw-page :focus-within { outline:none!important; outline-offset:0!important; box-shadow:none!important; }
.sw-page h1,.sw-page h2,.sw-page p { margin:0; color:inherit; }
.sw-wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px; }
.sw-head { background:#FFF; border-bottom:1px solid var(--sw-line); padding-block:40px 34px; }
.sw-head h1 { font-size:clamp(30px,4cqi,46px); font-weight:700; line-height:1.28; letter-spacing:-.03em; max-width:26ch; text-wrap:balance; }
.sw-head .sw-lede { max-width:62ch; font-size:17px; line-height:1.65; margin-block:16px 24px; color:var(--sw-muted); text-wrap:pretty; }
.sw-search-area { max-width:640px; }
.sw-page .sw-search { display:flex; align-items:center; gap:12px; padding-inline:20px 10px; border:1.5px solid #D7DCD2; border-radius:18px; background:#FFF; min-height:58px; margin:0; color:var(--sw-muted); }
.sw-page .sw-search:focus-within { border-color:#D7DCD2; outline:none; box-shadow:none; }
.sw-page .sw-search input { flex:1; width:100%; min-width:0; padding:15px 0; border:0; outline:none; box-shadow:none; background:transparent; font-size:17px; color:var(--sw-ink); }
.sw-page .sw-search input:focus-visible { outline:none; box-shadow:none; }
.sw-search input::placeholder { color:#7A8671; }
.sw-search input::-webkit-search-cancel-button { display:none; }
.sw-clear,.sw-icon { display:inline-flex; justify-content:center; align-items:center; flex-shrink:0; width:44px; min-height:44px; border:0; border-radius:12px; background:transparent; padding:0; font-size:24px!important; }
.sw-shortcut { padding-inline:8px; }
.sw-shortcut kbd { font:600 15px system-ui; border:1px solid var(--sw-line); background:#F4F6F1; padding:2px 7px; border-radius:5px; }
.sw-search:focus-within .sw-shortcut { display:none; }
/* Typeahead is deliberately in flow: opening it expands the white head band. */
.sw-suggestions { position:static; margin-block-start:8px; border:1px solid var(--sw-line); border-radius:18px; background:#FFF; box-shadow:none; overflow:hidden; padding:6px; }
.sw-suggestion { display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 12px; border-radius:12px; }
.sw-suggestion:hover,.sw-suggestion[aria-selected="true"] { background:#F4F6F1; }
.sw-suggestion .sw-mono { position:static; width:38px; height:38px; border:0; border-radius:12px; font-size:17px; }
.sw-suggestion-name { display:flex; flex-direction:column; flex:1; min-width:0; }
.sw-suggestion-name strong { font-size:15.5px; }
.sw-suggestion-name bdi { color:var(--sw-muted); font-size:12.5px; text-align:start; }
.sw-suggestion>strong { font-size:14px; }
.sw-suggestions>p { padding:16px; color:var(--sw-muted); }
.sw-suggestions>p a { text-decoration:underline; text-underline-offset:4px; }
.sw-popular { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block-start:16px; font-size:13.5px; color:var(--sw-muted); }
.sw-chip { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:6px 15px; border:1px solid #D7DCD2; border-radius:999px; background:#FFF; font-size:13.5px!important; font-weight:500; line-height:1.4; }
.sw-chip:hover { border-color:#D7DCD2; background:#F4F6F1; }
.sw-chip[aria-pressed="true"] { background:var(--sw-ink); color:var(--sw-lime); border-color:var(--sw-ink); }
.sw-shell { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding-block:28px 80px; }
.sw-results { min-width:0; }
.sw-rail { display:none; }
.sw-rail-head { display:flex; align-items:center; justify-content:space-between; min-height:62px; border-bottom:1px solid var(--sw-line); margin-block-end:18px; padding-block-end:18px; }
.sw-rail-head h2 { font-size:16px; font-weight:700; }
.sw-reset { border:0; background:transparent; padding:6px 0; min-height:42px; font-size:13.5px!important; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.sw-saved { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; min-height:46px; padding:10px 14px; border:1px solid #D7DCD2; border-radius:12px; background:#FFF; font-weight:700!important; margin-block-end:20px!important; }
.sw-saved.is-on { background:var(--sw-ink); color:var(--sw-lime); border-color:var(--sw-ink); }
.sw-saved svg,.sw-save[aria-pressed="true"] svg { fill:currentColor; }
.sw-group { min-width:0; padding:0 0 18px; margin:0 0 20px; border:0; border-bottom:1px solid var(--sw-line); }
.sw-group:last-child { border-bottom:0; margin-bottom:0; }
.sw-group legend { float:none; display:block; width:100%; padding:0; margin-block-end:10px; font-size:13px; font-weight:400; color:var(--sw-muted); }
.sw-check { display:flex; align-items:center; gap:12px; width:100%; min-height:46px; border:1px solid transparent; border-radius:12px; padding:6px 0; background:transparent; text-align:start; font-size:15px!important; font-weight:400; }
.sw-check:hover:not(:disabled) { background:#F4F6F1; }
.sw-check:disabled { opacity:.45; }
.sw-check-label { flex:1; }
.sw-box { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1.6px solid #D7DCD2; border-radius:6px; flex-shrink:0; background:#FFF; }
[aria-checked="true"]>.sw-box,[aria-pressed="true"]>.sw-box { background:var(--sw-ink); color:var(--sw-lime); border-color:var(--sw-ink); }
.sw-count { margin-inline-start:auto; font-size:13.5px; color:var(--sw-muted); }
.sw-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sw-range { position:relative; height:34px; }
.sw-range-track,.sw-range-fill { position:absolute; inset-inline:10px; top:15px; height:4px; border-radius:999px; background:#D7DCD2; }
.sw-range-fill { background:var(--sw-ink); inset-inline-end:auto; }
.sw-page .sw-range input { position:absolute; inset:0; width:100%; height:34px; margin:0; padding:0; border:0; background:transparent; appearance:none; pointer-events:none; box-shadow:none; }
.sw-range input::-webkit-slider-thumb { appearance:none; width:22px; height:22px; background:#FFF; border:1.5px solid var(--sw-ink); border-radius:50%; pointer-events:auto; cursor:grab; box-shadow:none; }
.sw-range input::-moz-range-thumb { width:22px; height:22px; background:#FFF; border:1.5px solid var(--sw-ink); border-radius:50%; pointer-events:auto; cursor:grab; }
.sw-range input:focus-visible { outline-offset:4px; }
.sw-range-note { text-align:center; font-size:12px; color:var(--sw-muted)!important; margin-top:6px!important; }
.sw-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-block-end:18px; border-bottom:1px solid var(--sw-line); min-height:62px; }
.sw-result-count { flex:1; font-size:16px; font-weight:700; white-space:nowrap; }
.sw-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%; }
.sw-view { display:flex; align-items:center; padding:4px; border-radius:15px; background:#E8EAE3; }
.sw-view .sw-icon { min-height:40px; width:40px; border-radius:11px; color:var(--sw-muted); }
.sw-view [aria-pressed="true"] { background:#FFF; color:var(--sw-ink); }
.sw-domain-control,.sw-sort-control { display:flex; align-items:center; gap:9px; min-width:0; }
.sw-domain-control>span,.sw-sort-control>span { display:none; color:var(--sw-muted); font-size:13px; }
.sw-sort-menu,.sw-tld-menu { position:relative; }
.sw-sort-menu summary,.sw-tld-menu summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px 14px; border:1px solid var(--sw-line); border-radius:14px; background:#FFF; font-size:13.5px; font-weight:600; list-style:none; white-space:nowrap; }
.sw-sort-menu summary::-webkit-details-marker,.sw-tld-menu summary::-webkit-details-marker { display:none; }
.sw-sort-menu[open] summary,.sw-tld-menu[open] summary { border-color:var(--sw-ink); }
.sw-sort-menu[open] summary svg,.sw-tld-menu[open] summary svg { transform:rotate(180deg); }
.sw-sort-options,.sw-tld-options { position:absolute; top:calc(100% + 8px); inset-inline-end:0; width:248px; max-width:calc(100cqi - 40px); padding:8px; background:#FFF; border:1px solid var(--sw-line); border-radius:16px; z-index:60; box-shadow:none; }
.sw-tld-options { width:220px; }
.sw-sort-options button,.sw-tld-options button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; padding:10px 14px; border:0; border-radius:10px; background:transparent; text-align:start; font-size:15px; font-weight:400; }
.sw-sort-options button:hover,.sw-tld-options button:hover { background:#F4F6F1; }
.sw-sort-options button[aria-pressed="true"],.sw-tld-options button[aria-selected="true"] { font-weight:700; }
.sw-tld-options button[aria-selected="true"] { color:var(--sw-ink); }
.sw-active { display:flex; flex-wrap:wrap; gap:8px; }
.sw-active:not(:empty) { margin-block-start:18px; }
.sw-active .sw-chip { border-color:var(--sw-ink); }
.sw-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; margin-block-start:22px; }
.sw-card { --sw-band:var(--sw-lime); --sw-band-ink:var(--sw-ink); position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid #E4E7DE; border-radius:20px; overflow:hidden; background:#FFF; box-shadow:none; transition:transform .3s ease-out; }
.sw-card.is-premium { --sw-band:var(--sw-ink); --sw-band-ink:var(--sw-lime); }
.sw-band { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 112px; height:112px; padding-inline:16px 50px; color:var(--sw-band-ink); }
.sw-fill { position:absolute; inset:0; height:112px; z-index:2; background:var(--sw-band); transform-origin:top; transition:transform .34s ease-out; overflow:hidden; }
.sw-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 34%,#FFFFFF6B 50%,transparent 66%); transform:translateX(-130%); pointer-events:none; }
.sw-completion { position:absolute; inset:0; z-index:4; display:block; color:var(--sw-band-ink); font-size:11px; font-weight:700; line-height:1; direction:ltr; pointer-events:none; }
.sw-completion-track { position:absolute; inset-inline:0; inset-block-end:0; display:block; height:4px; overflow:hidden; background:color-mix(in srgb,var(--sw-band-ink) 25%,transparent); }
.sw-completion-track>span { display:block; height:100%; background:var(--sw-band-ink); }
.sw-word { position:relative; z-index:3; max-width:100%; font-size:28px; line-height:1.45; font-weight:700; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:transform .34s ease-out; }
.sw-word[dir="ltr"] { font-size:30px; letter-spacing:-.035em; }
.sw-logo { position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; background:#FFF; transition:transform .34s ease-out; }
.sw-mono { position:absolute; bottom:-24px; inset-inline-end:16px; z-index:4; width:48px; height:48px; border:3px solid #FFF; border-radius:50%; display:grid; place-items:center; background:var(--sw-band,var(--sw-lime)); color:var(--sw-band-ink,var(--sw-ink)); font-size:20px; font-weight:700; transition:transform .38s ease-out; }
.sw-mono--logo { border:3px solid #FFF; border-radius:50%; overflow:hidden; background:#FFF; }
.sw-mono--logo img { display:block; width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; background:#FFF; }
.is-premium>.sw-mono { background:var(--sw-ink); color:var(--sw-lime); }
.sw-flag { position:absolute; inset-inline-start:12px; inset-block-start:12px; display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; background:var(--sw-lime); color:var(--sw-ink); font-size:12px; font-weight:600; z-index:4; }
.sw-flag svg { width:13px; height:13px; }
.sw-cover { position:absolute; inset:0; z-index:5; border-radius:20px; }
.sw-cover:focus-visible { outline-offset:-3px!important; }
.sw-save { position:absolute; top:4px; inset-inline-end:4px; width:44px; min-height:44px; border:0; background:transparent; color:var(--sw-band-ink)!important; padding:0; display:grid; place-items:center; z-index:6; border-radius:12px; opacity:0; }
.sw-cmp { position:absolute; bottom:8px; inset-inline-start:10px; display:flex; align-items:center; gap:6px; min-height:42px; padding:5px 9px; border:1px solid transparent; border-radius:999px; background:#F2F4EF; color:var(--sw-ink)!important; font-size:12px!important; z-index:6; opacity:0; }
.sw-cmp .sw-box { width:18px; height:18px; }
.sw-cmp[aria-pressed="true"] { background:var(--sw-lime); }
.sw-cmp:disabled .sw-box { border-style:dashed; border-color:var(--sw-ink); }
.sw-card:is(:hover,:focus-within) .sw-save,.sw-save[aria-pressed="true"],.sw-card:is(:hover,:focus-within) .sw-cmp,.sw-cmp[aria-pressed="true"] { opacity:1; }
.sw-card .sw-cmp:disabled { opacity:.5; }
.sw-card-body { position:relative; z-index:0; flex:1; min-width:0; padding:18px 16px 10px; container:sw-card / inline-size; }
.sw-card-body h2 { display:flex; align-items:center; gap:7px; padding-inline-end:45px; font-size:17px; font-weight:700; line-height:25px; }
.sw-card-body h2>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-verified { display:grid; place-items:center; flex-shrink:0; width:15px; height:15px; border-radius:50%; color:#FFF; background:#2C5A12; }
.sw-verified svg { width:11px; height:11px; stroke-width:3; }
.sw-domain { display:flex; align-items:center; gap:6px; min-width:0; margin-block-start:6px!important; color:var(--sw-muted)!important; font-size:14.5px; line-height:22px; }
.sw-domain bdi,.sw-domain>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sw-domain bdi { flex-shrink:0; max-width:52%; }
.sw-domain span[aria-hidden] { color:#D0D6CA; margin-inline-end:6px; }
/* The reading glosses the domain, so it holds its width; sector and meaning give way. */
.sw-pron { flex-shrink:0; color:#7C8A70; font-size:13px; }
.sw-sector { flex:0 1 auto; min-width:52px; }
.sw-meaning { flex:1 1 auto; min-width:0; font-size:13px; }
/* Below this width the meaning would be an ellipsis and nothing else. */
@container sw-card (max-width:210px) { .sw-meaning { display:none; } }
.sw-tagline { color:var(--sw-muted)!important; font-size:13.5px; line-height:20px; height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-block-start:9px!important; }
.sw-foot { position:relative; display:flex; align-items:center; gap:10px; min-height:66px; padding:10px 16px; border-top:1px solid #EDEFE9; }
.sw-price-block { display:flex; flex-direction:column; align-items:flex-start; }
.sw-price { font-size:19px; line-height:26px; font-weight:700; white-space:nowrap; }
.sw-age { color:var(--sw-muted); font-size:11.5px; line-height:18px; white-space:nowrap; opacity:0; transition:opacity .22s; }
.sw-stats { display:flex; gap:12px; align-items:center; margin-inline-start:auto; font-size:12.5px; font-weight:600; color:var(--sw-muted); transition:opacity .22s,transform .22s; }
.sw-stats>span { display:flex; align-items:center; gap:5px; }
.sw-stats svg { width:14px; height:14px; }
.sw-buy { display:flex; align-items:center; justify-content:center; gap:8px; position:absolute; inset-inline-end:12px; top:50%; z-index:6; min-height:42px; padding:8px 13px; border-radius:999px; background:var(--sw-ink); color:var(--sw-lime)!important; font-size:13.5px; font-weight:600; opacity:0; transform:translateY(calc(-50% + 8px)); transition:opacity .3s,transform .3s; }
.sw-page:dir(rtl) .sw-buy svg { transform:scaleX(-1); }
.sw-card:is(:hover,:focus-within) .sw-buy { opacity:1; transform:translateY(-50%); }
.sw-card:is(:hover,:focus-within) .sw-stats { opacity:0; transform:translateY(-8px); }
/* Reserved in the layout either way, so revealing it never moves the price. */
.sw-card:is(:hover,:focus-within) .sw-age { opacity:1; }
@media (hover:none) { .sw-age { opacity:1; } }
.sw-card:hover { transform:translateY(-2px); border-color:#E4E7DE; box-shadow:none; }
.sw-card:hover .sw-fill { transform:scaleY(1.071429); }
.sw-card:hover .sw-word { transform:scale(1.03); }
.sw-card:hover .sw-logo { transform:scale(1.03); }
.sw-card:hover .sw-mono { transform:scale(1.06) rotate(-4deg); }
.sw-card:hover .sw-fill::after { transform:translateX(130%); transition:transform .62s ease-out; }
.sw-more { text-align:center; margin-block-start:24px; }
.sw-empty { grid-column:1/-1; padding:48px 24px; border:1px solid #E4E7DE; border-radius:20px; text-align:center; background:#FFF; }
.sw-empty h2 { font-size:22px; font-weight:700; }
.sw-empty p { margin-block:12px 24px; color:var(--sw-muted); }
.sw-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 22px; border:0; border-radius:999px; background:var(--sw-ink); color:var(--sw-lime)!important; font-weight:700!important; }
.sw-primary:hover,.sw-buy:hover { background:#1E4A05; }
.sw-recent { margin-block-start:14px; }
.sw-recent:empty { display:none; }
.sw-recent h2 { font-size:16px; margin-block-end:8px; }
.sw-recent-row { display:flex; overflow-x:auto; gap:12px; padding:4px; }
.sw-recent-row>a { display:flex; flex:0 0 210px; align-items:center; gap:12px; padding:12px; border:1px solid var(--sw-line); border-radius:14px; background:#FFF; }
.sw-recent-row .sw-mono { position:static; width:38px; height:38px; border:0; border-radius:10px; }
.sw-recent-row>a>span:last-child { display:flex; flex-direction:column; min-width:0; font-size:13px; }
.sw-recent-row strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sw-recent-row .sw-recent-sort { flex-basis:auto; min-height:62px; padding-inline:16px; border-color:transparent; background:transparent; color:var(--sw-ink); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.sw-recent-row .sw-recent-sort:hover { background:#E8EAE3; }
.sw-recent-row .sw-recent-sort[aria-current="true"] { text-decoration:none; cursor:default; }
.sw-page:dir(rtl) .sw-recent-sort svg { transform:scaleX(-1); }
.sw-page dialog { color:var(--sw-ink); padding:0; border:1px solid var(--sw-line); background:#FFF; }
.sw-page dialog::backdrop { background:rgba(11,20,8,.42); }
.sw-dialog-open { overflow:hidden; }
.sw-filter-dialog { position:fixed; inset: auto 0 0; width:100%; max-width:none; max-height:86dvh; margin:0; border-radius:22px 22px 0 0; }
.sw-sheet { display:flex; flex-direction:column; max-height:86dvh; }
.sw-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--sw-line); }
.sw-sheet-head h2 { font-size:18px; }
.sw-sheet-body { overflow-y:auto; overscroll-behavior:contain; padding:20px; }
.sw-sheet-body .sw-check { min-height:48px; }
.sw-sheet-body .sw-saved { min-height:50px; }
.sw-sheet-foot { display:flex; align-items:center; justify-content:space-between; padding:12px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--sw-line); background:#FFF; }
.sw-sheet-foot .sw-primary { min-height:50px; }
.sw-compare-bar { position:fixed; inset-inline:0; bottom:0; z-index:250; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:var(--sw-ink); color:var(--sw-lime); font-size:13px; }
.sw-compare-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sw-compare-bar .sw-chip { background:transparent; color:var(--sw-lime); border-color:var(--sw-lime); }
.sw-compare-bar .sw-primary { background:var(--sw-lime); color:var(--sw-ink)!important; }
.sw-compare-bar :focus-visible { outline-color:var(--sw-lime)!important; }
.sw-page.has-comparison .sw-shell { padding-bottom:220px; }
.sw-compare-dialog { width:calc(100% - 40px); max-width:820px; max-height:88dvh; margin:auto; border-radius:22px; }
.sw-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:var(--sw-ink); color:var(--sw-lime); }
.sw-modal-head h2 { font-size:20px; }
.sw-modal-head .sw-icon { background:#FFFFFF24; }
.sw-table-scroll { overflow-x:auto; }
.sw-compare-dialog table { width:100%; border-collapse:collapse; table-layout:fixed; margin:0; font-size:13px; }
.sw-compare-dialog th,.sw-compare-dialog td { padding:14px 12px; text-align:start; vertical-align:middle; border:0; border-bottom:1px solid var(--sw-line); overflow-wrap:anywhere; }
.sw-compare-dialog th:first-child { width:100px; background:#F5F6F2; }
.sw-compare-dialog thead th { position:relative; padding-block:16px; }
.sw-compare-dialog thead th .sw-mono { position:static; width:36px; height:36px; border:0; border-radius:10px; margin-block-end:8px; }
.sw-compare-dialog thead strong,.sw-compare-dialog thead bdi { display:block; }
.sw-compare-dialog thead strong { font-size:16px; }
.sw-compare-dialog thead bdi { font-size:12.5px; font-weight:400; color:var(--sw-muted); }
.sw-compare-dialog thead button { position:absolute; top:8px; inset-inline-end:2px; }
.sw-compare-dialog tbody tr:nth-child(even) { background:#FCFDFB; }
.sw-compare-dialog tbody tr:first-child td { font-size:18px; font-weight:700; }
.sw-tier { display:inline-block; padding:4px 9px; border-radius:999px; background:#E8EAE3; font-size:12px; }
.sw-tier.is-premium { background:var(--sw-ink); color:var(--sw-lime); }
.sw-modal-foot { display:flex; justify-content:flex-end; gap:12px; padding:16px 20px; }
@container sw (min-width:620px) {
 .sw-wrap { padding-inline:40px; }
 .sw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .sw-tools { width:auto; margin-inline-start:auto; }
 .sw-grid.is-list { grid-template-columns:minmax(0,1fr); }
 .sw-grid.is-list .sw-card { flex-direction:row; min-height:174px; }
 .sw-grid.is-list .sw-band { flex:0 0 132px; height:auto; min-height:174px; padding-inline:10px; }
 .sw-grid.is-list .sw-fill { height:100%; transform:none; }
 .sw-grid.is-list .sw-word { font-size:24px; }
 .sw-grid.is-list .sw-mono { inset-inline-end:-24px; bottom:16px; }
 .sw-grid.is-list .sw-card-body { align-self:center; padding-inline:34px 16px; }
 .sw-grid.is-list .sw-card-body h2 { padding:0; }
 .sw-grid.is-list .sw-domain { flex-wrap:wrap; gap:4px; font-size:13px; }
 .sw-grid.is-list .sw-domain bdi { max-width:100%; }
 .sw-grid.is-list .sw-foot { flex:0 0 150px; flex-direction:column; align-items:flex-start; justify-content:center; border:0; padding:16px; gap:10px; }
 .sw-grid.is-list .sw-stats { margin:0; opacity:1!important; transform:none; }
 .sw-grid.is-list .sw-buy { position:relative; inset:auto; transform:none; opacity:1; }
 .sw-grid.is-list .sw-cmp { top:8px; bottom:auto; inset-inline-start:8px; }
 .sw-grid.is-list .sw-flag { inset-block-start:10px; inset-block-end:auto; inset-inline-start:8px; }
 .sw-grid.is-list .sw-save { top:auto; bottom:4px; inset-inline-end:2px; }
 .sw-compare-dialog th:first-child { width:132px; }
}
@container sw (min-width:1000px) {
 .sw-shell { grid-template-columns:250px minmax(0,1fr); gap:40px; }
 .sw-rail { display:block; position:sticky; top:100px; align-self:start; }
 .sw-filter-trigger { display:none; }
 .sw-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .sw-toolbar { gap:10px; }
 .sw-card-body { padding-inline:16px; }
 .sw-foot { padding-inline:16px; gap:6px; flex-wrap:wrap; }
 .sw-stats { gap:8px; }
 .sw-domain>span:last-child { max-width:100%; }
}
@container sw (min-width:1180px) {
 .sw-toolbar { flex-wrap:nowrap; }
 .sw-tools { flex-wrap:nowrap; gap:8px; }
 .sw-result-count { font-size:15px; }
 .sw-sort-menu summary { padding-inline:11px; }
 .sw-grid.is-list .sw-foot { flex-basis:190px; }
}
@container sw (min-width:1480px) {
 /* Match the global header frame: the marketplace must not outgrow the logo
    and navigation on wide displays. */
 .sw-wrap { max-width:1200px; }
 .sw-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .sw-domain-control>span,.sw-sort-control>span { display:inline; }
}
@container sw (max-width:619px) {
 .sw-head { padding-block:28px 24px; }
 .sw-head .sw-lede { font-size:15px; margin-block:12px 20px; }
 .sw-search { padding-inline:14px 5px!important; }
 .sw-search input { font-size:16px!important; }
 .sw-shell { padding-top:20px; }
 .sw-tools { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; }
 .sw-view { grid-column:1; grid-row:1; width:max-content; }
 .sw-domain-control { grid-column:2; justify-content:flex-end; }
 .sw-sort-control { grid-column:1/-1; justify-content:flex-end; }
 .sw-sort-menu,.sw-tld-menu { width:100%; }
 .sw-sort-menu summary,.sw-tld-menu summary { justify-content:space-between; }
 .sw-sort-options,.sw-tld-options { width:100%; }
 .sw-suggestion { gap:8px; padding-inline:6px; }
 .sw-suggestion>strong { font-size:13px; }
 .sw-compare-dialog table { min-width:520px; }
}
/* Capability queries affect affordances only, never page layout. */
@media (hover:none) {
 .sw-save,.sw-cmp { opacity:1; }
 .sw-card:hover { transform:none; box-shadow:none; }
 .sw-card:hover .sw-fill,.sw-card:hover .sw-word,.sw-card:hover .sw-logo,.sw-card:hover .sw-mono { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
 .sw-page *,.sw-page *::before,.sw-page *::after { animation:none!important; transition:none!important; }
 .sw-card:hover,.sw-card:hover .sw-fill,.sw-card:hover .sw-word,.sw-card:hover .sw-logo,.sw-card:hover .sw-mono { transform:none; }
 .sw-fill::after { display:none; }
}
/* Initial placeholders have the same 112px band, body and footer as loaded cards. */
.sw-skeleton { pointer-events:none; }
.sw-sk,.sw-skeleton .sw-fill { background:linear-gradient(90deg,#E9EAE4 25%,#F4F5F1 50%,#E9EAE4 75%); background-size:200% 100%; animation:sw-shimmer 1.4s linear infinite; border-radius:6px; }
.sw-skeleton .sw-fill { border-radius:0; }
.sw-skeleton .sw-word { width:58%; height:26px; }
.sw-skeleton .sw-mono { border-radius:50%; }
.sw-skeleton h2 .sw-sk { width:44%; height:17px; }
.sw-skeleton h2 { height:25px; }
.sw-skeleton .sw-domain { height:22px; }
.sw-skeleton .sw-domain .sw-sk { width:34%; height:14px; }
.sw-skeleton .sw-tagline { width:92%; }
.sw-skeleton .sw-foot .sw-sk { width:82px; height:19px; }
.sw-skeleton:nth-child(n+5) { display:none; }
@container sw (min-width:620px) { .sw-skeleton:nth-child(-n+4) { display:flex; } }
@container sw (min-width:1000px) { .sw-skeleton:nth-child(-n+6) { display:flex; } }
@container sw (min-width:1480px) { .sw-skeleton:nth-child(-n+8) { display:flex; } }
@keyframes sw-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .sw-sk,.sw-skeleton .sw-fill { animation:none; } }
.sw-buy { pointer-events:none; }
.sw-card:is(:hover,:focus-within) .sw-buy { pointer-events:auto; }
@container sw (min-width:620px) { .sw-grid.is-list .sw-buy { pointer-events:auto; } }
@container sw (max-width:619px) {
 .sw-popular { gap:6px; font-size:12.5px; }
 .sw-popular .sw-chip { padding-inline:10px; font-size:12.5px!important; }
}

/* Phones always retain two product columns, including a saved list preference. */
@container sw (max-width:619px) {
 .sw-shell { padding-inline:12px; }
 .sw-grid,.sw-grid.is-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .sw-card,.sw-cover { border-radius:14px; }
 .sw-band { padding-inline:8px; align-items:flex-start; padding-top:40px; }
 .sw-word,.sw-word[dir="ltr"] { font-size:22px; line-height:28px; }
 .sw-mono { width:32px; height:32px; bottom:-16px; inset-inline-end:8px; border-width:2px; font-size:15px; }
 .sw-flag { inset-block-start:8px; inset-block-end:auto; inset-inline-start:6px; padding-inline:6px; gap:3px; font-size:11px; height:24px; }
 .sw-flag svg { width:11px; height:11px; }
 .sw-save { top:0; inset-inline-end:0; opacity:1; }
 .sw-cmp { bottom:0; inset-inline-start:4px; max-width:calc(100% - 12px); min-height:42px; padding:4px 6px; gap:4px; opacity:1; }
 .sw-card-body { padding:22px 9px 10px; }
 .sw-card-body h2 { padding-inline-end:0; gap:4px; line-height:23px; }
 .sw-domain { display:block; font-size:12px; line-height:18px; }
 .sw-domain bdi { display:block; max-width:100%; }
 .sw-domain>span { display:none; }
 .sw-domain>.sw-pron { display:inline; font-size:11.5px; }
 .sw-tagline { font-size:12px; line-height:18px; height:18px; margin-block-start:6px!important; }
 .sw-foot { flex-direction:column; align-items:stretch; padding:8px 9px; gap:6px; }
 .sw-price { white-space:normal; overflow-wrap:anywhere; }
 .sw-age { white-space:normal; }
 .sw-stats { margin-inline-start:0; flex-wrap:wrap; gap:8px; min-height:18px; }
 .sw-card:is(:hover,:focus-within) .sw-stats { opacity:1; transform:none; }
 .sw-buy,.sw-card:is(:hover,:focus-within) .sw-buy { position:relative; inset:auto; transform:none; opacity:1; pointer-events:auto; padding:6px; font-size:12px; gap:4px; }
 .sw-buy svg { width:14px; height:14px; }
}
/* Compact density: reduce unused space while retaining readable type and touch targets. */
.sw-head { padding-block:24px 20px; }
.sw-head h1 { font-size:clamp(26px,3cqi,36px); line-height:1.25; max-width:32ch; }
.sw-head .sw-lede { font-size:15px; line-height:1.55; margin-block:10px 14px; max-width:72ch; }
.sw-page .sw-search { min-height:48px; border-radius:14px; padding-inline:14px 6px; gap:8px; }
.sw-page .sw-search input { padding-block:10px; font-size:16px; }
.sw-popular { margin-block-start:8px; gap:6px; }
.sw-suggestion { min-height:54px; padding-block:5px; }
.sw-suggestions { border-radius:14px; padding:4px; }
.sw-shell { padding-block:20px 40px; }
.sw-toolbar,.sw-rail-head { min-height:56px; padding-block-end:10px; }
.sw-rail-head { margin-block-end:12px; }
.sw-group { padding-block-end:12px; margin-block-end:14px; }
.sw-group legend { margin-block-end:6px; }
.sw-check { min-height:42px; gap:9px; padding-block:4px; font-size:14px!important; }
.sw-saved { min-height:44px; margin-block-end:14px!important; padding-block:8px; }
.sw-grid { margin-block-start:14px; gap:12px; }
.sw-active:not(:empty) { margin-block-start:10px; }
.sw-card,.sw-cover { border-radius:16px; }
.sw-band { flex-basis:100px; height:100px; padding-inline:14px 44px; }
.sw-fill { height:100px; }
.sw-word,.sw-word[dir="ltr"] { font-size:26px; }
.sw-mono { width:40px; height:40px; bottom:-20px; inset-inline-end:14px; font-size:18px; }
.sw-card-body { padding:16px 14px 10px; }
.sw-card-body h2 { padding-inline-end:36px; }
.sw-tagline { margin-block-start:5px!important; }
.sw-foot { min-height:62px; padding:8px 14px; }
.sw-more,.sw-recent { margin-block-start:20px; }
.sw-empty { padding:32px 20px; }
.sw-sheet-head { padding-block:10px; }
.sw-sheet-body { padding:14px 20px; }
.sw-sheet-body .sw-check { min-height:44px; }
.sw-sheet-foot { padding-block-start:10px; }
@container sw (min-width:620px) {
 .sw-wrap { padding-inline:28px; }
 .sw-grid.is-list .sw-card,.sw-grid.is-list .sw-band { min-height:160px; }
 .sw-grid.is-list .sw-band { flex-basis:120px; }
 .sw-grid.is-list .sw-mono { inset-inline-end:-20px; }
 .sw-grid.is-list .sw-card-body { padding-inline:28px 14px; }
}
@container sw (min-width:1000px) {
 .sw-shell { grid-template-columns:230px minmax(0,1fr); gap:28px; }
}
@container sw (max-width:619px) {
 .sw-wrap { padding-inline:12px; }
 .sw-head { padding-block:18px 16px; }
 .sw-head h1 { font-size:26px; line-height:1.25; }
 .sw-head .sw-lede { font-size:14px; line-height:1.5; margin-block:8px 12px; }
 .sw-popular>span { display:none; }
 .sw-popular .sw-chip { padding-inline:10px; }
 .sw-shell { padding-top:14px; }
 .sw-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px 6px; }
 .sw-result-count { grid-column:1; grid-row:1; font-size:13px; white-space:normal; }
 .sw-filter-trigger { grid-column:2; grid-row:1; padding-inline:8px; font-size:12px!important; gap:4px; }
 .sw-filter-trigger svg { width:15px; }
 .sw-tools { display:contents; }
 .sw-view { grid-column:3; grid-row:1; padding:2px; }
 .sw-view .sw-icon { width:42px; min-height:42px; }
 .sw-domain-control { grid-column:1; grid-row:2; justify-content:stretch; }
 .sw-sort-control { grid-column:2 / 4; grid-row:2; }
 .sw-sort-menu summary,.sw-tld-menu summary { padding-inline:10px; font-size:12px; }
 .sw-grid,.sw-grid.is-list { gap:10px; }
 .sw-card,.sw-cover { border-radius:14px; }
 .sw-band { flex-basis:104px; height:104px; padding-inline:8px; padding-top:32px; }
 .sw-fill { height:104px; }
 .sw-word,.sw-word[dir="ltr"] { font-size:22px; }
 .sw-mono { width:32px; height:32px; bottom:-16px; inset-inline-end:8px; font-size:15px; }
 .sw-card-body { padding:19px 9px 8px; }
 .sw-card-body h2 { padding-inline-end:0; }
 .sw-tagline:empty { display:none; }
 .sw-foot { padding:7px 9px; gap:4px; }
 .sw-price { line-height:24px; }
 .sw-age { line-height:16px; }
}

/* Quiet recovery state, shared by an empty catalog and filtered results. */
.sw-grid .sw-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; padding:48px 20px; border:0; border-radius:0; background:transparent; text-align:center; }
.sw-empty .sw-empty-icon { display:grid; place-items:center; width:56px; height:56px; margin-block-end:20px; border-radius:50%; background:var(--color-neutral, #E8EBE6); color:var(--color-brand-forest, #163300); }
.sw-empty-icon svg { width:24px; height:24px; }
.sw-grid .sw-empty h2 { max-width:26ch; margin:0; color:var(--color-brand-forest, #163300); font-size:28px; line-height:1.5; }
.sw-grid .sw-empty p { max-width:42ch; margin:10px 0 24px; font-size:16px; line-height:1.75; }
.sw-empty .sw-primary { min-height:48px; padding:12px 24px; border:0; border-radius:999px; background:var(--color-brand-lime, #9FE870); color:var(--color-brand-forest, #163300); text-decoration:none; }
.sw-empty .sw-primary:hover { background:var(--color-brand-forest, #163300); color:var(--color-brand-lime, #9FE870); }
.sw-empty .sw-primary:focus-visible { outline:2px solid var(--color-brand-forest, #163300); outline-offset:4px; }
@media(max-width:600px) { .sw-grid .sw-empty { min-height:280px; padding:36px 12px; } .sw-grid .sw-empty h2 { font-size:24px; } }

.sw-empty .sw-primary[data-action="reset"], .sw-empty .sw-primary[data-action="reset"]:hover { background:var(--color-brand-forest, #163300); color:#fff; }

.sw-completion-label { gap:4px; min-height:20px; padding:3px 7px; border-radius:999px; background:#F2F4EF; color:#728066; font-size:10px; font-weight:600; line-height:1; white-space:nowrap; }
.sw-completion-label i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; }
.sw-completion-label bdi { font-weight:700; font-variant-numeric:tabular-nums; }