/* Ported from ~/Desktop/marroma/styles.css:56-58 (`.home-section`, `.section-heading`),
 * :86 (`.product-grid`), :339 (3-up ≤1150px), :348-352 (≤800px section padding + the carousel
 * scroll-snap track). `.text-link`/`.text-link svg`/`.text-link.underline` themselves are
 * global.css rules (styles.css:25-27/59-60, ported verbatim there); only the section-local
 * rules live here.
 *
 * Owner, 2026-09-25: a real carousel. The template's ≤800px scroll-snap track now applies at
 * every width (desktop keeps the grid's 4-up / 3-up card width), with prev/next arrows in the
 * heading row and mouse click-drag (see index.tsx). */

.cc_Ne0s275pCZ_XHprOmb0HO .carousel-section {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-section * {
  font-family: inherit;
}
/* Round 2 (2026-09-22): the merchant picked Fraunces for this heading over the template's
 * system sans. */
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-section h2 {
  font-family: var(--display-alt);
}

.cc_Ne0s275pCZ_XHprOmb0HO .home-section {
  padding: 96px var(--gutter) 0;
}
/* Round 2 (2026-09-22): the carousel is now the last section before the footer, so it carries
 * its own bottom breathing room (the template's last section, the wide banner, had none). */
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-section {
  padding-bottom: 64px;
}
.cc_Ne0s275pCZ_XHprOmb0HO .section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.cc_Ne0s275pCZ_XHprOmb0HO .section-heading h2 {
  font-family: var(--display-alt);
  /* 2026-10-09 (owner): one step lighter than the 400 the template sets. */
  font-weight: 300;
  font-size: 34px;
  letter-spacing: -0.01em;
}

/* The heading row's right side: [explore link][prev][next]. Its baseline is the link's, so
 * the link still sits on the heading's baseline as before. */
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-tools {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-nav {
  display: flex;
  gap: 8px;
  /* The 42px circles overhang the heading's line box instead of setting the row height, so
   * the row does not grow when the arrows appear after the first measurement. */
  margin-block: -8px;
}

/* The arrows follow the product gallery's `.gallery-nav` (styles.css:248-252: a 42px circle,
 * ink chevron at 18px, a .96 press) with `.color-pick`'s hairline ring (styles.css:266-268:
 * 1px `--line`, `--ink` on hover) — they sit on paper here, not over a photograph, so the ring
 * replaces the gallery's frosted fill. */
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color 0.2s, opacity 0.2s, transform 0.2s;
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-arrow:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-arrow:active {
  transform: scale(0.96);
}
/* `aria-disabled` rather than `:disabled` — the button stays focusable (see index.tsx). */
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
  transform: none;
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-arrow[aria-disabled="true"]:hover {
  border-color: var(--line);
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel-arrow svg {
  width: 18px;
  height: 18px;
}

/* One row at every width: `--cols` cards fill the track exactly, so four or fewer products
 * look like the old static grid, and the rest wait off to the right.
 * The track is now a scroll container, which clips what paints outside it — including a card
 * link's focus ring (global.css: 2px at a 4px offset). A 6px padding cancelled by a -6px
 * margin (and matched by the scroll padding, so the snap lands where the card always sat)
 * gives the ring room without moving a pixel. */
.cc_Ne0s275pCZ_XHprOmb0HO .product-grid.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols, 4) - 1) * 12px) / var(--cols, 4));
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 6px;
  margin: -6px;
  scroll-padding-inline: 6px;
}
.cc_Ne0s275pCZ_XHprOmb0HO .product-grid.carousel::-webkit-scrollbar {
  display: none;
}
.cc_Ne0s275pCZ_XHprOmb0HO .carousel .product-card {
  scroll-snap-align: start;
}
/* Mouse only: touch and pen get no grab hand. */
@media (hover: hover) and (pointer: fine) {
  .cc_Ne0s275pCZ_XHprOmb0HO .is-scrollable .product-grid.carousel {
    cursor: grab;
  }
}
/* Set by the drag handler while a mouse drag is under way and until its glide to the nearest
 * card has settled — snapping stays off until then so it cannot jump. */
.cc_Ne0s275pCZ_XHprOmb0HO .product-grid.carousel.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}
.cc_Ne0s275pCZ_XHprOmb0HO .product-grid.carousel.is-dragging a {
  cursor: inherit;
}

@media (max-width: 1150px) {
  .cc_Ne0s275pCZ_XHprOmb0HO .section-heading h2 {
    font-size: 31px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .product-grid.carousel {
    --cols: 3;
  }
}

@media (max-width: 800px) {
  .cc_Ne0s275pCZ_XHprOmb0HO .home-section {
    padding-top: 64px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .section-heading {
    margin-bottom: 24px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .section-heading h2 {
    font-size: 26px;
    letter-spacing: -0.01em;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .carousel-section {
    padding-inline: 0;
    padding-bottom: 48px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .carousel-section .section-heading {
    padding-inline: var(--gutter);
  }
  /* The swipe is the control on a phone, and the heading row has no room for the pair. */
  .cc_Ne0s275pCZ_XHprOmb0HO .carousel-nav {
    display: none;
  }
  /* The template's phone track, full-bleed (styles.css:350-352); the gutter padding already
   * leaves the focus ring room sideways, so only the vertical 6px stays. */
  .cc_Ne0s275pCZ_XHprOmb0HO .product-grid.carousel {
    grid-auto-columns: 76%;
    gap: 12px;
    margin-inline: 0;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}