/**
 * Featured product: a buy box on a page. The picker, price and buttons are
 * styled by section-product.css (loaded alongside); this file lays out the
 * two halves and the stamp.
 */
.featured-product {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media screen and (min-width: 990px) {
  .featured-product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8, 64px);
  }
  .featured-product--flip .featured-product__media { order: 2; }
}

.featured-product__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-m) * 1.5);
  background-color: var(--color-card-media, transparent);
  overflow: hidden;
}

.featured-product__image-link {
  position: absolute;
  inset: 6%;
  display: block;
}

.featured-product__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: var(--card-media-blend, normal);
  transition: transform 0.5s ease;
}

.featured-product__image-link:hover .featured-product__image { transform: scale(1.03); }

/* The rotating stamp: text on a circle, slow spin, sits in the top-right
   of the photo. Reduced motion keeps it still. */
.featured-product__stamp {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 96px;
  height: 96px;
  color: var(--color-ink);
  animation: featured-product-spin 18s linear infinite;
  z-index: 1;
}

.featured-product__stamp-text {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  fill: currentColor;
}

@keyframes featured-product-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .featured-product__stamp { animation: none; }
}

.featured-product__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.featured-product__eyebrow {
  margin-bottom: var(--space-2);
}

.featured-product__title { margin: 0; }

.featured-product__share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted);
}

.featured-product__share a {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink);
}

.featured-product__share a:hover { border-color: var(--color-ink); }

.featured-product__full-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

.featured-product__full-link:hover { text-decoration: underline; }


/* ------------------------------------------------------------------ */
/* The media side, after the reference                                 */
/*                                                                     */
/* The panel is gone. A featured product used to sit as a small image  */
/* floating inside a large grey card, which put a box between the      */
/* shopper and the thing being sold; the product now stands on the     */
/* page's own ground at full size, with the gallery's thumbnail rail   */
/* beside it - the same rail the product page uses, so the reading is  */
/* learned once.                                                       */
/* ------------------------------------------------------------------ */
.featured-product__media {
  background-color: transparent;
  border-radius: 0;
  aspect-ratio: auto;
  overflow: visible;
}

/* The stamp gets its own row above the gallery rather than being pinned
   into a corner. Absolutely positioned it landed on the product itself,
   half on the photograph and half off it, which reads as a sticker someone
   forgot to remove; the reference floats it clear of the image on the page's
   own ground. */
.featured-product__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.featured-product__media .featured-product__stamp {
  position: static;
  flex: none;
  width: 88px;
  height: 88px;
}

.featured-product__media .product-gallery {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* The information side                                                */
/* ------------------------------------------------------------------ */
.featured-product__info {
  /* Wider than a plain buy box: the reference gives the copy real room
     and lets a long product name breathe over two or three lines. */
  max-width: 560px;
  gap: var(--space-4);
  justify-content: center;
}

.featured-product__title {
  line-height: 1.1;
  text-wrap: balance;
}

/* Share and "need help" share one line, pushed apart. Share had been
   carrying its own rule directly under the buy buttons, which gave four
   social icons the same billing as the one thing the block exists for. */
.featured-product__aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.featured-product__share {
  margin: 0;
  gap: var(--space-2);
}

.featured-product__share a {
  width: 28px;
  height: 28px;
  border: 0;
  color: var(--color-ink);
}

.featured-product__share a:hover {
  color: var(--color-brand);
}

.featured-product__help {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  text-decoration: none;
}

.featured-product__help span { text-decoration: underline; }
.featured-product__help:hover { color: var(--color-ink); }

/* The way through to the full page is a full-width row with the arrow at
   the far end, under a rule - a footer to the block rather than a link
   loose in the stack. */
.featured-product__full-link {
  justify-content: center;
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-5);
}