/* Majesty single product page (Figma T04 V2). ACSS + Majesty tokens.
 * Layout lives in Bricks classes (product-detail*, product-about*); this file styles the
 * markup rendered by the majesty-core elements on that template. */

/* Ingredients (element: majesty-product-ingredients) */
.product-ingredients { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.product-ingredients__item { margin: 0; padding: 6px 12px; border-radius: var(--radius-circle); background: var(--mj-bg-plate); font-size: var(--text-s); font-weight: 600; line-height: 1.4; color: var(--text-dark); }
.product-ingredients--text { display: block; font-size: var(--text-m); line-height: 1.7; color: var(--text-dark-muted); }

/* Product form in the page (templates/product-panel.php, context "page"): no panel chrome */
.product-form { min-inline-size: 0; }
.pp--page { block-size: auto; max-block-size: none; gap: var(--space-l); }
.pp--page .pp__body { overflow: visible; padding: 0; }
.pp--page .pp__foot { padding: var(--space-m) 0 0; background: transparent; }

/* Mobile: the summary + add button stay pinned above the bottom bar while choosing (Figma: sticky add bar).
 * Sticky inside the form, so it releases after the toppings. 72px = .bottom-bar min height. */
@media (max-width: 767px) {
	.pp--page .pp__foot { position: sticky; inset-block-end: calc(72px + env(safe-area-inset-bottom)); z-index: 2; margin-inline: calc(var(--gutter) * -1); padding: var(--space-s) var(--gutter); background: var(--mj-bg-surface); box-shadow: var(--mj-shadow-sticky); }
}