/**
 * SD Konfigurator — Layout CSS
 *
 * Both columns are set to the same explicit height (calc(100vh - offset)).
 * The summary column becomes a flex column: title takes its natural space,
 * #sd-inputs-root fills the rest. This keeps the title visible and the
 * price bar always in view, without hiding anything or guessing heights.
 *
 * Offset: 100px = ~70px header + ~30px breadcrumb/spacing above the product.
 * Admin bar (logged-in): adds 32px → 132px total.
 *
 * NOTE: WooCommerce gallery column class is .woocommerce-product-gallery —
 * NOT .sd-viewer-wrap (which never exists in the DOM).
 */

/* ── Viewer column (left) ──────────────────────────────────────────────── */

#sd-viewer-root {
  /* CSS custom properties — inherited by all React children */
  --sd-primary:    #c8a882;
  --sd-radius:     2px;
  --sd-bg:         #faf8f4;
  --sd-bg-viewer:  #f0ede8;
  --sd-text:       #3d3d3d;
  --sd-text-light: #888;
  --sd-border:     #e8e3dc;
  --sd-cart-btn:   #3d3d3d;

  display: block;
  width: 100%;
  height: calc(100vh - 105px);
  min-height: 500px;
}

.admin-bar #sd-viewer-root {
  height: calc(100vh - 137px);
}

/* ── Remove theme padding from summary so PriceBar sits flush to edges ──── */

.sd-konfigurator-active .summary,
.sd-konfigurator-active .entry-summary {
  padding: 0 !important;
}

/* ── Summary column: same height as viewer, flex so title + inputs stack ── */

.sd-konfigurator-active .woocommerce-product-gallery ~ .summary,
.sd-konfigurator-active .woocommerce-product-gallery ~ .entry-summary {
  height: calc(100vh - 105px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.admin-bar .sd-konfigurator-active .woocommerce-product-gallery ~ .summary,
.admin-bar .sd-konfigurator-active .woocommerce-product-gallery ~ .entry-summary {
  height: calc(100vh - 137px) !important;
}

/* ── Inputs column fills remaining space below the title ─────────────────── */

#sd-inputs-root {
  --sd-primary:    #c8a882;
  --sd-radius:     2px;
  --sd-text:       #3d3d3d;
  --sd-border:     #e8e3dc;

  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;           /* fills whatever space remains after the title */
  height: auto;
  min-height: 0;
  overflow: hidden;
}

/* ── Replace float layout with flexbox ───────────────────────────────────── */

.sd-konfigurator-active .woocommerce div.product,
.sd-konfigurator-active .woocommerce-page div.product {
  display: flex !important;
  align-items: flex-start !important;
}

/* Cancel floats set by the theme */
.sd-konfigurator-active .woocommerce-product-gallery,
.sd-konfigurator-active .woocommerce-product-gallery ~ .summary,
.sd-konfigurator-active .woocommerce-product-gallery ~ .entry-summary {
  float: none !important;
}

/* ── Gallery wrapper ──────────────────────────────────────────────────── */

.sd-konfigurator-active .woocommerce-product-gallery {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Responsive column split ─────────────────────────────────────────────
 *
 * Breakpoints:
 *   < 960px   → theme default (stacked on mobile)
 *   960–1279  → 50 / 50
 *   ≥ 1280    → 60 / 40
 * ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 960px) {
  .sd-konfigurator-active .woocommerce-product-gallery {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .sd-konfigurator-active .woocommerce-product-gallery ~ .summary,
  .sd-konfigurator-active .woocommerce-product-gallery ~ .entry-summary {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 1280px) {
  .sd-konfigurator-active .woocommerce-product-gallery {
    width: 60% !important;
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }
  .sd-konfigurator-active .woocommerce-product-gallery ~ .summary,
  .sd-konfigurator-active .woocommerce-product-gallery ~ .entry-summary {
    width: 40% !important;
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
}