/* ================================================================
   Product page custom layout — child theme
   Uses cst-* prefixed classes to avoid any conflict with
   hummingbird's own .product__container / .product__bottom rules.

   LAYOUT
   ──────
   ROW 1  .cst-row1   [ image+title (50%) | buy-box (50%) ]
   ROW 2  .cst-row2   [ description accordion (50%) | reassurance (50%) ]
   ROW 3  .cst-row3   [ product features / specs (100%) ]
   ================================================================ */


/* ----------------------------------------------------------------
   Shared column helpers
   ---------------------------------------------------------------- */
.product__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
  background: #f5f5f5;
  padding-top: 2.7125rem;
  padding-bottom: 2.7125rem;
}

.cst-row1,
.cst-row2 {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}

.cst-col-left,
.cst-col-right {
  flex: 0 0 calc(50% - 1rem);
  width: calc(50% - 1rem);
  min-width: 0; /* prevent flex blowout */
}


/* ----------------------------------------------------------------
   ROW 1 — left column: title stacked above image
   ---------------------------------------------------------------- */
.cst-row1 .cst-col-left {
  display: flex;
  flex-direction: column;
}

/* Reference line — normal weight, muted, sits right below the h1 */
.cst-reference {
  font-size: .9rem;
  font-weight: 400;
  color: #6c757d;
  margin-top: -.25rem;
  margin-bottom: .75rem;
}

/* Cover image fills the column */
.cst-cover-only img {
  width: 100%;
  height: auto;
  display: block;
}

/* Neutralise any leftover hummingbird styles on product__left / product__right
   when used as cst-col children — we own the layout now */
.cst-row1 .product__left,
.cst-row1 .product__right {
  flex: unset !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}


/* ----------------------------------------------------------------
   ROW 2 — description accordion left, reassurance right
   ---------------------------------------------------------------- */
.cst-row2 {
  align-items: stretch; /* columns same height */
}


/* ----------------------------------------------------------------
   ROW 3 — specs full width
   ---------------------------------------------------------------- */
.cst-row3 {
  width: 100%;
  margin-bottom: 2rem;
}

/* product-details.tpl outputs a dl/table inside .product-features.
   Lay it out as a two-column responsive grid. */
.cst-row3 .product-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 3rem;
}

.cst-row3 .product-features .feature-name,
.cst-row3 .product-features .feature-value {
  padding: .4rem .25rem;
  border-bottom: 1px solid #e9ecef;
}


/* ----------------------------------------------------------------
   Mobile — single column
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cst-row1,
  .cst-row2 {
    flex-wrap: wrap;
  }

  .cst-col-left,
  .cst-col-right {
    flex: 0 0 100%;
    width: 100%;
  }

  .cst-row3 .product-features {
    grid-template-columns: 1fr;
  }
}

.basicfeatures-table tbody tr:nth-child(odd) {
  background-color: #ddd;
}

.basicfeatures-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

  .page-product .product__price {
    font-size: 2.4375rem;
    font-weight: 700;
  }
}

  .page-product {
  .h2, h2 {
    font-size: 1.75em);
  }
}
.btn-primary {
  padding: 1.21875rem .3125rem;
  border-radius: .625rem;
}

/* 1. Alternating rows on product features table */
.product__features-row:nth-child(odd) {
  background-color: #f5f5f5;
}

.product__features-row:nth-child(even) {
  background-color: #ffffff;
}

/* 2. H2 font size override */
@layer bs-base {
  .h2, h2 {
    font-size: calc(var(--bs-body-font-size) * 1.75);
  }
}

/* 3. Reassurance block rows */
.block-reassurance-item {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
  .page-product .product__add-to-cart-button {
    width: 75%;
  }