/* Object records inherit the latest public home language, without repainting the artwork. */
body:has(main[data-public-design]) {
  & .piece-breadcrumb {
    color: var(--public-ink);
    padding-inline: var(--public-gutter);
  }
  & .demo-product-copy h1 {
    font-size: clamp(44px, 5.5vw, 76px);
  }
  & .demo-product-copy .demo-price {
    color: var(--public-red);
  }
  & .piece-layout {
    background: var(--public-cream);
  }
  & .piece-story.profile-context {
    background: var(--public-white);
  }
  & .piece-story.profile-context summary {
    color: var(--public-red);
  }
  & .piece-story.profile-context details[open] summary {
    padding-bottom: 24px;
  }
  & .sample-notice {
    background: #f3e7d2;
  }
  & .demo-product-copy :is(.button, [data-store-open]) {
    background: var(--public-red);
    border-color: var(--public-red);
    color: white;
  }
  & .demo-product-copy .button:hover {
    background: #a5382d;
  }
  & .demo-product-copy a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 5px;
  }
}
@media (max-width: 700px) {
  body:has(main[data-public-design]) .demo-product-copy h1 {
    font-size: clamp(42px, 11vw, 60px);
  }
}
body:has(main[data-public-design]) {
  &.storefront main > section.product-information {
    padding: 0 !important;
    max-width: none;
    width: 100%;
  }
  & .product-information .product-brand {
    background: var(--public-red);
    color: var(--public-white);
    width: 100%;
    margin: 0;
  }
  & .product-information .product-brand :is(p, strong, .eyebrow) {
    color: var(--public-white);
  }
  & .product-information .brand-proposal strong {
    font-weight: 350;
  }
  & .product-information .brand-proposal .button {
    background: var(--public-cream);
    color: var(--public-red);
    border-color: var(--public-cream);
  }
  & .product-information .fold-title {
    font-family: var(--f-display);
    font-weight: 350;
    color: var(--public-red);
  }
}
/* Read the piece before its image; keep expanded reading by the price. */
body.storefront main[data-public-design] .piece-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 18px;
  align-items: start;
  & > .piece-intro {
    grid-column: 2;
    grid-row: 1;
  }
  & > .piece-gallery {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  & > .demo-product-copy {
    grid-column: 2;
    grid-row: 2;
  }
  & .piece-intro h1 {
    font-size: clamp(44px, 5.5vw, 76px);
    margin: 0;
  }
  & .piece-intro .eyebrow {
    margin-top: 0;
    margin-bottom: 20px;
  }
  & .piece-mobile-teaser {
    display: none;
  }
}
@media (max-width: 900px) {
  body.storefront main[data-public-design] .piece-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    & > .piece-intro {
      grid-column: 1;
      grid-row: 1;
    }
    & > .piece-gallery {
      grid-column: 1;
      grid-row: 2;
    }
    & > .demo-product-copy {
      grid-column: 1;
      grid-row: 3;
    }
  }
}
@media (max-width: 700px) {
  body.storefront main[data-public-design] .piece-layout {
    & .piece-intro h1 {
      font-size: clamp(42px, 11vw, 60px);
      margin-bottom: 18px;
    }
    & .piece-mobile-teaser {
      display: block;
      margin: 0;
      font-size: 17px;
      line-height: 1.75;
      color: var(--public-ink);
    }
    & .demo-product-copy [data-reading-intro] {
      display: none !important;
    }
  }
}