.search__input.field__input {
  padding-right: 5rem;
}

.search__button {
  right: var(--inputs-border-width);
  top: var(--inputs-border-width);
}

.search__button:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.search__button:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.search__button:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.search__button .icon {
  height: 2.4rem;
  width: 2.4rem;
}

predictive-search .search__input {
  height: 4rem;
}

/* Remove extra spacing for search inputs in Safari */
input::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* ---- Dynasort instant search: match Golf Discount native predictive UI ---- */

.dynasort-predict-panel.dynasort-predict-panel {
  border: 0;
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  color: #111;
  font-size: 16px;
  /* For an exact typeface match, point this at the theme's heading font, e.g.
     font-family: var(--font-heading-family, inherit); (Dawn-family variable) */
}

/* Section headings: letter-spaced caps with an underline rule */
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-heading {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  color: #555;
  padding: 22px 24px 10px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 8px;
}

/* All rows: uppercase, bold, roomier, wrap instead of truncating
   ("BRANDS > PING > MR PING COLLECTION" wraps to two lines natively) */
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-item {
  padding: 10px 24px;
  gap: 18px;
}
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-title {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: normal;
  line-height: 1.3;
}
.dynasort-predict-panel .dynasort-predict-cols .dynasort-predict-title { font-size: 17px; }
.dynasort-predict-panel .dynasort-predict-prods .dynasort-predict-title { font-size: 20px; }

/* Typed-term highlight: yellow highlighter instead of gray pill */
.dynasort-predict-panel.dynasort-predict-panel mark {
  background: #ffe600;
  color: #111;
  border-radius: 0;
  padding: 0 2px;
  font-weight: inherit;
}

/* Native UI shows no prices in the dropdown; delete this rule to keep them */
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-price { display: none; }

/* Thumbnails: larger, square-cornered, contain-fit on white like the native cards */
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-thumb {
  width: 64px;
  height: 64px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}
/* Collection rows have no thumbs natively; ours may include one, hide to match */
.dynasort-predict-panel .dynasort-predict-cols .dynasort-predict-thumb { display: none; }

/* Suggestions column: wider (stops the "Mr PI..." truncation), no vertical divider */
.dynasort-predict-panel .dynasort-predict-grid .dynasort-predict-cols {
  flex: 0 0 34%;
  border-right: 0;
  border-left: 0;
  padding-bottom: 16px;
}

/* Footer: left-aligned bold caps with heavy top rule and a right arrow */
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  padding: 18px 24px;
  border-top: 2px solid #111;
}
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-all::after {
  content: "\2192";
  font-size: 1.2em;
  line-height: 1;
}

/* Softer hover so the bold rows don't get a heavy gray band */
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-item:hover,
.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-item.is-active {
  background: rgba(0, 0, 0, .04);
}

/* Size tune: slightly smaller type across the dropdown */
.dynasort-predict-panel.dynasort-predict-panel { font-size: 14px; }

.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-heading {
  font-size: 12px;
  padding: 18px 24px 8px;
}

.dynasort-predict-panel .dynasort-predict-cols .dynasort-predict-title { font-size: 15px; }
.dynasort-predict-panel .dynasort-predict-prods .dynasort-predict-title { font-size: 17px; }

.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-thumb {
  width: 56px;
  height: 56px;
}

.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-item { padding: 8px 24px; }

.dynasort-predict-panel.dynasort-predict-panel .dynasort-predict-all {
  font-size: 15px;
  padding: 15px 24px;
}

/* Dynasort filters: opaque surfaces (theme defines --color-background as an RGB triplet) */
.dynasort-search .dynasort-search__fpanel,
.dynasort-search .dynasort-search__fbtn,
.dynasort-search .dynasort-search__sort,
.dynasort-search .dynasort-search__fprice input { background: #fff; }


/* ---- Dynasort search results: match the collection card look ---- */

/* The collection grid renders inside the theme's narrow wrapper (130rem);
   the search section inherits the full 180rem page width, which is why the
   same font sizes were reading smaller. Cap the section so 4-up cards match
   the collection card width, then the theme's own sizes line up 1:1. */
.dynasort-search { max-width: 130rem; }

/* Boxed cards: white box, theme card shadow, grey image stage */
.dynasort-search .dynasort-search__grid { gap: 1.5rem; }
.dynasort-search .dynasort-search__card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 3px #cdcdcd;
}
.dynasort-search .dynasort-search__media {
  border-radius: 0;            /* the card is the rounded box */
  background: #f2f2f2;         /* .card__inner grey stage */
}
.dynasort-search .dynasort-search__media img {
  object-fit: contain;
  padding: 7%;
  mix-blend-mode: multiply;    /* white photo backgrounds read as the grey stage */
}

