/* =====================================================================
   GiveRefer Stores / search results page — page-specific styles layered on
   giverefer-home.css. Loaded after it; everything is scoped under
   .gr-storespage (same element as .gr-home, so all --gr-* tokens apply).
   See docs/store-search-redesign-plan.md for the design breakdown.
   ===================================================================== */

/* Soft pink→violet wash behind the hero (this page doesn't get the
   homepage's grx-home-page class, so paint it on the wrapper instead —
   same trick as .gr-blogpage). */
.gr-home.gr-storespage {
  background: linear-gradient(180deg, #fdeef6 0%, #f6f0ff 22%, #fdfcff 46%, transparent 60%) no-repeat;
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.gr-storespage .gr-storesp-hero { padding: 56px 0 32px; }
.gr-storespage .gr-storesp-hero .gr-hero__title { font-size: clamp(35.2px, 4.6vw, 52px); }
/* the art is a single upright mascot, not the full 540px homepage stage.
   genie-front.webp's own intrinsic size is only 215x445 — max-width values
   above that (300px/220px, the original values here) never actually
   engaged, so the mascot rendered at full native size with all of its
   baked-in negative space (the long smoke trail below it), which is what
   made the hero look oversized/empty. These caps are deliberately BELOW
   215px so they actually constrain it. */
@media (min-width: 992px) {
  .gr-storesp-stage { display: flex; align-items: center; justify-content: center; min-height: 220px; }
}
.gr-storesp-heroart {
  height: auto; max-width: 190px; object-fit: contain;
  animation: gr-storesp-bob 5s ease-in-out infinite;
}
/* Something in the huge legacy stylesheet stack (upgrade/css/main.css,
   loaded after this file) resolves plain `img { max-width: 190px }` back to
   `none` for this element despite equal-or-lower specificity — same class of
   bleed-through as the clear button above. !important is the same fix
   already used throughout giverefer-home.css for this exact problem. */
.gr-home .gr-storesp-heroart { max-width: 190px !important; height: auto !important; }
@keyframes gr-storesp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .gr-storespage .gr-storesp-heroart { animation: none; }
}
.gr-storesp-hero__mobile { text-align: center; margin-top: 16px; }
.gr-storesp-hero__mobile img { margin: 0 auto; max-width: 150px; }
.gr-home .gr-storesp-hero__mobile img { max-width: 150px !important; height: auto !important; margin: 0 auto; }
@media (min-width: 992px) { .gr-storesp-hero__mobile { display: none; } }

/* clear (×) button inside the search pill */
.gr-storesp-search .gr-search__field { position: relative; }
.gr-storesp-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 999px; background: rgba(28, 21, 48, .06);
  color: var(--gr-muted); cursor: pointer; flex-shrink: 0;
}
.gr-storesp-clear:hover { background: rgba(28, 21, 48, .12); color: var(--gr-fg); }
.gr-storesp-clear svg { flex-shrink: 0; width: 14px; height: 14px; }
/* Defeat the site-wide `button, input[type=submit], .btn { padding:14px
   10px !important; background:#FB6765 !important; box-shadow:-2px 10px
   22px -5px rgba(251,103,101,.65); line-height:32px; border:1px solid
   transparent; border-radius:8px; }` rule in upgrade/css/main.css (same
   fix giverefer-home.css already applies to .gr-btn). Without this the
   button doesn't just show the wrong (coral) background — the !important
   14px/10px padding alone is 28px tall, so with border-box sizing it
   forces the box past the intended 24px regardless of the width/height set
   above, and the coral drop-shadow/line-height/border-radius all leak
   through too. flex-shrink:0 above (on both the button and its icon) stops
   .gr-search__field's flex:1 input from squeezing this down to a sliver —
   it's a fixed-size sibling, not a growable one. */
.gr-home .gr-storesp-clear {
  background: rgba(28, 21, 48, .06) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.gr-home .gr-storesp-clear:hover { background: rgba(28, 21, 48, .12) !important; }
.gr-home .gr-storesp-clear svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }

/* ---------------------------------------------------------------------
   FILTER BAR
   --------------------------------------------------------------------- */
.gr-storesf { padding: 0 0 32px; }
.gr-storesf__form {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.gr-storesf__left, .gr-storesf__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gr-storesf__label { font-size: 13.6px; font-weight: 600; color: var(--gr-muted); white-space: nowrap; }

.gr-storesf__field, .gr-storesf__select {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--gr-card); border: 1px solid var(--gr-border);
  font-size: 14.4px; font-weight: 600; color: var(--gr-fg);
}
/* .gr-storesf__field is the pill (icon + select); the <select> inside it
   is unstyled so it doesn't double up the border/background. */
