/* Page controls only. Cards retain the existing renderer and fixed palette. */
#sw-shop { --sw-ground:#f1f1ef; --sw-ink:#163300; --sw-ink-2:#4a5a3c; --sw-muted:#8a9585; --sw-lime:#9fe870; --sw-link:#2c5a12; --sw-field:#d7dcd2; --sw-rule:#e1e2dd; --sw-box:#6f7a69; --sw-panel:#f7f9f3; --sw-focus:#e4f5ce; --sw-line:var(--sw-rule); --sw-white:#fff; background:var(--sw-ground); }
#sw-shop .sw-card { --sw-ink:#163300; --sw-lime:#9fe870; --sw-muted:#4a5a3c; --sw-line:#e1e2dd; --sw-band-h:var(--brandagy-card-band-height,128px); border-color:var(--brandagy-card-border,#e4e7de); border-radius:var(--brandagy-card-radius,20px); }
#sw-shop .sw-band { flex-basis:var(--brandagy-card-band-height,128px); height:var(--brandagy-card-band-height,128px); }
#sw-shop .sw-fill { height:var(--brandagy-card-band-height,128px); }
#sw-shop .sw-card-title { display:flex; align-items:center; justify-content:space-between; gap:10px; min-inline-size:0; }
#sw-shop .sw-card-title .sw-card-domain { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sw-ink); font-size:16px; font-weight:700; letter-spacing:-.01em; }
#sw-shop .sw-card-title .wc-rate { display:inline-flex; flex:0 0 auto; }
#sw-shop .sw-sheet { background:var(--sw-ground); }
#sw-shop .sw-head { background:var(--sw-ground); border-color:var(--sw-rule); }
#sw-shop .sw-head h1,#sw-shop .sw-head p { color:var(--sw-ink); }
#sw-shop .sw-head .sw-lede { color:var(--sw-ink-2); }
#sw-shop .sw-shell { gap:40px; padding-block:28px 60px; }
#sw-shop .sw-side { min-inline-size:0; }
#sw-shop .sw-rail-head { min-block-size:0; padding-block-end:14px; margin-block-end:18px; border-color:var(--sw-rule); }
#sw-shop .sw-rail-head h2 { font-size:16px; font-weight:700; }
#sw-shop .sw-reset { font-size:13.5px!important; font-weight:700; text-decoration-thickness:1px; }
#sw-shop .sw-group,#sw-shop .sw-group:last-child { padding:0; padding-block-end:18px; margin:0; margin-block-end:18px; border:0; border-block-end:1px solid var(--sw-rule); }
#sw-shop .sw-gh { font-size:15.5px; font-weight:700; line-height:22px; margin:0; margin-block-end:8px; color:var(--sw-ink); }
#sw-shop .sw-check { display:flex; align-items:center; gap:10px; min-block-size:36px; inline-size:100%; padding:0; border:0; border-radius:0; background:none; font-size:15px!important; font-weight:400; color:var(--sw-ink); text-align:start; }
#sw-shop .sw-check:hover:not(:disabled) { background:none; }
#sw-shop .sw-check:hover:not(:disabled) .sw-check-label { text-decoration:underline; text-underline-offset:3px; }
#sw-shop .sw-box,#sw-shop .sw-rdot { display:inline-flex; align-items:center; justify-content:center; inline-size:18px; block-size:18px; flex:0 0 18px; border:1.5px solid var(--sw-box); border-radius:4px; background:var(--sw-white); }
#sw-shop .sw-check.is-on .sw-box { background:var(--sw-ink); border-color:var(--sw-ink); color:var(--sw-lime); }
#sw-shop .sw-box svg { inline-size:11px; block-size:11px; stroke-width:3.4; }
#sw-shop .sw-rdot { border-radius:50%; }
#sw-shop .sw-radio.is-on .sw-rdot { border:5.5px solid var(--sw-ink); }
#sw-shop .sw-check.is-off { opacity:.45; cursor:default; }
#sw-shop .sw-count { color:var(--sw-ink-2); font-size:13.5px; margin-inline-start:auto; }
#sw-shop .sw-morelink { display:inline-flex; align-items:center; gap:5px; margin-block-start:4px; padding:0; border:0; background:none; font-size:14px; font-weight:600; color:var(--sw-link); }
#sw-shop .sw-morelink svg { inline-size:11px; block-size:11px; }
#sw-shop .sw-morelink[aria-expanded=true] svg { transform:rotate(180deg); }
#sw-shop .sw-sfind { display:flex; align-items:center; gap:8px; min-block-size:42px; padding-inline:10px; border:1.5px solid var(--sw-field); border-radius:12px; background:var(--sw-white); }
#sw-shop .sw-sfind>svg { inline-size:16px; color:var(--sw-muted); }
#sw-shop .sw-sfind:focus-within { border-color:var(--sw-ink); box-shadow:0 0 0 3px var(--sw-focus)!important; }
#sw-shop .sw-sfind input { inline-size:0; min-inline-size:0; flex:1; border:0; background:none; padding:0; font-size:15px; min-block-size:38px; }
#sw-shop .sw-sfind input::-webkit-search-cancel-button { display:none; }
#sw-shop .sw-seller-stack { display:flex; align-items:center; flex-shrink:0; padding:0; border:0; background:none; color:var(--sw-ink); font-size:12.5px; font-weight:700; }
#sw-shop .sw-stack-photo { display:grid; place-items:center; inline-size:22px; block-size:22px; border:1.5px solid var(--sw-white); border-radius:50%; background:var(--sw-panel); overflow:hidden; }
#sw-shop .sw-stack-photo+.sw-stack-photo { margin-inline-start:-7px; }
#sw-shop .sw-stack-photo img,#sw-shop .sw-avatar-photo>img { inline-size:100%; block-size:100%; object-fit:cover; border-radius:50%; }
#sw-shop .sw-seller-stack>span:last-child { margin-inline-start:4px; }
#sw-shop .sw-seller-stack[aria-expanded=true]>span:last-child,#sw-shop .sw-seller-stack.is-selected>span:last-child { text-decoration:underline; }
#sw-shop .is-typing .sw-seller-stack { display:none; }
#sw-shop .sw-seller-clear { inline-size:24px; block-size:24px; padding:0; border:0; border-radius:50%; background:var(--sw-panel); }
#sw-shop .sw-seller-hint { font-size:13.5px; color:var(--sw-muted); margin-block-start:8px; }
#sw-shop .sw-avs { display:flex; flex-wrap:wrap; gap:12px 10px; padding-block:12px 4px; }
#sw-shop .sw-avatar { inline-size:52px; padding:0; border:0; background:none; color:var(--sw-ink-2); }
#sw-shop .sw-avatar-photo { position:relative; display:grid; place-items:center; inline-size:46px; block-size:46px; margin-inline:auto; border-radius:50%; background:var(--sw-panel); transition:transform 160ms ease-out; }
#sw-shop .sw-avatar:hover:not(:disabled) .sw-avatar-photo { transform:scale(1.06); box-shadow:0 0 0 3.5px var(--sw-field); }
#sw-shop .sw-avatar.is-on .sw-avatar-photo { box-shadow:0 0 0 4px var(--sw-ink); }
#sw-shop .sw-avatar.is-on { font-weight:700; }
#sw-shop .sw-avatar:disabled { opacity:.4; }
#sw-shop .sw-avatar-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; margin-block-start:7px; }
#sw-shop .sw-avatar-tick { position:absolute; inset-block-start:-3px; inset-inline-end:-3px; display:grid; place-items:center; inline-size:18px; block-size:18px; border-radius:50%; background:var(--sw-ink); color:var(--sw-lime); }
#sw-shop .sw-avatar-tick svg { inline-size:11px; block-size:11px; }
#sw-shop .sw-range-block+.sw-range-block { margin-block-start:14px; }
#sw-shop .sw-rg-h { display:flex; align-items:center; gap:7px; font-size:15px; font-weight:700; }
#sw-shop .sw-help { position:relative; display:grid; place-items:center; inline-size:16px; block-size:16px; padding:0; border:1.3px solid var(--sw-muted); border-radius:50%; background:none; font-size:10.5px; font-weight:700; }
#sw-shop .sw-help span { position:absolute; z-index:10; inset-block-end:calc(100% + 8px); inset-inline-end:-60px; inline-size:200px; padding:10px; border-radius:10px; background:var(--sw-ink); color:var(--sw-white); font-size:12.5px; font-weight:400; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity 150ms ease-out,transform 150ms ease-out; }
#sw-shop .sw-help:hover span,#sw-shop .sw-help:focus-visible span { opacity:1; visibility:visible; transform:translateY(0); }
#sw-shop .sw-range { block-size:30px; margin-block:6px; }
#sw-shop .sw-range-track,#sw-shop .sw-range-fill { inset-block-start:12px; block-size:6px; }
#sw-shop .sw-range-track { background:var(--sw-field); }
#sw-shop .sw-range-fill { background:var(--sw-ink); }
#sw-shop .sw-range input { block-size:30px; }
#sw-shop .sw-range input::-webkit-slider-thumb { inline-size:20px; block-size:24px; border-radius:5px; border:1.5px solid var(--sw-ink); background:var(--sw-white); box-shadow:0 1px 3px color-mix(in srgb,var(--sw-ink) 15%,transparent); }
#sw-shop .sw-range input::-moz-range-thumb { inline-size:20px; block-size:24px; border-radius:5px; border:1.5px solid var(--sw-ink); background:var(--sw-white); }
#sw-shop .sw-range-note { text-align:center; font-size:13px; color:var(--sw-muted)!important; }
#sw-shop .sw-range-note span { display:inline-block; }
#sw-shop .sw-toolbar { border-color:var(--sw-rule); gap:12px; padding-block-end:18px; }
#sw-shop .sw-member { font-size:16px; font-weight:700; }
#sw-shop .sw-member-saved { border-color:var(--sw-field); background:var(--sw-white); color:var(--sw-ink); }
#sw-shop .sw-member-saved[aria-pressed=true] { background:var(--sw-ink); color:var(--sw-lime); }
#sw-shop .sw-member-badge { color:var(--sw-ink); border-color:var(--sw-ground); background:var(--sw-lime); }
#sw-shop .sw-tools { display:flex; flex-wrap:wrap; inline-size:auto; gap:10px; margin-inline-start:auto; }
#sw-shop .sw-domain-control>span,#sw-shop .sw-sort-control>span { color:var(--sw-ink-2); }
#sw-shop .sw-search { border-color:var(--sw-field); border-radius:16px; background:var(--sw-white); }
#sw-shop .sw-search:focus-within { border-color:var(--sw-ink); box-shadow:0 0 0 3px var(--sw-focus)!important; }
#sw-shop .sw-chip,#sw-shop .sw-sort-menu summary,#sw-shop .sw-tld-menu summary { border-color:var(--sw-field); background:var(--sw-white); }
#sw-shop .sw-sort-menu summary,#sw-shop .sw-tld-menu summary { border-radius:999px; }
#sw-shop .sw-sort-options,#sw-shop .sw-tld-options { background:var(--sw-white); border-color:var(--sw-field); }
#sw-shop .sw-sort-options button:hover,#sw-shop .sw-tld-options button:hover { background:var(--sw-panel); }
#sw-shop .sw-view { background:var(--sw-rule); }
#sw-shop .sw-view .sw-icon { inline-size:38px; min-block-size:34px; }
#sw-shop .sw-view [aria-pressed=true] { background:var(--sw-white); color:var(--sw-ink); }
#sw-shop .sw-active .sw-chip { min-block-size:34px; border:1.5px solid var(--sw-ink); }
#sw-shop .sw-active { margin-block-start:14px; }
#sw-shop .sw-active:empty { margin:0; }
#sw-shop .sw-filter-trigger.is-active { background:var(--sw-ink); color:var(--sw-white); }
#sw-shop .sw-filter-count { display:grid; place-items:center; min-inline-size:20px; block-size:20px; padding-inline:4px; border-radius:999px; background:var(--sw-lime); color:var(--sw-ink); }
#sw-shop .sw-more .sw-chip { min-block-size:54px; inline-size:100%; border:1.5px solid var(--sw-field); background:none; border-radius:999px; }
#sw-shop .sw-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 24px; border:1px solid var(--sw-rule); border-radius:20px; background:var(--sw-white); }
#sw-shop .sw-empty h2 { font-size:20px; font-weight:700; }
#sw-shop .sw-empty p { font-size:15.5px; color:var(--sw-muted); }
#sw-shop .sw-empty h3 { font-size:13.5px; }
#sw-shop .sw-fix { display:flex; align-items:center; gap:10px; inline-size:100%; max-inline-size:420px; min-block-size:46px; padding-inline:16px; border:1.5px solid var(--sw-field); border-radius:14px; background:var(--sw-white); font-size:14.5px; font-weight:600; }
#sw-shop .sw-fix>span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sw-shop .sw-fix>span:last-child { flex-shrink:0; margin-inline-start:auto; font-size:13.5px; color:var(--sw-link); }
#sw-shop .sw-fix:hover { border-color:var(--sw-ink); background:var(--sw-panel); }
#sw-shop .sw-primary { min-block-size:48px; background:var(--sw-ink); color:var(--sw-lime)!important; }
#sw-shop :is(.sw-side,.sw-toolbar,.sw-sheet,.sw-active,.sw-more,.sw-empty) :is(button,input,summary):focus-visible { outline:2px solid var(--sw-ink)!important; outline-offset:3px!important; }
#sw-shop .sw-grid { grid-template-columns:minmax(0,1fr); column-gap:8px; row-gap:10px; }
#sw-shop .sw-grid.is-list { grid-template-columns:minmax(0,1fr); }
#sw-shop.g-float .sw-card { border-color:transparent!important; box-shadow:0 1px 2px rgba(22,51,0,.06),0 0 0 1px rgba(22,51,0,.04); }
#sw-shop.g-float .sw-card:hover { box-shadow:0 22px 44px -24px rgba(22,51,0,.38),0 0 0 1px rgba(22,51,0,.05); }
#sw-shop.g-float .sw-grid { column-gap:8px; row-gap:10px; }
#sw-shop.g-border .sw-shell { border-block:1px solid var(--sw-rule); }
#sw-shop.g-panel .sw-results { padding:18px; border-radius:var(--brandagy-card-radius,20px); background:var(--sw-panel); }
#sw-shop.g-float .sw-card { border-color:transparent; }
/* Keep the shop cards at the same desktop measure as the cards in the home
   rows, packed 8px apart from the start of the row. The extra space belongs
   to the catalogue, not to a stretched card or a widened gap. */
