/* Ambre Blends wholesale portal — stylesheet manifest.
   No build step. This file is the entry point the layouts link; everything
   else lives in ./portal/ and is pulled in below.

   CACHE BUSTING — read before editing a partial:
   Each import carries its own ?v= number. Bump ONLY the file you changed, and
   browsers refetch just that one. The layouts append ?v=<filemtime> to this
   manifest automatically, so editing a number here is enough to make the
   change visible — no other step.

   ORDER MATTERS, twice over:
   1. @import rules must stay at the very top of this file. A browser drops any
      @import that appears after a normal rule, silently.
   2. Cascade order is import order — primitives, then the semantic aliases
      built on them, then type, then layout, then components. */

@import url('./portal/fonts.css?v=1');
@import url('./portal/foundations.css?v=1');
@import url('./portal/alias.css?v=1');
@import url('./portal/typography.css?v=1');
@import url('./portal/layout.css?v=2');
@import url('./portal/buttons.css?v=2');
@import url('./portal/cards.css?v=47');
@import url('./portal/misc.css?v=5');
@import url('./portal/account.css?v=10');
@import url('./portal/contact.css?v=1');
@import url('./portal/rich-copy.css?v=1');
@import url('./portal/product.css?v=14');
@import url('./portal/onboarding.css?v=13');
@import url('./portal/order-confirmation.css?v=1');
@import url('./portal/policy-review.css?v=2');
@import url('./portal/asset-modal.css?v=5');
@import url('./portal/preview-banner.css?v=1');


html, body {
  font-size: 62.5%;
}

/* ----------------------------------------------------------------------
   Not yet extracted. Everything below moves into ./portal/ partials over
   time; add an import above as each one lands.
   ---------------------------------------------------------------------- */

:root {
  --brand: #603820;
  --brand-dark: #4a2b18;
  --brand-tint: #f3ece3;
  --paper: #fbf8f4;
  --card: #ffffff;
  --ink: #2a231d;
  --muted: #6f645a;
  --line: #e7ddd0;
  --danger: var(--error-100);
  --danger-tint: var(--error-100);
  --ok: #3f6f4a;
  --ok-tint: #eaf3ec;
  /* The notice band's height (see `.alert`). A token because the top bar's
     offset is derived from it — .topbar-right is absolutely positioned and
     has to clear however many bands are stacked under it. */
  --alert-h: 82px;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(42, 35, 29, .06), 0 8px 24px rgba(42, 35, 29, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--neutral-var-100);
  background: #F5F5F5;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1920px) {
  body {
    background: linear-gradient(
      90deg,
      var(--white) 0 50%,
      #F5F5F5 50% 100%
    );
  }
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0 0; }
h2 { margin: 0 0; }
h3 { margin: 0 0; }
p { margin: 0 0; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }

/* Layout ---------------------------------------------------------------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  max-width: 1040px;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--brand-dark);
}
.brandmark:hover { text-decoration: none; }
.brandmark .tile {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand); color: var(--brand-tint);
  display: grid; place-items: center; font-size: 1.05rem;
}
.site-nav { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.site-nav a {
  color: var(--muted);
  padding: .4rem .7rem;
  border-radius: 8px;
  font-size: .95rem;
}
.site-nav a:hover { background: var(--brand-tint); color: var(--brand-dark); text-decoration: none; }
.site-nav a.active { background: var(--brand-tint); color: var(--brand-dark); }
.site-nav .who { color: var(--muted); font-size: .875rem; padding-left: .5rem; }

.container { max-width: 1040px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.narrow { max-width: 560px; }

.site-footer {
  grid-column: 1 / -1;
  margin-top: 120px;
  padding: 20px 0 60px;
  border-top: 1px solid var(--neutral-20);
}

@media (max-width: 1175px) {
  .site-footer {
    margin-top: 80px;
    padding-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .site-footer {
    margin-top: 60px;
    padding-bottom: 40px;
  }
}

/* Sidebar-less layouts (the public application pages): same deal — the main
   column soaks up the slack so the footer lands at the bottom of a short page
   without being pinned to the viewport. */
.plain-page { min-height: 100vh; display: flex; flex-direction: column; }
.plain-page > .container { flex: 1 0 auto; }

/* Cards ----------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.card.pad-lg { padding: 2rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-head h2, .card-head h3 { margin: 0; }

/* Tiles ----------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tile-link {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
  transition: transform .1s ease, border-color .1s ease;
}
.tile-link:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--brand); }
.tile-link .t { font-family: var(--serif); font-size: 1.15rem; color: var(--brand-dark); margin-bottom: .25rem; }
.tile-link .d { color: var(--muted); font-size: .9rem; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand);
  padding: .65rem 1.2rem;
  border-radius: 9px;
  font-size: .98rem; font-weight: 500;
  cursor: pointer;
  transition: background .1s ease;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }
.btn.sm { padding: .4rem .8rem; font-size: .875rem; }

/* Forms ----------------------------------------------------------------- */
/* .field label { display: block; font-weight: 500; margin-bottom: .35rem; font-size: .95rem; } */
.field .hint { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
/* input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  color: var(--ink);
  background: #fff;
} */
textarea { min-height: 4.5rem; resize: none; }
.qty-input { max-width: 90px; text-align: center; }
.checkline { display: flex; align-items: center; gap: .5rem; }
.checkline input { width: auto; }

/* Alerts ---------------------------------------------------------------- */
/* min-height, not height: the band is 82px in the design, where every notice
   is one line — but a message that wraps has to push it open rather than spill
   out of it. */
.alert {
  padding: 20px; min-height: var(--alert-h);
  display: flex; align-items: center; gap: 20px;
}

.alert svg {
  width: 36px;
  height: 36px;
}
.alert.err, .alert.ok { 
  /* background: #C79A97;  */
  color: var(--white); 
  background-color: #B58683;
  /* background-color: #A6726E; */
  /* box-shadow: 1px 1px 8px #CDC; */
  /* color: var(--neutral-var-100);  */
}
/* .alert.err { background: var(--danger-tint); color: var(--danger); border: 1px solid #f2cfcc; } */
/* The whole band is the link when one is given (see components/alert.blade.php). */
a.alert, a.alert:hover { text-decoration: none; }
/* The standing "policies updated" notice: the first band in the content
   column, above the top bar. .portal-content is a flex column, so say outright
   that this item keeps its height. */
.policy-notice { flex: none; }

/* Flash bands (.portal-flash in layouts.app) sit INSIDE .portal-main, i.e.
   below a top bar that has no height of its own on desktop — so .topbar-right,
   which is absolutely positioned against that bar, lands on top of them unless
   it is told how tall the stack is. (The policy notice needs none of this: it
   is a sibling ABOVE the bar, so it already carries the bar down with it.)

   --flash-h is that height. These rules are the first-paint answer, one band's
   worth per band at the design height; js/portal/topbar-offset.js then writes
   the measured height inline, which wins, so a message that wraps to two lines
   pushes the right distance. With scripting off the rules below still hold for
   the one-line case. */
.portal-content:has(.portal-flash .alert) { --flash-h: var(--alert-h); }
.portal-content:has(.portal-flash .alert + .alert) { --flash-h: calc(var(--alert-h) * 2); }

/* Tables ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th, table.data td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
table.data th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: none; }

/* Badges ---------------------------------------------------------------- */
.badge {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; text-transform: capitalize;
}
.badge.new { background: var(--brand-tint); color: var(--brand-dark); }
.badge.confirmed { background: #e6eef7; color: #1c4e80; }
.badge.shipped { background: var(--ok-tint); color: var(--ok); }
.badge.pending { background: #fdf1dd; color: #8a5a12; }
.badge.approved { background: #e6eef7; color: #1c4e80; }
.badge.active { background: var(--ok-tint); color: var(--ok); }
.badge.denied { background: var(--danger-tint); color: var(--danger); }

/* Definition rows ------------------------------------------------------- */
dl.rows { margin: 0; }
dl.rows > div { display: flex; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
dl.rows > div:last-child { border-bottom: none; }
dl.rows dt { color: var(--muted); min-width: 160px; margin: 0; }
dl.rows dd { margin: 0; white-space: pre-line; }

/* Wizard ---------------------------------------------------------------- */



.stack-sm > * + * { margin-top: .5rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* Two-column field grid (collapses on small screens) */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.15rem; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
.req { color: var(--danger); }
input[type=file] { width: 100%; font: inherit; padding: .5rem 0; }
.section-label { font-family: var(--serif); color: var(--brand-dark); font-size: 1.05rem; margin: 1.5rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.section-label:first-child { margin-top: 0; }




/* Resources library ------------------------------------------------------- */
.res-control-row {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  padding: 60px 0 80px;
}

@media (max-width: 1175px) {
  .res-control-row {
    padding: 50px 0 60px;
  }
}
@media (max-width: 767px) {
  .res-control-row {
    padding: 40px 0 50px;
    gap: 40px;
  }
}


.res-headline { margin: 0; }

/* Header filter dropdowns (Scents / Product type) ------------------------ */
.res-filters { display: flex; align-items: center; gap: 40px; margin-left: auto; }
.res-empty { grid-column: 1 / -1; }
.res-clear { color: var(--muted); }
.res-clear:hover { color: var(--brand-dark); text-decoration: none; }

.fdrop { position: relative; }
.fdrop-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--neutral-var-100);
}
.fdrop-trigger:hover, .fdrop-trigger.is-active { color: var(--brand-dark); }
.fdrop-chevron { flex: none; transition: transform .15s ease; }
.fdrop-chevron.is-open { transform: rotate(180deg); }

/* The panel hangs from the trigger's left edge and hugs its longest label:
   a plain white card, no border and no shadow. Rows are 14px checkboxes on a
   24px rhythm (the box, then the 10px gap between rows). */
.fdrop-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 25;
  width: max-content; min-width: 100%; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: var(--white); border-radius: var(--corner-radius-small);
}
/* The rightmost filter hangs from its other edge — a long list of product types
   anchored on the left runs off the page. */
.fdrop--end .fdrop-menu { left: auto; right: 0; }
.fdrop-item {
  /* <button> resets first; the type rules below then apply to the label */
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; font: inherit;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-2xs);
  letter-spacing: var(--letter-spacing-2xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--neutral-var-100);
}
.fdrop-item:hover { text-decoration: none; color: var(--neutral-var-100); }
.fdrop-box {
  flex: none; width: 14px; height: 14px;
  display: grid; place-items: center;
  border: 1px solid var(--neutral-20); border-radius: var(--corner-radius-small);
  background: var(--white); color: var(--white);
  transition: border-color .12s ease, background-color .12s ease;
}
/* Three states, per the design: the empty box keeps its --neutral-20 rule and
   fills --neutral-10 on hover, and a ticked one goes solid --neutral-40 —
   border and fill both, so no ring shows through. `is-active` is the later
   rule, so a ticked box stays grey under the cursor. */
.fdrop-item:hover .fdrop-box { background: var(--neutral-10); }
.fdrop-item.is-active .fdrop-box { border-color: var(--neutral-40); background: var(--neutral-40); }
.fdrop-tick { opacity: 0; transition: opacity .12s ease; }
.fdrop-item.is-active .fdrop-tick { opacity: 1; }

@media (max-width: 640px) {
  .res-control-row { flex-direction: column; align-items: flex-start; }
  .res-filters { margin-left: 0; gap: 24px; flex-wrap: wrap; }
  /* The filters sit at the left here, so the end-anchored one would hang off
     that edge instead — every panel goes back to hanging from the left. */
  .fdrop--end .fdrop-menu { left: 0; right: auto; }
}

.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.resource-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.resource-media { display: block; background: var(--brand-tint); aspect-ratio: 16 / 10; overflow: hidden; }
.resource-media img, .resource-media video, .resource-media iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.resource-media video { object-fit: contain; background: #000; }
.resource-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.resource-title { font-family: var(--serif); color: var(--brand-dark); font-size: 1.05rem; }
.resource-body .btn { align-self: flex-start; }

/* Sectioned "All Resources" page ----------------------------------------- */
.res-section { margin-top: 80px; }
.res-section:first-of-type { border-top: 0; padding-top: .5rem; margin-top: 1rem; }
.res-section-head { grid-column: 1 / -1;display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 60px; padding-top: 30px; border-top: 1px solid var(--neutral-20); }
.res-section:first-of-type .res-section-head {
  border-top: none;
  padding-top: 0;
}
/* A section that names itself ("Resources", on a product page) opens a region
   of its own, so it keeps its rule even when it is the first one — unlike the
   library page, where the headline above has already introduced them. The
   eyebrow also sits closer under that rule than a bare heading does. */
.res-section--titled .res-section-head,
.res-section--titled:first-of-type .res-section-head {
  border-top: 1px solid var(--neutral-20);
  padding-top: 15px;
}
/* …and it keeps the section's own top margin, so the region stands off the
   product copy above it the way the sections stand off each other. */
.res-section--titled:first-of-type {
  margin-top: 80px;
  padding-top: 0;
}
/* Eyebrow over heading. The head itself stays a row, for a control it may one
   day carry on the right. */
.res-section-title { display: flex; flex-direction: column; gap: 30px; }
.res-subgroup { margin-bottom: 60px; }

/* A white rule above every sub-group after the first — the divider between
   Videos and PDFs, or Images and In-Store, that the grey --neutral-20 rule on
   .res-section-head is to a whole section. 2px, where that one is 1px.

   It is a ::before rather than a border on .res-subhead itself, because that
   element is the .gridbox: a border there would run the full page width,
   outside the grid's own 50px inset, while the design's rule is inset to the
   columns exactly like the grey one. As a grid item, the ::before spans them.

   The 60px under it is the gap to the eyebrow link; the 60px over it is the
   previous sub-group's own margin-bottom. */
.res-section .res-subgroup + .res-subgroup .res-subhead::before {
  content: '';
  grid-column: 1 / -1;
  border-top: 2px solid var(--white);
  margin-bottom: 60px;
}
/* The link sits in a .gridbox, so it spans the whole row and start-aligns
   rather than taking a single column: one column is ~58px, which "Videos" plus
   the 8px gap already fills, and the arrow — a flex item — was being shrunk to
   width 0 to fit. Spanning gives the flex line the room it needs; `flex: none`
   on the arrow means a longer label can never eat it again. */
.res-eyebrow-link {
  grid-column: 1 / -1;
  justify-self: start;

  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  transition: gap 0.1s linear;
  color: var(--neutral-var-100);
  text-wrap: nowrap;

  /* Tells WebKit to optimize for gap changes ahead of time */
  will-change: gap;

  /* Forces GPU layer creation to stabilize rendering */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);


  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-2xs);
  letter-spacing: var(--letter-spacing-2xs);
  text-transform: uppercase;
}

.res-eyebrow-link.nested {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: capitalize;
  
  pointer-events: none;
  cursor: text !important;
  margin-bottom: 60px;
}

.res-eyebrow-link.nested svg {
  display: none;
}

.res-eyebrow-link svg { flex: none; }

/* The arrow steps out to 12px and the pair goes light — the arrow follows
   because it is stroked in currentColor. No underline: the movement and the
   colour are the affordance, so the global a:hover rule is turned off here. */
.res-eyebrow-link:hover {
  gap: 12px;
  color: var(--neutral-var-60);
  text-decoration: none;
}

.res-text-grid {
  gap: 60px;
}

/* Text-card rows — FAQs and social snippets ------------------------------
   Three across on desktop, as text cards are, but ONE PER ROW from tablet
   down: both are a paragraph of prose (a question and its answer, or a whole
   social post), and two of those in half a tablet's width set a line too short
   to read well. A phone gets one per row already, from the 4-column grid.

   One class for both, since it is one rule about how a row of text cards
   reflows — a later text-card row opts in by wearing it. */
@media (max-width: 1175px) {
  .res-text-grid > .text-card { grid-column: 1 / -1; }
}

/* The FAQs view packs its cards rather than ruling them into rows ---------
   The whole set of FAQs is tens of cards whose answers run from one line to a
   paragraph, and a grid row is as tall as its tallest card — so aligned rows
   left a band of empty ground under every short answer. Multi-column instead,
   each column packed to its own content.

   Nothing moves sideways: 3 columns with a 60px gap is exactly the width a card
   spanning 4 of the 12 tracks had, because the grid's gap here is that same
   60px. (4 tracks + 3 gaps of a 12-track row == a third of the row less two
   gaps — the arithmetic only holds while the two gaps agree, which is why this
   restates the 60 rather than inventing one.)

   It reads DOWN each column, not across: `column-fill: balance` — the default,
   and the whole reason this is three columns rather than a deal into three
   elements — takes the set in order and breaks it into three roughly equal
   columns, so each column is a run of the list rather than a third of each row.

   Only the FAQs view wears it. The landing's preview row is three cards, i.e.
   one row with nothing to pack, and the social snippets keep their alignment.
   Below 1175px every text-card row is one card wide (above), so there is one
   column and nothing here to do. */
@media (min-width: 1176px) {
  .res-text-grid--packed {
    display: block;
    columns: 3;
    column-gap: 60px;
  }

  /* The 30px the grid gave as a row-gap, which multi-column has no equivalent
     of, is a card's own bottom margin here. `break-inside` is what keeps a card
     whole — without it an answer splits across the foot of one column and the
     head of the next. */
  .res-text-grid--packed > .text-card {
    break-inside: avoid;
    margin-bottom: 60px;
  }
}

/* A section's own "All …" pill — All Training, All Marketing, All FAQ's. A row
   of its own at the end of the section, and 40px under it: the next section's
   80px margin makes up the 120 the design puts above its rule. (A grid item's
   margin can't collapse away, which is why the space lives on the pill rather
   than on the section.) */
.res-section-all,
.res-faq-all {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 40px;
}

/* The FAQ pill shares the cards' grid, whose 30px row gap is half the 60 the
   design puts above it. The section pills follow a sub-group that already
   carries the full 60 in its own margin. */
.res-faq-all {
  margin-top: 30px;
}

/* Sub-nav (Videos / Images …) in the sidebar */
.filter-link.sub { padding-left: .9rem; font-size: .86rem; }

/* PDF card */
.resource-media.pdf { display: flex; align-items: center; justify-content: center; }
.pdf-badge {
  font-family: var(--serif); font-weight: 600; letter-spacing: .12em;
  color: var(--brand-dark); border: 1px solid var(--brand); border-radius: 8px;
  padding: .5rem .8rem; background: var(--card); font-size: .9rem;
}

/* FAQs */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem 1.75rem; margin-top: 1.1rem; }
.faq-q { font-family: var(--serif); color: var(--brand-dark); font-size: 1.05rem; margin-bottom: .35rem; }
.faq-a { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; white-space: pre-line; }

/* Blog cards (links out to posts on ambreblends.com) --------------------
   The media card's `small` variant on the page's own grid: two per row at
   `span 5`, which is what leaves the 12-column row with the gutter the design
   draws on its right. The row gap is the cards' only spacing — they carry no
   frame, the thumbnail is the whole of their furniture. */
.blog-grid { row-gap: 30px; }

/* Half the row from tablet down (8 columns), and the full width of the phone's
   4 — the copy beside a 117px square needs room to hold a title on two lines. */
@media (max-width: 1175px) {
  .blog-grid > .media-card.small-card { grid-column: span 4; }
}

@media (max-width: 767px) {
  .blog-grid { row-gap: 24px; }
}

/* The pill under them, in the same grid: 30px + the grid's own 30px row gap is
   the design's 60. No margin below — the footer's 120 is already the gap the
   design leaves under the last section. */
.blog-all {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 30px;
}

/* ======================================================================
   Catalog / ordering
   ====================================================================== */
[x-cloak] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* Two-column catalog layout --------------------------------------------- */
.catalog { display: grid; grid-template-columns: 210px 1fr; gap: 2rem; align-items: start; }
.catalog-sidebar { position: sticky; top: 1.25rem; }
.filter-group { display: flex; flex-direction: column; margin-bottom: 1.4rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-heading {
  color: var(--neutral-var-100); 
  margin: 16px 0;
}
.filter-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; color: var(--muted); font-size: .92rem;
}
.filter-link:hover { color: var(--brand-dark); text-decoration: none; }
.filter-link.is-active { color: var(--brand-dark); font-weight: 600; }
.filter-link.strong { color: var(--ink); font-weight: 600; font-size: 1rem; }
.filter-count { color: var(--muted); font-weight: 400; font-size: .82rem; }
.scent-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }

/* Breadcrumb ------------------------------------------------------------- */
/* The type is set here rather than left to the meta-2xs/medium/uppercase
   utilities a page happens to put on the nav: a breadcrumb is always all caps,
   so the rule lives with the breadcrumb and a new page can't forget it. */
.crumbs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--neutral-var-100);
  margin-top: 76px;
  /* margin-bottom: .75rem; */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-20);

  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-2xs);
  letter-spacing: var(--letter-spacing-2xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}
.crumbs .here,
.crumbs a { color: var(--neutral-var-100); }
.crumbs a:hover { color: var(--brand-dark); text-underline-offset: 5px; }



/* Product detail page ---------------------------------------------------- */
/* .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-bottom: 1.5rem; } */
.product-detail { display: none; }
.pd-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; }
.pd-main h1 { margin-bottom: .25rem; }
.size-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; max-width: 380px; }
.size-table th, .size-table td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--line); }
.size-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.size-table td.num, .size-table th.num { text-align: right; }
.size-table .qty-input { max-width: 76px; }
.view-cart-link { display: inline-block; margin-left: 1rem; }
.pd-gallery :is(.pd-hero) {
  border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: var(--brand-tint); aspect-ratio: 1 / 1;
}
.pd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-hero-ph { display: grid; place-items: center; text-align: center; padding: 2rem;
  font-family: var(--serif); font-size: 1.5rem; color: var(--brand-dark);
  background:
    radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--swatch) 30%, #fff) 0%, transparent 62%),
    var(--brand-tint);
}
.pd-thumbs { display: flex; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.pd-thumb {
  width: 62px; height: 62px; border-radius: 9px; overflow: hidden; padding: 0;
  border: 1px solid var(--line); background: var(--brand-tint); cursor: pointer;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* Accordions (native details) ------------------------------------------- */
.pd-accordions { border-top: 1px solid var(--line); margin-bottom: 2rem; }
.pd-accordions details { border-bottom: 1px solid var(--line); }
.pd-accordions summary {
  cursor: pointer; list-style: none; padding: 1rem .25rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-dark); font-weight: 600; display: flex; justify-content: space-between; align-items: center;
}
.pd-accordions summary::-webkit-details-marker { display: none; }
.pd-accordions summary::after { content: '+'; font-size: 1.2rem; color: var(--muted); font-weight: 400; }
.pd-accordions details[open] summary::after { content: '–'; }
.pd-prose { padding: 0 .25rem 1.25rem; white-space: pre-line; color: var(--ink); max-width: 60ch; }
.pd-prose p { margin: 0 0 .75rem; }

/* Related sections ------------------------------------------------------- */
.pd-section { margin: 2rem 0; }
.pd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }

/* Cart ------------------------------------------------------------------- */
.link-danger { background: none; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.link-danger:hover { color: var(--danger); }

/* Catalog responsive ----------------------------------------------------- */
@media (max-width: 820px) {
  .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .pd-gallery { order: -1; }
}

/* ======================================================================
   Portal sidebar layout
   ====================================================================== */
.portal-shell { 
  display: flex; 
  align-items: stretch; 
  min-height: 100vh; 
  max-width: 1920px;
}
@media (min-width: 1920px) {
  .portal-shell {
    margin: 0 auto;
  }

}

/* min-height (not just the shell's) so the column is still full-height on
   mobile, where .portal-shell drops to display:block. */
/* .portal-content { max-width: 1482px; flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; } */
.portal-content { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; }
/* Grows to take up the slack, which parks .site-footer at the bottom of a
   short page — of the page, not the viewport: on a tall page there is no
   slack and the footer just follows the content. */
.portal-main { flex: 1 0 auto; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0; }

/* Content top bar (cart lives here, top-right) --------------------------
   The wrapper is the full-bleed element and the header sits inside the grid
   inset, so anything that has to run edge to edge — the bar's own ground once
   it doubles as the drawer's header below 1175px — belongs on the wrapper. */
.topbar-wrap { position: relative; max-width: 1920px; width: 100%; margin: 0 auto; }
.portal-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding:0;
}
.topbar-right {
  position: absolute;
  /* Clears the flash stack below the bar (see --flash-h above), keeping the
     same 50px gap under it that it keeps under the page top when there is none. */
  top: calc(50px + var(--flash-h, 0px));
  right: 50px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  z-index: 4;
}

