/* Base: keep block layout, fill parent width, consistent box sizing */
.product-properties .duc-wrapper {
  margin-bottom: 30px;
  max-width: 600px;
}
.product-properties .duc-wrapper .text-input-duc.form-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%; /* inherit cap from .duc-wrapper (600px) */
  font: inherit;
  color: var(--text-color-dark, #1f2328);
  background-color: var(--bs-body-bg, #fff);

  /* Border & radius */
  border: 1px solid var(--color-line, #d0d7de);
  border-radius: var(--form-input-border-radius, 6px);

  /* Comfortable click/typing area without fixed height */
  padding: 10px 12px;
  line-height: 1.5;

  /* Transitions */
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;

  /* Remove iOS inner shadow + default appearance where relevant */
  -webkit-appearance: none;
  appearance: none;
}

/* Focus state: accessible and visible */
.product-properties .duc-wrapper .text-input-duc.form-control:focus {
  outline: none;
  border-color: var(--color-accent, #0d6efd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #0d6efd) 25%, transparent);
}

/* Placeholder styling (optional) */
.product-properties .duc-wrapper .text-input-duc.form-control::placeholder {
  color: color-mix(in srgb, var(--text-color-dark, #1f2328) 50%, #fff);
  opacity: 1; /* make consistent across browsers */
}

/* Disabled state */
.product-properties .duc-wrapper .text-input-duc.form-control:disabled,
.product-properties .duc-wrapper .text-input-duc.form-control[disabled] {
  cursor: not-allowed;
  color: #6b7280;
  background-color: #f3f4f6;
  border-color: #e5e7eb;
  box-shadow: none;
}

/* Invalid/error state (use class .is-invalid on the input) */
.product-properties .duc-wrapper .text-input-duc.form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc3545 20%, transparent);
}

/* Base container: fills wrapper width, provides spacing and clear layout */
.product-properties .duc-wrapper .ae4hPS5 {
  display: block;               /* explicit for clarity */
  width: 100%;
  max-width: 100%;              /* inherits 600px cap from .duc-wrapper */
  margin: 0;                    /* rely on .duc-wrapper's spacing */
}

/* Child: input/controls should stretch full width */
.product-properties .duc-wrapper .ae4hPS5 > * {
  width: 100%;
  box-sizing: border-box;
}

/* Helper text under the control (optional) */
.product-properties .duc-wrapper .ae4hPS5 .help-text {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-color-muted, #6b7280);
}

/* Error message (toggle with a class) */
.product-properties .duc-wrapper .ae4hPS5 .error-text {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #dc3545;
}

/* If the container is empty, don't leave ghost gaps */
.product-properties .duc-wrapper .ae4hPS5:empty {
  display: none;
}

label { display: inline-block; }

.product-properties .duc-wrapper .duc-head > * {
  display: inline-block;
  margin-right: 10px;
}

.product-properties .duc-wrapper .duc-head .duc-title {
  color: var(--text-color-ultra-dark);
  font-size: var(--text-size-label);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 12px; /* ineffective on inline elements in many flows */
}

/* ---------- Base Resets (scoped) ---------- */
.preview-wrapper *,
.preview-wrapper *::before,
.preview-wrapper *::after {
  box-sizing: border-box;
}

/* ---------- Layout Shell ---------- */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.layout .main-content {
  flex: 1 1 auto;
}

/* ---------- Product/Main Wrapper ---------- */
.product-layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}

.product-layout .main-wrapper {
  background-color: var(--color-fill);
  display: grid;
  grid-template-areas: "right";
  grid-template-columns: 100%;
  position: relative; /* keeps stacking context sane for children */
}

.product-layout .main-wrapper .right {
  grid-area: right;
  background-color: #fff;
}

/* ---------- Mobile Product Area ---------- */
.mobile-product {
  position: relative;
  display: block;        /* enforce visibility for mobile zone */
}

.mobile-product .preview-wrapper {
  position: relative;
  margin-bottom: 30px;
}

/* ---------- Preview / Carousel Root Sizing ---------- */
/* The preview area should be responsive but predictable. */
.preview-wrapper .carousel-root {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  background-color: var(--color-fill);
  outline: none;
  height: 100%;
  /* Provide a baseline max-height; overridden below for single-dynamic. */
  max-height: calc(100vh - 360px);
}

/* Single-dynamic variant (choose ONE of the following, keep last one effective).
   If you want a fixed compact height on mobile, leave this 230px.
   Otherwise, comment it out and keep the calc version.
*/
.preview-wrapper.single-dynamic .carousel-root {
  max-height: 230px; /* <-- adjust to taste (e.g., 280px / 320px) */
}

/* If you prefer viewport-based height instead of a fixed cap, use this instead:
.preview-wrapper.single-dynamic .carousel-root {
  max-height: calc(100vh - 260px);
} */

/* ---------- Carousel Container ---------- */
.carousel {
  position: relative;
  width: 100%;
}

.preview-wrapper .carousel-root .carousel-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* helps slide content center vertically */
  height: 100%;
  overflow: hidden;        /* essential for slide motion clipping */
  margin: 0;
}

/* ---------- Slider Wrapper & Slider ---------- */
.preview-wrapper .carousel-root .slider-wrapper {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  transition: height .15s ease-in;
}

.preview-wrapper .carousel-root .slider {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;          /* horizontal track */
  will-change: transform; /* smoother transitions */
}

.preview-wrapper .carousel-root .slider.animated {
  transition: transform .35s ease-in-out; /* avoid 'all' to prevent jank */
}

/* ---------- Slide ---------- */
.carousel .slide {
  position: relative;
  min-width: 100%;  /* one slide per view */
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column; /* allows inner content vertical stack */
  justify-content: center; /* vertical align */
}

/* ---------- Image Wrappers ---------- */
/* Outer container centering the image container */
.preview-wrapper .carousel-root .inner-carousel-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Slide-level image wrapper fills the slide area */
.preview-wrapper .carousel-root .slider-wrapper .slider .image-wrapper {
  width: 100%;
  height: 100%;
}

/* Visual padding/background around the image area */
.preview-wrapper .carousel-root .carousel-slider .slide .image-wrapper {
  background-color: var(--color-fill);
  padding: 20px; /* adjust if crowding */
}

/* ---------- Loading/Zoom Container ---------- */
.image-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.image-loader.zoomIn {
  cursor: zoom-in;
}

/* The innermost content that will actually render the image. If you render
   <img> here later, add max-width/height rules there. */
.inner-image-wrapper {
  /* Defaults can be empty; if you insert <img> later, see note below */
}

/* ---------- Transform (react-zoom-pan-pinch or similar) ---------- */
/* The wrapper needs to expand to available space and clip overflow. */
.react-transform-wrapper.transform-component-module_wrapper__SPB86 {
  position: relative;
  width: 100%;            /* replaced fit-content with 100% */
  height: 100%;           /* replaced fit-content with 100% */
  overflow: hidden;       /* clip panning/zooming */
  touch-action: none;     /* modern alternative to various vendor user-select */
  user-select: none;
  margin: 0;
  padding: 0;
}

/* The inner transformable component should also expand,
   and we centrally align its content. */
.react-transform-component.transform-component-module_content__FBWxo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;    /* replaced fit-content with 100% */
  height: 100%;   /* replaced fit-content with 100% */
  margin: 0;
  padding: 0;
  transform-origin: 0 0; /* keep origin for predictable scaling */
}

/* ---------- Optional: image sizing inside the transform ---------- */
/* If the real image gets inserted as: .inner-image-wrapper > img */
.preview-wrapper .inner-image-wrapper > img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;           /* prevents distortion and allows letterboxing */
  object-fit: contain;   /* contain inside padded area */
  display: block;
}