body { min-height: 100vh; }

.page-container { max-width: 1240px; margin: 0 auto; padding: 2.5rem 2rem 5rem; }

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-dim);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.back-btn:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.back-btn svg { width: 14px; height: 14px; }

.product-layout { display: flex; gap: 3.5rem; align-items: flex-start; }

.gallery { flex: 0 0 540px; position: sticky; top: 2rem; }
.gallery-main {
    display: block;
    width: 100%;
    height: 340px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
    cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs:empty { display: none; }
.gallery-thumb {
    flex: 0 0 92px;
    height: 60px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gallery-thumb:hover { opacity: 0.8; }
.gallery-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { flex: 1; min-width: 0; }
.product-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.product-title { font-size: 2.6rem; letter-spacing: -0.035em; }
.product-subtitle { font-size: 1.05rem; color: var(--accent-text); margin-bottom: 1.5rem; }
.product-description { font-size: 1rem; line-height: 1.75; color: var(--ink-dim); margin-bottom: 2.25rem; }
.product-description strong { color: var(--ink); }

.product-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 0.7rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--line);
}
.product-features { margin-bottom: 2.25rem; }
.product-features li {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-dim);
}
.product-features li strong { display: block; margin-bottom: 0.15rem; color: var(--ink); font-weight: 600; }

.product-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.25rem; }
.product-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lightbox {
    width: min(92vw, 1400px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
    overflow: visible;
}
.lightbox::backdrop { background: rgba(4, 5, 7, 0.9); }
.lightbox img { width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--radius-lg); }
.lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-dim);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox-close:hover { color: var(--ink); border-color: var(--ink-faint); }

@media (max-width: 1024px) {
    .product-layout { flex-direction: column; gap: 2.5rem; }
    .gallery { flex: 0 0 auto; position: static; width: 100%; }
    .gallery-main { height: 300px; }
}

@media (max-width: 640px) {
    .page-container { padding: 1.5rem 1.25rem 3.5rem; }
    .back-btn { margin-bottom: 1.75rem; }
    .product-head { flex-wrap: wrap; gap: 0.6rem; }
    .product-title { font-size: 1.9rem; }
    .gallery-main { height: 210px; }
    .gallery-thumb { flex: 0 0 72px; height: 48px; }
    .product-buttons .btn { width: 100%; }
    .lightbox { width: 96vw; }
    .lightbox-close { top: -12px; right: -6px; }
}