.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  align-items: center;
}
.product-gallery-main {
  width: 100%;
  height: 420px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.product-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  justify-content: center;
}
.product-gallery-thumbs .thumb {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 6px;
}
.product-gallery-thumbs .thumb img {
  width: 140px;
  height: 86px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 2px solid transparent;
}
.product-gallery-thumbs .thumb[aria-pressed="true"] img {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(15,23,36,0.12);
}
/* small screens */
@media (max-width: 700px) {
  .product-gallery-main { height: 260px; }
  .product-gallery-thumbs .thumb img { width: 92px; height: 56px; }
}

/* tighter thumb sizing for very small screens */
@media (max-width: 420px) {
  .product-gallery-main { height: 220px; }
  .product-gallery-thumbs .thumb img { width: 72px; height: 48px; }
  .product-gallery-thumbs { gap:6px; }
  /* show only 3 thumbnails visible at once on very small screens; allow horizontal scroll for the rest */
  .product-gallery-thumbs .thumb { flex: 0 0 calc((100% - 12px) / 3); }
  .product-gallery-thumbs .thumb img { width:100%; height:48px; object-fit:cover; }
}

/* Ensure thumbnail strip doesn't expand the page: constrain to 95% of viewport and center */
.product-gallery .thumbs-wrap { width:100%; display:block; box-sizing:border-box; }
.product-gallery-thumbs { max-width:95vw; margin-left:auto; margin-right:auto; padding-left:8px; padding-right:8px; box-sizing:border-box; }
.product-gallery-thumbs::-webkit-scrollbar { height:8px; }
.product-gallery-thumbs::-webkit-scrollbar-thumb { background: rgba(15,23,36,0.12); border-radius:6px; }

/* slightly larger thumb for better tap targets on mobile */
.product-gallery-thumbs.small-scrollbar::-webkit-scrollbar { height:12px; }
.product-gallery-thumbs.small-scrollbar::-webkit-scrollbar-thumb { background: rgba(15,23,36,0.22); border-radius:8px; }

/* retractable calculator responsive stack */
.rt-calc-grid { display:flex; gap:16px; align-items:flex-start; flex-wrap:nowrap; }
@media (max-width: 900px) {
  .rt-calc-grid { flex-direction: column; }
  .rt-calc-right { order:2; width:100%; max-width:none; }
  .rt-calc-left { order:1; width:100%; }
}

