/* =====================================================================
   7Stars — Shop All Products (listing). Scoped `sh-`; reuses the
   homepage design tokens declared on `.hp`. This file styles only the
   listing hero, the filter toolbar and the product grid/list — the
   header, nav, newsletter and footer come from home.css.
   ===================================================================== */

/* Breadcrumb: canonical .hp-crumb in home.css */

/* ── Hero banner ───────────────────────────────────────────────────── */
.sh-hero {
  position: relative;
  margin: 1rem 0 0;
  border-radius: var(--hp-r-lg);
  overflow: hidden;
  background: linear-gradient(115deg, #f7efe3 0%, #f4ebdd 42%, #efe3d2 100%);
  border: 1px solid var(--hp-line-soft);
}
.sh-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  min-height: 300px;
}
.sh-hero-copy { padding: 2.8rem clamp(1.6rem, 3vw, 3.2rem); max-width: 34rem; }
.sh-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hp-gold-deep);
}
.sh-hero h1 {
  margin-top: .9rem;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08;
}
.sh-hero p {
  margin-top: 1rem;
  font-size: 1rem; line-height: 1.6; color: var(--hp-ink-2);
  max-width: 26rem;
}
.sh-hero-cta { margin-top: 1.8rem; }
.sh-hero-media { position: relative; align-self: stretch; min-height: 300px; }
.sh-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82% center; }
.sh-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #f5ece0 0%, rgba(245, 236, 224, .5) 14%, transparent 40%);
}

/* ── Toolbar ───────────────────────────────────────────────────────── */
.sh-toolbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem;
  margin: 1.8rem 0 0;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.3) blur(12px);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r);
  box-shadow: var(--hp-shadow-sm);
}
.sh-count {
  font-size: .86rem; font-weight: 600; color: var(--hp-ink);
  white-space: nowrap; padding-right: .3rem;
}
.sh-count b { color: var(--hp-gold-deep); }

.sh-tool-search { position: relative; flex: 1 1 200px; min-width: 160px; }
.sh-tool-search input {
  width: 100%; font: inherit; font-size: .85rem;
  padding: .6rem 1rem .6rem 2.35rem;
  color: var(--hp-ink); background: var(--hp-cream);
  border: 1px solid var(--hp-line); border-radius: 999px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.sh-tool-search input::placeholder { color: #a2957f; }
.sh-tool-search input:focus {
  outline: none; background: var(--hp-white);
  border-color: var(--hp-gold); box-shadow: 0 0 0 4px rgba(185, 138, 60, .13);
}
.sh-tool-search svg {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--hp-muted); pointer-events: none;
}

/* Custom-styled native selects */
.sh-select { position: relative; }
.sh-select select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: .84rem; font-weight: 500; color: var(--hp-ink);
  padding: .6rem 2.1rem .6rem 1rem;
  background: var(--hp-white);
  border: 1px solid var(--hp-line); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, box-shadow .2s;
}
.sh-select select:hover { border-color: var(--hp-gold-soft); }
.sh-select select:focus { outline: none; border-color: var(--hp-gold); box-shadow: 0 0 0 4px rgba(185, 138, 60, .13); }
.sh-select::after {
  content: ""; position: absolute; right: .95rem; top: 50%;
  width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--hp-muted); border-bottom: 2px solid var(--hp-muted);
  transform: translateY(-65%) rotate(45deg);
}

.sh-view { display: inline-flex; gap: .2rem; padding: .2rem; margin-left: auto;
  background: var(--hp-cream); border: 1px solid var(--hp-line); border-radius: 999px; }
.sh-view button {
  width: 34px; height: 30px; display: grid; place-items: center;
  border-radius: 999px; color: var(--hp-muted);
  transition: background .2s, color .2s;
}
.sh-view button.is-active { background: var(--hp-white); color: var(--hp-gold-deep); box-shadow: var(--hp-shadow-sm); }

/* ── Active filter row ─────────────────────────────────────────────── */
.sh-active { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.sh-active:empty { display: none; }
.sh-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .35rem .32rem .7rem;
  font-size: .76rem; font-weight: 500; color: var(--hp-ink-2);
  background: var(--hp-cream-2); border: 1px solid var(--hp-line-soft);
  border-radius: 999px;
}
.sh-chip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--hp-muted); }
.sh-chip button:hover { background: var(--hp-sand); color: var(--hp-ink); }
.sh-clear { font-size: .78rem; font-weight: 600; color: var(--hp-gold-deep); }
.sh-clear:hover { text-decoration: underline; }

/* ── Product grid ──────────────────────────────────────────────────── */
.sh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1.15rem;
  margin: 1.4rem 0 0;
}

.sh-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--hp-white);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
  transition: transform .3s var(--hp-ease), box-shadow .3s var(--hp-ease), border-color .3s;
}
.sh-card:hover { transform: translateY(-5px); box-shadow: var(--hp-shadow-md); border-color: var(--hp-gold-soft); }

.sh-card-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--hp-cream-2); }
.sh-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--hp-ease); }
.sh-card:hover .sh-card-media img { transform: scale(1.05); }

