/* Product page: same glass as the sidebar and the home-page tiles (tokens come from glass_core.css).
   The product template's own layout classes had no CSS before this file. */
.product-detail-layout {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start;
}
.product-gallery { min-width: 0; position: sticky; top: 20px; }
.product-info { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px; }
.gallery-main { position: relative; border-radius: 22px; padding: 10px; }
.gallery-main img.gallery-main-img { width: 100%; height: auto; display: block; border-radius: 14px; }
.gallery-thumbs { margin-top: 12px; }
.gallery-thumb { border-radius: 10px; border-color: var(--gs-border, rgba(255,255,255,.2)); }
.img-placeholder.large { min-height: 320px; display: flex; align-items: center; justify-content: center; font-size: 72px; }

/* the shared glass recipe (same as .trust-item.glass-surface) */
.glass-surface.pg {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), var(--gs-cursor), transparent 70%),
        linear-gradient(0deg, color-mix(in srgb, var(--gs-accent) 13.6%, transparent), transparent 45%),
        var(--gs-tint);
    border: 1px solid var(--gs-border);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 var(--gs-rim);
    backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    color: var(--gs-text);
}
.glass-surface.pg::after {
    content: ""; position: absolute; left: -50%; right: -50%; top: 8%; height: 55%; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--gs-sheen) 50%, transparent);
    opacity: .35; transform: rotate(-16deg);
}

.product-brand { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gs-muted); }
.product-title { font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--gs-strong); letter-spacing: -.01em; }
.product-info .detail-sku { color: var(--gs-muted); }
.product-info .detail-sku strong { color: var(--gs-strong); }
.product-price-block { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-sale.large, .price-regular.large { font-size: 30px; font-weight: 700; }
.product-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.product-info .feature-tag { background: var(--gs-chip); border: 1px solid var(--gs-insetb); color: var(--gs-text); border-radius: 999px; padding: 4px 12px; }

.specs-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; background: var(--gs-inset); border: 1px solid var(--gs-insetb); font-size: 14px; }
.specs-table td { padding: 9px 14px; vertical-align: top; color: var(--gs-strong); border-top: 1px solid var(--gs-insetb); }
.specs-table tr:first-child td { border-top: 0; }
.specs-table td:first-child { width: 42%; color: var(--gs-muted); font-weight: 500; }

.btn-large { padding: 14px 26px; font-size: 16px; border-radius: 999px; }
.product-cart-row .btn-cart { border-radius: 999px; }
.product-info .btn-share-wa, .product-info .btn-ask-wa { border-radius: 999px; }
.product-info .share-label { color: var(--gs-muted); }
.product-info .share-icon { background: var(--gs-chip); border: 1px solid var(--gs-insetb); color: var(--gs-text); }
.product-info .share-icon:hover { background: var(--gs-hover); color: var(--gs-strong); }
.product-hold-notice { font-size: 12.5px; color: var(--gs-muted); }

/* reviews */
.reviews-heading { border-bottom-color: var(--gs-insetb); }
.reviews-summary.glass-surface.pg, .review-form-wrap.glass-surface.pg, .review-card.glass-surface.pg { border-radius: 20px; }
.review-form-wrap .review-form-row input, .review-form-wrap .review-form-row textarea {
    background: var(--gs-inset); border: 1px solid var(--gs-insetb); color: var(--gs-strong); border-radius: 12px;
}
.review-form-wrap .review-form-row label, .review-body, .review-date, .reviews-avg-count { color: var(--gs-muted); }
.review-author, .review-form-wrap h3, .reviews-avg-number { color: var(--gs-strong); }

@media (max-width: 900px) {
    .product-detail-layout { grid-template-columns: 1fr; gap: 18px; }
    .product-gallery { position: static; }
    .product-info { padding: 20px; }
}

/* breadcrumb ("Devices / Model"): reads as the page heading, same font and weight as the product title */
.page-main > .breadcrumb {
    font-size: 20px; font-weight: 700; letter-spacing: -.01em; gap: 10px; margin-bottom: 18px; color: var(--gs-strong, var(--text));
}
.page-main > .breadcrumb a { color: var(--gs-muted, var(--text-muted)); font-weight: 700; }
.page-main > .breadcrumb a:hover { color: var(--gs-strong, var(--text)); }
.page-main > .breadcrumb .sep { color: var(--gs-section, var(--text-dim)); font-weight: 400; }
.page-main > .breadcrumb .current { color: var(--gs-strong, var(--text)); }
@media (max-width: 900px) { .page-main > .breadcrumb { font-size: 16px; flex-wrap: wrap; } }