/* Brand mark in the bar: the wordmark on tablet, the "a" on a phone. Both are
   hidden on desktop, where the rail carries the logo. */
.topbar-brand { display: none; }
.topbar-brand:hover { text-decoration: none; }
.topbar-logo { display: none; }

/* Sidebar shell --------------------------------------------------------- */
.sidebar {
  width: 310px; flex: none;
  background: var(--card);
  padding: 20px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;

  /* Track is always transparent; the thumb paints var(--neutral-60) only
     while `.is-scrolling` is set by the Alpine scroll handler in
     portal-sidebar.blade.php (700ms after the last scroll event it fades
     back out). */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .3s ease;
}
.sidebar.is-scrolling { scrollbar-color: var(--neutral-60) transparent; }

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background-color: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: var(--corner-radius-small);
  transition: background-color .3s ease;
}
.sidebar.is-scrolling::-webkit-scrollbar-thumb { background-color: var(--neutral-60); }

/* Brand logo */
.sidebar-brand { display: block; margin: .25rem 0 .75rem; }
.sidebar-brand:hover { text-decoration: none; }
.brand-logo { display: block; width: 100%; max-width: 196px; height: auto; margin: 0 auto; }

/* Nav blocks (each separated by a hairline, mirroring the mockup) -------- */
.snav { display: flex; flex-direction: column; margin-top: 40px; }
.snav-block { border-top: 1px solid var(--neutral-20); padding: 20px 10px 20px 0; }
.snav-block:last-child { border-bottom: 1px solid var(--line); }

.snav-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: var(--font-family-primary);
  font-size: var(--nav-item-font-size);
  line-height: var(--nav-item-line-height);
  letter-spacing: var(--letter-spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-var-100);
}
.snav-link:hover { text-decoration: none; font-weight: var(--font-weight-semibold); }
.snav-link.is-active { font-weight: var(--font-weight-semibold); }
.snav-link.muted { font-size: .95rem; font-weight: 500; color: var(--muted); }

/* A section that can expand puts its caret beside the link. The rail has no
   caret — it shows one fixed tree — so this is a no-op above 1175px. */
.snav-row { display: flex; align-items: center; gap: .5rem; }
.snav-row > .snav-link { flex: 1 1 auto; min-width: 0; }
.snav-caret {
  display: none;
  position: relative;
  flex: none; align-items: center; justify-content: center;
  width: 18px; height: 22px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: currentColor;
  transition: transform .2s ease;
}
/* Row-height tap target that doesn't grow the row. */
.snav-caret::after { content: ''; position: absolute; inset: -20px -10px; }
.snav-caret.is-open { transform: rotate(180deg); }