.sh-badge {
  position: absolute; top: 0; left: .8rem; z-index: 2;
  padding: .42rem .5rem .3rem;
  font-size: .64rem; font-weight: 800; line-height: 1.05; text-align: center;
  color: var(--hp-white);
  background: linear-gradient(180deg, #2f6bd6, #2453b4);
  border-radius: 0 0 7px 7px;
  box-shadow: 0 4px 10px rgba(36, 83, 180, .3);
}
.sh-badge span { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .04em; }

.sh-wish {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--hp-ink-2);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(4px);
  border: 1px solid var(--hp-line-soft); border-radius: 50%;
  box-shadow: var(--hp-shadow-sm);
  transition: color .2s, transform .2s, background .2s;
}
.sh-wish:hover { color: #d64545; transform: scale(1.08); }
.sh-wish.is-on { color: #d64545; }
.sh-wish.is-on svg { fill: currentColor; }

.sh-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem .9rem 1rem; flex: 1; }
.sh-eta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--hp-muted);
}
.sh-eta svg { color: var(--hp-gold-deep); }
.sh-card-title {
  font-family: var(--hp-sans);
  font-size: .88rem; font-weight: 600; line-height: 1.32; letter-spacing: -0.01em;
  color: var(--hp-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.35em;
}
.sh-card-title a { transition: color .2s; }
.sh-card-title a:hover { color: var(--hp-gold-deep); }
.sh-card-rating { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--hp-muted); }
.sh-card-rating .sh-star { color: var(--hp-star); }
.sh-unit { font-size: .74rem; color: var(--hp-muted); }

.sh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .7rem; }
.sh-price { display: flex; flex-direction: column; line-height: 1.15; }
.sh-price-now { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hp-ink); }
.sh-price-was { font-size: .74rem; color: var(--hp-muted); text-decoration: line-through; }

/* ADD button — quick-commerce green, matches reference */
.sh-add {
  flex: none;
  padding: .5rem 1.15rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: #1a8a54; background: var(--hp-white);
  border: 1px solid rgba(26, 138, 84, .5); border-radius: var(--hp-r-sm);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.sh-add:hover { background: #1a8a54; color: var(--hp-white); border-color: transparent; box-shadow: 0 6px 14px rgba(26, 138, 84, .28); transform: translateY(-1px); }
.sh-add:active { transform: translateY(0); }
.sh-add.is-added { background: #1a8a54; color: var(--hp-white); border-color: transparent; }

/* Out of stock */
.sh-card--out .sh-card-media img { filter: grayscale(.55) opacity(.75); }
.sh-oos-flag {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
}
.sh-oos-flag span {
  padding: .4rem .9rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--hp-white); background: rgba(34, 26, 18, .72);
  border-radius: 999px; backdrop-filter: blur(3px);
}
.sh-add[disabled] {
  color: var(--hp-muted); background: var(--hp-cream-2);
  border-color: var(--hp-line); cursor: not-allowed;
  box-shadow: none; transform: none;
}

/* ── List view ─────────────────────────────────────────────────────── */
.sh-grid.is-list { grid-template-columns: 1fr; gap: .9rem; }
.sh-grid.is-list .sh-card { flex-direction: row; align-items: stretch; }
.sh-grid.is-list .sh-card-media { width: 170px; flex: none; aspect-ratio: 1 / 1; }
.sh-grid.is-list .sh-card-body { gap: .4rem; padding: 1rem 1.2rem; }
.sh-grid.is-list .sh-card-title { -webkit-line-clamp: 3; min-height: 0; font-size: .95rem; }
.sh-grid.is-list .sh-card-desc { display: block; font-size: .82rem; line-height: 1.5; color: var(--hp-muted); }
.sh-card-desc { display: none; }
.sh-grid.is-list .sh-card-foot { padding-top: .4rem; }

/* ── Empty state ───────────────────────────────────────────────────── */
.sh-empty {
  display: none;
  text-align: center; padding: 4rem 1rem;
  color: var(--hp-muted);
}
.sh-empty.is-on { display: block; }
.sh-empty svg { color: var(--hp-gold-soft); margin-bottom: 1rem; }
.sh-empty h3 { font-size: 1.2rem; color: var(--hp-ink); margin-bottom: .4rem; }
.sh-empty p { font-size: .9rem; }

/* Toast for ADD feedback */
.sh-toast {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 200;
  transform: translate(-50%, 1.5rem);
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.2rem;
  font-size: .85rem; font-weight: 600; color: var(--hp-white);
  background: var(--hp-ink); border-radius: 999px;
  box-shadow: var(--hp-shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--hp-ease), transform .3s var(--hp-ease);
}
.sh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sh-toast svg { color: #7ee0a6; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sh-hero-in { grid-template-columns: 1fr; min-height: 0; }
  .sh-hero-copy { padding: 2.2rem 1.6rem; max-width: none; }
  .sh-hero-media { min-height: 190px; order: -1; }
  .sh-hero-media::after { background: none; }
}
@media (max-width: 720px) {
  .sh-toolbar { gap: .6rem; padding: .75rem; }
  .sh-count { flex: 1 1 100%; }
  .sh-tool-search { flex: 1 1 100%; order: -1; }
  .sh-select select { padding: .55rem 1.9rem .55rem .85rem; font-size: .8rem; }
  .sh-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .sh-grid.is-list .sh-card-media { width: 116px; }
  .sh-add { padding: .5rem .9rem; }
}