@container sw (min-width:620px) { #sw-shop .sw-grid {grid-template-columns:repeat(2,210px);justify-content:start;} }
@container sw (min-width:900px) { #sw-shop .sw-grid {grid-template-columns:repeat(4,210px);justify-content:start;} }
@container sw (min-width:1000px) {
 #sw-shop .sw-shell {grid-template-columns:250px minmax(0,1fr);gap:40px;}
 #sw-shop .sw-side {display:block;position:sticky;inset-block-start:100px;align-self:start;}
 #sw-shop .sw-grid {grid-template-columns:repeat(4,210px);justify-content:start;}
 #sw-shop.g-border .sw-side {border-inline-end:1px solid var(--sw-rule);padding-inline-end:28px;}
 #sw-shop.g-panel .sw-side {background:var(--sw-panel);border-radius:20px;padding:20px 18px;}
}
@container sw (max-width:999px) {
 #sw-shop .sw-side {display:none;}
 #sw-shop .sw-sheet .sw-check {min-block-size:48px;}
 #sw-shop .sw-sfind {min-block-size:46px;}
 #sw-shop .sw-sfind input {font-size:16px;}
 #sw-shop .sw-filter-dialog {max-block-size:86dvh;border-radius:22px 22px 0 0;}
 #sw-shop .sw-filter-dialog[open] {animation:sw-sheet-in 280ms ease-out;}
 #sw-shop .sw-filter-dialog::backdrop {background:color-mix(in srgb,var(--sw-ink) 42%,transparent);}
 #sw-shop .sw-sheet-body {padding:18px 20px 24px;}
 #sw-shop .sw-sheet-foot {background:var(--sw-ground);border-color:var(--sw-rule);}
}
@container sw (max-width:619px) {
 #sw-shop .sw-shell {padding-inline:16px;}
 #sw-shop .sw-toolbar {flex-wrap:wrap;}
 #sw-shop .sw-tools {inline-size:100%;margin:0;gap:8px;}
 #sw-shop .sw-tools>div {min-inline-size:0;}
 #sw-shop .sw-domain-control,#sw-shop .sw-sort-control {flex:1;}
 #sw-shop .sw-sort-menu summary,#sw-shop .sw-tld-menu summary {padding-inline:9px;gap:5px;white-space:normal;}
 #sw-shop .sw-grid.is-list {grid-template-columns:minmax(0,1fr);}
}
/*
 * Toolbar on tablet and phone. The greeting gets its own line (it was being
 * squeezed into two lines beside the controls), then the controls sit on a
 * grid of equal-height pills:
 *   tablet  — Filters · Domains · Sort · … · Grid/List
 *   phone   — Filters · … · Grid/List
 *             Domains | Sort
 * .sw-tools becomes transparent to the grid so its menus place like siblings.
 */
@container sw (max-width:999px) {
 #sw-shop .sw-toolbar {display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:12px 8px;padding-block-end:14px;}
 #sw-shop .sw-tools {display:contents;}
 #sw-shop .sw-member {grid-column:1 / -1;grid-row:1;min-inline-size:0;gap:10px;font-size:18px;font-weight:700;line-height:1.3;}
 #sw-shop .sw-member>span {min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 #sw-shop .sw-filter-trigger {grid-column:1;grid-row:2;min-block-size:44px;padding-inline:14px;gap:6px;font-size:14px!important;white-space:nowrap;}
 #sw-shop .sw-domain-control {grid-column:2;grid-row:2;}
 #sw-shop .sw-sort-control {grid-column:3;grid-row:2;}
 #sw-shop .sw-domain-control,#sw-shop .sw-sort-control {min-inline-size:0;justify-content:stretch;}
 #sw-shop .sw-domain-control>span,#sw-shop .sw-sort-control>span {display:none;}
 #sw-shop .sw-tld-menu,#sw-shop .sw-sort-menu {inline-size:100%;}
 #sw-shop .sw-sort-menu summary,#sw-shop .sw-tld-menu summary {min-block-size:44px;padding-inline:14px 12px;gap:6px;font-size:14px;white-space:nowrap;overflow:hidden;}
 #sw-shop .sw-sort-menu summary svg,#sw-shop .sw-tld-menu summary svg {flex:none;}
 #sw-shop .sw-sort-options,#sw-shop .sw-tld-options {inline-size:max(100%,240px);max-inline-size:calc(100cqi - 32px);}
 #sw-shop .sw-view {grid-column:4;grid-row:2;justify-self:end;padding:3px;}
 #sw-shop .sw-view .sw-icon {inline-size:40px;min-block-size:38px;}
}
@container sw (max-width:619px) {
 #sw-shop .sw-toolbar {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
 #sw-shop .sw-filter-trigger {grid-column:1;grid-row:2;justify-self:start;}
 #sw-shop .sw-view {grid-column:2;grid-row:2;}
 #sw-shop .sw-domain-control {grid-column:1;grid-row:3;}
 #sw-shop .sw-sort-control {grid-column:2;grid-row:3;}
 /* The menus open under their own pill and never past the screen edge. */
 #sw-shop .sw-domain-control .sw-tld-options {inset-inline:0 auto;}
 #sw-shop .sw-sort-control .sw-sort-options {inset-inline:auto 0;}
}
/* The narrowest phones: the two menus keep their words, with less padding. */
@container sw (max-width:359px) {
 #sw-shop .sw-toolbar {column-gap:6px;}
 #sw-shop .sw-sort-menu summary,#sw-shop .sw-tld-menu summary {padding-inline:10px 8px;gap:4px;font-size:13px;}
}
@keyframes sw-sheet-in {from {transform:translateY(100%);}to {transform:translateY(0);}}
@media(prefers-reduced-motion:reduce) { #sw-shop .sw-filter-dialog[open] {animation:none;} #sw-shop .sw-avatar-photo,#sw-shop .sw-help span {transition:none;} }