/* Text block: inset inside the box */
.dynasort-search .dynasort-search__title { margin: 1.6rem 2rem 0.4rem; }
.dynasort-search .dynasort-search__rating { margin-left: 2rem; margin-right: 2rem; }
.dynasort-search .dynasort-search__price { margin: 0.6rem 2rem 1.8rem; }
.dynasort-search .dynasort-search__swatches { margin: 0 2rem 1.8rem; }
.dynasort-search .dynasort-search__vendor { margin-left: 2rem; margin-right: 2rem; }

/* Title: .card__heading.h4 (Outfit 700, 1.8rem desktop / 1.5rem mobile) */
.dynasort-search .dynasort-search__title {
  font-family: var(--font-heading-family, 'Outfit', sans-serif);
  font-size: calc(var(--font-heading-scale, 1) * 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--color-foreground, 27, 27, 27));
}
@media screen and (min-width: 750px) {
  .dynasort-search .dynasort-search__title { font-size: calc(var(--font-heading-scale, 1) * 1.8rem); }
}

/* Price block: .card .price metrics, stacked sale layout like the theme:
   red sale price, struck compare under it, save note on its own line */
.dynasort-search .dynasort-search__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  line-height: 1.5;
}
.dynasort-search .dynasort-search__price ins { order: 1; }
.dynasort-search .dynasort-search__price del {
  order: 2;
  margin-right: 0;
  font-size: 1.6rem;
  color: rgba(var(--color-foreground, 27, 27, 27), 0.75);
}
.dynasort-search .dynasort-search__price .dynasort-search__save {
  order: 3;
  margin-left: 0;
  font-size: 1.6rem;
  color: rgba(27, 27, 27, 0.7);
}
.dynasort-search .dynasort-search__price:has(del) ins { color: #e15142; }
@media screen and (max-width: 749px) {
  .dynasort-search .dynasort-search__price { font-size: 1.4rem; }
  .dynasort-search .dynasort-search__price del,
  .dynasort-search .dynasort-search__price .dynasort-search__save { font-size: 1.3rem; }
}

/* Badges: theme pill (.badge) metrics, top-right on the image stage;
   colors stay app-managed (Sale red, Preorder green) */
.dynasort-search .dynasort-search__badges {
  left: auto;
  right: 1.4rem;
  top: 1.4rem;
}
.dynasort-search .dynasort-search__badge {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem;
  border-radius: 4rem;
  font-weight: 400;
}

/* Click-to-reveal control: red emphasis like the theme's hidden-price text */
.dynasort-search .dynasort-search__price-reveal {
  color: #e15142;
  font-weight: 600;
  font-size: 1.6rem;
  text-decoration: none;
  margin: 0.6rem 2rem 1.8rem;
}

/* Color name off, like the native cards */
.dynasort-search .dynasort-search__colorname { display: none; }
.dynasort-recs__card .dynasort-recs__colorname { display: none; }

/* ---- Square corners + collection-style overrides ---- */

/* Native cards are square-cornered; the rounding was ours. Badges stay pills. */
.dynasort-search .dynasort-search__card { border-radius: 0; }
.dynasort-search .dynasort-search__media { border-radius: 0; }

/* Filter/sort controls follow the theme's 8px button and input radius */
.dynasort-search.dynasort-search { --ds-control-radius: 8px; }
.dynasort-search .dynasort-search__fpanel { border-radius: 8px; }

/* Card titles: theme overrides .card__heading.h4 to 19px, capitalized */
.dynasort-search .dynasort-search__title {
  font-size: 19px;
  text-transform: capitalize;
}
@media screen and (min-width: 750px) {
  .dynasort-search .dynasort-search__title { font-size: 19px; }
}

/* Prices are semibold on native cards (.card .price { font-weight: 600 }) */
.dynasort-search .dynasort-search__price { font-weight: 600; }

/* "N results for query": match the collection page title
   (h1.h2 at 28px; this theme's headings are Outfit, 600, uppercase) */
.dynasort-search .dynasort-search__summary {
  font-family: var(--font-heading-family, 'Outfit', sans-serif);
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: calc(1 + 0.2 / var(--font-heading-scale, 1));
  color: rgb(var(--color-foreground, 27, 27, 27));
  padding-top: 10px;
}