/* Roasted Root single product page (Rev. October 2026)
   Page-level styling around the options: image, price.
   Loaded on product pages only (functions.php). Colors and radii come from tokens.css.
   The options themselves are styled in product-options.css. */

/* Main product price, under the title: Terracotta.
   Related and suggested products further down keep their own color. */
.single-product .wp-block-woocommerce-product-price:not(.wp-block-woocommerce-related-products *, .wp-block-woocommerce-product-collection *) :is(.wc-block-components-product-price, .price, .amount, bdi, ins),
.woocommerce div.product > .summary > .price,
.woocommerce div.product > .summary > .price .amount {
  color: var(--terracotta);
}

/* Product image: same corners as the option tiles and groups. */
.single-product :is(
  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery .flex-viewport,
  .woocommerce-product-gallery__image,
  .woocommerce-product-gallery__image img,
  .wc-block-product-gallery-large-image,
  .wc-block-product-gallery-large-image img,
  .wp-block-woocommerce-product-image img
) {
  border-radius: var(--radius-md);
}
.single-product :is(.woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery__wrapper, .wc-block-product-gallery-large-image) {
  overflow: hidden;
}
/* Holds anything a gallery feature adds (like a zoom image) inside the frame. */
.single-product .woocommerce-product-gallery__image { position: relative; overflow: hidden; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  border-radius: var(--radius-sm);
}

/* Layout from templates/single-product.html: image and details side by side
   inside the 1200px content width (stacked on phones). */
.rr-product { padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60); }
.rr-product .rr-product__columns {
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--20);
}
.rr-product .rr-product__summary > * + * { margin-top: 12px; }

/* WooCommerce sets its breadcrumbs and store notices to "wide" (1440px) by
   default. On product pages, everything stays inside the content width. */
.rr-product > .alignwide { max-width: var(--wp--style--global--content-size, 1200px); }

/* Main price size: the Card size from the type scale. */
.rr-product .rr-product__summary .wp-block-woocommerce-product-price :is(.wc-block-components-product-price, .price) {
  font-family: var(--font-archivo);
  font-size: var(--wp--preset--font-size--card);
  font-weight: 800;
  line-height: 1.1;
}

/* ---------- You might also like (related products) ----------
   Photo, name, and price; the whole card opens the product. No Add to Cart
   buttons on purpose: a one-tap add would skip required choices like milk.
   WooCommerce picks items from the same category automatically. */
.rr-related { margin-top: var(--wp--preset--spacing--60); }
.rr-related:not(:has(.rr-related__grid > li)) { display: none; }
.rr-related .rr-related__eyebrow { margin: 0 0 6px; }
.rr-related .rr-related__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  color: var(--espresso);
}
.rr-related .rr-related__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--wp--preset--spacing--20);
}
.rr-related .rr-related__grid > li { position: relative; margin: 0; text-align: left; }
.rr-related .rr-related__image { margin: 0; }
.rr-related .rr-related__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.rr-related .rr-related__name {
  margin: 10px 0 4px;
  font-family: var(--font-archivo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.rr-related .rr-related__name a { color: var(--espresso); text-decoration: none; }
/* The name's link stretches over the whole card, so tapping the photo or
   price opens the product too. */
.rr-related .rr-related__name a::after { content: ""; position: absolute; inset: 0; }
.rr-related .rr-related__grid > li:hover .rr-related__name a { color: var(--terracotta); }
.rr-related .rr-related__price,
.rr-related .rr-related__price :is(.wc-block-components-product-price, .amount, bdi) {
  margin: 0;
  text-align: left;
  font-family: var(--font-archivo);
  font-size: 15px;
  font-weight: 800;
  color: var(--terracotta);
}

/* Two per row on phones and tablets. !important: WordPress's own grid
   rule for this block switches to one column on small screens. */
@media (max-width: 781px) {
  .rr-related .rr-related__grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Dine-in-only items (inc/dine-in.php): shown instead of options and Add to Cart */
.rr-dine-in-note {
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--wheat);
  color: var(--espresso);
  font: 700 15px/1.4 var(--font-archivo);
}

/* Merch: pickup note under Add to Cart (inc/shop.php) */
.rr-shop__pickup-note { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--wheat); color: var(--espresso); font: 600 14px/1.4 var(--font-archivo); }
.rr-shop__made-for { margin: 4px 0 12px; color: var(--olive); font: 700 14px/1.3 var(--font-archivo); letter-spacing: 0.02em; }