/* Expanded filter tree --------------------------------------------------
   Every section's tree is in the DOM (the drawer expands either one from any
   page); `.is-open` is what shows one. On the rail that class only ever lands
   on the active section's tree — see treeOpen() in portal-sidebar.blade.php. */
.snav-tree { display: none; flex-direction: column; gap: .05rem; margin-top: .7rem; }
.snav-tree.is-open { display: flex; }
.tree-link.is-active { color: var(--neutral-var-100); text-decoration: underline; text-underline-offset: 4px; }
.tree-count { 
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
  font-weight: var(--font-weight-regular);
  color: var(--neutral-var-100)
}

/* Filter chips (scent = colour-filled, product type = neutral) ---------- */
.chip-row { display: flex; flex-direction: column; gap: .4rem; }
.tree-link,
.chip {
  padding: 8px 0;
  background: var(--brand-tint);
  color: var(--neutral-var-100);
  border: none;
  /* font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
  font-weight: var(--font-weight-medium); */
  font-family: var(--font-family-primary);
  font-size: var(--nav-item-font-size);
  line-height: var(--nav-item-line-height);
  letter-spacing: var(--letter-spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-var-100);
  background-color: transparent;
}
/* Indent carries the nesting: a section sits at 12, the kinds under it at 24.
   The step is the only thing saying which belongs to which — the rows are
   otherwise identical. Chips keep their own inset; they're the Ordering tree's
   own control, not a row in this ladder. */
.tree-link { padding-left: 12px; }
.tree-link.sub { padding-left: 24px; }
.chip { padding-left: 20px; }

.tree-link:hover,
.tree-link.is-active,
.chip:hover,
.chip.is-active {
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 10%;
}
/* .chip.is-active { border-color: var(--brand-dark); box-shadow: 0 0 0 1px var(--brand-dark); } */
/* .chip-scent { background: var(--chip-bg, var(--brand)); color: var(--chip-fg, #fff); } */
.chip-scent { 
  display: flex;
  align-items: center;
  gap: 10px;
}

.chip-scent div {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: var(--chip-bg, var(--brand));
  /* Transparent by default, so a coloured dot is unchanged: the background is
     painted under the border, keeping the circle a full 16px either way. */
  border: 1px solid var(--chip-border, transparent);
}

@media(max-width: 1175px) {
  .chip-scent div {
    border: 1px solid #FFF;
  }
  .tree-link { padding-left: 20px; }
  .tree-link.sub { padding-left: 40px; }
}
/* @media(max-width: 767px) {
  .tree-link { padding-left: 20px; }
  .tree-link.sub { padding-left: 40px; }
} */

/* Sign-out pinned to the sidebar foot --------------------------------- */
.sidebar-signout { margin-top: auto; padding-top: 1.25rem; }

/* Nav toggle: hamburger and close share one button; which glyph shows is CSS
   off `.is-nav-open`, so neither can flash before Alpine boots. Hidden on
   desktop, where the rail is always there. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--neutral-var-100);
}
.nav-toggle-bars { display: flex; flex-direction: column; gap: 7px; width: 26px; }
.nav-toggle-bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-x { display: none; }

/* The drawer covers the page, so the page behind it must not scroll. */
body.nav-locked { overflow: hidden; }

/* ======================================================================
   Tablet + phone: the rail becomes a full-width drawer, and the top bar
   becomes its header — dark, brand in white, hamburger swapped for a close.
   1175px is the portal's tablet breakpoint (8-col grid, 30px inset), so the
   nav changes shape at the same width as everything else.
   ====================================================================== */
