/* ============================================================================
   Home page: the shop front.
   ----------------------------------------------------------------------------
   Four colours, no more: cream paper, forest green, mustard, sage. Everything
   else is forest at some opacity, so a new rule cannot quietly introduce a
   fifth colour the way #64675b and #cdd5b6 did on the last version of this page.
   ========================================================================== */

.sf-band {
  --sf-paper: #fdfbf4;
  --sf-forest: #22392c;
  --sf-forest-deep: #182a20;
  --sf-mustard: #f2c24e;
  --sf-sage: #e8ecda;
  --sf-sage-soft: #eef1e2;
  --sf-hair: rgba(34, 57, 44, 0.14);
  --sf-muted: rgba(34, 57, 44, 0.64);
  /* One content width for every block, so the bands line up with the grid
     instead of drifting 40px wider on small screens. */
  --sf-gutter: 5vw;
  --sf-wrap: min(calc(1240px - 2 * var(--sf-gutter)), calc(100% - 2 * var(--sf-gutter)));
}

/* ------------------------------------------------------------------- hero */

.sf-band__head {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  align-items: end;
  gap: clamp(18px, 3vw, 48px);
  padding-top: clamp(10px, 1.6vw, 22px);
  padding-bottom: clamp(20px, 3vw, 34px);
  /* site.css gives every `header` a bottom rule — it was written for the sticky
     site header. On a section head that rule lands exactly on the filter row's
     top edge, spans the whole band and reads as one long line running through
     the pills. The row already has its own separator below it. */
  border-bottom: 0;
}

.sf-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--sf-forest);
}

.sf-kicker i {
  height: 1px;
  flex: 0 0 clamp(24px, 4vw, 48px);
  background: var(--sf-hair);
}

.sf-kicker b {
  font-size: 11px;
  line-height: 1;
  color: var(--sf-mustard);
}

.sf-band__head h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 14px 0 0;
  max-width: 24ch;
}

/* The highlighter is a background, not a border: a border would sit on the
   baseline and underline the descenders too, which reads as a link. */
.sf-band__head h2 em {
  font-style: italic;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c34-5 68-7 100-5 34 2 66 1 94-3' fill='none' stroke='%23f2c24e' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 88%;
  padding-bottom: 0.04em;
}

.sf-band__lede {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.68;
  color: var(--sf-muted);
}

/* The cat sits on the same baseline as the last line of the headline, so the
   gap under the words is filled by a drawing instead of by whitespace. */
.sf-band__art {
  justify-self: end;
  width: min(300px, 100%);
}

/* The link that used to sit in the band's top-right corner now closes the
   filter row: the pills are what people actually press up here. */
.sf-band__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  align-self: center;
  font: 700 10.5px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sf-forest);
  /* A 1px rule under the words, not a full-width one. It is kept short by
     `inline-flex` — the line can only ever be as wide as the label. */
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.sf-band__all:hover {
  color: var(--sf-forest-deep);
}

.sf-cat {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sf-cat__line,
.sf-cat__coil,
.sf-cat__zing {
  fill: none;
  stroke: var(--sf-forest);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-cat__coil {
  stroke-width: 4;
  opacity: 0.85;
}

.sf-cat__zing {
  stroke: var(--sf-mustard);
  stroke-width: 5;
}

.sf-cat__edge {
  stroke-width: 6;
}

.sf-cat__paw {
  fill: var(--sf-paper);
}

.sf-cat__eye {
  fill: var(--sf-forest);
}

/* ---------------------------------------------------------------- filters */

.sf-filters {
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--sf-hair);
}

.sf-filter {
  appearance: none;
  border: 1px solid rgba(34, 57, 44, 0.22);
  background: transparent;
  color: var(--sf-forest);
  /* site.css pins `border-radius: 0 !important` on every button, so a pill has
     to claim its shape at the same weight. Without the flag the row renders as
     four boxes and a dashed box — the straight top edges then line up into one
     long rule across the row, which is the "line through the text" it looked
     like. */
  border-radius: 999px !important;
  padding: 9px 17px;
  min-height: 0;
  font: 600 12.5px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sf-filter:hover {
  background: var(--sf-sage);
  border-color: var(--sf-sage);
}

.sf-filter[aria-pressed='true'] {
  background: var(--sf-forest);
  border-color: var(--sf-forest);
  color: var(--sf-paper);
}

.sf-filter--more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-style: dashed;
  color: var(--sf-muted);
}

/* -------------------------------------------------------- featured + grid */

.sf-shop {
  width: 100%;
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}

.sf-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.94fr);
  background: var(--sf-sage);
  border-radius: 18px;
  overflow: hidden;
  min-height: 430px;
}

