/* =====================================================================
   Single product pages — shared stylesheet
   Pages: /products/*.html (all 16)

   Consolidated from the former assets/css/products/<page>.css files, which
   were byte-identical apart from their header comment. The one exception was
   tmt-bars-chennai.css, whose extra .project-details__thumb block is kept at
   the foot of this file scoped to .page-tmt-bars so it still applies only to
   that page.

   Extends the HomeRise "project-details" layout. Only styles the elements
   these pages add (the section weight chart and the sidebar enquiry card);
   every other rule is inherited from assets/css/style.css so the design,
   spacing, typography and animation match project-details.html exactly.
   ===================================================================== */

/* ---------- Section blocks (h3) ------------------------------------- */
/* the template styles .project-details__block h5; these pages use h3 for a
   correct h1 > h2 > h3 outline, so the same look is restated here */
.product-details .project-details__block h3 {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1667;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

@media (max-width: 767.98px) {
  .product-details .project-details__block h3 {
    font-size: 20px;
  }
}

/* ---------- FAQ (AEO) ------------------------------------------------ */
.product-details .product-details__faq {
  margin-top: 80px;
  padding-top: 72px;
  border-top: 1px solid var(--secondary-border-color);
}

.product-details .product-details__faq-title,
.product-details .product-details__cta-title,
.product-details .product-details__related-title {
  color: var(--black-color);
  font-family: var(--title-font);
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
}

.product-details .product-details__faq-list {
  display: grid;
  gap: 24px;
}

.product-details .product-details__faq-item {
  background: var(--bg-color-primary);
  border-left: 4px solid var(--primary-color);
  padding: 28px 32px;
}

.product-details .product-details__faq-q {
  color: var(--black-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 12px;
}

.product-details .product-details__faq-a {
  color: var(--text-secondary);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 28px;
  margin: 0;
}

/* ---------- CTA ------------------------------------------------------ */
.product-details .product-details__cta {
  margin-top: 72px;
  padding: 48px 32px;
  background: var(--bg-color-primary);
  border-top: 4px solid var(--primary-color);
  text-align: center;
}

.product-details .product-details__cta-text {
  max-width: 720px;
  margin: 0 auto 32px;
  color: var(--text-secondary);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 28px;
}

.product-details .product-details__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- Related products ---------------------------------------- */
.product-details .product-details__related {
  margin-top: 72px;
}

.product-details .product-details__related-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.product-details .product-details__related-list a {
  display: block;
  padding: 18px 20px;
  background: var(--bg-color-primary);
  color: var(--black-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  transition: var(--transition);
}

.product-details .product-details__related-list a:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

@media (max-width: 991.98px) {
  .product-details .product-details__related-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-details .product-details__faq {
    margin-top: 56px;
    padding-top: 48px;
  }
}

@media (max-width: 575.98px) {
  .product-details .product-details__related-list {
    grid-template-columns: 1fr;
  }
  .product-details .product-details__faq-item {
    padding: 20px 22px;
  }
  .product-details .product-details__cta {
    padding: 32px 20px;
  }
  .product-details .product-details__cta-actions .custom-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Main headings — 40px ------------------------------------ */
.product-details .project-details__title,
.product-details .product-details__spec h2,
.product-details .product-details__faq-title,
.product-details .product-details__cta-title,
.product-details .product-details__related-title {
  font-size: 40px;
  line-height: 48px;
}

@media (max-width: 991.98px) {
  .product-details .project-details__title,
  .product-details .product-details__spec h2,
  .product-details .product-details__faq-title,
  .product-details .product-details__cta-title,
  .product-details .product-details__related-title {
    font-size: 34px;
    line-height: 42px;
  }
}

@media (max-width: 575.98px) {
  .product-details .project-details__title,
  .product-details .product-details__spec h2,
  .product-details .product-details__faq-title,
  .product-details .product-details__cta-title,
  .product-details .product-details__related-title {
    font-size: 28px;
    line-height: 36px;
  }
}

/* ---------- Arrow badges — maroon ----------------------------------- */
.product-details .project-details__block ul li strong i {
  background: #670D0F;
}

/* ---------- Headings — all black ------------------------------------ */
.product-details .project-details__title,
.product-details .project-details__block h3,
.product-details .project-details__block h5,
.product-details .product-details__spec h2,
.product-details .product-details__spec h5,
.product-details .project-details__sidebar .card h5,
.product-details .project-details__info h5,
.product-details .project-details__enquiry h5 {
  color: var(--black-color);
}

/* ---------- Content rhythm ------------------------------------------
   Roomier than the template so the longer product copy and the weight
   chart do not run together.
   --------------------------------------------------------------------- */
.product-details .project-details__header {
  margin-bottom: 40px;
}

.product-details .project-details__description {
  margin-bottom: 0;
  line-height: 30px;
}

.product-details .project-details__block {
  margin-bottom: 44px;
}

.product-details .project-details__block h5 {
  margin-bottom: 20px;
}

.product-details .project-details__block ul li {
  margin-bottom: 18px;
  line-height: 28px;
}

/* the side-by-side pair of blocks — top-aligned so both headings sit on the
   same line even when one column is taller (the template centres them) */
.product-details .project-details__content .d-flex.flex-wrap {
  align-items: flex-start !important;
  gap: 32px !important;
  margin-bottom: 20px !important;
}

.product-details .project-details__content .d-flex.flex-wrap .project-details__block {
  flex: 1 1 300px;
}

.product-details .project-details__images {
  margin-top: 0;
  margin-bottom: 44px;
}

.product-details .project-details__block.mt-4 {
  margin-top: 0 !important;
}

/* Full-width chart section below the two-column area.

   The divider rule that used to sit here is gone. It also sat badly: the
   later .product-details__spec block (see "Section weight chart") reset the
   margin, so the line ended up hard against the content above it with all
   72px of the gap below — it read as underlining the copy rather than
   separating the two blocks. The separation is now plain whitespace, split
   evenly above and below where the line was. */
.product-details .product-details__spec {
  margin-top: 36px !important;
  padding-top: 36px;
  clear: both;
}

@media (max-width: 991.98px) {
  .product-details .product-details__spec {
    margin-top: 26px !important;
    padding-top: 26px;
  }
}

@media (max-width: 767.98px) {
  .product-details .product-details__spec {
    margin-top: 20px !important;
    padding-top: 20px;
  }
}

/* ---------- Published chart images (angles page) --------------------- */
.product-details .product-details__charts {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* when the page has no weight table, the charts carry the section spacing —
   same treatment: no divider, and the gap split evenly */
.product-details .product-details__charts--standalone {
  margin-top: 36px;
  padding-top: 36px;
}

@media (max-width: 991.98px) {
  .product-details .product-details__charts--standalone {
    margin-top: 26px;
    padding-top: 26px;
  }
}

.product-details .product-details__chart-img {
  width: 100%;
  max-width: 1043px;
  border: 1px solid var(--secondary-border-color);
  border-radius: var(--primary-radius);
  background: var(--white-color);
  overflow: hidden;
}

.product-details .product-details__chart-img img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .product-details .product-details__charts {
    margin-top: 36px;
    gap: 28px;
  }
}

/* sidebar */
.product-details .project-details__sidebar .card {
  margin-bottom: 32px;
}

.product-details .project-details__sidebar .card:last-child {
  margin-bottom: 0;
}

.product-details .project-details__sidebar ul li {
  padding: 18px 0;
}

@media (max-width: 767.98px) {
  .product-details .project-details__block {
    margin-bottom: 36px;
  }
  .product-details .project-details__content .d-flex.flex-wrap {
    gap: 24px !important;
    margin-bottom: 36px !important;
  }
  .product-details .project-details__images {
    margin-bottom: 36px;
  }
}

/* ---------------------------------------------------------------------
   Image geometry — locked to project-details.html
   ---------------------------------------------------------------------
   The template has no CSS on .project-details__thumb, so its images render
   at their natural size and the layout depends on those exact dimensions:

     hero thumb  project-details-thumb1.jpg   1320 x 640   ratio 2.0625
     gallery big project-details-thumb2.jpg    400 x 266   ratio 1.5038
     gallery sm  project-details-thumb3/4.jpg  202 x 266   ratio 0.7594

   The product photos are a different shape, so the rendered boxes are
   pinned to the template ratios here and the photo is cover-fitted inside
   them. Result: identical box width and height to project-details.html at
   every breakpoint, with no distortion of the photo.
   --------------------------------------------------------------------- */

.product-details .project-details__thumb {
  overflow: hidden;
  line-height: 0;
}

.product-details .project-details__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 480;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Three identical tiles — same width AND height on desktop, tablet and
   mobile. A 3-column grid with a fixed aspect-ratio guarantees this at
   every viewport width; nothing is stretched, cropped unevenly or cut. */
.product-details .project-details__images {
  display: grid;
  /* mobile: 1 column */
  grid-template-columns: 1fr;
  gap: 16px;
}

/* tablet: 2 columns */
@media (min-width: 768px) {
  .product-details .project-details__images {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* desktop: 3 columns */
@media (min-width: 992px) {
  .product-details .project-details__images {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-details .product-details__gallery-item {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.product-details .project-details__images img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

@media (max-width: 575.98px) {
  .product-details .project-details__images {
    gap: 10px;
  }
}

/* ---------- Section weight chart ------------------------------------
   Centred: heading, table block and cell values, matching the way the
   chart is presented on svsteels.in.
   --------------------------------------------------------------------- */
.product-details .product-details__spec {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}

.product-details .product-details__spec h5 {
  text-align: center;
}

.product-details .product-details__table-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* long charts scroll inside the box instead of stretching the page */
  max-height: 620px;
  overflow: auto;
  border: 1px solid var(--secondary-border-color);
  border-radius: var(--primary-radius);
  background: var(--white-color);
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #670D0F rgba(0, 0, 0, 0.10);
}

/* WebKit / Blink */
.product-details .product-details__table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.product-details .product-details__table-wrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.10);
  border-radius: 6px;
}

.product-details .product-details__table-wrap::-webkit-scrollbar-thumb {
  background: #670D0F;
  border-radius: 6px;
}

.product-details .product-details__table-wrap::-webkit-scrollbar-thumb:hover {
  background: #4E0A0C;
}

.product-details .product-details__table-wrap::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0.10);
}

.product-details .product-details__table {
  width: 100%;
  margin: 0;
  /* separate (not collapse) so the sticky header keeps its rule while scrolling */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.product-details .product-details__table--wide .product-details__table {
  min-width: 900px;
  font-size: 14px;
  line-height: 20px;
}

.product-details .product-details__table thead th {
  background: var(--bg-color-primary);
  color: var(--secondary-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 16px 28px;
  text-align: center;
  /* sticks to the top of the scroll box so headings stay readable */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -2px 0 var(--primary-color);
}

.product-details .product-details__table tbody th {
  color: var(--secondary-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.product-details .product-details__table tbody th,
.product-details .product-details__table tbody td {
  padding: 14px 28px;
  text-align: center;
  border-bottom: 1px solid var(--secondary-border-color);
  transition: var(--transition);
}

.product-details .product-details__table--wide .product-details__table thead th,
.product-details .product-details__table--wide .product-details__table tbody th,
.product-details .product-details__table--wide .product-details__table tbody td {
  padding: 10px 14px;
  white-space: nowrap;
}

.product-details .product-details__table tbody tr:last-child th,
.product-details .product-details__table tbody tr:last-child td {
  border-bottom: 0;
}

.product-details .product-details__table tbody tr:nth-child(even) {
  background: rgba(245, 245, 245, 0.55);
}

.product-details .product-details__table tbody tr:hover th,
.product-details .product-details__table tbody tr:hover td {
  background: rgba(174, 131, 51, 0.08);
  color: var(--secondary-color);
}

.product-details .product-details__na {
  color: var(--icon-primary);
}

.product-details .product-details__table-note {
  margin: 14px 0 0;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-secondary);
}

/* ---------- Sidebar enquiry card ------------------------------------ */
.product-details .project-details__enquiry .product-details__enquiry-text {
  margin-bottom: 20px;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 26px;
  color: var(--text-secondary);
}

.product-details .project-details__enquiry .product-details__enquiry-btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Responsive tweaks --------------------------------------- */
@media (max-width: 991.98px) {
  .product-details .product-details__table {
    font-size: 15px;
  }
  .product-details .product-details__table thead th {
    font-size: 14px;
    padding: 14px 16px;
  }
  .product-details .product-details__table tbody th,
  .product-details .product-details__table tbody td {
    padding: 12px 16px;
  }
}

@media (max-width: 767.98px) {
  .product-details .product-details__table {
    font-size: 14px;
    line-height: 22px;
  }
  .product-details .product-details__table thead th {
    font-size: 13px;
    padding: 12px 14px;
  }
  .product-details .product-details__table tbody th,
  .product-details .product-details__table tbody td {
    padding: 10px 14px;
    white-space: nowrap;
  }
  .product-details .product-details__table-note {
    font-size: 13px;
  }
}

@media (max-width: 575.98px) {
  .product-details .product-details__table-wrap {
    border-radius: 6px;
  }
}

/* ---------------------------------------------------------------------
   TMT bars only — was the tail of the old tmt-bars-chennai.css.
   Every product page has a .project-details__thumb, so these rules are
   scoped to the .page-tmt-bars class on that page's <body>; unscoped they
   would resize the hero image on the other 15 pages.
   --------------------------------------------------------------------- */
.page-tmt-bars .project-details__thumb {
    width: 100%;
    overflow: hidden;
}

.page-tmt-bars .project-details__thumb img {
    display: block;
    width: 100%;
    height: 500px;      /* தேவைக்கு மாற்றிக்கொள்ளலாம் */
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
    border-radius: 0;
}

.page-tmt-bars .project-details__thumb {
    max-width: 1300px;
    margin: auto;
}


/* --------------------------------------------------------------------------
   Section spacing — tighter, and equal at both ends.

   The block carries the sitewide .section-padding (120/100/80/60px), which
   left ~100px of empty white between the weight chart's footnote and the dark
   footer on desktop. Trimmed here, and the top comes down by the same amount
   so the two ends stay matched rather than the block becoming top-heavy.
   -------------------------------------------------------------------------- */
.project-details.product-details.section-padding {
  padding-top: 120px;
  padding-bottom: 120px;
}

@media (max-width: 1499.98px) {
  .project-details.product-details.section-padding {
    padding-top: 150px;
    padding-bottom: 150px;
  }
}

@media (max-width: 1199.98px) {
  .project-details.product-details.section-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

@media (max-width: 767.98px) {
  .project-details.product-details.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .product-details .project-details__thumb img {
    display: block;
    width: 100%;
    height: 300px;
    aspect-ratio: 1320 / 480;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
}