/* ---------------------------------------------------------------------------
   Perfumery formulas — scoped sheet, loaded only by /formulas and
   /formulas/<slug> via $page_css. Nothing here is global.

   Every custom property is written with a literal fallback — var(--stone, #6a675e)
   — so the section renders correctly even if it is dropped onto a page that has
   not loaded the full token set.
   --------------------------------------------------------------------------- */

/* ---------- Breadcrumbs ---------- */
.crumbs {
  font-size: 13px;
  color: var(--stone, #6a675e);
  margin-bottom: 22px;
  letter-spacing: .01em;
}
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.14); }
.crumbs a:hover { color: var(--ink, #20242a); }
.crumbs span[aria-hidden] { margin: 0 .5em; opacity: .45; }

/* ---------- Index cards ---------- */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.fx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 210px;
  padding: 26px 26px 20px;
  background: #fff;
  border: 1px solid var(--ivory-line, #e4ded0);
  border-radius: var(--radius, 4px);
  transition: border-color .18s ease, transform .18s ease;
}
.fx-card:hover { border-color: #c9bfa7; transform: translateY(-2px); }
.fx-card--paid { background: #fcfaf5; }

.fx-card__fam {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone, #6a675e);
  margin-bottom: 12px;
}
.fx-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.22;
  margin: 0 0 10px;
}
.fx-card h3 a { color: var(--ink, #20242a); text-decoration: none; }
.fx-card__sub { font-size: 14.5px; line-height: 1.5; color: var(--stone, #6a675e); margin: 0; }

.fx-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--ivory-line, #e4ded0);
  font-size: 12.5px;
  color: var(--stone, #6a675e);
}

/* The whole card is clickable, but only the title is the link — see the
   comment on .prod-card in includes/catalog.php for why. */
.fx-card .stretch::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ---------- Detail head ---------- */
.fx-hero { padding-bottom: 0; }
.fx-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  margin: 12px 0 14px;
}
.fx-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--stone, #6a675e);
  max-width: 56ch;
  margin: 0;
}
.fx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--ivory-line, #e4ded0);
}
.fx-facts > div {
  padding: 16px 30px 16px 0;
  margin-right: 30px;
  border-right: 1px solid var(--ivory-line, #e4ded0);
}
.fx-facts > div:last-child { border-right: 0; margin-right: 0; }
.fx-facts dt {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone, #6a675e);
  margin-bottom: 6px;
}
.fx-facts dd { margin: 0; font-size: 15.5px; color: var(--ink, #20242a); }

/* ---------- Prose ---------- */
.fx-prose { max-width: 66ch; }
.fx-prose h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  margin: 0 0 16px;
}
.fx-prose p { font-size: 16.5px; line-height: 1.68; margin: 0 0 16px; }
.fx-prose p:last-child { margin-bottom: 0; }

.fx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 46px; }

/* ---------- Formula table ---------- */
.fx-tablehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.fx-tablehead h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 400;
  margin: 0;
}
/* Print button stacked over the batch selector, right-aligned. */
.fx-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fx-batch { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--stone, #6a675e); }
.fx-batch select {
  font: inherit;
  font-size: 14px;
  color: var(--ink, #20242a);
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--ivory-line, #e4ded0);
  border-radius: var(--radius, 4px);
}

.fx-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fx-table th, .fx-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ivory-line, #e4ded0);
  vertical-align: top;
}
.fx-table thead th {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--stone, #6a675e);
  border-bottom-width: 2px;
}
.fx-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-table__phase th {
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--emerald, #2f5d4f);
  border-bottom: 1px solid var(--ivory-line, #e4ded0);
}
.fx-table tbody tr:hover td { background: #fbf9f4; }
.fx-table td a { color: var(--ink, #20242a); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.2); }
.fx-table td a:hover { border-bottom-color: var(--emerald, #2f5d4f); color: var(--emerald, #2f5d4f); }
.fx-unstocked { color: var(--stone, #6a675e); }
.fx-note { display: block; margin-top: 4px; font-size: 13px; color: var(--stone, #6a675e); line-height: 1.45; }
.fx-dil { font-size: 14px; color: var(--stone, #6a675e); white-space: nowrap; }
.fx-table tfoot th, .fx-table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--ivory-line, #e4ded0);
  font-weight: 500;
}
.fx-tablenote {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--stone, #6a675e);
  max-width: 74ch;
}

/* ---------- Add-all + flash ---------- */
.fx-addall { margin: 0; }
.fx-flash {
  margin: 0 0 26px;
  padding: 14px 18px;
  font-size: 14.5px;
  background: #f3f7f4;
  border-left: 3px solid var(--emerald, #2f5d4f);
  border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
}
.fx-flash--bad { background: #fbf4f1; border-left-color: #b4714f; }
.fx-flash a { color: inherit; }

/* ---------- Use note ---------- */
.fx-usenote { max-width: 72ch; }
.fx-usenote h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  margin: 0 0 14px;
}
.fx-usenote h2 + p { margin-top: 0; }
.fx-usenote p { font-size: 15.5px; line-height: 1.68; color: var(--stone, #4f4c45); margin: 0 0 20px; }
.fx-usenote p:last-child { margin-bottom: 0; }

/* ---------- Narrow screens ----------
   The table keeps four columns down to phone width rather than collapsing to
   cards: a formula is read by comparing the weights down the column, and that
   comparison is exactly what a stacked layout destroys. Padding tightens and
   the note wraps instead. */
@media (max-width: 640px) {
  .fx-table { font-size: 14px; }
  .fx-table th, .fx-table td { padding: 10px 8px; }
  .fx-dil { white-space: normal; }
  .fx-facts > div { padding-right: 18px; margin-right: 18px; }
}

/* ---------- Print ----------
   The formula sheet only: site chrome, breadcrumbs, the print button and the
   catalogue cards are dropped. .reveal is forced visible so sections the
   visitor never scrolled to don't print blank. The batch select prints as
   plain text showing the chosen size. */
@media print {
  /* The site chrome is not all inside <header>/<footer>: .skip-link and
     .utility-bar are siblings BEFORE <header>, and .drawer is a sibling AFTER
     </footer>, so element selectors alone leave them on the printed page. */
  header, footer,
  .skip-link, .utility-bar, .drawer,
  .crumbs, .fx-print, #materials, .fx-flash { display: none !important; }

  /* The consent banner (includes/cookie-banner.php) is position:fixed with a
     z-index near the ceiling, and some browsers repeat a fixed element on
     every printed page. It carries its own inline <style> setting
     #vsConsent{display:flex}, so this has to match on the ID and carry
     !important to outrank it — a class selector would lose. */
  #vsConsent { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding: 12px 0 !important; background: #fff !important; }
  .fx-table tr { break-inside: avoid; }
  .fx-table__phase th { break-after: avoid; }

  /* A <tfoot> is repeated at the bottom of EVERY printed page by default, so a
     44-line formula printed the "Total 1000" row three times and each page
     looked like a complete formula. Demoting it to an ordinary row group
     prints it once, where it belongs. <thead> is left repeating — column
     headings on each page are wanted. */
  .fx-table tfoot { display: table-row-group; }
  .fx-table td a { border-bottom: 0; }
  .fx-batch select {
    border: 0;
    background: none;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }
}