/* FragranceScout results — AESTHETE haute-parfumerie restyle.
   Monochrome luxe: near-black ink, cream surfaces, Libre Caslon display,
   Hanken Grotesk body, sharp 1px outlines, uppercase micro-labels.
   Class names are UNCHANGED so results.js keeps working — only the look moves. */

:root {
  --ink: #1a1c1c;            /* on-surface / primary */
  --ink-soft: #44474d;       /* on-surface-variant */
  --line: #c5c6cd;           /* outline-variant */
  --line-strong: #75777e;    /* outline */
  --surface: #f9f9f9;
  --surface-low: #f4f3f3;    /* surface-container-low */
  --surface-container: #eeeeee;
  --in: #2f6b46;             /* in-stock */
  --out: #b3261e;            /* out-of-stock */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* soft ease-out for all motion */
}

@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.results {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--surface);
  color: var(--ink);
  padding: 48px 64px 96px;
}
.results-inner { max-width: 1440px; margin: 0 auto; }

/* ---- head: eyebrow + serif title + minimal sort ---- */
.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 0 0 8px;
}
.results-title {
  font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; color: var(--ink); margin: 0;
  letter-spacing: -0.01em;
}
.results-title em { font-style: normal; font-weight: 700; color: var(--ink); }
.results-meta {
  font-size: 12px; color: var(--ink-soft); margin: 12px 0 0;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.results-tools { display: flex; align-items: center; gap: 16px; }
.results-sort {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Drawer trigger — mobile only (the rail is always visible on desktop). */
.filter-toggle {
  display: none; align-items: center; gap: 8px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0;
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.filter-toggle[hidden] { display: none; }
.filter-toggle:active { transform: scale(0.97); }
.filter-toggle .ft-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--ink); color: #fff; font-size: 10px; letter-spacing: 0;
}
.filter-toggle .ft-count[hidden] { display: none; }
.results-sort[hidden] { display: none; }
.results-sort select {
  font-family: inherit; font-size: 12px; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: none; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  padding: 6px 20px 6px 2px; background: transparent; cursor: pointer; outline: none;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.results-sort select:hover { border-bottom-color: var(--ink); }
.results-sort { transition: opacity .3s var(--ease); }
.results-sort[hidden] { opacity: 0; }

/* ---- two-column layout: filter rail + product grid ---- */
.results-layout {
  display: flex; align-items: flex-start; gap: 48px; margin-top: 40px;
}
.result-grid {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* Full-width divider heading a results section ("Full bottles" / "Samples & decants"). */
.results-section-break {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-top: 12px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* The first header (Full bottles) sits at the very top — no rule above it. */
.results-section-break.section-top { margin-top: 0; padding-top: 0; border-top: 0; }
.rsb-text span {
  display: block;
  font-family: 'Libre Caslon Text', Georgia, serif; font-size: 22px; color: var(--ink);
}
.rsb-text small {
  display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft);
}
/* Link-style jump button — not a boxed control. */
.rsb-jump {
  flex: none; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.15s var(--ease);
}
.rsb-jump:hover { color: var(--ink); }

/* ---- filter rail ---- */
.filters {
  width: 256px; flex: none; animation: fadeIn .4s var(--ease) both;
  /* Rail follows you down a long grid instead of scrolling away. */
  position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto;
}
.filters[hidden] { display: none; }
/* Drawer-only chrome: inert on desktop, switched on inside the mobile query. */
.filters-close, .filters-apply { display: none; }
.filters-scrim { display: none; }
.filter-group { animation: cardIn .4s var(--ease) both; }
.filters-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.filters-head h3 {
  font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400;
  font-size: 20px; margin: 0; color: var(--ink);
}
.filter-clear {
  font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0;
  transition: color .25s var(--ease);
}
.filter-clear:hover { color: var(--ink); }
.filter-clear:active { transform: scale(0.95); }
.filter-group { margin-bottom: 32px; }
.filter-group h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 14px;
}
/* Size heading + unit toggle share a row; h4 loses its own bottom margin so
   the row (not the label) controls the gap above the chips. */
.filter-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.filter-group-head > h4 { margin: 0; }
.unit-toggle {
  font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 3px 8px; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.unit-toggle:hover { border-color: var(--ink); color: var(--ink); }
.unit-toggle:active { transform: scale(0.95); }
/* overflow-x hidden: the :hover translateX(2px) below nudges rows right and would
   otherwise trip a horizontal scrollbar inside this scroll container. */
.filter-brands { display: flex; flex-direction: column; gap: 10px; max-height: 240px; overflow-x: hidden; overflow-y: auto; }
.filter-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14px; color: var(--ink-soft);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.filter-check:hover { color: var(--ink); transform: translateX(2px); }
.filter-check input {
  width: 15px; height: 15px; flex: none; border-radius: 0;
  accent-color: var(--ink); cursor: pointer;
  transition: transform .2s var(--ease);
}
.filter-check input:hover { transform: scale(1.12); }
.filter-check input:active { transform: scale(0.92); }
.filter-check .fc-count { margin-left: auto; font-size: 11px; color: var(--line-strong); letter-spacing: 0.04em; transition: color .25s var(--ease); }
.filter-check:hover .fc-count { color: var(--ink-soft); }
.filter-none { font-size: 13px; color: var(--line-strong); }

/* size chips (All + common ml + Other) */
.size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chip {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 7px 11px; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .18s var(--ease);
}
.size-chip:hover { border-color: var(--ink); color: var(--ink); }
.size-chip:active { transform: scale(0.95); }
.size-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.size-chip .fc-count { font-weight: 400; opacity: 0.55; margin-left: 2px; }

.price-range { padding: 4px 2px 0; }
.price-range input[type="range"] {
  width: 100%; height: 1px; background: var(--line-strong);
  appearance: none; -webkit-appearance: none; cursor: pointer; margin: 8px 0;
  accent-color: var(--ink);
}
.price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  background: var(--ink); border-radius: 50%; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.price-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(26,28,28,0.08); }
.price-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.price-range input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--ink); border: none; border-radius: 50%; cursor: pointer;
  transition: transform .18s var(--ease);
}
.price-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.25); }
.price-vals .price-cur { transition: color .25s var(--ease); }
.price-vals {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--ink-soft); letter-spacing: 0.03em;
}
.price-vals .price-cur { font-weight: 600; color: var(--ink); }