@media (max-width: 1175px) {
  .portal-shell { display: block; --topbar-h: 86px; --nav-inset: 30px; }

  .topbar-wrap {
    position: sticky; top: 0; z-index: 50;
    background: var(--white);
    transition: background-color .2s ease;
  }
  .topbar-wrap.is-nav-open { background: var(--ambre-160); }

  .portal-topbar { height: var(--topbar-h); padding: 0; }

  .topbar-brand { display: flex; align-items: center; }
  .topbar-logo-full { display: block; width: 143px; height: auto; }
  /* Brown artwork, one white ink on the dark ground. */
  .topbar-wrap.is-nav-open .topbar-logo { filter: brightness(0) invert(1); }

  /* Account has its own row in the drawer, so the bar carries cart + toggle. */
  .topbar-right { 
    position: static;
    top: auto;
    right: auto;
    gap: 10px; 
  }
  .acct-button { display: none; }
  .cart-badge, .cart-badge.cart-badge-empty { height: 32px; }
  .topbar-wrap.is-nav-open .cart-badge {
    background: var(--neutral-var-80); border-color: var(--neutral-var-80);
  }
  .topbar-wrap.is-nav-open .cart-badge.cart-badge-empty {
    background: var(--neutral-60); border-color: var(--neutral-60);
  }

  .nav-toggle { display: inline-flex; }
  .topbar-wrap.is-nav-open .nav-toggle { color: var(--white); }
  .topbar-wrap.is-nav-open .nav-toggle-bars { display: none; }
  .topbar-wrap.is-nav-open .nav-toggle-x { display: block; }

  /* The whole viewport, with the bar's height as padding so the list starts
     below it — the bar is dark too while the drawer is open, so the two read as
     one panel, and the drawer's own scrolling stays inside it. Sized by height,
     not by stretching between top and bottom: an inset-stretched fixed box does
     not lay out reliably in this shell. It fades rather than slides — a
     full-width panel parked off-canvas would widen the page's scroll area. */
  .sidebar {
    position: fixed; inset: 0; z-index: 45;
    width: auto; height: 100dvh;
    padding: var(--drawer-top, var(--topbar-h)) var(--nav-inset) 40px;
    background: var(--ambre-160);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  .sidebar.nav-open {
    opacity: 1; visibility: visible;
    transition: opacity .18s ease, visibility 0s;
  }
  .sidebar-brand { display: none; }

  /* Guest pages (login, apply) have no drawer — their brand-only sidebar
     becomes a plain header band instead of a hidden panel. */
  .sidebar.brand-only {
    position: static; inset: auto; width: auto; height: auto; overflow: visible;
    padding: 20px var(--nav-inset);
    background: var(--white);
    opacity: 1; visibility: visible;
  }
  .sidebar.brand-only .sidebar-brand { display: block; margin: 0; }
  .sidebar.brand-only .brand-logo { width: 143px; max-width: none; margin: 0; }

  .snav { margin-top: 60px; }
  .snav-block { border-top: 1px solid var(--neutral-var-40); }
  .snav-block:last-child { border-bottom: 0; }
  /* The drawer's rows don't follow the page's responsive type scale (which
     steps `sm` down to 14px below 1280): the design holds them at 16px on a
     tablet and grows them on a phone. The line height is also what keeps every
     row the same height — it is the tallest thing in a row, caret included. */
  .snav-link, .snav-link:hover {
    color: var(--white);
  }
  .snav-caret { display: inline-flex; color: var(--white); }

  .tree-link, .tree-link:hover, .tree-link.is-active,
  .chip, .chip:hover { color: var(--white); }
  .tree-count, .filter-heading { color: var(--neutral-var-40); }
}

@media (max-width: 767px) {
  .portal-shell { --topbar-h: 60px; --nav-inset: 16px; }

  .topbar-logo-full { display: none; }
  /* The mark is a square with the glyph inset ~14% on the left, so it needs
     pulling back to line its ink up with the inset the hairlines below use. */
  .topbar-logo-mark { display: block; width: auto; height: 34px; margin-left: -5px; }

  .snav { margin-top: 40px; }
  .topbar-right { 
    position: static;
    top: auto;
    right: auto;
    gap: 8px; 
  }
  
}


/* Catalog page ----------------------------------------------------------- */
.catalog-pg-header {
  grid-column: 1 / -1;
  margin: 60px 0;
}

@media (max-width: 1175px) {
  .catalog-pg-header {
    margin: 50px 0 60px;
  }
}
@media (max-width: 767px) {
  .catalog-pg-header {
    margin: 40px 0 50px;
  }
}


/* Guest portal */
.guest-container {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding: 120px 0 0;
  grid-auto-rows: max-content;
}

.guest-container.inquiry-pg {
  padding: 60px 0 0;
}


.guest-header,
.guest-subheader,
.guest-form {
  grid-column: 1 / -1;
  color: var(--neutral-var-100);
}

.inquiry--thank-you .guest-subheader {
  padding: 20px 0;
}

.guest-subheader.create-password-subheader {
  padding: 20px 0 0;
}

.guest-form {
  display: grid;
  grid-template-columns: subgrid;
}

.guest-form .field,
.guest-form .forgot-password {
  grid-column: 1 / -1;
}

.guest-form button[type="submit"] {
  grid-column: 1 / span 2;
  margin: 20px 0;
}

/* The one slot a guest form speaks from: directly above its submit button, so
   the reason a submit came back is read on the way to pressing it again. Type
   is the LG/Semibold step, carried in the markup by .header-lg.semibold. Red is
   for errors alone — a confirmation takes the same type in the page's own ink. */
.form-message {
  grid-column: 1 / span 7;
  color: var(--neutral-var-100);
}
@media (max-width: 1175px) {
  .form-message {
    grid-column: 1 / span 5;
  }
}
@media (max-width: 767px) {
  .form-message {
    grid-column: 1 / -1;
  }
}
.form-message.is-error {
  color: var(--error-100);
}
/* The onboarding wizard runs on the dark brand ground, where --error-100 sits
   at 2.5:1 against it — legible only if you already know it's there. The page's
   own ink carries the message instead; the wording is what says it went wrong. */
body.onboarding-page .form-message.is-error {
  color: var(--white);
}
/* The signature pages have one field, so the message stays with it rather than
   at the foot of a form — it just needs the gap the caption above would close. */
.signature-field .form-message,
.policy-review-sign .form-message { margin-top: 10px; }
.guest-form .checkline {
  grid-column: span 2;
}
.sign-in-line label {
  text-wrap: nowrap;
}

@media (max-width: 767px) {
  .guest-form .checkline {
    grid-column: 1 / -1;
  }
  .sign-in-line {
    margin-top: 20px;
  }
}

.forgot-pw.guest-form {
  margin-top: 20px;
}

.inquiry-pg .guest-subheader,
.contact-pg .guest-subheader {
  grid-column: 1 / span 9;
}

@media (max-width: 1175px) {
  .inquiry-pg .guest-subheader,
  .contact-pg .guest-subheader {
    grid-column: 1 / -3;
  }
  
}
@media (max-width: 767px) {
  .inquiry-pg .guest-subheader,
  .contact-pg .guest-subheader {
    grid-column: 1 / -1;
  }
  
}

.guest-header {
  padding: 20px 0;
}

.forgot-password {
  margin: 20px 0 40px;
  color: var(--neutral-var-100);
  text-decoration: underline;
}

/* .forgot-password:hover {
  color: var(--neutral-var-20);
} */

/* Inquiry form — same rows as the account form, but the message needs room to
   breathe, so that one row stacks and the textarea fills the width. */

/* Inquiry form */
.inquiry-form-legend {
  grid-column: 1 / -1;
  padding: 20px 0;
}
   
.inquiry-form {
  margin-top: 60px;
}

/* The address textarea needs more room than a one-line field, so its row
   stacks label over control. */
.field.acct-section-row.inquiry-textarea {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.field.acct-section-row.inquiry-textarea textarea {
  flex: 1 1 auto;
  width: 100%;
  max-width: 640px;
  resize: none;
}

.inquiry-file-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 20px;
  align-items: center;
  gap: 10px;
  flex: 340px 0 0;
  box-sizing: content-box;

  border-radius: var(--corner-radius-small);
  border: 1px solid var(--neutral-var-60);
  color: var(--neutral-var-100);
  background-color: var(--white);
}


/* The native file input's button text ("Choose Files") can't be changed, so the
   input itself is visually hidden — still focusable, still submits — and the
   adjacent <label class="button light-outline">Browse Files</label> stands in
   for it. .inquiry-file-val centres it; the chosen names render in
   .inquiry-file-names below. */
.inquiry-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard focus lands on the hidden input, so show the ring on its stand-in. */
.inquiry-file-input:focus-visible + .button {
  outline: 1px solid var(--neutral-var-100);
  outline-offset: 2px;
}

/* Thumbnail grid for the multi-image store-photo picker. Built by the form's
   inline script from the chosen File objects (object URLs), so it shows exactly
   what will be posted — each tile can be removed before submitting. */
.inquiry-file-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  width: 100%;
}

