/* =============================================================================
   Claue V2 — Bundle Product Detail Page (P8)

   Styles Magento's native two-step "Customize and add to cart" bundle flow to
   the Claue look. The flow itself is left intact (the slide widget guarantees
   the bundle option validation + cart submit keep working); this file only
   restyles it: coral CTA, clean option rows, a bordered "Your Customization"
   summary box. Scoped to the `.cl-page-bundle` body class added by
   Magento_Bundle/layout/catalog_product_view_type_bundle.xml.
   ========================================================================== */

/* ── "Customize and Add to Cart" toggle → coral pill (matches the PDP ATC) ── */
.cl-page-bundle #bundle-slide,
.cl-page-bundle .action.primary.customize {
  background-color: var(--cl-cta, #cf9683) !important;
  border: 0 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
  height: 44px;
  line-height: 44px;
  padding: 0 30px;
  border-radius: 40px !important;
  box-shadow: none !important;
  transition: background 0.2s;
}

.cl-page-bundle #bundle-slide:hover,
.cl-page-bundle .action.primary.customize:hover {
  background-color: var(--cl-cta-dark, #bd7e63) !important;
}

/* ── Customization panel ── */
.cl-page-bundle .bundle-options-container {
  margin: 8px 0 36px;
}

.cl-page-bundle .bundle-options-container .legend.title,
.cl-page-bundle .bundle-options-container .legend.title span {
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-heading, #222);
  border: 0;
  margin-bottom: 18px;
}

/* "Go back to product details" → quiet text link, not a heavy button */
.cl-page-bundle .action.back.customization {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--cl-text, #696969) !important;
  padding: 0 !important;
  height: auto !important;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  text-decoration: underline;
}

.cl-page-bundle .action.back.customization:hover {
  color: var(--cl-cta, #cf9683) !important;
}

/* ── Option rows ── */
.cl-page-bundle .fieldset-bundle-options .field.option {
  border-top: 1px solid #ededed;
  padding: 14px 0;
}

.cl-page-bundle .fieldset-bundle-options .field.option > .label {
  font-weight: 600;
  color: var(--cl-heading, #222);
  font-size: 14px;
}

.cl-page-bundle .fieldset-bundle-options .nested.options-list .label {
  color: var(--cl-text, #696969);
  font-size: 13px;
}

.cl-page-bundle .fieldset-bundle-options .price-notice .price {
  color: var(--cl-cta, #cf9683);
  font-weight: 600;
}

/* ── "Your Customization" summary box ── */
.cl-page-bundle .block-bundle-summary {
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 4px;
  padding: 22px;
}

.cl-page-bundle .block-bundle-summary > .title strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--cl-heading, #222);
}

.cl-page-bundle .block-bundle-summary .price-box .price {
  color: var(--cl-cta, #cf9683);
  font-weight: 700;
  font-size: 20px;
}

.cl-page-bundle .block-bundle-summary .box-tocart .action.tocart {
  width: 100%;
}