/* Round 2 (2026-09-22). The `.home-section` / `.section-heading` shell is the per-bundle copy of
 * ProductCarousel's (styles.css:56-58 in the template); the ≤800px track is its
 * `.product-grid.carousel` block with wider cards so ~1.6 photographs show per screen. */

.cc_Ne0s275pCZ_iCMJo91IXl .seen-section {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
}
.cc_Ne0s275pCZ_iCMJo91IXl .seen-section * {
  font-family: inherit;
}
/* Round 4 (user): love-onfriday.com's "AS SEEN ON" heading — Montserrat 400, capitals
 * (loaded by Header's Google Fonts link). The size rules below still apply. */
.cc_Ne0s275pCZ_iCMJo91IXl .seen-section h2 {
  font-family: "Montserrat", var(--body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Owner, 2026-09-25: centred, 2px smaller than the carousel heading, in the logo's ink. */
  color: var(--logo-ink);
  text-align: center;
}

.cc_Ne0s275pCZ_iCMJo91IXl .home-section {
  padding: 96px var(--gutter) 0;
}
.cc_Ne0s275pCZ_iCMJo91IXl .section-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 24px;
  margin-bottom: 34px;
}
.cc_Ne0s275pCZ_iCMJo91IXl .section-heading h2 {
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.01em;
}

.cc_Ne0s275pCZ_iCMJo91IXl .seen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cc_Ne0s275pCZ_iCMJo91IXl .seen-grid figure {
  margin: 0;
}
/* SeenOnItem with a product: the whole photo is the link to it. */
.cc_Ne0s275pCZ_iCMJo91IXl .seen-grid a {
  display: block;
}
.cc_Ne0s275pCZ_iCMJo91IXl .seen-grid a img {
  transition: opacity 0.35s;
}
.cc_Ne0s275pCZ_iCMJo91IXl .seen-grid a:hover img {
  opacity: 0.85;
}
.cc_Ne0s275pCZ_iCMJo91IXl .seen-grid img, .cc_Ne0s275pCZ_iCMJo91IXl .seen-grid .seen-empty {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* longhand, so the global `.mr-skel` loading shimmer (a background-image) survives */
  background-color: var(--soft);
}

@media (max-width: 1150px) {
  .cc_Ne0s275pCZ_iCMJo91IXl .section-heading h2 {
    font-size: 29px;
  }
}

@media (max-width: 800px) {
  .cc_Ne0s275pCZ_iCMJo91IXl .home-section {
    padding-top: 64px;
  }
  .cc_Ne0s275pCZ_iCMJo91IXl .section-heading {
    margin-bottom: 24px;
  }
  .cc_Ne0s275pCZ_iCMJo91IXl .section-heading h2 {
    font-size: 24px;
  }
  .cc_Ne0s275pCZ_iCMJo91IXl .seen-section {
    padding-inline: 0;
  }
  .cc_Ne0s275pCZ_iCMJo91IXl .seen-section .section-heading {
    padding-inline: var(--gutter);
  }
  .cc_Ne0s275pCZ_iCMJo91IXl .seen-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* ponytail: 62% shows ~1.6 cards; tune after a phone screenshot. */
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }
  .cc_Ne0s275pCZ_iCMJo91IXl .seen-grid::-webkit-scrollbar {
    display: none;
  }
  /* Snap on the grid's own children: a SeenOnItem card is wrapped by IkasComponentRenderer in
   * a `<div id="seen-items-N">`, which is the grid item, not the figure. */
  .cc_Ne0s275pCZ_iCMJo91IXl .seen-grid > * {
    scroll-snap-align: start;
  }
}

/* Round 4: love-onfriday's 20px, after the .section-heading sizes so it wins at every width. */
.cc_Ne0s275pCZ_iCMJo91IXl .seen-section h2 {
  font-size: 20px;
}