.detail-page {
    padding-bottom:20px
}
.product-hero {
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    gap:24px;
    align-items:start
}
.gallery {
    min-width:0
}
.gallery-main {
    display:block;
    width:100%;
    height:350px;
    object-fit:contain;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px
}
.gallery-thumbs {
    display:flex;
    gap:7px;
    margin-top:9px;
    overflow:auto
}
.gallery-thumbs button {
    flex:0 0 62px;
    width:62px;
    height:62px;
    padding:3px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    cursor:pointer
}
.gallery-thumbs img {
    width:100%;
    height:100%;
    object-fit:contain
}
.product-info h1 {
    margin:0 0 6px;
    font-size:28px
}
.product-subtitle {
    margin:0 0 12px;
    color:var(--muted)
}
.compare-toggle--hero {
    display:inline-flex;
    padding:8px 12px;
    border:1px solid var(--brand);
    border-radius:8px;
    background:#fff;
    color:var(--brand);
    font-weight:750
}
.current-price {
    margin:14px 0;
    padding:13px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--brand);
    font-size:21px;
    font-weight:850
}
.quick-specs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px
}
.quick-specs div {
    padding:11px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px
}
.quick-specs strong {
    display:block;
    color:var(--muted);
    font-size:12px
}
.quick-specs span {
    display:block;
    margin-top:3px;
    color:var(--brand);
    font-weight:800
}
.content-card {
    padding:20px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px
}
.content-card h2 {
    margin-top:0;
    font-size:19px
}
.detail-price-grid {
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(0,2fr);
    gap:18px;
    margin-top:24px
}
.detail-price-grid--bottom {
    align-items:stretch
}
.history-table {
    width:100%;
    border-collapse:collapse
}
.history-table th,.history-table td {
    padding:7px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:13px
}
.offer-section {
    padding:0;
    overflow:hidden
}
.offer-section h2 {
    margin:0;
    padding:14px 16px;
    background:#f8f4e0
}
.offer-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 145px 90px;
    gap:10px;
    align-items:center;
    padding:12px 16px;
    border-top:1px solid var(--line)
}
.offer-card.is-hidden {
    display:none
}
.offer-card span {
    display:block;
    color:var(--muted);
    font-size:12px
}
.offer-price {
    color:var(--brand);
    font-size:17px;
    font-weight:850;
    text-align:right
}
.offer-cta {
    padding:7px 9px!important;
    border-radius:7px;
    background:var(--brand);
    color:#fff!important;
    text-align:center;
    font-weight:700
}
.show-more-offers {
    display:block;
    margin:12px auto;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    cursor:pointer
}
.price-summary-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:9px
}
.price-summary-grid>div {
    padding:11px;
    border:1px solid var(--line);
    border-radius:9px
}
.price-summary-grid strong {
    display:block;
    color:var(--muted);
    font-size:12px
}
.price-summary-grid span {
    display:block;
    margin-top:3px;
    color:var(--brand);
    font-weight:800
}
.price-chart-card canvas {
    width:100%!important;
    max-height:280px
}
.detail-review-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:24px
}
.detail-review-grid h3 {
    font-size:15px
}
.spec-section {
    margin-top:32px
}
.spec-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px
}
.spec-card {
    padding:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px
}
.spec-card h3 {
    margin:0 0 9px;
    font-size:16px
}
.spec-card table {
    width:100%;
    border-collapse:collapse
}
.spec-card td {
    padding:7px;
    border-bottom:1px solid #f0f0f0;
    font-size:13px
}
.spec-card td:first-child {
    width:43%;
    color:var(--muted)
}
.related-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
}
.related-card {
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    gap:9px;
    align-items:center;
    padding:11px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px
}
.related-card img {
    width:70px;
    height:80px;
    object-fit:contain;
    grid-row:1/3
}
.related-card strong {
    line-height:1.3
}
.related-card span {
    color:var(--brand);
    font-weight:750
}
@media(max-width:850px) {
    .product-hero {
        grid-template-columns:1fr
    }
    .gallery {
        max-width:430px;
        margin:auto
    }
    .detail-price-grid,.detail-review-grid {
        grid-template-columns:1fr
    }
    .price-summary-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .spec-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:600px) {
    .quick-specs {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .related-grid {
        grid-template-columns:1fr
    }
    .offer-card {
        grid-template-columns:1fr
    }
    .offer-price {
        text-align:left
    }
}