/* static/style.css -- deliberately simple. Two-column layout via
   flexbox: .main-content grows to fill available space, .sidebar
   stays a fixed width and ends up on the right since it comes
   second in HTML source order (flex items lay out in document
   order by default).

   Background is ivory (a warm, slightly off-white), borders
   throughout are gainsboro (a neutral light gray). These don't
   clash -- gainsboro is desaturated/neutral, not competing with
   ivory's warm tint the way two saturated colors might -- but this
   is a color-theory judgment, not something visually confirmed;
   worth a real look once it's actually rendered. */

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 1rem 2rem;
  color: #222;
  background: ivory;
}

h1 {
  margin-bottom: 0.5rem;
}

.tagline {
  color: #666;
  font-size: 0.95rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Navbar -- plain horizontal row of links, no dropdowns/mobile
   handling yet. Fine for three links; worth revisiting once there's
   enough here to need a real menu. */
.navbar {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.navbar a {
  text-decoration: none;
  color: #222;
  font-weight: 600;
}

.navbar a:hover {
  color: #c0392b;
}

/* Plain HTML form, GET to /search -- works with zero JS. Centered
   via margin auto on a max-width block, not flex/grid, since it's
   the only thing that needs centering on its own line. flex-wrap so
   the checkbox label doesn't force the bar wider than intended on
   narrow viewports. */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 600px;
  margin: 0 auto 1rem auto;
}

.search-bar input[type="text"] {
  flex: 1;
  min-width: 150px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-bar label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
}

.search-bar button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background: #c0392b;
  color: white;
  cursor: pointer;
}

/* The whole filter/sort/search form's top row -- text input, the
   within checkbox, sort/page-size selects, submit button. */
.search-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.search-controls input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-controls label,
.sort-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
}

.pagination-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.page-size-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #666;
}

.search-controls select {
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-controls button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background: #c0392b;
  color: white;
  cursor: pointer;
}

/* Left filter panel + results, side by side. */
.search-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.filter-panel {
  flex: 0 0 220px;
}

.filter-section {
  margin-bottom: 1.5rem;
}

.filter-section h3 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* 15 visible items, scrolls beyond that -- the heading above stays
   outside this container (see filter-panel.lisp) so it's always
   visible even while the option list itself scrolls. Height is an
   ESTIMATE based on each .filter-option's font-size + margin-bottom
   (roughly 1.55rem per row, x 15), not a measured/rendered value --
   worth eyeballing once this is actually visible and adjusting if
   it's noticeably off from exactly 15 rows. */
.filter-options-list {
  max-height: 23rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-range-inputs input {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.price-range-sep {
  color: #888;
}

.search-main {
  flex: 1;
  min-width: 0;
}

/* Numbered pagination -- these are submit BUTTONS now (see
   components/pagination.lisp), not links, so they need their own
   reset away from default browser button chrome to read the same
   as the old link-based version did. */
.pagination {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.pagination-link,
.pagination-prev,
.pagination-next {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #c0392b;
  font-weight: 600;
  cursor: pointer;
}

.pagination-current {
  color: #222;
  font-weight: 700;
  text-decoration: underline;
}

.pagination-ellipsis {
  color: #999;
}

/* Top Categories / Top Brands / Top Retailers -- all three share
   this one set of classes now (see components/facet-grid.lisp),
   5 columns x 4 rows, thin gainsboro borders around each link
   rather than the earlier plain-text/no-chrome version. */
.facet-grid-section {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

.facet-grid-section h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 1rem;
}

.facet-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.facet-grid-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px solid gainsboro;
  border-radius: 4px;
  color: #1a5276;
  text-decoration: none;
  font-size: 0.85rem;
  text-align: center;
  background: white;
}

.facet-grid-item:hover {
  background: gainsboro;
}

.facet-grid-see-all {
  color: #666;
  font-style: italic;
}

.page-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.main-content {
  flex: 1;
}

.sidebar {
  flex: 0 0 280px;
}

/* Newest Promotional Offers -- 1 column, up to 5 rows, different
   shape from the facet-grid tables above so it gets its own
   styling. Currently always shows the empty state (see
   components/offers-table.lisp) -- the list/see-more styling below
   is ready for when real offer data exists, not yet exercised. */
.offers-section {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

.offers-section h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 1rem;
}

.offers-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
}

.offers-list li {
  padding: 0.5rem 0.75rem;
  border: 1px solid gainsboro;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: white;
}

.offers-empty {
  color: #888;
  font-style: italic;
}

.offers-see-more {
  color: #1a5276;
  font-size: 0.9rem;
  text-decoration: none;
}

.offers-see-more:hover {
  text-decoration: underline;
}

/* Brands / Retailers full alphabetical listing pages. */
.alpha-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 4;
  gap: 2rem;
}

