@import url('/vendor/original-story/product-story.css');

/* Only the new site's persistent header needs a layout adapter. All product
   art direction, scenes, mobile styles and reduced-motion rules are original. */
[data-original-product-story] { --original-site-header: 76px; --original-story-bar: 50px; --original-purchase-bar: 80px; }
[data-original-product-story] .product-story { --stage-h: calc(100svh - var(--original-site-header) - var(--original-story-bar) - var(--original-purchase-bar)); }
[data-original-product-story] .product-story__topbar { top: var(--original-site-header); }
[data-original-product-story] .product-story__stage { top: var(--original-stage-top, calc(var(--original-site-header) + var(--original-story-bar))); }

/* Preserve the original vertical sequence while allowing its square artwork
   to shrink into the actual space left by the two bars and text rows. */
.product-story:not(.product-story--static) :is(.product-story__hero, .product-story__pin--kit > .product-story__stage) > .product-story__scene {
  display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto;
  height: calc(var(--stage-h) - 48px); width: min(100%,1040px);
  gap: clamp(8px,1.6vh,20px); justify-items: center; align-items: center;
}
.product-story:not(.product-story--static) .product-story__pin--kit > .product-story__stage > .product-story__scene {
  grid-template-rows: auto minmax(0,1fr) auto auto;
}
.product-story:not(.product-story--static) :is(.product-story__hero, .product-story__pin--kit) .product-story__card {
  width: auto; height: 100%; max-height: 100%; max-width: min(88vw,620px); aspect-ratio: 1;
}
.product-story:not(.product-story--static) .product-story__title {
  font-size: clamp(42px,min(10vw,calc(var(--stage-h) * .14)),116px);
}

/* These two shared app primitives were supplied by web/src/styles.css in the
   original page. Keep them scoped here so the restored calls to action and
   source disclosure retain their original appearance and touch targets. */
.product-story :where(.primary-button, .secondary-button) {
  min-height: 44px; border: 0; display: inline-flex; align-items: center;
  justify-content: center; gap: .55rem; font-weight: 700; text-decoration: none;
}
.product-story :where(.primary-button) {
  min-height: 46px; padding: .78rem 1.1rem; border-radius: 12px; color: #fff;
  background: #1f5138; box-shadow: 0 8px 18px rgba(31,81,56,.16);
}
.product-story :where(.primary-button:hover) { background: #143927; }
.product-story :where(.secondary-button) {
  padding: .65rem .9rem; border-radius: 10px; color: #1f5138; background: #e8eee3;
}
.product-story .copy-disclosure { margin: 8px 0 0; color: var(--story-ink2); font-size: .85rem; line-height: 1.5; }
.product-story .copy-disclosure > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding-right: 4px; color: #1f5138; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.product-story .copy-disclosure > summary::-webkit-details-marker { display: none; }
.product-story .copy-disclosure > summary::marker { content: ''; }
.product-story .copy-disclosure > summary::before {
  flex: none; width: 0; height: 0; border-top: .3rem solid transparent;
  border-bottom: .3rem solid transparent; border-left: .42rem solid currentColor;
  content: ''; transition: transform 120ms ease;
}
.product-story .copy-disclosure[open] > summary::before { transform: rotate(90deg); }
.product-story .copy-disclosure > summary:hover { text-decoration: underline; }
.product-story .copy-disclosure > :not(summary) { max-width: 76ch; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .product-story .copy-disclosure > summary::before { transition: none; }
}
@media (max-width: 860px) {
  [data-original-product-story] { --original-site-header: 66px; }
}
@media (max-width: 580px) {
  [data-original-product-story] { --original-site-header: 62px; }
}