/* =============================================================================
   Claue V2 — Grouped Product Detail Page (P9)

   A grouped product renders an associated-products table
   (#super-product-table): each row is a child simple product with its own
   price + a Qty input, plus one Add-to-Cart for the whole set. The shared PDP
   layout (catalog_product_view.xml) places that table — inside product.info.main
   — in the narrow 260px right column, which is far too tight for a
   Name · Price · Qty table. catalog_product_view_type_grouped.xml therefore
   moves product.info.main full width below the 3-column top and tags the body
   `cl-page-grouped`; this file collapses the top to 2 columns (so the vacated
   right track leaves no gap) and styles the table to the Claue look.

   The coral Add-to-Cart pill + qty-input box are already provided by
   product-clean.css (`.cl-page-product …`), which the grouped page also carries;
   this file only adds the grouped-specific table + layout rules.
   ========================================================================== */

/* ── Top section: 2 columns (descriptive-left | gallery-center) on desktop ──
   Scoped to ≥993px so the shared `@media (max-width: 992px)` 1-column stack
   still wins on tablet/mobile. */
@media (min-width: 993px) {
  .cl-page-grouped .cl-product-top {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

/* The purchase form is moved full width below the top, so the right purchase
   track is empty for grouped — remove it at every width. */
.cl-page-grouped .cl-pdp-right {
  display: none;
}

/* A grouped parent has no price of its own (children carry the prices); hide
   the empty left-column price box so it leaves no gap under the title. */
.cl-page-grouped .cl-pdp-left .product-info-price {
  display: none;
}

/* ── Moved purchase form: full width, centered, sensible max line length ──
   product-grouped.css is registered after product-clean.css, so this wins the
   equal-specificity cascade over the right-column float set there. */
.cl-page-grouped .product-info-main {
  float: none;
  width: 100%;
  max-width: 760px;
  margin: 4px auto 44px;
}

/* ── Associated-products table ── */
.cl-page-grouped #super-product-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
}

/* "Grouped product items" caption — keep for screen readers, hide visually. */
.cl-page-grouped #super-product-table .table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.cl-page-grouped #super-product-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cl-heading, #222529);
  border-bottom: 2px solid var(--cl-border, #e7e7e7);
  padding: 0 0 12px;
}

.cl-page-grouped #super-product-table thead th.qty,
.cl-page-grouped #super-product-table thead th.col.qty {
  width: 120px;
  text-align: center;
}

.cl-page-grouped #super-product-table tbody td {
  border-bottom: 1px solid var(--cl-border, #e7e7e7);
  padding: 18px 0;
  vertical-align: middle;
}

/* Child product name (sits in the item cell, with the price below it). */
.cl-page-grouped #super-product-table .product-item-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--cl-heading, #222529);
  margin-bottom: 6px;
}

/* Child prices → coral, matching the rest of the Claue PDP. */
.cl-page-grouped #super-product-table .price-box .price {
  color: var(--cl-cta, #cf9683);
  font-weight: 600;
  font-size: 16px;
}

.cl-page-grouped #super-product-table .price-box .old-price .price {
  color: var(--cl-text-light, #999999);
  font-weight: 400;
  font-size: 13px;
  text-decoration: line-through;
}

.cl-page-grouped #super-product-table .price-box .price-label {
  display: none;
}

/* Qty column / input. */
.cl-page-grouped #super-product-table td.col.qty,
.cl-page-grouped #super-product-table td.qty {
  text-align: center;
}

.cl-page-grouped #super-product-table input.qty {
  width: 64px;
  height: 40px;
  border: 1px solid var(--cl-heading, #222529);
  text-align: center;
  border-radius: 2px;
}

/* ── Add-to-Cart for the whole set ──
   The coral pill itself comes from product-clean.css; keep it a comfortably
   sized, left-aligned pill under the table (not stretched across the full form). */
.cl-page-grouped .box-tocart {
  margin: 0;
}

.cl-page-grouped .box-tocart .action.tocart.primary {
  min-width: 220px;
}

/* Grouped products have no out-of-stock parent state to show once children are
   salable; keep the stock line tidy in the left column. */
.cl-page-grouped .cl-pdp-left .stock.available {
  font-size: 13px;
}