/* Product page composites consume the shared Elysium/Flute design tokens. */
.em-product-layout { display: grid; gap: var(--elysium-space-xl); min-width: 0; }
.em-product-layout__hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--elysium-space-xl); align-items: start; }
.em-product-page { padding-block: 0 var(--elysium-space-2xl); }
.em-product-widget { border: 1px solid var(--em-border); border-radius: var(--em-radius); background: var(--em-card); box-shadow: var(--em-shadow); }
.em-product-widget :is(h2, h3, p, ol, dl) { margin: 0; }
.em-product-widget :is(a, p, h2, h3, dd, th, td, span) { overflow-wrap: anywhere; }
.em-product-widget :is(a, button) { -webkit-tap-highlight-color: transparent; }
.em-product-widget :is(button, a) svg { width: 20px; height: 20px; }
.em-product-widget--media { overflow: hidden; }
.em-product-cover { position: relative; isolation: isolate; border-radius: var(--em-radius) var(--em-radius) 0 0; overflow: hidden; }
.em-product-cover .em-store-media { height: auto; aspect-ratio: 16 / 10; max-height: var(--em-product-media-height); min-height: 0; }
.em-product-cover .em-store-media :is(img, video) { object-fit: var(--em-product-media-fit); }
.em-product-cover .em-store-media--model { height: var(--em-product-media-height); }
.em-product-cover__badges { position: absolute; z-index: 4; inset-block-start: var(--elysium-space-lg); inset-inline-start: var(--elysium-space-lg); inset-inline-end: var(--elysium-space-lg); display: flex; flex-wrap: wrap; gap: var(--elysium-space-sm); pointer-events: none; }
.em-product-cover__badges .em-flag { border: 1px solid var(--em-border); box-shadow: var(--elysium-shadow-card); }
.em-product-widget .em-product-delivery { display: flex; align-items: center; gap: var(--elysium-space-md); padding: var(--elysium-space-lg) var(--elysium-space-xl); border-top: 1px solid var(--em-border); color: var(--em-muted); font-size: var(--elysium-type-small); line-height: var(--elysium-type-leading); }
.em-product-delivery svg { width: 20px; height: 20px; color: var(--em-accent); }
.em-product-gallery { display: flex; flex-wrap: wrap; gap: var(--elysium-space-sm); padding: var(--elysium-space-md) var(--elysium-space-lg); }
.em-product-gallery__item { display: block; padding: var(--elysium-space-xs); background: var(--em-surface); border: 1px solid var(--em-border); border-radius: var(--em-radius-xs); cursor: pointer; }
.em-product-gallery__item img { display: block; width: 88px; height: 56px; object-fit: contain; border-radius: var(--em-radius-xs); }
.em-product-info { display: grid; gap: var(--elysium-space-sm); padding: var(--elysium-space-xl); }
.em-product-info__header { display: flex; align-items: start; justify-content: space-between; gap: var(--elysium-space-lg); }
.em-product-info__header > div { min-width: 0; }
.em-product-widget .em-product-eyebrow { display: block; color: var(--em-muted); font-size: var(--elysium-type-small); font-weight: 600; line-height: 1.5; }
.em-product-widget .em-product-name { margin-top: var(--elysium-space-xs); color: var(--em-text); font-size: clamp(2rem, 5cqi, 3.5rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 800; }
.em-product-favourite { display: grid; flex: 0 0 auto; place-items: center; width: 44px; min-height: 44px; padding: var(--elysium-space-sm); border: 1px solid var(--em-border); border-radius: var(--em-radius-sm); background: var(--em-surface); color: var(--em-text); cursor: pointer; }
.em-product-favourite:is(:hover, .is-on) { color: var(--em-accent); border-color: var(--em-accent); background: color-mix(in srgb, var(--em-accent) 12%, var(--em-surface)); }
.em-product-favourite.is-on svg { fill: currentColor; }
.em-product-intro { color: var(--em-text); font-size: var(--elysium-type-body); line-height: var(--elysium-type-leading); }
.em-product-info__header + .em-product-meta { margin-top: calc(var(--elysium-space-md) - var(--elysium-space-sm)); }
.em-product-meta { display: flex; flex-wrap: wrap; gap: var(--elysium-space-xs); }
.em-product-chip { display: inline-flex; align-items: center; gap: var(--elysium-space-xs); max-width: 100%; padding: var(--elysium-space-xs) var(--elysium-space-md); border: 1px solid var(--em-border); border-radius: var(--em-radius-xs); color: var(--em-muted); font-size: var(--elysium-type-small); line-height: 1.5; }
.em-product-chip svg { width: 20px; height: 20px; }
.em-product-purchase { display: grid; gap: var(--elysium-space-md); padding-top: var(--elysium-space-lg); border-top: 1px solid var(--em-border); }
.em-product-price-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--elysium-space-md); }
.em-product-price { display: grid; gap: var(--elysium-space-xs); }
.em-product-price strong { color: var(--em-text); font-size: clamp(1.75rem, 4cqi, 2.75rem); line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; }
.em-product-price s { color: var(--em-muted); font-size: var(--elysium-type-small); }
.em-product-currency { font-size: .72em; }
.em-product-stock { display: inline-flex; align-items: center; gap: var(--elysium-space-sm); color: var(--em-text); font-size: var(--elysium-type-small); }
.em-product-stock::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--elysium-color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--elysium-color-success) 18%, transparent); }
.em-product-stock.is-out::before { background: var(--elysium-color-error); box-shadow: none; }
.em-product-actions { display: flex; flex-wrap: wrap; gap: var(--elysium-space-md); }
.em-product-actions > :is(a, button) { flex: 1 1 160px; min-width: 0; min-height: 48px; height: auto; padding: var(--elysium-space-md) var(--elysium-space-lg); line-height: 1.5; white-space: normal; text-align: center; }
.em-product-widget .em-product-primary { background: var(--em-accent); color: var(--em-surface); border: 1px solid var(--em-accent); font-weight: 750; }
.em-product-widget .em-product-secondary { background: transparent; color: var(--em-accent); border: 1px solid color-mix(in srgb, var(--em-accent) 68%, var(--em-border)); }
.em-product-widget .em-product-secondary:hover { background: color-mix(in srgb, var(--em-accent) 10%, transparent); }
.em-product-widget .em-product-hint { color: var(--em-muted); font-size: var(--elysium-type-small); line-height: var(--elysium-type-leading); }
.em-product-widget .em-product-notice { padding: var(--elysium-space-md); border-inline-start: 2px solid var(--em-accent); background: color-mix(in srgb, var(--em-accent) 8%, var(--em-surface)); color: var(--em-text); font-size: var(--elysium-type-small); }
.em-product-field { display: grid; gap: var(--elysium-space-sm); min-width: 0; color: var(--em-muted); font-size: var(--elysium-type-small); }
.em-product-field :is(input, select) { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--em-border); border-radius: var(--em-radius-xs); background: var(--em-surface); color: var(--em-text); padding: var(--elysium-space-md); font: inherit; }
.em-product-compare { padding-top: var(--elysium-space-lg); border-top: 1px solid var(--em-border); }
.em-product-compare summary { display: flex; align-items: center; gap: var(--elysium-space-md); min-height: 44px; color: var(--em-accent); font-size: var(--elysium-type-small); font-weight: 600; cursor: pointer; list-style: none; }
.em-product-compare summary::-webkit-details-marker { display: none; }
.em-product-compare summary > span { flex: 1; }
.em-product-compare summary > svg:last-child { transition: transform .18s ease; }
.em-product-compare[open] summary > svg:last-child { transform: rotate(180deg); }
.em-product-compare summary:focus-visible { outline: 2px solid var(--em-accent); outline-offset: 3px; border-radius: var(--em-radius-xs); }
.em-product-compare__body { display: grid; gap: var(--elysium-space-lg); padding-block: var(--elysium-space-md); }
.em-product-compare table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--elysium-type-small); }
.em-product-compare thead th:first-child { width: 25%; }
.em-product-compare :is(th, td) { padding: var(--elysium-space-sm); vertical-align: top; text-align: start; border-bottom: 1px solid var(--em-border); line-height: 1.5; }
.em-product-compare tbody th { font-weight: 500; color: var(--em-muted); }
.em-product-link { display: inline-flex; align-items: center; gap: var(--elysium-space-sm); color: var(--em-accent); font-size: var(--elysium-type-small); line-height: 1.5; font-weight: 600; }
.em-product-widget .em-product-title { font-size: clamp(1.25rem, 3cqi, 1.6rem); color: var(--em-text); line-height: 1.35; font-weight: 750; }
.em-product-widget .em-product-subtitle { margin-top: var(--elysium-space-lg); font-size: var(--elysium-type-body); }
.em-product-description { padding: 0 var(--elysium-space-xl) var(--elysium-space-xl); }
.em-product-section-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--elysium-space-xl); border-bottom: 1px solid var(--em-border); margin-bottom: var(--elysium-space-xl); }
.em-product-section-nav > :is(a, span) { display: block; padding: var(--elysium-space-lg) var(--elysium-space-xs); color: var(--em-muted); font-size: var(--elysium-type-small); line-height: 1.5; }
.em-product-section-nav .is-current { color: var(--em-accent); border-bottom: 3px solid var(--em-accent); font-weight: 700; }
.em-product-description__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--elysium-space-2xl); }
.em-product-description__grid > div { display: grid; align-content: start; gap: var(--elysium-space-md); min-width: 0; }
.em-product-description__grid:not(:has(.em-product-attributes)) { grid-template-columns: minmax(0, 1fr); }
.em-product-description .em-richtext { color: var(--em-muted); font-size: var(--elysium-type-body); line-height: var(--elysium-type-leading); min-width: 0; }
.em-product-description .em-richtext :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--elysium-space-md); }
.em-product-description .em-richtext :is(img, video, iframe) { max-width: 100%; }
.em-product-description .em-richtext :is(pre, table) { display: block; max-width: 100%; overflow-x: auto; }
.em-product-attributes { align-self: start; padding-inline-start: var(--elysium-space-xl); border-inline-start: 1px solid var(--em-border); }
.em-product-attributes > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--elysium-space-lg); padding-block: var(--elysium-space-md); font-size: var(--elysium-type-small); line-height: 1.5; border-bottom: 1px solid var(--em-border); }
.em-product-attributes > div:last-child { border-bottom: 0; }
.em-product-attributes dt { color: var(--em-muted); }
.em-product-attributes dd { color: var(--em-text); }
.em-product-bundle { padding-inline-start: var(--elysium-space-xl); color: var(--em-muted); line-height: 1.6; }
.em-product-how-to, .em-product-related { display: grid; gap: var(--elysium-space-lg); padding: var(--elysium-space-xl); }
.em-product-widget .em-product-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--elysium-space-lg); padding: 0; list-style: none; }
.em-product-steps li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--elysium-space-md); padding: var(--elysium-space-lg); border: 1px solid var(--em-border); border-radius: var(--em-radius-sm); min-width: 0; }
.em-product-step__number { align-self: start; color: var(--em-accent); font-size: var(--elysium-type-small); font-weight: 750; }
.em-product-step__icon { display: grid; flex: 0 0 48px; height: 48px; place-items: center; color: var(--em-accent); background: color-mix(in srgb, var(--em-accent) 8%, var(--em-surface)); border: 1px solid var(--em-border); border-radius: var(--elysium-radius-pill); }
.em-product-step__icon svg { width: 28px; height: 28px; }
.em-product-steps li > div { flex: 1 1 120px; min-width: 0; }
.em-product-steps h3 { color: var(--em-text); font-size: var(--elysium-type-small); font-weight: 650; line-height: 1.5; }
.em-product-steps p { padding-top: var(--elysium-space-xs); color: var(--em-muted); font-size: var(--elysium-type-small); line-height: 1.5; }
.em-product-related__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--elysium-space-md); }
.em-product-related__row { display: grid; grid-template-columns: minmax(100px, 200px) minmax(0, 1fr) auto auto; gap: var(--elysium-space-xl); align-items: center; padding: var(--elysium-space-md); border: 1px solid var(--em-border); border-radius: var(--em-radius-sm); }
.em-product-related__cover { display: block; min-width: 0; overflow: hidden; border-radius: var(--em-radius-xs); }
.em-product-related__cover .em-store-media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.em-product-related__cover .em-store-media :is(img, video) { object-fit: contain; }
.em-product-related__copy { display: grid; gap: var(--elysium-space-xs); min-width: 0; }
.em-product-related__copy h3 { font-size: var(--elysium-type-body); color: var(--em-text); line-height: 1.5; }
.em-product-related__copy h3 a { color: inherit; }
.em-product-related__copy p { color: var(--em-muted); font-size: var(--elysium-type-small); line-height: 1.5; }
.em-product-related__price { color: var(--em-text); font-size: 1.35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-product-related__price span { font-size: var(--elysium-type-body); }
.em-product-related__row > .em-store-button { min-height: 44px; white-space: normal; }
.em-product-navigation { display: flex; justify-content: space-between; align-items: start; gap: var(--elysium-space-xl); padding-block: var(--elysium-space-xl); }
.em-product-navigation nav { min-width: 0; }
.em-product-navigation ol { display: flex; flex-wrap: wrap; gap: var(--elysium-space-sm) var(--elysium-space-md); margin: 0; padding: 0; list-style: none; }
.em-product-navigation li { display: flex; align-items: baseline; gap: var(--elysium-space-md); min-width: 0; font-size: var(--elysium-type-small); line-height: 1.7; }
.em-product-navigation li :is(a, span) { overflow-wrap: anywhere; color: var(--em-muted); }
.em-product-navigation li [aria-current] { color: var(--em-text); font-weight: 700; }
.em-product-navigation li a:hover { color: var(--em-accent); }
.em-product-navigation__separator { flex: 0 0 auto; opacity: .6; }
.em-product-navigation__back { display: inline-flex; align-items: center; gap: var(--elysium-space-sm); flex: 0 0 auto; padding-block: var(--elysium-space-xs); color: var(--em-accent); font-size: var(--elysium-type-small); }
.em-product-navigation__back svg { width: 18px; height: 18px; }
.em-product-widget[data-em-product-section="how-to"] { scroll-margin-top: var(--elysium-space-3xl); }
@container em-store (max-width: 720px) {
    .em-product-description__grid { grid-template-columns: minmax(0, 1fr); gap: var(--elysium-space-xl); }
    .em-product-attributes { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--em-border); }
    .em-product-related__row { grid-template-columns: 112px minmax(0, 1fr); gap: var(--elysium-space-md); }
    .em-product-related__price { font-size: 1.15rem; }
    .em-product-related__row > .em-store-button { justify-self: stretch; }
    .em-product-widget .em-product-steps { grid-template-columns: minmax(0, 1fr); }
}
@container em-store (max-width: 420px) {
    .em-product-info, .em-product-how-to, .em-product-related { padding: var(--elysium-space-lg); }
    .em-product-description { padding-inline: var(--elysium-space-lg); padding-bottom: var(--elysium-space-lg); }
    .em-product-widget .em-product-delivery { padding: var(--elysium-space-lg); }
    .em-product-related__row { grid-template-columns: 88px minmax(0, 1fr); }
    .em-product-compare :is(th, td) { padding: var(--elysium-space-xs); font-size: .75rem; }
}
@container em-store (max-width: 340px) {
    .em-product-related__price, .em-product-related__row > .em-store-button { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
    .em-product-layout__hero { grid-template-columns: minmax(0, 1fr); }
    .em-product-navigation { flex-wrap: wrap; gap: var(--elysium-space-sm); }
}
@media (prefers-reduced-motion: reduce) { .em-product-compare summary > svg { transition: none; } }