/*
  City Shopping Center Online, Adversary City.
  Tokens pulled directly from the real shopping.adversary.city marketing
  site, this is the same property's e-commerce arm, not a different brand.
  Layout is a dense, search-first product catalog (large header search bar,
  category rail, grid of cards), the structure a real online storefront
  needs once it's selling a few hundred items instead of just listing
  ninety in-mall storefronts.
*/

:root {
  --ink: #221720;
  --ink-soft: #6b5c68;
  --raspberry: #9c1f52;
  --raspberry-dark: #6b1438;
  --moss: #3f6b4a;
  --moss-dark: #2c4d35;
  --alert: #a13328;
  --paper: #faf8f9;
  --tint: #f2edf0;
  --panel: #ffffff;
  --line: #e0d8dd;
  --header: #2c1c26;
  --header-soft: #46303c;
  --star: #c98a1f;

  --font-display: "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  --font-body: "Corbel", "Segoe UI", sans-serif;
  --font-mono: "Lucida Console", Consolas, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  --radius: 4px;
  --max: 82rem;
}

* { box-sizing: border-box; }

/* Thin, brand-colored scrollbar instead of the browser's default bulky one. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--header-soft) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--header-soft); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--header); }

body {
  margin: 0;
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; font-weight: 700; }

a { color: var(--raspberry); text-decoration-color: currentColor; }
a:hover { color: var(--raspberry-dark); }

img, svg { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--space-3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--raspberry);
  color: #fff; padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* header: brand, big search bar, cart */
.site-header { background: var(--header); padding: 0.8rem 0; }
.header-row { display: flex; align-items: center; gap: var(--space-3); }

.brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1rem; }
.brand-sub { font-size: 0.68rem; color: #d8c5cf; }

.search-form { flex: 1; display: flex; max-width: 44rem; }
.search-form input {
  flex: 1; border: none; padding: 0.65rem 0.9rem; font-size: 0.95rem;
  border-radius: var(--radius) 0 0 var(--radius); font-family: var(--font-body);
}
.search-form input:focus { outline: 2px solid var(--star); outline-offset: -2px; }
.search-form button {
  background: var(--raspberry); border: none; color: #fff; padding: 0 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.search-form button:hover { background: var(--raspberry-dark); }
.search-form button svg { width: 18px; height: 18px; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.header-link {
  color: #f0e5ea; text-decoration: none; font-size: 0.8rem; display: flex; flex-direction: column;
  line-height: 1.2;
}
.header-link span.top { font-size: 0.68rem; color: #cbb3bf; }
.header-link:hover { color: #fff; }
.cart-icon { display: flex; align-items: center; gap: 0.3rem; }
.cart-icon svg { width: 22px; height: 22px; }
.cart-count {
  background: var(--star); color: var(--ink); font-size: 0.68rem; font-weight: 700;
  border-radius: 999px; padding: 0.05rem 0.4rem;
}

/* category rail */
.category-rail { background: var(--header-soft); }
.category-scroll {
  display: flex; gap: var(--space-2); overflow-x: auto; padding: 0.55rem 0;
  scrollbar-width: thin;
}
.category-chip {
  background: none; border: none; color: #f0e5ea; font-size: 0.8rem; white-space: nowrap;
  cursor: pointer; padding: 0.15rem 0.3rem; font-family: var(--font-body);
}
.category-chip:hover, .category-chip.active { color: #fff; text-decoration: underline; }

/* results meta */
.results-bar { padding: var(--space-2) 0 var(--space-1); }
.results-count { font-size: 0.85rem; color: var(--ink-soft); }
.results-count strong { color: var(--ink); }
.search-status { font-size: 0.85rem; color: var(--ink-soft); min-height: 1.2rem; }
.error-banner {
  background: #fbeceb; border: 1px solid #e4b3ad; color: var(--alert);
  padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.9rem; margin: var(--space-2) 0;
}

/* product grid */
.catalog-wrap { padding-bottom: var(--space-4); }
.result-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--space-2);
}

.result-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-2); display: flex; flex-direction: column; gap: 0.3rem; position: relative;
}

.result-thumb {
  height: 7rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.4rem; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
}
.result-thumb svg { width: 44px; height: 44px; opacity: 0.92; }
.thumb-0 { background: #9c1f52; }
.thumb-1 { background: #3f6b4a; }
.thumb-2 { background: #6b1438; }
.thumb-3 { background: #2c4d35; }
.thumb-4 { background: #a13328; }
.thumb-5 { background: #46303c; }

.deal-badge {
  position: absolute; top: 0.6rem; left: 0.6rem; background: var(--alert); color: #fff;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.45rem;
  border-radius: var(--radius); font-weight: 700;
}

.result-category { font-size: 0.72rem; color: var(--moss-dark); text-transform: uppercase; letter-spacing: 0.03em; }
.result-title { font-size: 0.9rem; line-height: 1.3; min-height: 2.3rem; }
.result-desc { font-size: 0.8rem; color: var(--ink-soft); min-height: 2.1rem; }

.result-stars { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--ink-soft); }
.result-stars .stars { color: var(--star); letter-spacing: -0.05em; }

.result-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-top: 0.15rem; }
.result-price .cents { font-size: 0.75rem; vertical-align: super; }

.result-add {
  margin-top: 0.5rem; background: #f6dfa8; border: 1px solid #d9b667; color: var(--ink);
  padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.78rem; cursor: pointer; font-family: var(--font-body);
}
.result-add:hover { background: #f0d28c; }

.directory-empty { color: var(--ink-soft); font-size: 0.92rem; padding: var(--space-3) 0; }

/* footer */
.site-footer { background: var(--ink); color: #efe7ec; padding: var(--space-4) 0 var(--space-2); margin-top: var(--space-4); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.footer-brand-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-1); }
.brand-name-invert { color: #fff; font-family: var(--font-display); font-weight: 700; }
.site-footer p { color: #d8c9d2; font-size: 0.88rem; margin: 0 0 var(--space-2); }
.site-footer .disclaimer { font-size: 0.78rem; color: #b6a3ae; margin-top: var(--space-2); }
.site-footer h3 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-1); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer a { color: #e3d5dc; text-decoration: none; font-size: 0.9rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-2); font-size: 0.8rem; color: #b6a3ae; }

@media (max-width: 720px) {
  .header-row { flex-wrap: wrap; }
  .search-form { order: 3; max-width: none; flex-basis: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}