/* ---- product card ---- */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Entrance animation only on a fresh search (not on every filter repaint,
   which would restart the animation and flicker). Gentle stagger for the first row. */
.result-grid.enter .pcard { animation: cardIn .45s var(--ease) both; }
.result-grid.enter .pcard:nth-child(1) { animation-delay: .02s; }
.result-grid.enter .pcard:nth-child(2) { animation-delay: .06s; }
.result-grid.enter .pcard:nth-child(3) { animation-delay: .10s; }
.result-grid.enter .pcard:nth-child(4) { animation-delay: .14s; }
.result-grid.enter .pcard:nth-child(5) { animation-delay: .18s; }
.result-grid.enter .pcard:nth-child(6) { animation-delay: .22s; }
.pcard:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(26,28,28,0.06); }
.pcard.best { border-color: var(--ink); }

.pcard-img {
  aspect-ratio: 4 / 3; background: var(--surface-low);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow: hidden;
}
.pcard-img img {
  max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard-img img { transform: scale(1.03); }
.pcard-img.placeholder { color: var(--line-strong); font-size: 34px; }

.pcard-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.pcard-brand {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pcard-name {
  font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400;
  font-size: 20px; line-height: 1.25; color: var(--ink); margin: -2px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* One quiet descriptor line (EDP · Men · Tester) instead of a chip row. */
.pcard-meta {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--line-strong);
}

.pcard-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.size-tab {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 6px 12px; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .18s var(--ease);
}
.size-tab:hover { border-color: var(--ink); color: var(--ink); }
.size-tab:active { transform: scale(0.95); }
.size-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.pcard-offers { margin-top: auto; padding-top: 6px; }

/* One price block per card: store + selected size on the left, the all-in price
   stack on the right, a single primary CTA row underneath. */
.offer-block { border-top: 1px solid var(--line); padding-top: 14px; }
.offer-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.offer-store { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 2px; }
.offer-store .ologo { height: 20px; max-width: 100px; object-fit: contain; align-self: flex-start; }
.offer-store .oname { font-size: 13px; font-weight: 600; color: var(--ink); }
.offer-size { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--line-strong); }
.offer-price {
  text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; flex: none;
}
.owas-row { display: flex; align-items: baseline; gap: 6px; }
.offer-price .owas { font-size: 11.5px; color: var(--line-strong); text-decoration: line-through; font-weight: 400; }
.offer-price .osave { font-size: 11px; font-weight: 700; color: var(--in); letter-spacing: 0.02em; }
.offer-price .ototal { font-size: 21px; font-weight: 700; color: var(--ink); }
/* "From" marks an as-low-as price on a listing whose size the store didn't publish. */
.offer-price .ofrom {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); vertical-align: middle;
}
.offer-ship { font-size: 10.5px; font-weight: 500; color: var(--line-strong); letter-spacing: 0.02em; margin-top: 3px; }

.offer-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.offer-cta {
  flex: 1; text-align: center; text-decoration: none;
  padding: 11px 12px; border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--ink); border: 1px solid var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.offer-cta:hover { background: #000; }
.offer-cta:active { transform: scale(0.98); }
.offer-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pcard-detail {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line);
  padding-bottom: 2px; transition: color .2s ease, border-color .2s ease;
}
.pcard-detail:hover { color: var(--ink); border-color: var(--ink); }
.pcard-detail:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- card corner flags (best price / out of stock) ---- */
.pcard-flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--ink); padding: 6px 12px;
}
.pcard-flag.oos { background: var(--line-strong); }

