/*
  Deal Network shared components  (deal-design-system 0.8.1, 30.09.2026; 0.8.1: .cats links carry their own type (15px/600/ink, Astra link size and colour no longer leak), equal row heights, hover underline only on hover-capable devices; tab bar on phones: the sort control is a 44px icon (sort glyph plus chevron, the native select keeps its accessible label) and the tabs take the rest of the row, counts dropped, then the tabs wrapped, by bof-script.js when they still do not fit; reveal button padding 12px so an 8 character masked code keeps 12px of air on desktop; the brand feed fills the 920px column even where a site's Additional CSS caps .bof-wrapper at 900px)
  ---------------------------------------------------------------------
  The owner-approved design (reports/design_final_20260930/components.css) as ONE shared
  component file, scoped under the body class `ds2` (added by deal-design-system.php) so
  Astra and the old per-plugin CSS cannot leak into it and it cannot leak out.
  Every value is a token from design/tokens.json, via the --ds-* aliases in design-system.css.
  Figtree 400/600/700 only. Plugins emit these class names (.row .fg .btn .tab .code ...)
  and keep only layout glue in their own CSS. No dark mode: the site always renders light.
  Sections: tokens, layout, type, logo tile, figure, buttons + code field, facts + tab row,
  offer rows + best card, lists (categories, similar, facts), hero + search.
  Header, footer and page container are Astra: see ux-polish.
*/

.ds2{
  --font:var(--ds-font);
  --page:var(--ds-page); --subtle:var(--ds-subtle); --hair:var(--ds-line);
  --muted:var(--ds-muted); --ink:var(--ds-ink);
  --g50:var(--ds-g50); --g100:var(--ds-g100); --g200:var(--ds-g200);
  --g600:var(--ds-g600); --g700:var(--ds-g700); --g900:var(--ds-g900);
  --radius-panel:var(--ds-r); --radius-btn:var(--ds-r-btn); --radius-tile-s:var(--ds-r-sm);
  --radius-tile:var(--ds-r); --radius-chip:var(--ds-r-chip);
  --fs-1:13px; --lh-1:18px; --fs-2:15px; --lh-2:22px; --fs-3:18px; --lh-3:24px;
  --fs-4:24px; --lh-4:28px; --fs-5:34px; --lh-5:40px;
  --s1:8px; --s2:16px; --gap:32px; --pad:16px; --gutter:16px; --wrap:920px;
  --tile:40px; --btn-h:44px;
}
@media(min-width:768px){.ds2{--pad:20px;--gutter:24px;--gap:48px}}

/* resets inside our own components only (Astra sets margins on p, ul, h1-h6) */
.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.hero,.hero-brand,.facts,.sec,.crumbs,.row,.prose,.dek,.note,.disc,.past){font-family:var(--font)}
.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.hero,.hero-brand,.sec,.row,.past) :is(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.ds2 :is(.rows,.kv,.sim,.cats) :is(ul,ol){padding:0;list-style:none}
.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.row,.hero,.sec) *,.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.row,.hero,.sec) *::before,.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.row,.hero,.sec) *::after{box-sizing:border-box}
.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.row,.hero,.sec) img,.ds2 :is(.rows,.row,.sim,.cats) svg{display:block;max-width:100%}
.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.row,.hero,.sec) :focus-visible{outline:3px solid var(--g600);outline-offset:2px}
.ds2 :is(.row,.facts,.prose,.disc,.note,.crumbs) a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hair)}
.ds2 :is(.row,.facts,.prose,.disc,.note) a:hover{text-decoration-color:var(--ink)}
.ds2 .muted{color:var(--muted)}
.ds2 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ds2 :is(.rows,.tabbar,.kv,.sim,.cats,.row,.hero,.hero-brand,.sec,.facts){font-variant-numeric:lining-nums tabular-nums}
.ds2 [hidden]{display:none!important}
/* buttons and the reveal field: no underline, white text; beats the link rule above */
.ds2 a.btn,.ds2 a.btn:hover,.ds2 .cats a,.ds2 .sim a,.ds2 a.lnk{text-decoration:none}
.ds2 .row a.btn{color:#fff}
.ds2 .row a.btn.btn--line{color:var(--g700)}

/* 3 ---------- layout ---------- */
.ds2 .bof-wrapper{max-width:none!important}
.ds2 .wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.ds2 .sec{margin-top:var(--gap)}
.ds2 .sec--tight{margin-top:var(--s2)}
.ds2 .sec>.h2,
.ds2 .sec__head{margin-bottom:var(--s2)}
.ds2 .sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.ds2 .sec__head .h2{margin:0}

/* 5 ---------- type ---------- */
.ds2 .crumbs{padding-top:var(--s2);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--muted)}
.ds2 .crumbs a{color:var(--muted);display:inline-block;padding:13px 2px;margin:-13px -2px}
.ds2 .crumbs i{font-style:normal;margin:0 4px}
.ds2 .h1{font-weight:700;font-size:var(--fs-4);line-height:var(--lh-4);letter-spacing:-.015em;text-wrap:balance}
@media(min-width:768px){
.ds2 .h1{font-size:var(--fs-5);line-height:var(--lh-5)}
}
.ds2 .h2{font-weight:700;font-size:var(--fs-3);line-height:var(--lh-3);letter-spacing:-.008em}
@media(min-width:768px){
.ds2 .h2{font-size:var(--fs-4);line-height:var(--lh-4)}
}
.ds2 .dek{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);margin-top:var(--s1)}
.ds2 .note{margin-top:12px;font-size:var(--fs-1);line-height:var(--lh-1);color:var(--muted);max-width:72ch}
.ds2 .prose{max-width:66ch}
.ds2 .prose p+p{margin-top:12px}
.ds2 .disc{margin-top:var(--gap);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--muted);max-width:72ch}
.ds2 .lb{background:none;border:0;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair);font-size:inherit;line-height:inherit;display:inline-block;padding:13px 4px;margin:-13px -4px}
.ds2 .lb:hover{text-decoration-color:var(--ink)}
.ds2 .lnk{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;color:var(--g700);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--g200)}
.ds2 .lnk svg{width:16px;height:16px}

