/* PrideShop instant search — the close controls. AWS's own stylesheet dresses everything
   else; these two buttons are ours, so they carry their own styling. */
.aws-search-result .psx-close{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;margin-left:auto;padding:8px 12px;border:0;background:#fff;color:#6b6b6b;font:600 13px/1 inherit;cursor:pointer;border-bottom:1px solid #eee;width:100%;justify-content:flex-end}
.aws-search-result .psx-close-x{font-size:20px;line-height:1;color:#171717}
.aws-search-result .psx-close:hover,.aws-search-result .psx-close:focus-visible{color:#CD1B1E}
.aws-search-result .psx-close-foot{display:block;width:100%;padding:14px;border:0;border-top:1px solid #eee;background:#fafafa;color:#171717;font:600 14px/1 inherit;cursor:pointer}
.aws-search-result .psx-close-foot:hover,.aws-search-result .psx-close-foot:focus-visible{background:#f0f0f0;color:#CD1B1E}
/* Phones: the panel can fill the screen, so the top control is a proper tap target and the
   list is capped so the bottom "Close search" is always reachable. */
@media (max-width:767px){
  .aws-search-result .psx-close{min-height:44px;padding:10px 14px;font-size:14px}
  .aws-search-result .psx-close-x{font-size:24px}
}

/* Categories as one wrapped strip of chips rather than a row each (Alex 2026-09-03) —
   short labels stop eating a full line, and the "Categories" label means a strip of five
   can never be misread as "no products found". */
.aws-search-result .psx-block{padding:10px 14px 0}
.aws-search-result .psx-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a;font-weight:700;margin-bottom:6px}
/* 18px, not 12: the divider was sitting right on the chips and read as if it were attached
   to them (Alex 2026-09-03). */
.aws-search-result .psx-cats{padding-bottom:18px;border-bottom:1px solid #eee}
.aws-search-result .psx-chips{display:flex;flex-wrap:wrap;gap:6px}
.aws-search-result .psx-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid #e2e2e2;border-radius:999px;background:#fafafa;color:#171717!important;font-size:13px;line-height:1.15;text-decoration:none!important;white-space:nowrap}
.aws-search-result .psx-chip:hover,.aws-search-result .psx-chip:focus-visible{background:#f0f0f0;border-color:#cfcfcf;color:#CD1B1E!important}
.aws-search-result .psx-chip-product_tag{background:#fff;border-style:dashed}
.aws-search-result .psx-chip-n{font-size:11px;color:#8a8a8a;font-variant-numeric:tabular-nums}
@media (max-width:767px){
  .aws-search-result .psx-chip{font-size:12.5px;padding:7px 10px}   /* still a 44px-ish target with the gap */
  .aws-search-result .psx-block{padding:8px 12px 0}
  .aws-search-result .psx-cats{padding-bottom:16px}
}

/* Phones: drop the blurb from the product rows. Five rows with a 2-line excerpt made the
   panel 712px on an 844px screen — the "fills the whole screen" complaint. Thumbnail, name
   and price are what people scan (NN/g: enriched suggestion text is rarely the payload). */
@media (max-width:767px){
  .aws-search-result .aws_result_excerpt{display:none}
  .aws-search-result .aws_result_item{padding-top:8px;padding-bottom:8px}
}

/* Phones: a compact product row — 40px thumbnail, tight padding — so five rows plus the
   category strip fit without an internal scroll area. */
@media (max-width:767px){
  /* 56px, not 40: at 40 the product was unrecognisable next to two lines of text (Alex). */
  .aws-search-result .aws_result_image{width:56px;min-width:56px}
  .aws-search-result .aws_result_image img{width:56px;height:56px;object-fit:contain}
  .aws-search-result .aws_result_item{padding-top:7px;padding-bottom:7px}
  .aws-search-result .aws_result_title{font-size:13.5px;line-height:1.25}
  .aws-search-result .aws_result_price{font-size:13px}
}

/* AWS's stylesheet caps .aws_result_scroll at 500px with overflow-y:auto, which silently cut
   off the fifth product and the "View all" link. Baymard's pattern #4 is to avoid a scroll
   area inside autocomplete entirely — let the panel take its natural height instead. */
.aws-search-result .aws_result_scroll{max-height:none!important;overflow:visible!important}

/* Light rainbow tints for the category chips, in flag order, matching the tinted bands on the
   home page. Kept pale so the text stays legible (all ≥ 7:1 on the tint) and decorative only —
   the chip's label and count carry the meaning, never the hue. */
.aws-search-result .psx-c0{background:#fdecec;border-color:#f6cccc}   /* red    */
.aws-search-result .psx-c1{background:#fdf1e3;border-color:#f6ddbd}   /* orange */
.aws-search-result .psx-c2{background:#fdf9e0;border-color:#f2e9b3}   /* yellow */
.aws-search-result .psx-c3{background:#e9f6ec;border-color:#c7e6cf}   /* green  */
.aws-search-result .psx-c4{background:#e8f1fb;border-color:#c6dcf2}   /* blue   */
.aws-search-result .psx-c5{background:#f2ecf9;border-color:#dccdee}   /* violet */
.aws-search-result .psx-chip:hover,.aws-search-result .psx-chip:focus-visible{filter:brightness(.96);color:#171717!important}
.aws-search-result .psx-chip-product_tag{border-style:dashed}

/* Keyboard: the active option is highlighted while focus stays in the input (ARIA combobox), so
   it must be visible without :hover or :focus. */
.aws-search-result .aws_result_item.psx-active,
.aws-search-result .psx-chip.psx-active{outline:2px solid #CD1B1E;outline-offset:-2px;background:#fff7f7}
.aws-search-result .psx-pg.psx-active{outline:2px solid #CD1B1E;outline-offset:-2px}
.aws-search-result .aws_result_item.psx-active .aws_result_title{text-decoration:underline}

/* Numbered pager: clicking a number REPLACES the visible page (not a load-more). */
.aws-search-result .psx-pager{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;
  padding:12px 10px;border-top:1px solid #eee;background:#fff}
.aws-search-result .psx-pg{min-width:34px;height:34px;padding:0 8px;border:1px solid #e2e2e2;border-radius:8px;
  background:#fff;color:#171717;font:600 13.5px/1 inherit;cursor:pointer}
.aws-search-result .psx-pg:hover:not([disabled]),.aws-search-result .psx-pg.psx-active{border-color:#CD1B1E;color:#CD1B1E}
.aws-search-result .psx-pg[aria-current=page]{background:#CD1B1E;border-color:#CD1B1E;color:#fff}
.aws-search-result .psx-pg[disabled]{opacity:.35;cursor:default}
.aws-search-result .psx-pg-arrow{font-size:17px;line-height:1}
.aws-search-result .psx-pg-gap{padding:0 2px;color:#9a9a9a}

/* Phone: the sticky "× Close" at the top of the panel is always visible, so the duplicate at the
   foot only costs height (48px) in a panel that has to fit the window. Desktop keeps both. */
@media (max-width:767px){
  .aws-search-result .psx-close-foot{display:none}
}