/* ====== doorhan.ru 1:1 replica — product detail pages ====== */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'PT Sans',Arial,Helvetica,sans-serif;background:#fff;color:#333;line-height:1.6;font-size:16px}
a{color:#1e3a5c;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 30px}

/* Breadcrumb */
.breadcrumb{padding:16px 0;font-size:13px;color:#999}
.breadcrumb a{color:#1e3a5c}
.breadcrumb span{margin:0 6px;color:#ccc}

/* ===== Product header (title on top, image below) ===== */
.product-header{margin-bottom:30px}
.product-header h1{
  font-size:30px;font-weight:700;color:#1e3a5c;text-transform:uppercase;
  line-height:1.25;margin-bottom:0;padding-bottom:14px;
  border-bottom:3px solid #c6922a;
}
.product-type{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:1px;margin:12px 0 18px}
.product-header .desc{font-size:15px;color:#444;line-height:1.75;text-align:justify;margin-bottom:14px}
.product-image{text-align:center;margin-bottom:18px}
.product-image img{max-height:480px;object-fit:contain}

/* ===== Section header (gold underline like doorhan.ru) ===== */
.section{margin-bottom:36px}
.section-header{
  display:flex;align-items:center;
  border-bottom:3px solid #c6922a;
  padding-bottom:10px;margin-bottom:22px;
}
.section-header h2{
  font-size:22px;font-weight:700;color:#1e3a5c;
  text-transform:uppercase;letter-spacing:.3px;
}

/* ===== Zone items (checkmark list) ===== */
.zone-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;padding:14px 18px;border:1px solid #eee;border-radius:3px}
.zone-check{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:#e68a00;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;margin-top:2px;
}
.zone-item h3{font-size:14px;font-weight:700;color:#1e3a5c;text-transform:uppercase;margin-bottom:3px}
.zone-item p{font-size:14px;color:#555;line-height:1.55}

/* ===== Advantages (vertical list with orange titles, like doorhan.ru) ===== */
.advantage-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.adv-check{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:#e68a00;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;margin-top:2px;
}
.advantage-item h3{font-size:15px;font-weight:700;color:#e68a00;text-transform:uppercase;margin-bottom:3px}
.advantage-item p{font-size:15px;color:#444;line-height:1.6}

/* ===== Design subtitle (gray uppercase) ===== */
.design-subtitle{
  font-size:13px;font-weight:400;color:#999;text-transform:uppercase;
  letter-spacing:1px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #eee;
}

/* ===== Design grid (4 columns like doorhan.ru) ===== */
.design-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}
.design-tile{text-align:center}
.design-tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border:1px solid #eee;margin-bottom:6px;background:#fafafa}
.design-tile span{font-size:12px;color:#555;display:block;line-height:1.3}

/* ===== Colors grid (4 columns like doorhan.ru) ===== */
.colors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.color-swatch{text-align:center}
.color-swatch .swatch-rect{width:100%;height:110px;border:1px solid #ddd;margin-bottom:6px}
.color-swatch span{font-size:12px;color:#555;line-height:1.3;display:block}

/* ===== Solution diagram card (gray box before each type table) ===== */
.solution-card{background:#f0f2f5;padding:28px 30px;margin-bottom:20px;display:flex;align-items:center;gap:28px;border-radius:2px}
.solution-card img{max-width:420px;height:auto;flex-shrink:0}
.solution-card .caption{font-size:15px;color:#333;line-height:1.6}

/* ===== Equipment card (photo + text side-by-side) ===== */
.equip-card{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}
.equip-card:last-child{border-bottom:none}
.equip-card img{flex:0 0 160px;width:160px;height:120px;object-fit:contain;border:1px solid #eee;background:#fafafa;border-radius:2px}
.equip-card .equip-text{flex:1;font-size:14px;color:#444;line-height:1.65}
.equip-card .equip-text strong{color:#1e3a5c}

/* ===== Novelty card (photo + text) ===== */
.novelty-card{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #f0f0f0}
.novelty-card:last-child{border-bottom:none}
.novelty-card img{flex:0 0 200px;width:200px;height:auto;object-fit:contain;border:1px solid #eee;background:#fafafa;border-radius:2px}
.novelty-card .novelty-text{flex:1}
.novelty-card .novelty-text h3{font-size:15px;font-weight:700;color:#e68a00;text-transform:uppercase;margin-bottom:4px}
.novelty-card .novelty-text p{font-size:14px;color:#444;line-height:1.6}

/* ===== Data table (gray header) ===== */
.data-table{width:100%;border-collapse:collapse;margin-bottom:18px}
.data-table th{
  background:#8a8a8a;color:#fff;font-size:12px;font-weight:700;
  text-transform:uppercase;padding:10px 14px;text-align:left;
}
.data-table td{padding:10px 14px;font-size:14px;color:#333;border-bottom:1px solid #eee}
.data-table tr:hover td{background:#f8f9fa}

/* ===== Construction list ===== */
ol.construction-list{padding-left:24px;font-size:15px;color:#444;line-height:2}

/* ===== Equipment items (base / additional) ===== */
.equip-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}
.equip-item:last-child{border-bottom:none}
.equip-item .eq-icon{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:#eef3f8;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.equip-item p{font-size:14px;color:#444;line-height:1.6}

/* ===== Warranty ===== */
.warranty-text{font-size:15px;color:#444;line-height:1.7}
.warranty-text p{margin-bottom:6px}

/* ===== Mounting description ===== */
.mounting-desc{font-size:15px;color:#444;line-height:1.7;margin-bottom:12px}

/* ===== Video embed (16:9 responsive) ===== */
.video-embed{position:relative;width:100%;max-width:720px;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:10px}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-caption{font-size:13px;color:#999;margin-bottom:0}

/* ===== Diagram / section images ===== */
.diagram-image{text-align:center;margin-bottom:22px}
.diagram-image img{max-width:100%;height:auto;border:1px solid #eee}

/* ===== Advantage grid (2x2 image pairs like doorhan-nsk.ru) ===== */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.adv-card{display:flex;gap:10px}
.adv-card img{width:50%;height:auto;object-fit:cover;border-radius:4px;border:1px solid #eee}

/* ===== Equipment photo (replaces emoji icon) ===== */
.eq-photo{flex:0 0 120px;width:120px;height:90px;object-fit:cover;border-radius:4px;border:1px solid #eee}

/* ===== Param description (sizes section) ===== */
.param-description{font-size:15px;color:#444;line-height:1.7}
.param-description p{margin-bottom:12px}
.param-list{padding-left:20px;margin-bottom:12px}
.param-list li{margin-bottom:6px}

/* ===== Conditions list ===== */
ol.conditions-list{padding-left:24px;font-size:15px;color:#444;line-height:1.8}
ol.conditions-list li{margin-bottom:8px}

/* ===== Document links ===== */
.doc-list{list-style:none;padding:0}
.doc-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f0f0}
.doc-list li:last-child{border-bottom:none}
.doc-icon{font-size:20px;flex:0 0 28px}
.doc-list a{font-size:14px;color:#1e3a5c;font-weight:700}
.doc-list a:hover{color:#e68a00}

/* ===== Novelty items ===== */
.novelty-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #f0f0f0}
.novelty-item:last-child{border-bottom:none}
.novelty-icon{flex:0 0 32px;font-size:22px}
.novelty-item h3{font-size:15px;font-weight:700;color:#e68a00;text-transform:uppercase;margin-bottom:3px}
.novelty-item p{font-size:14px;color:#444;line-height:1.6}

/* ===== Color swatch images ===== */
.swatch-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid #ddd;margin-bottom:6px}

/* ===== Diagram placeholder (fallback) ===== */
.diagram-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f4f7fa;border:2px dashed #ccc;border-radius:6px;padding:40px;margin-bottom:22px;color:#999}
.diagram-icon{font-size:40px;margin-bottom:8px}

/* ===== Back link ===== */
.back-link{
  display:inline-block;margin:28px 0 40px;padding:10px 24px;
  background:#1e3a5c;color:#fff;font-size:14px;font-weight:700;
  text-decoration:none;border-radius:3px;
}
.back-link:hover{background:#15304d;text-decoration:none}

/* ===== Responsive ===== */
@media(max-width:768px){
  .container{padding:0 16px}
  .product-header h1{font-size:22px}
  .section-header h2{font-size:18px}
  .design-grid{grid-template-columns:repeat(2,1fr)}
  .colors-grid{grid-template-columns:repeat(2,1fr)}
  .adv-grid{grid-template-columns:1fr}
  .eq-photo{flex:0 0 90px;width:90px;height:68px}
  .equip-card img{flex:0 0 100px;width:100px;height:75px}
  .equip-card{gap:12px}
  .solution-card{flex-direction:column;padding:18px}
  .solution-card img{max-width:100%}
  .novelty-card{flex-direction:column}
  .novelty-card img{flex:0 0 auto;width:100%;max-width:300px}
  .video-embed{max-width:100%}
  .diagram-placeholder{min-height:120px;padding:24px 16px}
}

/* ===== Mobile font-size & overflow fixes ===== */
@media(max-width:768px){
  .breadcrumb{font-size:14px}
  .product-type{font-size:14px;letter-spacing:0}
  .design-tile span,.color-swatch span{font-size:13px}
  .data-table td,.doc-list a,.equip-card .equip-text,
  .novelty-card .novelty-text p,.novelty-item p,.zone-item h3,.zone-item p,
  .equip-item p{font-size:14px}
  .video-caption,.section-header .label{font-size:13px}
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%}
}

/* ===== CLS fix: reserve gallery space on mobile before JS loads ===== */
@media(max-width:767px){
  .product-images{
    /* Reserve 480x300 ratio space before flexslider JS loads — prevents CLS */
    aspect-ratio:8/5
  }
  .woocommerce-product-gallery{
    height:100%
  }
  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery .flex-viewport{
    height:100%;
    min-height:100%
  }
  .woocommerce-product-gallery .flex-viewport img{
    width:100%;
    height:auto;
    object-fit:contain
  }
}

/* ===== Mobile product layout improvements ===== */
@media(max-width:767px){
  .product-container{
    margin-bottom:16px
  }
  .product-images{
    margin-bottom:16px
  }
  .woocommerce-product-details__short-description{
    margin:1em 0
  }
  .product-info .price{
    font-size:1.1em
  }
}