/* calc and summary layout used on product pages (side-by-side desktop, stacked mobile) */
.calc-and-summary { display:flex; gap:18px; align-items:flex-start; flex-wrap:nowrap; margin-top:12px; width:95%; max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.calc-and-summary .calc-col { flex:1; min-width:0; max-width:none; }
.calc-and-summary .summary-col { flex:1; min-width:0; max-width:none; }
@media (max-width:900px) {
  .calc-and-summary { flex-direction:column; width:100%; padding:0 8px; }
  .calc-and-summary .summary-col { order:2; max-width:none; width:100%; }
  .calc-and-summary .calc-col { order:1; width:100%; }
}

/* further narrow calculator on small mobile screens for better reading width */
@media (max-width:700px) {
  .calc-and-summary { padding:0 12px; }
  .calc-and-summary .calc-col, .calc-and-summary .summary-col {
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    box-sizing:border-box;
  }
}

/* force compact calculator width on small mobiles */
@media (max-width:480px) {
  .calc-and-summary .calc-col,
  .sk-calc-left,
  .rt-calc-left {
    width:88vw !important;
    max-width:390px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .pricing-ui,
  #product-pricing-root,
  #skylight-pricing-root {
    width:100% !important;
    max-width:390px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box;
  }
}

@media (min-width: 701px) {
  .product-gallery-thumbs { max-width:760px; }
}

/* layout helpers for product pages */
.hero { display:flex; gap:20px; align-items:flex-start; flex-wrap:nowrap; }
.hero .product-gallery { flex:1 1 60%; min-width:260px; max-width:760px; }
.hero .meta { flex:0 0 420px; }

/* allow stacking on narrow screens while keeping meta to the right on desktop */
@media (max-width: 900px) {
  .hero { flex-wrap:wrap; }
  .hero .product-gallery { flex:1 1 100%; max-width:100%; }
  .hero .meta { flex:1 1 100%; flex-basis:100%; max-width:100%; margin-top:12px; }
  /* center hero content on narrow screens so gallery appears centered */
  .hero { justify-content: center; align-items: flex-start; }
  .hero .product-gallery { margin-left: auto; margin-right: auto; }
}

/* right-align feature lists inside meta as requested */
.meta .features ul { text-align: left; }
.meta h1 { text-align: left; margin-bottom:8px; }

/* price table styles */
.price-table { width:100%; border-collapse:collapse; margin-bottom:12px; }
.price-table th, .price-table td { border:1px solid #e9e9e9; padding:8px; text-align:left; vertical-align:top; }
.price-table thead th { background:#fafafa; font-weight:700; }
.price-table .rate { text-align:right; white-space:nowrap; }

/* Adjustments for mobile calculator inputs and header padding */
@media (max-width: 420px) {
  .pricing-ui input[type="number"], .pricing-ui select { width:100% !important; min-width:0; }
  .site-header { padding:8px 10px; }
  .site-header .logo img { height:40px; }
  .product-gallery-main { height:200px; }
}

/* specification table (improved visuals for glazing/roof panels) */
.spec-table { width:100%; border-collapse:separate; border-spacing:0; margin-bottom:14px; }
.spec-table thead th { text-align:left; padding:10px 12px; background:transparent; color:#0f1724; font-weight:700; }
.spec-table tbody tr { background:#fff; border:1px solid #eef2f6; border-radius:8px; margin-bottom:10px; display:table-row; }
.spec-table td { padding:12px; vertical-align:top; border:0; }
.spec-table tbody tr + tr { margin-top:10px; }
.spec-table caption { color:#6b7280; font-size:0.95rem; margin-bottom:6px; text-align:left; }

@media (max-width:900px) {
  .spec-table thead { display:none; }
  .spec-table tbody { display:flex; flex-direction:column; gap:10px; }
  .spec-table tbody tr { display:block; padding:12px; box-shadow:0 8px 20px rgba(15,23,36,0.04); }
  .spec-table td { display:block; padding:6px 0; border-bottom:1px dashed #eef2f6; }
  .spec-table td:last-child { border-bottom:0; }
}

/* ensure ALL page content isn't hidden behind the fixed bottom bar */
body { padding-bottom: 72px; }
.product-container { width:95%; max-width:1200px; margin:28px auto; padding:0 16px 16px 16px; }

/* pricing UI */
.pricing-ui { display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg,#fff,#fbfbfb); padding:12px; border:1px solid #eef0f2; border-radius:8px; }
.pricing-ui .controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pricing-ui label { display:flex; flex-direction:column; font-size:0.85rem; color:#333; }
.pricing-ui input[type="number"], .pricing-ui select { padding:8px; border:1px solid #e2e6ea; border-radius:6px; min-width:84px; }
.pricing-output table { width:100%; border-collapse:collapse; margin-top:8px; }
.pricing-output th, .pricing-output td { border:1px solid #f0f0f0; padding:8px; text-align:left; }
.pricing-output .rate { text-align:right; white-space:nowrap; }
.pricing-ui .estimate-badge { background:var(--accent); color:white; padding:8px 10px; border-radius:6px; font-weight:700; display:inline-block; }
/* Compact calculator fields for small screens and tight layouts */
@media (max-width:700px) {
  .pricing-ui input[type="number"], .pricing-ui select {
    min-width:60px !important;
    padding:6px !important;
    font-size:0.92rem !important;
  }
  .pricing-ui .controls label { flex: 0 0 auto; width: auto; min-width:84px; }
  .pricing-ui .controls label input, .pricing-ui .controls label select { width: 100% !important; max-width:220px; }
}
@media (max-width:480px) {
  .pricing-ui .controls label { flex-basis: 48% !important; }
  .pricing-ui .controls label input, .pricing-ui .controls label select { max-width: 180px !important; width:100% !important; }
  .pricing-ui .controls { gap:6px; }
}

/* gallery visual polish */
.product-gallery-main { box-shadow: 0 8px 24px rgba(15,23,36,0.06); }
.product-gallery-main img { transition: transform 220ms ease; cursor: zoom-in; }
.product-gallery-thumbs .thumb img { transition: transform 160ms ease, border-color 120ms ease; }
.product-gallery-thumbs .thumb:hover img, .product-gallery-thumbs .thumb[aria-pressed="true"] img { transform: translateY(-4px) scale(1.02); }
.product-gallery .caption { font-size:0.9rem; color:#666; margin-top:8px; text-align:left; }

/* header / navbar visual consistency */
.site-header { background: rgba(15,23,36,0.92); color: #fff; position:relative; z-index:30; }
.site-header .main-nav a { color: rgba(255,255,255,0.9); padding:8px 10px; text-decoration:none; }
.site-header .logo span { color: #fff; }

@media (max-width:700px) {
  .site-header .logo img { transform: translateX(-6px); }
  .site-header .logo div { display:block; margin-left:4px; }
}

/* FAQ table styles */
#faq-table td { vertical-align: middle; }
.faq-toggle { background:#0f1724; color:#fff; border:0; padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:700; }
.faq-answer-cell { color:#444; }

/* ===== Explore Related — Card Grid ===== */
.related-section { margin-top:28px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e8edf3;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--text-black);
  transition: box-shadow .2s ease, transform .15s ease;
}
.related-card:hover {
  box-shadow: 0 6px 20px rgba(15,23,36,0.08);
  transform: translateY(-2px);
  border-left-color: #2563eb;
}
.related-card .rc-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f1724, #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.related-card .rc-text { flex: 1; min-width: 0; }
.related-card .rc-text strong { display: block; font-size: 0.92rem; line-height: 1.3; color: var(--text-black); }
.related-card .rc-text small { display: block; color: #6b7280; font-size: 0.8rem; margin-top: 2px; }
.related-card .rc-arrow { color: var(--accent); font-size: 1.1rem; font-weight: 700; flex-shrink: 0; transition: transform .15s; }
.related-card:hover .rc-arrow { transform: translateX(3px); }

@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
  .related-card { padding: 12px 14px; }
}

/* ===== Bottom Bar — Redesigned ===== */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(15, 23, 36, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.bottom-bar .bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background .15s, transform .12s, color .15s;
  white-space: nowrap;
}
.bottom-bar .bb-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.bb-btn-email { background: rgba(255,255,255,0.08); color: #94a3b8; }
.bb-btn-email:hover { background: rgba(255,255,255,0.14); color: #e2e8f0; }
.bb-btn-home { background: rgba(255,255,255,0.08); color: #94a3b8; }
.bb-btn-home:hover { background: rgba(255,255,255,0.14); color: #e2e8f0; }
.bb-btn-quote { background: #2563eb; color: #fff; box-shadow: 0 2px 10px rgba(37,99,235,0.3); }
.bb-btn-quote:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,0.35); }

@media (max-width: 480px) {
  .bottom-bar { gap: 6px; padding: 8px 10px; }
  .bottom-bar .bb-btn { padding: 8px 12px; font-size: 0.82rem; gap: 5px; }
}

/* ===== Home Page Calculator Tabs ===== */
.calc-tabs { display: flex; gap: 0; border-bottom: 2px solid #e8edf3; margin-bottom: 16px; overflow-x: auto; }
.calc-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: #6b7280;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.calc-tab:hover { color: var(--text-black); }
.calc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.calc-tab-panel { display: none; }
.calc-tab-panel.active { display: block; }
.home-calc-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.home-calc-form label { display: flex; flex-direction: column; font-size: 0.85rem; color: #333; min-width: 120px; }
.home-calc-form select, .home-calc-form input[type="number"] { padding: 8px; border: 1px solid #e2e6ea; border-radius: 6px; font-size: 0.92rem; }
.home-calc-result { margin-top: 14px; padding: 14px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px; }
.home-calc-result table { width: 100%; border-collapse: collapse; }
.home-calc-result td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.home-calc-result td:last-child { text-align: right; font-weight: 600; }
.home-calc-result .total-row td { font-weight: 700; font-size: 1rem; border-top: 2px solid var(--accent); color: var(--accent); }