/* Personalization controls and the design summary on a product page. */
.product-page .product-live-options { gap: 16px; }
.product-page .product-live-option-heading { margin-bottom: 7px; font-size: .8125rem; }
.product-page .product-live-option-heading span { margin-left: auto; }
.product-page .product-live-options .product-live-colors { gap: 3px; }
.product-page .product-live-color { width: 40px; height: 40px; }
.product-page .product-live-color[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(15,26,20,.22), 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-strong); }
.product-page .product-live-targets { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 16px; margin-top: 18px; }
.product-page .product-live-target-buttons { gap: 6px; }
.product-page .product-live-target { min-height: 40px; padding: 8px 13px; border-radius: 8px; background: rgba(255,255,255,.32); font-size: .8125rem; transition: background .15s, border-color .15s, color .15s; }
.product-page .product-live-target[aria-pressed="true"] { color: var(--paper); background: var(--accent-strong); border-color: var(--accent-strong); font-weight: 650; }
.product-page .product-live-target-label { margin-bottom: 8px; }
.product-page .product-design { margin-top: 24px; padding-top: 22px; }
.product-page .product-design-head { align-items: center; margin-bottom: 16px; }
.product-page .product-design-head h2 { font-size: 1.125rem; letter-spacing: -.025em; }
.product-page .product-design-head p { margin-top: 4px; font-size: .8125rem; color: var(--ink-2); }
.product-page .personalizer-reset { min-height: 40px; font-size: .8125rem; }
.product-page .product-design-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; margin-bottom: 0; padding: 12px; border-color: rgba(15,26,20,.1); border-radius: 10px; }
/* Keep the thumbnail's loading, live and error states in the same reserved area.
   The embedded renderer still runs here, but never sets the card's height. */
.product-page .product-design-card { grid-template-rows: minmax(64px, auto); }
.product-page .product-design-card .personalizer-preview { display: contents; }
.product-page .product-design-card .personalizer-stage { width: min(100%, calc(64px * var(--design-ratio, 1))); max-height: 64px; justify-self: center; border-radius: 4px; }
.product-page .product-design-card .personalizer-fallback { padding: 0; }
.product-page .product-design-card .personalizer-stage.is-loading .personalizer-fallback { opacity: .55; }
.product-page .product-design-card .personalizer-frame { position: absolute; min-height: 0; max-height: 100%; }
.product-page .product-design-card .personalizer-loading { width: 1px; height: 1px; inset: 0 auto auto 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); transform: none; font-size: .8125rem; }
.product-page .product-design-card .personalizer-loading .search-spinner { display: none; }
.product-page .product-design-card .personalizer-error, .product-page .product-design-card noscript { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.product-page .product-design-card .personalizer-error { align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.product-page .product-design-about { grid-column: 2; grid-row: 1; gap: 5px; }
.product-page .product-design-name { font-size: .8125rem; font-weight: 600; }
.product-page .product-design-actions { gap: 6px 16px; }
.product-page .product-design-link { min-height: 28px; padding: 0; border: 0; border-radius: 0; font-size: .75rem; font-weight: 500; }
.product-page .product-design-link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 961px) {
    .product-page .product-live-targets { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .product-page .product-live-options { padding-top: 0; }
    .product-page .product-live-targets, .product-page .product-design { margin-top: 0; }
    .product-page .product-design { padding-top: 24px; }
}
@media (max-width: 540px) {
    .product-page .design-breadcrumb a:nth-of-type(2) { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .product-page .design-breadcrumb > span:last-child, .product-page .design-breadcrumb > span:nth-last-child(2) { display: none; }
    .product-page .product-live-targets { grid-template-columns: 1fr; gap: 18px; }
    .product-page .product-live-target { min-height: 44px; }
    .product-page .product-live-color { width: 44px; height: 44px; }
    .product-page .product-design-link { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-page .product-live-target { transition: none; }
}

.product-page-gallery.has-product-photos { grid-template-rows: minmax(0, 1fr) auto auto; }
.product-photo-strip { min-width: 0; }
.product-photo-label { margin-bottom: 8px; color: var(--ink-2); font-size: .6875rem; font-weight: 600; }
.product-photo-strip .product-thumbs { flex-direction: row; overflow: auto hidden; contain: none; scroll-snap-type: x proximity; }
.product-photo-strip .product-thumbs li { width: 44px; scroll-snap-align: start; }
.product-photo-strip .product-thumbs a { border-radius: 6px; }
.product-photo-strip .product-thumbs a:hover { border-color: var(--accent-strong); }
@media (max-width: 960px), (max-height: 600px) {
    .product-page-gallery.has-product-photos { grid-template-rows: auto auto auto; }
}