* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #222; }
header { background: #1a1a2e; color: #fff; padding: 0 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon { width: 52px; height: 36px; background: #e63946; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #fff; }
.logo-text { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.logo-text span { color: #e63946; }
.logo-img { height: 40px; width: auto; display: block; }
.header-contacts { color: #ccc; font-size: 14px; text-align: right; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.header-contacts a { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.contact-phone { font-size: 17px !important; white-space: nowrap; }
.contact-btn { padding: 6px 14px; border-radius: 20px; font-size: 14px !important; white-space: nowrap; }
.contact-tg { background: #229ED9; }
.contact-wa { background: #25D366; }
.contact-buy { background: #e63946; }
.tg-bar { background:#e63946;color:#fff;text-align:center;padding:12px 20px;font-size:15px;font-weight:600;margin:0 -24px; }
.tg-bar a { color:#b3e5ff;text-decoration:none;font-weight:800; }
@media(max-width:680px){.tg-bar{font-size:13px;padding:8px 14px;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;}}
.breadcrumbs { max-width: 1200px; margin: 16px auto 0; padding: 0 20px; font-size: 13px; color: #666; }
.breadcrumbs a { color: #1A75A8; text-decoration: none; }
.product-wrap { max-width: 1200px; margin: 18px auto 60px; padding: 0 20px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.gallery { background:#fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); align-self: start; }
.lightbox .close, .lightbox .nav { background: none; border: none; font: inherit; color: inherit; padding: 0; }
.lightbox .close:focus-visible, .lightbox .nav:focus-visible, .gallery-main:focus-visible { outline: 3px solid #e63946; outline-offset: 3px; }
.gallery-main:focus-visible { border-radius: 8px; }
.gallery-main { width:100%; aspect-ratio: 3/4; background:#fff; display:flex; align-items:center; justify-content:center; cursor: zoom-in; overflow:hidden; border-radius: 8px; }
.gallery-main img { max-width:100%; max-height:100%; object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-top: 12px; }
.gallery-thumbs img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:#fff; border:2px solid #eee; border-radius:6px; cursor:pointer; padding:0; }
.gallery-thumbs img.active { border-color: #229ED9; }
.product-info { background:#fff; border-radius: 12px; padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.product-info h1 { font-size: 24px; font-weight: 800; line-height: 1.3; color: #1a1a2e; margin-bottom: 12px; }
.price-row { margin: 14px 0 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-now { font-size: 28px; font-weight: 800; color: #1a1a2e; }
.price-old { font-size: 18px; color: #aaa; text-decoration: line-through; }
.qty-line { font-size: 13px; color: #2a8a3a; margin-top: 4px; }
.qty-line.out { color: #c1303d; }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 22px; }
.color-row .label { width: 100%; font-size: 13px; color: #666; margin-bottom: 4px; }
.color-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid #ddd; border-radius: 22px; cursor: pointer; background: #fff; font-size: 14px; font-weight: 600; transition: all .15s; }
.color-chip:hover { border-color: #aaa; }
.color-chip.active { border-color: #229ED9; background: #e7f4fc; }
.color-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #00000020; display: inline-block; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 26px; }
.btn-direct { background:#e63946; color:#fff; font-weight:700; text-decoration:none; padding:14px 24px; border-radius:24px; font-size:15px; }
.btn-direct:hover { background:#c1303d; }
.btn-tg { background:#229ED9; color:#fff; font-weight:600; text-decoration:none; padding:14px 24px; border-radius:24px; font-size:15px; }
.btn-wa { background:#25D366; color:#fff; font-weight:600; text-decoration:none; padding:14px 24px; border-radius:24px; font-size:15px; }
.section-title { font-size: 18px; font-weight:700; color:#1a1a2e; margin: 24px 0 10px; }
.product-desc h2 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }
.product-desc { font-size: 15px; line-height: 1.7; color: #333; }
.product-desc p { margin-bottom: 12px; }
/* Таблица ТТХ из SEO-описаний (п.20 аудита: класс использовался в 16 карточках без CSS) */
.product-desc .spec-table { border-collapse: collapse; width: 100%; max-width: 640px; margin: 12px 0 18px; font-size: 14px; }
.product-desc .spec-table th, .product-desc .spec-table td { border: 1px solid #dde3ea; padding: 8px 12px; text-align: left; }
.product-desc .spec-table th { background: #f2f5f9; color: #1a1a2e; font-weight: 700; }
.product-desc .spec-table tr:nth-child(even) td { background: #fafbfc; }
@media (max-width: 680px) { .product-desc { overflow-x: auto; } }
.video-block { background: #f8f9fa; border-radius: 10px; padding: 24px; margin: 20px 0; text-align: center; color: #666; font-size: 14px; }
.video-block strong { color: #1a1a2e; }
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.94); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.lightbox.show { display:flex; }
.lightbox img { max-width:95vw; max-height:95vh; object-fit:contain; }
.lightbox .close { position:absolute; top:18px; right:24px; color:#fff; font-size:40px; cursor:pointer; user-select:none; }
.lightbox .nav { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:40px; cursor:pointer; user-select:none; padding:0 18px; }
.lightbox .nav.left { left:6px; }
.lightbox .nav.right { right:6px; }
footer { background: #1a1a2e; color: #aab; padding: 30px 24px; text-align: center; font-size: 14px; }
footer a { color: #229ED9; text-decoration: none; }
@media (max-width: 880px) {
  .product-wrap { grid-template-columns: 1fr; gap: 20px; }
  .product-info h1 { font-size: 20px; }
  .price-now { font-size: 24px; }
  .header-contacts { display: none; }
}
/* Shop iframe modal — same as homepage */
#shop-modal { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.7); align-items:center; justify-content:center; }
#shop-modal.open { display:flex; }
#shop-modal-inner { background:#fff; border-radius:16px; width:96vw; max-width:900px; height:88vh; display:flex; flex-direction:column; overflow:hidden; }
#shop-modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #eee; flex-shrink:0; }
#shop-modal-header span { font-weight:700; font-size:16px; color:#1a1a2e; }
#shop-modal-close { font-size:26px; cursor:pointer; color:#888; background:none; border:none; line-height:1; padding:0 4px; }
#shop-modal iframe { flex:1; border:none; width:100%; }

/* Trust row */
.trust-row { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 22px; background: #f7f9fc; border-radius: 14px; border: 1px solid #eaeef5; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: #555; line-height: 1.45; }
.trust-i { font-size: 24px; line-height: 1; flex-shrink: 0; }
.trust-item strong { color: #1a1a2e; font-size: 14px; display: block; margin-bottom: 2px; }
.trust-item span { color: #777; font-size: 12.5px; }

/* Related products */
.related { max-width: 1200px; margin: 50px auto 30px; padding: 0 24px; }
.related-h { font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rel-card { display: block; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.rel-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,30,50,.08); border-color: #c9d3e3; }
.rel-card img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; background: #fff; }
.rel-title { padding: 10px 12px 4px; font-size: 13.5px; font-weight: 600; color: #1a1a2e; line-height: 1.35; min-height: 56px; }
.rel-price { padding: 0 12px 12px; font-size: 15px; font-weight: 800; color: #e63946; }
@media (max-width: 600px) { .related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .rel-title { font-size: 12.5px; min-height: 48px; } }