/* ==========================================================================
   The Scents - category listing
   Loaded on product/category. The product card itself lives in thumb.twig and
   is styled in dexie.css; this sheet is the shelf around it.
   ========================================================================== */

/* ---------- 1. the shelf label ------------------------------------------ */
.dx-shelf {
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.dx-shelf__eyebrow {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.dx-shelf__name {
  font-size: clamp(30px, 5.2vw, 52px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.dx-shelf__note {
  max-width: 62ch;
  margin-top: 12px;
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
}
.dx-shelf__note p:last-child { margin-bottom: 0; }

/* ---------- 2. the accord strip - this page's one flourish -------------- */
/* The note families read off the bottles on this shelf. It answers the only
   question a fragrance shopper has before they scroll, in the trade's own
   words, and every value in it came out of a real product description. */
.dx-accords {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 14px;
  margin: 18px 0 0;
}
.dx-accords__label {
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.dx-accords__note {
  position: relative;
  font-size: 13px; font-weight: 650; letter-spacing: .02em;
  color: var(--ink);
  padding-right: 14px;
}
.dx-accords__note::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 3px; height: 3px; margin-top: -1px;
  background: var(--accent);
}
.dx-accords__note:last-child { padding-right: 0; }
.dx-accords__note:last-child::after { display: none; }

/* ---------- 3. the other shelves at this level -------------------------- */
.dx-shelves {
  /* nowrap on purpose: with wrap, a long first tab took a row to itself and
     left its accent underline stranded above the others. It scrolls instead. */
  display: flex; flex-wrap: nowrap; gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dx-shelves::-webkit-scrollbar { display: none; }
.dx-shelves__tab {
  flex: 0 0 auto;
  padding: 15px 20px 13px;
  font-size: 12px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink-3); text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .16s, border-color .16s;
}
.dx-shelves__tab:first-child { padding-left: 0; }
.dx-shelves__tab:hover { color: var(--ink); }
.dx-shelves__tab.is-here { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- 4. what is inside this one ---------------------------------- */
.dx-within {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin: 0 0 26px;
}
.dx-within__label {
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.dx-within__link {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 1px;
  transition: color .16s, border-color .16s;
}
.dx-within__link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 5. sort and how many ---------------------------------------- */
.dx-listbar {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px;
  margin: 0 0 22px;
}
.dx-listbar__field { display: flex; align-items: center; gap: 9px; }
.dx-listbar__field label {
  margin: 0;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.dx-listbar__field .form-select {
  width: auto; min-width: 150px;
  padding: 8px 30px 8px 11px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
}
.dx-listbar__field .form-select:focus {
  border-color: var(--ink);
  box-shadow: none;
  outline: none;
}
@media (max-width: 560px) {
  .dx-listbar { justify-content: stretch; }
  .dx-listbar__field { flex: 1 1 100%; }
  .dx-listbar__field .form-select { flex: 1 1 auto; min-width: 0; }
}

/* ---------- 6. the grid -------------------------------------------------- */
/* Deliberately not id="product-list": common.js rewrites that element's class
   on every page load, which would delete this grid. */
/* The hairline lattice is drawn by the cells, not by a grey sheet showing
   through 1px gaps. The old way worked only when the last row was full: two
   products in a four-wide row left a large grey rectangle where the two empty
   tracks were. Each cell now casts its own 1px rule and adjacent ones overlap
   into a single line, so an unfilled track is simply the page. */
.dx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  margin-bottom: 30px;
}
@media (min-width: 760px)  { .dx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .dx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dx-grid__cell {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule);
  min-width: 0;
  transition: background .16s;
}
.dx-grid__cell:hover { background: var(--ground); }

@media (prefers-reduced-motion: reduce) {
  .dx-shelves__tab, .dx-within__link, .dx-grid__cell { transition: none; }
}

/* ---------- 7. the stray column ------------------------------------------ */
/* The Category layout assigns opencart.category to column_left, and this
   template prints {{ column_left }} outside the content block - so it landed
   as a 279px box above the masthead. What it contains is the same tree as the
   main menu, repeated with   indentation, and the shelf tabs above do the
   same job in context. If a category banner is ever wanted, that is a separate
   decision and a different component. */
/* !important is not optional here: the column carries Bootstrap's .d-md-block,
   and every Bootstrap display utility is itself !important. */
#product-category > #column-left,
#product-category > #column-right { display: none !important; }

/* ---------- 8. the empty shelf ------------------------------------------- */
/* Eight of the twenty-four categories have nothing in them, so this is a real
   screen, not an edge case. It offers the other shelves rather than a dead end. */
.dx-empty__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.dx-empty__links a {
  padding: 9px 15px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  font-size: 11.5px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
  text-decoration: none;
  transition: color .16s, border-color .16s;
}
.dx-empty__links a:hover { color: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .dx-empty__links a { transition: none; } }

/* ---------- 8. the rest of the listing family --------------------------- */
/* search, specials and brand pages share the chrome above. The container ids
   differ, so the column rule has to name each one. !important because the
   columns carry Bootstrap's .d-md-block, which is itself !important. */
#product-search > #column-left,
#product-search > #column-right,
#product-special > #column-left,
#product-special > #column-right,
#product-manufacturer > #column-left,
#product-manufacturer > #column-right { display: none !important; }

/* --- the search form --- */
.dx-find {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px 20px 18px;
  margin: 0 0 30px;
}
.dx-find__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}
@media (min-width: 820px) {
  .dx-find__row { grid-template-columns: 1fr 260px auto; }
}
.dx-find__main label,
.dx-find__where label {
  display: block;
  margin: 0 0 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.dx-find .form-control,
.dx-find .form-select {
  width: 100%;
  padding: 11px 12px;
  font-family: inherit; font-size: 14px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
}
.dx-find .form-control:focus,
.dx-find .form-select:focus { border-color: var(--ink); box-shadow: none; outline: none; }
.dx-find__go { width: auto; padding: 13px 28px; white-space: nowrap; }

.dx-find__opts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.dx-check { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }
.dx-check span { font-size: 13px; color: var(--ink-2); }
.dx-check .form-check-input {
  appearance: none;
  width: 17px; height: 17px; margin: 0; flex: 0 0 17px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background-color: var(--surface);
  cursor: pointer;
}
.dx-check .form-check-input:checked {
  background-color: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.dx-check .form-check-input:disabled { opacity: .45; cursor: default; }
.dx-check:has(.form-check-input:disabled) { cursor: default; }
.dx-check:has(.form-check-input:disabled) span { color: var(--ink-3); }

/* --- the A-Z of houses --- */
.dx-alpha {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 0 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.dx-alpha__letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 7px;
  font-size: 12px; font-weight: 750;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: background .16s, color .16s, border-color .16s;
}
.dx-alpha__letter:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }

.dx-houses { padding: 26px 0 8px; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px; }
.dx-houses:last-of-type { border-bottom: 0; }
.dx-houses__letter {
  font-size: 13px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 14px;
}
.dx-houses__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
  margin: 0;
}
@media (min-width: 700px)  { .dx-houses__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dx-houses__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dx-houses__list a {
  display: block;
  padding: 7px 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: color .16s, padding-left .18s cubic-bezier(.16,.84,.44,1);
}
.dx-houses__list a:hover { color: var(--accent); padding-left: 5px; }

@media (prefers-reduced-motion: reduce) {
  .dx-alpha__letter, .dx-houses__list a { transition: none; }
  .dx-houses__list a:hover { padding-left: 0; }
}