/* Product page */

.breadcrumb { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); }
.breadcrumb__list li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border); }
.breadcrumb__list a { color: var(--color-text-muted); }
.breadcrumb__list a:hover { color: var(--color-primary); }
.breadcrumb__list [aria-current] { color: var(--color-text); overflow-wrap: anywhere; }

.product-page .alert { margin-bottom: var(--space-5); }

.product-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) {
    .product-layout { grid-template-columns: 1.2fr 1fr; align-items: start; gap: var(--space-7); }
    .product-media { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}

.product-media__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.product-media__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    aspect-ratio: 4 / 3;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.product-media__placeholder span { font-size: var(--text-sm); color: var(--color-text-muted); }
.product-media__icon { width: 56px; height: 56px; opacity: 0.7; }

.product-info__category { font-size: var(--text-sm); font-weight: 600; }
.product-info__title { margin-top: var(--space-1); font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.product-info__rating { margin-top: var(--space-2); font-size: var(--text-sm); }
.product-info__summary { margin-top: var(--space-3); font-size: var(--text-lg); color: var(--color-text-muted); }

.buy-box { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.buy-box__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.price--lg { font-size: 2rem; }
.buy-box__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.buy-box__facts { padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.buy-box__facts li + li { margin-top: var(--space-1); }

.product-formats { margin-top: var(--space-5); }
.product-formats__title { margin-bottom: var(--space-3); font-size: var(--text-lg); font-weight: 700; }
.product-formats__list { display: flex; flex-direction: column; gap: var(--space-2); }
.product-formats__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.product-formats__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

.product-section { margin-top: var(--space-7); }
.product-section__title { margin-bottom: var(--space-4); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.product-section .prose { max-width: 68ch; }

.review-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .review-list { grid-template-columns: repeat(2, 1fr); } }
.review { display: flex; flex-direction: column; gap: var(--space-3); }
.review__rating { font-weight: 700; color: var(--color-warning); }
.review__body { margin: 0; }
.review__by { margin-top: auto; font-size: var(--text-sm); color: var(--color-text-muted); }

.review-form { margin-top: var(--space-5); max-width: 640px; }
.review-form .alert { margin-bottom: var(--space-4); }

/* ------------------------------------------------------------ share row (Stage 11) */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.share__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.share__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }