/* CartDance — SureCart elements for Breakdance (frontend + builder canvas). */

.bdsc-element-notice {
  padding: 10px 12px;
  border: 1px dashed rgba(94, 66, 214, 0.6);
  border-radius: 4px;
  background: rgba(94, 66, 214, 0.06);
  color: #3d2c8d;
  font-size: 13px;
  line-height: 1.4;
}

.bdsc-element-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.6;
}

/* Breakdance wraps each element; SureCart's form must not add theme-level
   width constraints inside the builder layout. */
.cartdance-element form.wp-block-surecart-product-page {
  margin: 0;
  max-width: none;
}

/* Breakdance Columns/Div children are flex items aligned to the start, which
   shrinks a child to its content width. SureCart's grids (price choices,
   product lists) collapse in that case, so every product element takes the
   full width of its column. Small inline pieces opt out below. */
.cartdance-element {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cd-cart-icon,
.cd-sale-badge {
  width: auto;
}

/* Design source of truth
   Inside a CartDance builder element, SureCart's colour variables are mapped
   to Breakdance's global design (brand colour, button colours), so selected
   pills, price-choice highlights, focus rings and SureCart-rendered buttons
   follow the site design set in Breakdance. Outside elements (block-editor
   pages, shortcodes, cart drawer, checkout) the CartDance settings page keeps
   driving the same variables at :root. A closer declaration always wins for
   its subtree, so the root values do not leak into elements. */
.cartdance-element {
  --sc-color-primary-500: var(--bde-brand-primary-color);
  --sc-color-primary-text: var(--bde-button-primary-text-color, #ffffff);
  --sc-focus-ring-color-primary: var(--bde-brand-primary-color);
  --sc-input-border-color-focus: var(--bde-brand-primary-color);
  --sc-cart-icon-counter-background: var(--bde-brand-primary-color);
  --sc-cart-icon-counter-color: var(--bde-button-primary-text-color, #ffffff);
}

/* Sensible default rhythm between product elements. Any Spacing control on
   the element (a per-element selector) overrides these. */
.cd-collection-tags,
.cd-product-title,
.cd-product-price,
.cd-product-description,
.cd-price-chooser,
.cd-variant-pills,
.cd-quantity,
.cd-custom-amount,
.cd-line-item-note,
.cd-product-media,
.cd-product-image,
.cd-sale-badge {
  margin-bottom: 16px;
}
.cd-add-to-cart {
  margin-top: 8px;
  margin-bottom: 16px;
}
.cd-product-title,
.cd-product-price {
  margin-bottom: 12px;
}
.cd-sale-badge {
  margin-bottom: 8px;
}

/* SureCart-rendered buttons inside CartDance elements (Product List cards,
   quick add) follow Breakdance's global button design. The long selectors
   out-rank SureCart's own
   `.wp-block-surecart-product-buy-button:not(.is-style-outline) .wp-block-button__link`. */
.cartdance-element .wp-block-button__link.sc-button__link,
.cartdance-element .wp-block-surecart-product-buy-button:not(.is-style-outline) .wp-block-button__link.sc-button__link,
.cartdance-element .wp-block-surecart-product-quick-view-button .sc-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--bde-button-font-size);
  line-height: var(--bde-button-line-height);
  font-weight: var(--bde-button-font-weight);
  padding: var(--bde-button-padding-base);
  border-radius: var(--bde-button-border-radius);
  border-width: var(--bde-button-border-width);
  border-style: solid;
  /* !important: SureCart prints its store brand colour on this button with
     !important; inside a CartDance element Breakdance's design wins. */
  border-color: var(--bde-button-primary-border-color) !important;
  background-color: var(--bde-button-primary-background-color) !important;
  color: var(--bde-button-primary-text-color) !important;
  transition: all var(--bde-transition-duration) ease-in-out;
}
.cartdance-element .wp-block-button__link.sc-button__link:hover,
.cartdance-element .wp-block-surecart-product-buy-button:not(.is-style-outline) .wp-block-button__link.sc-button__link:hover {
  border-color: var(--bde-button-primary-border-color-hover) !important;
  background-color: var(--bde-button-primary-background-color-hover) !important;
  color: var(--bde-button-primary-text-color-hover) !important;
}

/* Form labels (Quantity, Pricing, Variant Pills, Custom Amount, Order Note).
   SureCart's label.css makes .sc-form-label inline-block with a bottom margin,
   but that stylesheet is not loaded on every site (block styles are inlined per
   block and the label style is not always among them). A bare <label> is inline,
   so any margin-bottom, including the elements' "Space Below Label" control,
   would be ignored. Make it block-level here so spacing always applies. */
.cartdance-element .sc-form-label {
  display: inline-block;
  margin-bottom: var(--sc-input-label-margin, 0.5em);
}