.gr-storesf__field select {
  border: 0; background: transparent; padding: 0; height: auto; margin: 0;
  font: inherit; color: inherit; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gr-storesf__field select:focus { outline: none; }
.gr-storesf__select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6580' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.gr-storesf__select:focus, .gr-storesf__field:focus-within { outline: none; border-color: var(--gr-magenta); box-shadow: 0 0 0 3px rgba(192, 38, 211, .12); }
.gr-storesf__field svg { color: var(--gr-magenta); flex: none; }

@media (max-width: 767px) {
  .gr-storesf__left, .gr-storesf__right { width: 100%; }
  .gr-storesf__field, .gr-storesf__select { flex: 1; }
}
@media (max-width: 560px) {
  .gr-storesf__left { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .gr-storesf__left::-webkit-scrollbar { display: none; }
  .gr-storesf__left .gr-storesf__field, .gr-storesf__left .gr-storesf__select { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------------- */
.gr-storesp-sections { padding-bottom: 24px; }
.gr-storesec { padding: 28px 0; }
.gr-storesec + .gr-storesec { border-top: 1px solid var(--gr-border); }

.gr-storesec__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.gr-storesec__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gr-storesec__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: #fff; color: var(--gr-magenta); box-shadow: var(--gr-shadow-soft);
}
.gr-storesec__title { font-size: clamp(20.8px, 2.4vw, 25.6px) !important; }
.gr-storesec__pill {
  display: inline-flex; align-items: center; padding: 2.4px 12px; border-radius: 999px;
  background: #f3effe; color: var(--gr-violet); font-size: 12px; font-weight: 700;
}
.gr-storesec__sub { margin-top: 4px; font-size: 13.6px; color: var(--gr-muted); }
.gr-storesec__viewall {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
  font-size: 13.6px; font-weight: 700; color: var(--gr-indigo); text-decoration: none;
}
.gr-storesec__viewall:hover { color: var(--gr-violet); text-decoration: none; }

/* ---------------------------------------------------------------------
   STORE GRID + CARD
   --------------------------------------------------------------------- */
.gr-storegrid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.gr-storegrid--wide { gap: 12px; }
@media (min-width: 768px) {
  .gr-storegrid:not(.gr-storegrid--wide) { grid-template-columns: repeat(2, 1fr); }
}

.gr-storecard {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: 16px; background: var(--gr-card); border: 1px solid var(--gr-border);
  box-shadow: var(--gr-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gr-storecard:hover { transform: translateY(-2px); border-color: rgba(236, 45, 122, .3); box-shadow: var(--gr-shadow-brand); }
.gr-storecard__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.gr-storecard__link:focus-visible { outline: 2px solid var(--gr-magenta); outline-offset: 2px; }

.gr-storecard__logo {
  flex: none; width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--gr-border);
  background: #fff; display: grid; place-items: center; padding: 8px; overflow: hidden;
}
.gr-storecard--wide .gr-storecard__logo { width: 80px; height: 80px; }
.gr-storecard__logo img { width: 100%; height: 100%; object-fit: contain; }
.gr-storecard__logo--letter { font-size: 22px; font-weight: 800; color: var(--gr-magenta); }

.gr-storecard__body { flex: 1; min-width: 0; }
.gr-storecard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-storecard__name { font-size: 16.8px; font-weight: 700; }
.gr-storecard__badge {
  font-size: 10.4px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 2.4px 8px; border-radius: 6px; background: #f3effe; color: var(--gr-violet);
}
.gr-storecard__offer {
  margin-top: 4px; font-size: 13.6px; color: var(--gr-muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gr-storecard__amount { font-weight: 800; background: var(--gr-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gr-storecard__cat {
  position: relative; z-index: 2; display: inline-block; margin-top: 8px;
  font-size: 11.2px; font-weight: 600; padding: 2.4px 10px; border-radius: 8px;
  background: #f7f5fb; color: var(--gr-fg); text-decoration: none;
}
.gr-storecard__cat:hover { background: #ece8f2; color: var(--gr-fg); text-decoration: none; }

.gr-storecard__meta {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  text-align: right;
}
.gr-storecard__refs { font-size: 12px; font-weight: 600; color: var(--gr-muted); white-space: nowrap; }
.gr-storecard__refs.is-active { color: #0f9d58; display: inline-flex; align-items: center; gap: 4px; }
.gr-storecard__cta {
  pointer-events: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13.6px; font-weight: 700; color: var(--gr-magenta);
  border: 1px solid rgba(236, 45, 122, .3); border-radius: 999px; padding: 8px 16px;
}
.gr-storecard:hover .gr-storecard__cta { background: rgba(236, 45, 122, .06); }

/* grid (2-col) variant: stack meta under the body instead of a right column */
.gr-storecard--grid { flex-wrap: wrap; }
.gr-storecard--grid .gr-storecard__meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; text-align: left; }

@media (max-width: 480px) {
  .gr-storecard { flex-wrap: wrap; }
  .gr-storecard__meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; margin-top: 8px; }
}

/* ---------------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------------- */
.gr-storesec__empty { text-align: center; padding: 48px 16px; max-width: 480px; margin: 0 auto; }
.gr-storesec__emptyart { width: 140px; height: auto; margin: 0 auto 16px; }
.gr-storesec__empty h3 { font-size: 20.8px !important; }
.gr-storesec__empty p { margin-top: 8px; color: var(--gr-muted); font-size: 14.4px; }
.gr-storesec__didyoumean { margin-top: 12px; }
.gr-storesec__didyoumean a { color: var(--gr-indigo); font-weight: 700; text-decoration: none; }
.gr-storesec__didyoumean a:hover { color: var(--gr-violet); text-decoration: underline; }
.gr-storesec__emptycats { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gr-storesec__empty .gr-btn { margin-top: 24px; }

/* ---------------------------------------------------------------------
   PAGINATION / LOAD MORE
   --------------------------------------------------------------------- */
.gr-storesp-paginate { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gr-storesp-count { font-size: 13.6px; color: var(--gr-muted); }