/* == B: catalog — products.html, the store == */
/* The store in redesign mode (docs/redesign-mode.md): a page title with the coloured offset, and each design a card of the game
   table's kind (paper, an ink outline, the hard shadow, a lift under the pointer) with its sale tag, round controls and a heavy price.
   The page's markup and its scripts (catalog, carousel) are untouched. The footer is the site's (new.html's), from the shell, in
   place of the page's own. */
html.rd {
  --rd-footer: replace;
  --rd-as-title: '.store-head h1';
  --rd-as-card: '.product-card';
}

/* the masthead */
html.rd .store {
  padding-top: 22px;
}
html.rd .store-head {
  border-bottom: 0;
  padding-bottom: 6px;
  max-width: 640px;
}
html.rd .store-head h1 {
  font-size: var(--text-section);
  --rd-title-offset: var(--title-offset-designs);
}
html.rd .store-head p {
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
html.rd .store-head .store-b2b {
  font-size: var(--text-label);
}
html.rd .store-head .store-b2b .store-b2b-cta {
  font-weight: var(--weight-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* the grid of designs: a little more air for the cards' shadows */
html.rd .store-grid {
  grid-gap: 26px 16px;
}
@media (min-width: 600px) {
  html.rd .store-grid {
    grid-gap: 34px 26px;
  }
}
@media (min-width: 960px) {
  html.rd .store-grid {
    grid-gap: 40px 32px;
  }
}

/* a design's card (.rd-card from the shell): the picture, its controls, the name and price */
html.rd .product-card {
  position: relative;
  padding: 10px 10px 14px;
  border-radius: var(--radius-review);
}
html.rd .product-card:hover .product-card__media {
  transform: none; /* the whole card lifts now, not the picture inside it */
}
html.rd .product-card__media {
  border-radius: 10px;
  background: var(--color-paper);
}
html.rd .product-card .sale-flag {
  top: 8px;
  right: 8px;
  left: auto;
  padding: 4px 10px 5px;
  border-radius: var(--radius-pill);
  background: var(--color-tag-hot);
  color: var(--color-paper);
  font: var(--weight-label) 12px/1.2 var(--font-body);
  letter-spacing: 0;
}
html.rd .product-card__dots {
  margin-top: 10px;
}
html.rd .product-card__dots .carousel-arrow {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 2px 2px 0 var(--color-ink);
}
html.rd .product-card__dots .carousel-arrow[disabled] {
  box-shadow: none;
  opacity: 0.35;
}
html.rd .product-card__dots .carousel-dots {
  flex-wrap: nowrap;
  gap: 0; /* margins instead: flex gap is Safari 14.1 */
}
html.rd .product-card__dots .carousel-dot {
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-radius: 50%;
  background: transparent;
  border: var(--border-thin) solid var(--color-ink);
}
html.rd .product-card__dots .carousel-dot[aria-current='true'] {
  width: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
}
html.rd .product-name {
  margin-top: 10px;
  font: var(--weight-strong) var(--text-card-title) / 1.25 var(--font-body);
  letter-spacing: 0;
}
html.rd .product-price {
  margin-top: 4px;
  font: var(--weight-heavy) 17px/1.2 var(--font-body);
}
html.rd .product-price .was {
  font-size: 14px;
  font-weight: var(--weight-label);
  color: var(--color-text-muted);
}
html.rd .product-card__caption:focus-visible {
  outline: var(--focus-ring);
  border-radius: 10px;
}

/* the catalog could not load: the fallback's button */
html.rd .store-fallback .btn {
  border-radius: var(--radius-pill);
}
/* == end B == */

/* == C: the store card's photo fills its frame (owner, 2026-10-19; C by the integrator's leave) == */
/* The owner's store photos are 5:4, the frame was the A4 sheet's 1.414, so every photo stood between two white bands.
   The frame takes the photos' shape, and an uploaded photo covers it: a 5:4 one exactly, an odd one cropped to the
   frame. Cropped low (75%): in a portrait or square shot the cards stand at the bottom, so the top gives way first,
   and both cards stay whole. A shipped render (a design with no uploads, /assets/designs/…) is an A4 sheet of cards
   and stays whole. */
html.rd .product-card__media {
  aspect-ratio: 5 / 4;
}
html.rd .product-card__media img[src*='/content-uploads/'] {
  object-fit: cover;
  object-position: 50% 75%;
}
/* == end C == */