/* == B: catalog — product.html, the page and the catalog parts == */
/* The design page in redesign mode (docs/redesign-mode.md). B owns the page-level settings below: the shell's header and the
   --rd-as-* lists (A's buy-box selectors are added to them here, on A's request). B styles the gallery, the "the title is yours"
   note, the content sections, the related designs and the way back to the store. The buy box (.pdp-head, .pdp-price, .pdp-buy)
   is A's, in A's own section of this file. The footer is the site's (new.html's), from the shell, in place of the page's own. The
   gallery stays transparent
   behind its pictures, as tests/e2e/picture-letterbox.spec.js asks: the letterbox is the page. */
html.rd {
  --rd-footer: replace;
  --rd-as-title: '.pdp-related-head h2, .pdp-head h1'; /* .pdp-head h1: A's */
  --rd-as-btn: '#pdpBuy'; /* A's */
  --rd-as-box: '.pdp-sec';
  --rd-as-card: '.pdp-rel-card';
}

/* the gallery: a framed picture of the game table's kind, its sale tag and a round enlarge button */
html.rd .pdp-gallery {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-review);
  box-shadow: var(--shadow-review);
}
html.rd .pdp-gallery .sale-flag {
  top: 10px;
  right: 10px;
  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 .pdp-gallery-zoom {
  border: var(--border-thin) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 2px 2px 0 var(--color-ink);
}
html.rd .pdp-gallery-dots .carousel-dot,
html.rd .pdp-zoom-dots .carousel-dot {
  border: var(--border-thin) solid var(--color-ink);
  background: var(--color-paper);
}
html.rd .pdp-gallery-dots .carousel-dot[aria-current='true'],
html.rd .pdp-zoom-dots .carousel-dot[aria-current='true'] {
  background: var(--color-ink);
}
html.rd .pdp-zoom-close {
  border: var(--border-bold) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

/* "the title is yours": a yellow note with the pencil, quieter than the boxes below it */
html.rd .pdp-title-note {
  background: var(--color-tag);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-box);
  padding: 16px 18px;
}
html.rd .pdp-title-note svg {
  color: var(--color-brand-pink);
  stroke-width: 1.8;
}
html.rd .pdp-title-note b {
  font: var(--weight-strong) 17px/1.3 var(--font-body);
}
html.rd .pdp-title-note p {
  color: var(--color-ink);
}

/* the content sections (.rd-box from the shell) */
html.rd .pdp-sec {
  margin-top: 22px;
  padding: 20px 20px 22px;
}
html.rd .pdp-sec h2 {
  font: var(--weight-strong) 20px/1.25 var(--font-body);
}
html.rd .pdp-sec p {
  color: var(--color-ink);
}
html.rd .pdp-list .tick {
  color: var(--color-brand-pink);
  font-weight: var(--weight-heavy);
}

/* more designs: a title with its offset, cards like the store's, and the way back to the store */
html.rd .pdp-related {
  border-top: 0;
  background: transparent;
}
html.rd .pdp-related-head h2 {
  --rd-title-offset: var(--title-offset-designs);
}
html.rd .pdp-related-head p {
  color: var(--color-ink);
}
html.rd .pdp-rel-card {
  padding: 10px 10px 14px;
  border-radius: var(--radius-review);
}
html.rd .pdp-rel-thumb {
  border-radius: 10px;
  background: var(--color-paper);
}
html.rd .pdp-rel-name {
  font: var(--weight-strong) var(--text-card-title) / 1.25 var(--font-body);
  letter-spacing: 0;
}
html.rd .pdp-rel-price {
  font: var(--weight-heavy) 16px/1.2 var(--font-body);
}
html.rd .pdp-store-cta .btn.ghost {
  font: var(--weight-strong) var(--text-button) / 1.2 var(--font-body);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* == end B == */

/* == A: Commerce — product.html's buy box (.pdp-head, .pdp-price, .pdp-buy) == */
/* The title takes .rd-title and the buy link .rd-btn from B's lists above. The title is the design's name, set a size
   under a section title; the price is in the body face at the price weight (prices are never in the heading face). */
html.rd .pdp-head h1.rd-title {
  font-size: var(--text-view-title);
}
html.rd .pdp-price .now {
  font-family: var(--font-body);
  font-weight: var(--weight-heavy);
  font-size: var(--text-price);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-ink);
}
html.rd .pdp-price .was {
  font-family: var(--font-body);
  color: var(--color-text-muted);
}

/* The buy link is the large ink pill, full width on a phone. The old .btn decorations stay off it: the white sheen and the
   press wipe are a glow and a second press effect, the hover lift is a soft-shadow move, and the press would turn the
   label dark on the black pill. The shell's press (a squash) is the one left. */
html.rd #pdpBuy.rd-btn {
  font-size: var(--text-button-lg);
  padding: var(--pad-button-lg);
  box-shadow: none;
  border: var(--border-thin) solid var(--color-ink);
  filter: none;
}
html.rd #pdpBuy.rd-btn::before,
html.rd #pdpBuy.rd-btn::after {
  display: none;
}
html.rd #pdpBuy.rd-btn:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}
html.rd #pdpBuy.rd-btn:active {
  color: var(--color-paper);
  transform: scale(0.96);
}
html.rd .pdp-buy-note {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
/* == end A == */