.inquiry-file-previews[hidden] {
  display: none;
}

.inquiry-file-thumb {
  position: relative;
  margin: 0;
  min-width: 0;
}

.inquiry-file-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--corner-radius-small);
  border: 1px solid var(--neutral-var-60);
  background-color: var(--neutral-var-20, #f2efec);
}

.inquiry-file-thumb figcaption {
  margin-top: 4px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--neutral-var-80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Per-image remove control, pinned to the tile's top-right corner. */
.inquiry-file-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--white, #fff);
  background-color: rgba(0, 0, 0, .55);
}

.inquiry-file-remove:hover,
.inquiry-file-remove:focus-visible {
  background-color: rgba(0, 0, 0, .8);
}

/* Selected file names, filled in by the form's inline script. */
.inquiry-file-names {
  display: none;
  width: 100%;
  text-align: center;
  word-break: break-word;
  color: var(--neutral-var-80);
}

.inquiry-file-names:not(:empty) {
  display: block;
}

/* Contact — post-submit confirmation. The fields stay in the flow (so the
   panel inherits their height) and this single element covers them; the submit
   button sits outside .contact-fields so it stays reachable and can swap to
   "Submit another request". */
.contact-fields {
  grid-column: 1 / span 6;
  display: grid;
  grid-template-columns: subgrid;
  position: relative;
}

.contact-sent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 40px 30px;
  text-align: center;

  border-radius: var(--corner-radius-small);
  /* border: 1px solid var(--neutral-var-60); */
  background-color: var(--white);
}

.contact-sent-heading {
  margin: 0;
  color: var(--neutral-var-100);
}

.contact-sent-note {
  margin: 0;
  max-width: 675px;
  color: var(--neutral-var-80);
}

.guest-wholesaler-section {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--neutral-20);
  margin-top: 60px;
}

.inquiry--thank-you .guest-wholesaler-section {
  display: grid;
  grid-template-columns: subgrid;
}

.inquiry--thank-you .guest-wholesaler-section-content {
  grid-column: 1 / span 7;
}

@media (max-width: 1175px) {
  .inquiry--thank-you .guest-wholesaler-section-content {
    grid-column: 1 / -1;
  } 
}


.guest-wholesaler-section-content {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Utility: fully hide (used for the auto-submitting avatar file input). */
.hidden {
  display: none !important;
}

/* Account profile picture. */
.acct-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}


/* || UPdate post page */
.update-post-contents {
  row-gap: 60px;
}
.update-post-contents h1 {
  grid-column: 1 / span 10;
}

.update-post-daterow {
  grid-column: 1 / -1;
  margin: 40px 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--neutral-20);
}

.update-post-subtitle {
  grid-column: 1 / span 9;
}

.update-body {
  grid-column: 1 / span 9;
}

/* The update's call-to-action button, its own grid row after the copy. */
.update-post-button {
  grid-column: 1 / span 9;
  margin-top: 28px;
}

/* The next-update feature card closing the post. */
.update-post-next {
  margin-bottom: 0;
}

/* || Policy post page — the update post template, reused for a policy. */
.policy-post-sign {
  grid-column: 1 / span 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid var(--neutral-20);
}

/* The policies index: one linked row per policy. */
.policy-index {
  grid-column: 1 / -1;
}

.policy-index-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 83px;
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-20);
}

.policy-index-row:hover {
  text-decoration: none;
}


.next-update {
  grid-column: 1 / span 9;
  padding: 30px 0 0;
  border-top: 1px solid var(--neutral-20);
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (max-width: 1175px) {
  .next-update {
    grid-column: 1 / span 6;
  }
}
@media (max-width: 767px) {
  .next-update {
    grid-column: 1 / -1;
  }
}

.next-update a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.next-update a:hover {
  text-underline-offset: 5px;
}

.next-update a svg {
  transition: transform 0.3s ease;
}
.next-update a:hover svg {
  transform: translateX(4px);
}