/* =====================================================================
   PRODUCT COMPARISON TABLE – FULLY DYNAMIC FLEXBOX & GRID
   ===================================================================== */

/* 1. Define your "ideal" column sizes as CSS variables */
:root {
  --feature-col: 200px;       /* width of the left-hand feature name column */
  --min-product-col: 160px;   /* minimum width per product column */
  --gutter: 1px;              /* grid gap between columns */
}

/* 2. Wrapper to allow overflow on very large tables */
.compare-grid-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 3. The grid itself - for div-based layout */
.compare-grid:not(table) {
  display: grid;
  width: 100%;
  /* CSS var for the exact number of product columns */
  grid-template-columns:
    var(--feature-col)
    repeat(
      var(--product-count, 7), /* Default to 7 if not specified */
      minmax(var(--min-product-col), 1fr)
    );
  gap: var(--gutter);
  background-color: #fff;
}

/* 4. For div-based grid: We're using display: contents so compare-row children sit in the grid */
.compare-row {
  display: contents;
}

/* 5. Table-based layout styling */
.compare-grid:is(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--gutter);
  background-color: #fff;
}

.compare-grid:is(table) th,
.compare-grid:is(table) td {
  padding: 15px 10px;
  border-bottom: 1px solid #e6e6e6;
  background-color: #fff;
}

.compare-grid:is(table) th.feature-name,
.compare-grid:is(table) td.feature-name {
  width: var(--feature-col);
}

.compare-grid:is(table) th.product-label,
.compare-grid:is(table) td.check-cell,
.compare-grid:is(table) td.add-cart-cell {
  min-width: var(--min-product-col);
  width: 1fr;
}

/* 6. Cells (headers + data) for div-based layout */
.compare-row > .feature-name,
.compare-row > .product-label,
.compare-row > .check-cell,
.compare-row > .add-cart-cell {
  padding: 15px 10px;
  border-bottom: 1px solid #e6e6e6;
  background-color: #fff;
}

/* 7. Feature-name column styling */
.feature-name {
  text-align: left;
  padding-left: 15px;
  background-color: #f9f9f9;
  color: #666;
  font-weight: 500;
  border-right: 1px solid #e6e6e6;
}

/* 8. Product columns */
.product-label,
.check-cell,
.add-cart-cell {
  text-align: center;
  border-left: 1px solid #e6e6e6;
}

/* 9. Zebra striping - for div layout */
.compare-row:nth-child(odd) > .feature-name,
.compare-row:nth-child(odd) > .check-cell {
  background-color: #f9f9f9;
}

/* Zebra striping - for table layout */
.compare-grid:is(table) tr:nth-child(odd) .feature-name,
.compare-grid:is(table) tr:nth-child(odd) .check-cell {
  background-color: #f9f9f9;
}

/* 10. Header row - div layout */
.compare-row.header > .feature-name,
.compare-row.header > .product-label {
  background-color: #fff;
  border-bottom: 2px solid #d0d0d0;
}

/* Header row - table layout */
.compare-grid:is(table) thead tr .feature-name,
.compare-grid:is(table) thead tr .product-label {
  background-color: #fff;
  border-bottom: 2px solid #d0d0d0;
}

/* 11. Add-to-cart row - div layout */
.compare-row.add-to-cart-row > .feature-name,
.compare-row.add-to-cart-row > .add-cart-cell {
  background-color: #f9f9f9;
  border-top: 2px solid #d0d0d0;
}

/* Add-to-cart row - table layout */
.compare-grid:is(table) tr.add-to-cart-row .feature-name,
.compare-grid:is(table) tr.add-to-cart-row .add-cart-cell {
  background-color: #f9f9f9;
  border-top: 2px solid #d0d0d0;
}

/* 12. Product image & caption */
.product-image {
  max-width: 80px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
}

.product-caption {
  font-size: 14px;
  line-height: 1.3;
  color: #666;
}

.product-label a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* 13. Checkmark/X styling */
.check-cell {
  font-size: 18px;
}

.check-cell:has(content: "✅") {
  color: #4caf50; /* green checkmark */
}

.check-cell:has(content: "❌") {
  color: #f44336; /* red X */
}

/* 14. Button styling */
.add_to_cart_button,
.add-to-cart-button {
  display: inline-block;
  padding: 8px 15px;
  background-color: #5D8AA8;
  color: #fff !important;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color .2s;
  border: none;
}

.add_to_cart_button:hover,
.add-to-cart-button:hover {
  background-color: #4a7994;
  color: #fff !important;
}

/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* — Large desktops — */
@media (max-width: 1200px) {
  :root {
    --feature-col: 180px;
    --min-product-col: 140px;
  }
}

/* — Tablets and small desktops — */
@media (max-width: 992px) {
  :root {
    --feature-col: 160px;
    --min-product-col: 120px;
  }
}

/* — Landscape phones / small tablets — */
@media (max-width: 768px) {
  :root {
    --feature-col: 140px;
    --min-product-col: 100px;
  }
  
  .product-image {
    max-width: 60px;
  }
  
  .product-caption {
    font-size: 12px;
  }
  
  .add_to_cart_button,
  .add-to-cart-button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* — Stacked layout on narrow phones — */
@media (max-width: 576px) {
  /* Collapse into a 2-column "feature vs each product" on each row */
  
  /* For div-based layout */
  .compare-grid:not(table) {
    display: block;
  }
  
  .compare-row {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .compare-row.header > .feature-name {
    display: none; /* hide empty header cell */
  }
  
  .compare-row > .feature-name {
    background: #f9f9f9;
    border-right: none;
    padding: 10px;
  }
  
  .compare-row > .product-label,
  .compare-row > .check-cell,
  .compare-row > .add-cart-cell {
    grid-column: 2;
    border-left: none;
    padding: 10px;
  }
  
  /* For table-based layout */
  .compare-grid:is(table) {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* Center the top-left image in its cell */
.compare-row.header > .feature-name {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Size control for your placeholder icon */
.top-left-image {
  max-width: 80px;
  height: auto;
  display: block;
}