.alpha-list li {
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

.alpha-list a {
  color: #1a5276;
  text-decoration: none;
}

.alpha-list a:hover {
  text-decoration: underline;
}

/* Alphabetical-range bottom nav (Brands/Retailers) -- reuses the
   same visual language as the numbered .pagination (link color,
   current-page styling), just a different set of labels. */
.alpha-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.alpha-pagination a {
  color: #c0392b;
  text-decoration: none;
  font-weight: 600;
}

.alpha-pagination-current {
  color: #222;
  font-weight: 700;
  text-decoration: underline;
}

/* Search results / sales listing -- these reuse .deal-item's card
   styling (see below) but need their own list container, since
   they're plain vertical lists rather than the widget's numbered
   sidebar list. */
.search-results,
.categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* /stats -- deliberately plain, this is an internal tool, not a
   polished public page. */
.stats-section {
  margin-bottom: 2rem;
}

.stats-section h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.stats-table {
  border-collapse: collapse;
  font-size: 0.85rem;
}

.stats-table td {
  padding: 0.3rem 1rem 0.3rem 0;
  border-bottom: 1px solid #eee;
}

.stats-empty {
  color: #888;
  font-style: italic;
}

.stats-total {
  color: #666;
  margin-bottom: 2rem;
}

.search-results li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.categories-list li {
  margin-bottom: 0.5rem;
}

.result-count {
  color: #666;
  margin-top: -1rem;
}

.top-deals-widget {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1.15rem 1rem 1rem 1rem;
  background: #fafafa;
}

.top-deals-widget h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.top-deals-widget ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0 0 1rem 0;
}

.top-deals-widget li {
  margin-bottom: 0.4rem;
}

/* Direct-child selector -- targets ONLY the "See more" link (a
   direct child of .top-deals-widget), not the deal-item links
   nested inside <li> further down. Without the >, this rule would
   also apply to those too, which isn't the intent. */
.top-deals-widget > a {
  font-size: 0.9rem;
}

/* deal-item is a plain container now, not a link itself -- image,
   name, and brand are three SEPARATE links inside it, each going
   somewhere different, which is why the link-reset styling lives on
   THEM below rather than on this outer div. Flex row: fixed-size
   image on the left, everything else (.deal-details) filling the
   rest. */
.deal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.deal-image-link {
  display: block;
  flex-shrink: 0;
}

.deal-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.deal-details {
  flex: 1;
  /* Flex items default to min-width:auto, which can prevent them
     shrinking below their content's natural width -- this override
     is what actually lets long product names wrap/truncate inside
     the sidebar instead of forcing the row wider than it should
     be. Easy to miss; worth the comment. */
  min-width: 0;
}

.deal-name {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
}

.deal-name:hover {
  text-decoration: underline;
}

.deal-brand {
  display: block;
  font-size: 0.8rem;
  color: #666;
  text-decoration: none;
}

.deal-brand:hover {
  text-decoration: underline;
}

/* Original price, sale price, and discount% all flow on ONE line
   now -- no <br> between them in the markup, and .deal-discount is
   an inline span here (not a block div like it used to be), which
   is what actually keeps it on the same line as the prices. */
.deal-prices {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.original-price {
  color: #888;
}

.sale-price {
  color: #c0392b;
}

.regular-price {
  color: #222;
  font-weight: 600;
}

.deal-discount {
  color: #27ae60;
  font-weight: 600;
}

.site-footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd;
  color: #888;
  font-size: 0.8rem;
  text-align: center;
}

.site-footer a {
  color: #888;
}

.built-with {
  margin-bottom: 0.25rem;
}

.built-with a {
  margin-left: 0.15rem;
}

.lisp-logo {
  height: 0.95em;
  width: auto;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}