/* Product grid pulled from a category.
 * Strict Lassori palette: white/#EEEEEE grounds, #1D1616 text, #757575
 * secondary, #D84040 accent. */

.cc_srrpi96w_4iU2sEBpCL .cpg {
  background: var(--cpg-bg, var(--color-surface));
  padding: 2.5rem 0 3rem;
}

.cc_srrpi96w_4iU2sEBpCL .cpg .cpg-title {
  display: block;
  width: 100%;
  max-width: 82rem;
  margin: 0 auto 1.75rem;
  padding: 0 1rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* Split title: the accent half carries the brand red, matching the other
 * section headings. The flex row centres it whatever the theme does to h2. */
.cc_srrpi96w_4iU2sEBpCL .cpg .cpg-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.3em;
}

.cc_srrpi96w_4iU2sEBpCL .cpg .cpg-title-accent {
  color: var(--cpg-accent, var(--color-accent));
}

.cc_srrpi96w_4iU2sEBpCL .cpg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ─── Card ────────────────────────────────────────────────── */

.cc_srrpi96w_4iU2sEBpCL .cpg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 400ms ease;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-card-img--empty {
  background: var(--color-surface-alt);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-card:hover .cpg-card-img {
  transform: scale(1.03);
}

/* ─── Badges ──────────────────────────────────────────────── */

.cc_srrpi96w_4iU2sEBpCL .cpg-badges {
  position: absolute;
  top: 0.625rem;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  pointer-events: none;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-badge {
  padding: 0.25rem 0.625rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-badge--outline {
  border: 1px solid var(--cpg-accent, var(--color-accent));
  color: var(--cpg-accent, var(--color-accent));
  background: var(--color-surface);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-badge--solid {
  background: var(--cpg-accent, var(--color-accent));
  color: var(--lassori-white, #fff);
}

/* ─── Gallery dots ────────────────────────────────────────── */

.cc_srrpi96w_4iU2sEBpCL .cpg-dots {
  display: flex;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0.5rem 0 0.75rem;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--color-border);
  cursor: pointer;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-dot[data-active="true"] {
  background: var(--cpg-accent, var(--color-accent));
}

.cc_srrpi96w_4iU2sEBpCL .cpg-dot:focus-visible {
  outline: 2px solid var(--cpg-accent, var(--color-accent));
  outline-offset: 2px;
}

/* ─── Body ────────────────────────────────────────────────── */

.cc_srrpi96w_4iU2sEBpCL .cpg-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--color-border);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-brand {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-name {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary);
  text-decoration: none;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-name:hover, .cc_srrpi96w_4iU2sEBpCL .cpg-name:focus-visible {
  text-decoration: underline;
}

/* Two prices in a two-column phone grid are tight. Each price is kept
 * unbreakable so a figure can never split after the currency symbol, the row
 * may wrap between them as a last resort, and the type steps down on small
 * screens so both normally sit on one line. */
.cc_srrpi96w_4iU2sEBpCL .cpg-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.375rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-price {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--cpg-accent, var(--color-accent));
}

.cc_srrpi96w_4iU2sEBpCL .cpg-price-old {
  font-family: var(--font-body);
  font-size: var(--text-label);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

/* ─── Add to cart ─────────────────────────────────────────── */

.cc_srrpi96w_4iU2sEBpCL .cpg-cart {
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--cpg-accent, var(--color-accent));
  color: var(--lassori-white, #fff);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-cart:hover:not(:disabled), .cc_srrpi96w_4iU2sEBpCL .cpg-cart[data-state="added"] {
  background: var(--lassori-dark, #1d1616);
}

.cc_srrpi96w_4iU2sEBpCL .cpg-cart:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: default;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-cart:focus-visible {
  outline: 2px solid var(--lassori-dark, #1d1616);
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .cc_srrpi96w_4iU2sEBpCL .cpg {
    padding: 3.5rem 0 4rem;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg .cpg-title {
    font-size: var(--text-h2);
    margin-bottom: 2.25rem;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0 1.5rem;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-name {
    font-size: var(--text-body);
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-prices {
    gap: 0.5rem;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-price {
    font-size: var(--text-body-lg);
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-price-old {
    font-size: var(--text-small);
  }
}

@media (min-width: 1024px) {
  .cc_srrpi96w_4iU2sEBpCL .cpg-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 2rem;
  }
}

/* ─── Single-row scrolling variant ────────────────────────
 * Products stay on one line and the visitor scrolls them by hand — the row
 * never moves on its own, so it cannot slide out from under a click. */

.cc_srrpi96w_4iU2sEBpCL .cpg-grid[data-scroll="true"] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Room for the card shadow/border and a hint that more follows. */
  scroll-padding-left: 1rem;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-grid[data-scroll="true"]::-webkit-scrollbar {
  display: none;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-grid[data-scroll="true"] > .cpg-card {
  flex: 0 0 auto;
  width: 60vw;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .cc_srrpi96w_4iU2sEBpCL .cpg-grid[data-scroll="true"] > .cpg-card {
    width: 38vw;
  }
}

@media (min-width: 1024px) {
  .cc_srrpi96w_4iU2sEBpCL .cpg-grid[data-scroll="true"] > .cpg-card {
    /* Four across with the container's gaps taken out, so a fifth card peeks
     * in and shows the row can be scrolled. */
    width: calc((82rem - 4rem - 3rem) / 4.4);
  }
}

/* ─── Scroll arrows ───────────────────────────────────────
 * Desktop only. A touch user swipes the row and finds it immediately; with a
 * mouse there is no such cue, so the row needs visible controls. */

.cc_srrpi96w_4iU2sEBpCL .cpg-strip {
  position: relative;
  /* Matches the grid's own bounds so the arrows land in its side gutters
   * instead of drifting out to the viewport edge on wide screens. */
  max-width: 82rem;
  margin: 0 auto;
}

.cc_srrpi96w_4iU2sEBpCL .cpg-nav {
  display: none;
}

@media (min-width: 1024px) {
  .cc_srrpi96w_4iU2sEBpCL .cpg-strip[data-scroll="true"] .cpg-nav {
    position: absolute;
    /* Level with the middle of the card photo rather than the whole card,
     * whose body and button sit below the image. */
    top: 32%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition:
      background-color 200ms ease,
      color 200ms ease,
      border-color 200ms ease,
      opacity 200ms ease;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-nav--prev {
    left: 0;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-nav--next {
    right: 0;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-nav svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-nav:hover:not(:disabled) {
    background: var(--cpg-accent, var(--color-accent));
    border-color: var(--cpg-accent, var(--color-accent));
    color: var(--lassori-white, #fff);
  }

  .cc_srrpi96w_4iU2sEBpCL .cpg-nav:focus-visible {
    outline: 2px solid var(--cpg-accent, var(--color-accent));
    outline-offset: 2px;
  }

  /* Kept in place rather than removed, so the row does not shift when the
   * visitor reaches either end. */
  .cc_srrpi96w_4iU2sEBpCL .cpg-nav:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_srrpi96w_4iU2sEBpCL .cpg-nav {
    transition: none;
  }
}