/* Hallmark · component: integrated product scene · theme: approved V12 cinematic DNA
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * Same approved image, safe text plane, no new theme / label / Hero.
 * States: default hover focus active disabled loading success error.
 * Product image is HTML, never distorted or faded by the WebGL texture system. */
.product-scene {
  display: grid;
  grid-template-areas: "visual" "copy";
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 100svh;
  padding: 4rem 0 3rem;
  margin: 0;
  gap: 0;
  background: var(--ivory);
  color: var(--cocoa);
}
.product-scene::before, .product-scene::after { content: none; }
.product-visual { grid-area: visual; margin: 0; min-width: 0; position: relative; mask-image: linear-gradient(to bottom, transparent, var(--cocoa) 5%, var(--cocoa) 92%, transparent); }
.product-visual picture { display: block; }
.product-scene .product-visual img {
  display: block; width: 100%; height: auto; max-height: none;
  aspect-ratio: 1122 / 1402; object-fit: cover; box-shadow: none;
}
.product-scene .product-visual picture { max-height: none; }
.product-copy { grid-area: copy; min-width: 0; padding: 2rem max(1.5rem, env(safe-area-inset-left)) 3rem; }
.product-scene .product-copy h2 {
  margin: 0; max-width: none; min-width: 0; overflow-wrap: anywhere;
  font-size: clamp(1.9rem, 5vw, 3.25rem) !important;
  font-weight: 400 !important; letter-spacing: 0.015em !important;
  line-height: 1.4; text-wrap: balance;
}
.product-scene .product-intro { margin: .75rem 0 0; color: var(--cocoa-soft); font-size: 1rem; line-height: 1.85; }
.product-numbers { display: flex; align-items: start; gap: clamp(2rem, 7vw, 4rem); margin: 2rem 0 1.5rem; }
.product-numbers > div { display: grid; gap: .25rem; }
.product-numbers dt { font-size: .875rem; line-height: 1.6; color: var(--cocoa-soft); }
.product-numbers dd { margin: 0; display: flex; align-items: baseline; gap: .3em; font-size: 1.75rem; line-height: 1.5; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-numbers dd span { font-size: 1rem; }
.product-choices { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 0; margin: 0; font-size: 1rem; line-height: 1.8; }
.product-choices li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.sweetness-detail { color: var(--cocoa-soft); font-size: .875rem; }
.product-action { display: inline-flex; align-items: center; gap: 1.25rem; min-height: 68px; border: 0; margin-top: 2rem; padding: .5rem 0; text-decoration: none; background: transparent; color: var(--cocoa); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.product-action__shape { display: grid; place-items: center; width: 52px; height: 52px; flex: none; background: var(--mustard); color: var(--cocoa); border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%; box-shadow: 0 3px 0 var(--mustard-deep); transition: transform 160ms var(--ease, var(--ease-out)); }
.product-action__shape svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.product-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .product-action:hover .product-action__shape { transform: rotate(-8deg); } }
.product-action:active .product-action__shape, .product-action[data-state="active"] .product-action__shape { transform: translateY(2px); }
.product-action[data-state="hover"] .product-action__shape { transform: rotate(-8deg); }
.product-action[data-state="focus"] { outline: 2px solid var(--focus); outline-offset: 5px; }
.product-action:disabled, .product-action[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.product-action[data-state="loading"] { cursor: progress; }
.product-action[data-state="loading"] svg { opacity: .35; }
.product-action[data-state="success"] { color: var(--success-ink); }
.product-action[data-state="error"] { color: var(--error-ink); }
.product-scene .product-status { margin: .75rem 0 0; color: var(--cocoa-soft); font-size: .875rem; line-height: 1.8; }
@media (min-width: 40rem) { .product-copy { padding-inline: 2.5rem; } }
@media (min-width: 48rem) {
  .product-scene { grid-template-areas: "copy visual"; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); align-items: center; padding: 4rem 0 2rem; }
  .product-copy { padding: clamp(3rem, 8vw, 7rem) 1rem 3rem clamp(2.5rem, 6vw, 6rem); align-self: center; }
  .product-visual { min-height: 36rem; height: min(54rem, calc(100svh - 6rem)); mask-image: linear-gradient(to right, transparent, var(--cocoa) 12%); }
  .product-scene .product-visual picture, .product-scene .product-visual img { height: 100%; }
  .product-scene .product-visual img { max-height: 54rem; object-position: center 58%; }
  .product-numbers { margin-top: 2.5rem; }
  .product-choices { display: grid; gap: .5rem; }
  .product-action { margin-top: 2.5rem; }
}
@media (min-width: 75rem) { .product-copy { padding-right: 2.5rem; } .product-choices { display: flex; gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .product-action, .product-action__shape { transition: none; }
  .product-action:is(:hover,:active) .product-action__shape { transform: none; }
}