.sf-featured__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: clamp(20px, 2.3vw, 34px);
  padding-right: clamp(12px, 1.4vw, 20px);
}

.sf-pill {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--sf-paper);
  color: var(--sf-forest);
  font: 700 9.5px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sf-pill--butter {
  background: var(--sf-mustard);
  color: #2b2a1c;
}

.sf-pill--moss {
  background: var(--sf-forest);
  color: var(--sf-paper);
}

.sf-pill--onphoto {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 1;
  background: var(--sf-paper);
  box-shadow: 0 1px 6px rgba(34, 57, 44, 0.12);
}

.sf-featured__problem {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 4px 0 0;
}

.sf-arrow {
  fill: none;
  stroke: var(--sf-forest);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-arrow--down {
  width: 26px;
  height: 30px;
  margin: 8px 0 4px 10px;
  opacity: 0.75;
}

.sf-featured__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 30px);
  letter-spacing: -0.03em;
  margin: 4px 0 0;
}

.sf-featured__blurb {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(34, 57, 44, 0.78);
  max-width: 30ch;
}

.sf-featured__media {
  position: relative;
  min-height: 100%;
  background: var(--sf-sage);
}

.sf-featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sf-featured:hover .sf-featured__media img {
  transform: scale(1.03);
}

.sf-featured__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 96px;
  color: var(--sf-forest);
}

/* The whole card is the link, but the visible button is a span: two nested
   links to the same product is a tab stop that goes nowhere new. */
.sf-featured__tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--sf-forest);
  color: var(--sf-paper);
  font: 700 10.5px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sf-btn:hover {
  background: var(--sf-forest-deep);
  transform: translateY(-1px);
}

.sf-btn--moss {
  margin-top: 0;
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-content: start;
}

.sf-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.sf-card[hidden] {
  display: none;
}

.sf-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1.42;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sf-sage);
}

.sf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sf-card:hover .sf-card__media img {
  transform: scale(1.04);
}

.sf-card__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 62px;
  color: var(--sf-forest);
}

.sf-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sf-card__meta {
  min-width: 0;
}

.sf-card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

.sf-card__price {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--sf-muted);
  font-variant-numeric: tabular-nums;
}

.sf-card__go {
  font-size: 15px;
  line-height: 1.4;
  color: var(--sf-forest);
  transition: transform 0.2s ease;
}

.sf-card:hover .sf-card__go {
  transform: translateX(4px);
}

.sf-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 48px 0;
  font-size: 14px;
  color: var(--sf-muted);
}

/* A category is a shelf, not a story: with a filter on, the editorial card
   would be the only thing on screen that does not belong to the category. */
.sf-shop.is-filtered {
  grid-template-columns: minmax(0, 1fr);
}

.sf-shop.is-filtered .sf-featured {
  display: none;
}

/* auto-fit, not a fixed four: a category with two products should widen its
   two cards, not leave two empty tracks that read as a loading failure. */
.sf-shop.is-filtered .sf-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 300px));
  justify-content: start;
}

/* Between 761px and 1240px the page's own `.section { padding: 76px 0 }`
   shorthand wipes out the gutter that `.wrap` sets, so every band runs flush to
   the screen edge while the hero above it keeps its margin. One rule here puts
   the shelf back on the same column as the rest of the page; below 760px the
   site already handles this, above 1240px there is nothing to inset. */
@media (min-width: 761px) and (max-width: 1240px) {
  .wrap.section {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1120px) {
  .sf-shop {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-featured {
    min-height: 380px;
  }
}

@media (max-width: 900px) {
  .sf-band__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .sf-band__art {
    justify-self: start;
    width: min(300px, 72%);
    margin-top: 6px;
  }
}

@media (max-width: 760px) {
  /* The row is a scroll strip on phones: eight wrapped pills would push the
     first product below the fold on a 390px screen. */
  .sf-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 14px;
    margin-right: 0;
  }

  .sf-filters::-webkit-scrollbar {
    display: none;
  }

  .sf-filter {
    flex: 0 0 auto;
  }

  .sf-featured {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .sf-featured__media {
    order: -1;
    aspect-ratio: 1.5;
    min-height: 0;
  }

  .sf-featured__copy {
    padding: 20px;
  }

  .sf-featured__problem {
    max-width: none;
  }

  .sf-shop.is-filtered .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-band__all {
    display: none;
  }
}

@media (max-width: 560px) {
  .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .sf-card h3 {
    font-size: 15px;
  }

  .sf-pill {
    height: 22px;
    padding: 0 8px;
    font-size: 8.5px;
    letter-spacing: 0.1em;
  }

  .sf-featured__copy {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-card__media img,
  .sf-featured__media img,
  .sf-card__go,
  .sf-filter {
    transition: none;
  }
}