/* 6 ---------- logo tile: rounded square, never a circle ----------
   fill    : logo has an opaque non-white background, it IS the tile (no border, no padding)
   contain : logo sits inside the white tile with 8px padding
   mono    : letter tile (source under 64px, circular artwork, or no usable image) */
.ds2 .lo{flex:none;width:var(--tile);height:var(--tile);border-radius:var(--radius-tile-s);background:#fff;border:1px solid var(--hair);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.ds2 .lo img{width:100%;height:100%;object-fit:contain;padding:8px}
.ds2 .lo--m{background:var(--subtle);color:var(--ink);font-weight:600;font-size:var(--fs-3);line-height:1}
.ds2 .lo--m img{display:none}
.ds2 .lo--fill{border:0}
.ds2 .lo--fill img{padding:0;object-fit:cover}
.ds2 .lo--l{--tile:56px;border-radius:var(--radius-tile)}
.ds2 .lo--l.lo--m{font-size:var(--fs-4)}
@media(min-width:768px){
.ds2 .lo--l{--tile:64px}
}

/* 7 ---------- figure: the one hero number of a row ---------- */
.ds2 .fg{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:5px;white-space:nowrap;font-weight:700;font-size:var(--fs-4);line-height:var(--lh-4);color:var(--g700);letter-spacing:-.01em}
.ds2 .fg small{font-size:var(--fs-1);line-height:1;font-weight:400;color:var(--muted);letter-spacing:0}
.ds2 .fg .u{font-size:var(--fs-3);font-weight:700;margin-left:1px}

/* 8 ---------- buttons (B2): filled = best offer + codes, outlined = other sales ---------- */
.ds2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 20px;border:1px solid var(--g600);border-radius:var(--radius-btn);background:var(--g600);color:#fff;font-weight:600;font-size:var(--fs-2);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;width:100%}
.ds2 .btn:hover{background:var(--g700);border-color:var(--g700)}
.ds2 .btn svg{width:16px;height:16px;flex:none}
.ds2 .btn--line{background:var(--g50);color:var(--g700)}
/* G50 fill so it never reads as the white code field */
.ds2 .btn--line:hover{background:var(--g100);border-color:var(--g600);color:var(--g700)}
@media(min-width:768px){
.ds2 .btn{width:auto;min-width:160px}
}
.ds2 .code{display:inline-flex;height:var(--btn-h);width:100%;max-width:100%}
.ds2 .code__w{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:0 14px 0 18px;border:1px solid var(--g600);border-right:0;border-radius:var(--radius-btn) 0 0 var(--radius-btn);background:#fff;font-weight:700;font-size:var(--fs-2);line-height:1;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
/* reveal button: tinted like the outlined sale button (G50 fill, G600 border, G700 text); only the best offer's is filled */
.ds2 .code .btn{width:auto;min-width:112px;flex:none;padding:0 12px;border-radius:0 var(--radius-btn) var(--radius-btn) 0;background:var(--g50);color:var(--g700)}
.ds2 .code .btn:hover{background:var(--g100);border-color:var(--g600);color:var(--g700)}
.ds2 .row--top .code .btn{background:var(--g600);color:#fff}
.ds2 .row--top .code .btn:hover{background:var(--g700);border-color:var(--g700);color:#fff}

/* 9 ---------- facts line and tab row ---------- */
.ds2 .facts{display:flex;flex-wrap:wrap;gap:0 var(--s2);margin-top:var(--s1);color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
/* tab row: ONE 1px hairline (the panel border); the active 2px G700 underline overlaps that same line */
/* flat, full bleed to the page gutters, opaque white, ONE bottom hairline, no radius: content scrolling under it is never sliced by a rounded edge */
.ds2 .tabbar{display:flex;justify-content:space-between;align-items:center;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);background:#fff;border:0;border-bottom:1px solid var(--hair);border-radius:0}
.ds2 .tabbar--sticky{position:sticky;top:0;z-index:20}
.ds2 .tabs{display:flex;gap:24px;min-width:0;flex:1}
.ds2 .tab{position:relative;flex:none;min-height:48px;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--muted);cursor:pointer;white-space:nowrap;text-decoration:none;font-size:var(--fs-2);font-weight:600}
.ds2 .tab .n{font-size:var(--fs-1);font-weight:400}
.ds2 .tab[aria-selected=true],
.ds2 .tab[aria-current=page]{color:var(--ink)}
.ds2 .tab[aria-selected=true]::after,
.ds2 .tab[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--g700)}
.ds2 .tab:hover{color:var(--ink)}
.ds2 .select{min-height:44px;background:transparent;border:0;color:var(--muted);font-size:var(--fs-2);cursor:pointer;padding:0 4px}
/* sort control lives INSIDE the tab bar, at the right edge, on every width: a compact native select,
   no separate row. Chevron drawn with two gradients (no image, no colour literal). */
.ds2 .tabbar{flex-wrap:nowrap;column-gap:12px}
.ds2 .clo-wrapper .sec__head{align-items:center}
.ds2 .sec__head .h2{flex:1 1 auto;min-width:0}
.ds2 .sec__head .clo-ctl{flex:none;display:flex;align-items:center;gap:12px}
.ds2 .clo-ctl .tab[aria-pressed=true]{color:var(--ink)}
.ds2 .clo-ctl .tab[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--g700)}
.ds2 .tabbar .select,.ds2 .clo-ctl .select{flex:none;display:block;width:auto;max-width:96px;min-width:0;height:44px;margin:0;padding:0 16px 0 4px;border:0;border-radius:0;box-shadow:none;font-family:var(--font);font-size:var(--fs-2);font-weight:600;line-height:44px;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 7px) 20px,calc(100% - 3px) 20px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.ds2 .tabbar .tabs{overflow-x:auto;scrollbar-width:none;padding-right:24px}
.ds2 .tabbar .tabs::-webkit-scrollbar{display:none}
/* the tabs scroll inside the bar; a right fade shows there is more */
@media(max-width:767px){
.ds2 .tabbar .tabs{-webkit-mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,black calc(100% - 24px),transparent)}
}
@media(min-width:768px){
.ds2 .tabbar .select,.ds2 .clo-ctl .select{max-width:160px}
}
/* phones: the sort control is an icon (three descending bars plus a chevron, drawn with gradients, no image);
   the selected text is transparent but stays in the native select, so the accessible name and the picker are unchanged.
   The tabs take the rest of the row and never sit under a fade: if they still do not fit without counts, bof-script.js wraps them onto a second line. */
@media(max-width:767px){
.ds2 .tabbar{column-gap:8px}
.ds2 .tabbar .tabs{flex:1 1 auto;min-width:0;padding-right:0;-webkit-mask-image:none;mask-image:none;column-gap:16px}
.ds2 .tabbar .tabs.tabs--tight .n{display:none}
.ds2 .tabbar .tabs.tabs--wrap{flex-wrap:wrap;overflow:visible;column-gap:16px;row-gap:0}
.ds2 .tabbar .select,.ds2 .clo-ctl .select{width:44px;max-width:44px;min-width:44px;padding:0;color:transparent;text-overflow:clip;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-size:14px 2px,10px 2px,6px 2px,4px 4px,4px 4px;background-position:8px 15px,8px 21px,8px 27px,calc(100% - 11px) 20px,calc(100% - 7px) 20px;background-repeat:no-repeat}
.ds2 .tabbar .select option,.ds2 .clo-ctl .select option{color:var(--ink)}
}

@media(min-width:768px){
.ds2 .tabbar{margin-inline:0;padding-inline:var(--pad)}
}
/* desktop: same flat bar, on the panel lines (no bleed) */

/* 10 ---------- offer rows: ONE card component for brand, home and category ----------
   .row = white row in a stacked panel. .row--top = the best offer: white lifted card + .best chip.
   .row--tile adds a logo tile in front (home and category, where the brand is not the page).
   Mobile: text | figure, action full width. Desktop: figure | (tile) | text | action, so the number sits next to the title. */
.ds2 .rows{margin-top:0}
.ds2 .tabbar+.rows,
.ds2 .tabbar+.past{margin-top:var(--s2)}
.ds2 .row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:12px;align-items:start;min-height:56px;padding:16px var(--pad);background:#fff;border:1px solid var(--hair);border-width:0 1px 1px}
.ds2 .row:first-child{border-top-width:1px;border-radius:var(--radius-panel) var(--radius-panel) 0 0}
.ds2 .row:last-child{border-radius:0 0 var(--radius-panel) var(--radius-panel)}
.ds2 .row:only-child{border-radius:var(--radius-panel)}
.ds2 .row--top,
.ds2 .row--top:first-child,
.ds2 .row--top:last-child{border:0;border-radius:var(--radius-panel);margin-bottom:12px;box-shadow:0 1px 3px rgba(22,32,27,.14),0 0 0 1px rgba(22,32,27,.04)}
.ds2 .row--top+.row{border-top-width:1px;border-radius:var(--radius-panel) var(--radius-panel) 0 0}
.ds2 .row--top+.row:last-child{border-radius:var(--radius-panel)}
.ds2 .best{grid-column:1/-1;justify-self:start;margin:0 0 -4px;padding:4px 12px;background:var(--g100);color:var(--g900);font-size:var(--fs-1);line-height:var(--lh-1);font-weight:700;border-radius:var(--radius-chip)}
.ds2 .row__t{font-weight:600;font-size:var(--fs-2);line-height:var(--lh-2)}
.ds2 .row__s{font-size:var(--fs-2);line-height:var(--lh-2)}
.ds2 .row__m{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:4px;font-size:var(--fs-1);line-height:var(--lh-1);color:var(--muted)}
/* meta items joined by gap, no separators to dangle */
.ds2 .row__more{display:block;margin:0 0 -8px;padding:8px 0;font-size:var(--fs-1);line-height:var(--lh-1)}
.ds2 .row__x{margin-top:0;font-size:var(--fs-2);line-height:var(--lh-2);max-width:62ch}
.ds2 .row .fg{grid-column:2}
.ds2 .row__a{grid-column:1/-1;margin-top:4px}
.ds2 .row__a>.code{width:100%}
.ds2 .row--tile{grid-template-columns:var(--tile) minmax(0,1fr) auto;column-gap:12px}
.ds2 .row--tile .tx{grid-column:2}
.ds2 .row--tile .fg{grid-column:3}
.ds2 .row--tile .row__a{grid-column:2/-1}
.ds2 .row--past{padding-top:12px;padding-bottom:12px}
.ds2 .row--past .row__t{font-weight:400;color:var(--muted)}
.ds2 .past{margin-top:12px}
.ds2 .past>.lb{color:var(--muted);min-height:44px}
@media(min-width:768px){
.ds2 .row__t{font-size:var(--fs-3);line-height:var(--lh-3)}
.ds2 .row{grid-template-columns:96px minmax(0,1fr) 232px;align-items:center;column-gap:16px}
.ds2 .row>*{grid-row:1}
.ds2 .row--top>*{grid-row:2}
.ds2 .row--top>.best{grid-row:1;grid-column:1/-1}
.ds2 .row .fg{grid-column:1;justify-self:end}
.ds2 .row .tx{grid-column:2}
.ds2 .row__a{grid-column:3;display:flex;justify-content:flex-end;margin-top:0}
.ds2 .row__a .code{width:232px}
.ds2 .row--tile{grid-template-columns:96px var(--tile) minmax(0,1fr) 232px}
.ds2 .row--tile .fg{grid-column:1}
.ds2 .row--tile>.lo{grid-column:2}
.ds2 .row--tile .tx{grid-column:3}
.ds2 .row--tile .row__a{grid-column:4}
.ds2 .row--nofig:not(.row--tile) .tx{grid-column:1/3}
.ds2 .row--past{grid-template-columns:minmax(0,1fr)}
.ds2 .row--past>*{grid-row:auto}
}

/* 11 ---------- lists: categories, similar brands, facts ---------- */
.ds2 .cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;column-gap:16px;padding:0 var(--pad);background:#fff;border:1px solid var(--hair);border-radius:var(--radius-panel)}
@media(min-width:768px){
.ds2 .cats{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
}
.ds2 .cats a{display:flex;align-items:center;gap:8px;min-height:56px;padding:12px 0;border-top:1px solid var(--hair);text-decoration:none;font-size:var(--fs-2);line-height:var(--lh-2);font-weight:600;color:var(--ink);overflow-wrap:break-word;hyphens:none}
.ds2 .cats a::after{content:"";flex:none;margin-left:auto;width:7px;height:7px;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:rotate(45deg)}
.ds2 .cats a:nth-child(-n+2){border-top:0}
@media(min-width:768px){
.ds2 .cats a:nth-child(-n+4){border-top:0}
}
.ds2 .cats a[aria-current=page]{color:var(--g700)}
@media(hover:hover){.ds2 .cats a:hover{text-decoration:underline;text-underline-offset:4px}}
.ds2 .cats__all{margin-top:var(--s1)}
.ds2 .kv{display:grid;grid-template-columns:1fr;padding:0 var(--pad);background:#fff;border:1px solid var(--hair);border-radius:var(--radius-panel)}
.ds2 .kv>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair)}
.ds2 .kv>div:last-child{border-bottom:0}
.ds2 .kv dt{color:var(--muted);font-size:var(--fs-2)}
.ds2 .kv dd{font-size:var(--fs-2);line-height:var(--lh-2);font-weight:600}
.ds2 .kv dd small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-1)}
.ds2 .sim{display:grid;grid-template-columns:1fr;column-gap:40px;padding:0 var(--pad);background:#fff;border:1px solid var(--hair);border-radius:var(--radius-panel)}
@media(min-width:768px){
.ds2 .sim{grid-template-columns:1fr 1fr}
}
.ds2 .sim a{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.ds2 .sim a:last-child{border-bottom:0}
@media(min-width:768px){
.ds2 .sim a:nth-last-child(2){border-bottom:0}
}
.ds2 .sim b{flex:1;font-weight:600;min-width:0}
.ds2 .sim span:last-child{font-size:var(--fs-1);color:var(--muted);white-space:nowrap}
@media(hover:hover){.ds2 .sim a:hover b{text-decoration:underline;text-underline-offset:3px}}

/* 12 ---------- hero and search (home, brand hero) ---------- */
.ds2 .hero{padding:var(--s2) 0 0}
@media(min-width:768px){
.ds2 .hero{padding:var(--gap) 0 0}
}
.ds2 .hero .lead{margin-top:var(--s1);max-width:56ch;color:var(--muted)}
@media(min-width:768px){
.ds2 .hero .lead{font-size:var(--fs-3);line-height:var(--lh-3)}
}
.ds2 .hero-brand{display:flex;gap:16px;align-items:center;padding:var(--s2) 0 0}
.ds2 .hero-brand .dek{margin-top:2px}
.ds2 .srch{position:relative;display:flex;margin:var(--s2) 0 0;height:52px;max-width:560px}
.ds2 .srch input{flex:1;min-width:0;height:52px;padding:0 60px 0 20px;border:1px solid var(--hair);border-radius:var(--radius-btn);background:#fff;font-size:var(--fs-2);-webkit-appearance:none}
.ds2 .srch input::placeholder{color:var(--muted);opacity:1}
.ds2 .srch input:focus{outline:3px solid var(--g600);outline-offset:1px}
.ds2 .srch button{position:absolute;right:4px;top:4px;width:44px;height:44px;border-radius:var(--radius-btn);background:var(--g600);border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* search button icon: give the svg an explicit box (an svg without width/height collapses inside a flex button) */
.ds2 .srch button svg{width:22px;height:22px;flex:none}