/* ---- out-of-stock states ---- */
.pcard.is-oos .pcard-img { opacity: 0.6; filter: grayscale(0.35); }
.size-tab.oos { color: var(--line-strong); border-style: dashed; }
.size-tab.oos.active { background: var(--line-strong); border-color: var(--line-strong); color: #fff; }
.offer-block.oos-row .offer-store, .offer-block.oos-row .offer-price { opacity: 0.6; }
.oos-pill {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--out); background: transparent; border: 1px solid var(--out);
  padding: 4px 9px; border-radius: 0; white-space: nowrap;
}
.offer-cta.dim { background: transparent; color: var(--line-strong); border-color: var(--line); }
.offer-cta.dim:hover { background: var(--line-strong); color: #fff; border-color: var(--line-strong); }

/* ---- skeleton loading ---- */
.pcard.sk { pointer-events: none; }
.pcard.sk .pcard-img { min-height: 150px; background: linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
.pcard.sk .pcard-name { height: 20px; background: linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
.pcard.sk .pcard-price { height: 40px; margin-top: 10px; background: linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }

@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.results-empty { text-align: center; color: var(--ink-soft); padding: 80px 20px; }
.results-empty h3 { font-family: 'Libre Caslon Text', Georgia, serif; color: var(--ink); font-size: 26px; font-weight: 400; margin: 0 0 10px; }
.results-empty em { font-style: normal; font-weight: 700; color: var(--ink); }
.results-error { text-align: center; color: var(--out); padding: 60px 20px; line-height: 1.7; }
.results-error a { color: var(--ink); }
.results-error code { background: var(--surface-container); padding: 2px 7px; border-radius: 0; }

/* ---- detail-page links ---- */
.pcard-link { color: inherit; text-decoration: none; }
.pcard-link:hover { color: var(--ink-soft); }
.pcard-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pcard-img { display: block; cursor: pointer; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .results { padding: 28px 20px 80px; }
  .results-head { align-items: flex-start; gap: 18px; }
  .results-layout { margin-top: 24px; gap: 0; }
  .results-tools { width: 100%; justify-content: space-between; }
  .filter-toggle { display: inline-flex; }

  /* Off-canvas filter drawer. Stacking the rail above the grid (the old
     behaviour) meant every search opened on a wall of controls with the actual
     listings pushed below the fold — so on small screens the rail slides in over
     the results and the grid owns the page. */
  .filters {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(86vw, 340px); max-height: none;
    display: flex; flex-direction: column;
    padding: 22px 22px 0;
    background: var(--surface); border-right: 1px solid var(--line);
    box-shadow: 0 0 60px rgba(26, 28, 28, 0.18);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .32s var(--ease);
    animation: none;                 /* the slide is the entrance here */
  }
  /* [hidden] must still win: no drawer until a search has results. */
  .filters[hidden] { display: none; }
  .filters.open { transform: none; }

  .filters-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(26, 28, 28, 0.42);
    opacity: 0; transition: opacity .32s var(--ease);
  }
  .filters-scrim[hidden] { display: none; }
  .filters-scrim.open { opacity: 1; }
  body.filters-open { overflow: hidden; }

  .filters-head { position: relative; padding-right: 40px; }
  .filters-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: -8px; top: -8px; width: 40px; height: 40px;
    background: none; border: none; color: var(--ink);
    font-size: 26px; line-height: 1; cursor: pointer;
  }
  /* Clear all sits next to the title; the X owns the corner. */
  .filters-head .filter-clear { margin-right: 6px; }

  /* Sticky confirm bar so you can dismiss without scrolling back up. */
  .filters-apply {
    display: block; position: sticky; bottom: 0;
    margin: auto -22px 0; padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .filters-apply-btn {
    width: 100%; padding: 14px 12px;
    font-family: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 0;
    cursor: pointer;
  }
  .filters-apply-btn:active { transform: scale(0.99); }

  .filter-brands { max-height: 280px; }
  /* Comfortable touch targets inside the drawer. */
  .filter-check { padding: 4px 0; font-size: 15px; }
  .filter-check input { width: 18px; height: 18px; }
  .size-chip { padding: 9px 13px; font-size: 12px; }
}
@media (max-width: 560px) {
  .results { padding: 24px 16px 72px; }
  .result-grid { grid-template-columns: 1fr; gap: 14px; }
  .results-meta { font-size: 11px; margin-top: 10px; }
  .pcard-name { font-size: 18px; }
  .pcard-body { padding: 16px 16px 18px; }
  .offer-actions { flex-wrap: wrap; gap: 12px; }
  .offer-cta { flex: 1 0 100%; padding: 13px 12px; }
  .pcard-detail { margin: 0 auto; }
  .results-section-break { flex-wrap: wrap; gap: 8px; }
}