/**
 * Web2Ink product UI widgets — base styles.
 * Elements are <span>/<div> (not <button>) so theme button styling can't bleed in. Selectors are
 * scoped under .w2i-pui with explicit resets; most values are overridable from Elementor's Style tab.
 */

.w2i-pui, .w2i-pui * , .w2i-pui *::before, .w2i-pui *::after { box-sizing: border-box; }
.w2i-pui { line-height: 1.5; }

/* ---------------- Gallery ---------------- */
.w2i-pui-gallery { display: flex; gap: 14px; }
.w2i-pui-gallery.w2i-pui-thumbs-left   { flex-direction: row; }
.w2i-pui-gallery.w2i-pui-thumbs-bottom { flex-direction: column; }

.w2i-pui-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
.w2i-pui-main img { max-width: 100%; height: auto; display: block; transition: opacity .15s ease; }
.w2i-pui-ph-image {
  width: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center;
  background: #f1f3f5; color: #adb5bd; font-size: 15px; border-radius: 8px;
}

.w2i-pui-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.w2i-pui-thumbs-left   .w2i-pui-thumbs { flex-direction: column; flex: 0 0 auto; order: -1; }
.w2i-pui-thumbs-bottom .w2i-pui-thumbs { flex-direction: row; }

.w2i-pui .w2i-pui-thumb {
  display: block;
  width: 72px; height: 72px;
  padding: 0; margin: 0;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.w2i-pui .w2i-pui-thumb img { width: 100%; object-fit: contain; display: block; }
.w2i-pui .w2i-pui-thumb:hover { border-color: #adb5bd; }
.w2i-pui .w2i-pui-thumb.is-active { border-color: #1c7ed6; }
.w2i-pui .w2i-pui-thumb:focus-visible { outline: 2px solid #1c7ed6; outline-offset: 2px; }
/* Color-source thumbs: hide every color except the one currently selected. */
.w2i-pui .w2i-pui-thumb.is-color-hidden { display: none !important; }
.w2i-pui-thumbs.is-empty { display: none !important; }

/* ---------------- Details (right column) ---------------- */
.w2i-pui-details { display: flex; flex-direction: column; gap: 22px; }
.w2i-pui-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.w2i-pui-label { font-weight: 700; color: #1a2b4a; flex: 0 0 auto; padding-top: 8px; }

/* Label above options (Elementor: Section labels → Label position → Above options).
 * Class is on the Elementor widget wrapper via prefix_class. */
.w2i-pui-labels-stacked .w2i-pui-row {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.w2i-pui-labels-stacked .w2i-pui-label {
  width: 100%;
  padding-top: 0;
  flex: 0 0 auto;
}
.w2i-pui-labels-stacked .w2i-pui-swatches,
.w2i-pui-labels-stacked .w2i-pui-sizes,
.w2i-pui-labels-stacked .w2i-pui-cards {
  width: 100%;
}

.w2i-pui-desc { color: #4b5563; font-size: 16px; }
.w2i-pui-desc p { margin: 0 0 .6em; }
.w2i-pui-desc p:last-child { margin-bottom: 0; }

/* Swatches (clickable) */
.w2i-pui-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.w2i-pui .w2i-pui-swatch {
  position: relative;
  display: inline-block;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  border: 1px solid #d0d4da;
  border-radius: 6px;
  background-color: #e9ecef;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  box-sizing: border-box;
}
.w2i-pui .w2i-pui-swatch:hover { transform: translateY(-1px); border-color: #adb5bd; }
.w2i-pui .w2i-pui-swatch.is-selected {
  border-color: var(--w2i-swatch-active, #1c7ed6);
  transform: scale(1.08);
  z-index: 1;
}
.w2i-pui .w2i-pui-swatch:focus-visible {
  outline: 1px solid var(--w2i-swatch-active, #1c7ed6);
  outline-offset: 1px;
}

/* Sizes (display only) */
.w2i-pui-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.w2i-pui .w2i-pui-size {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px;
  margin: 0; padding: 8px 14px;
  border: 1px solid #d0d4da;
  border-radius: 6px;
  background: #fff;
  color: #1a2b4a;
  font-weight: 600;
  text-align: center;
}

/* Info cards (methods / locations — read-only, icon + label like the example) */
.w2i-pui-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.w2i-pui .w2i-pui-card {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-width: 120px;
  margin: 0; padding: 16px 18px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.w2i-pui .w2i-pui-card-ic { display: inline-flex; color: #1c7ed6; line-height: 0; }
.w2i-pui .w2i-pui-card-ic svg { width: 30px; height: 30px; display: block; }
.w2i-pui .w2i-pui-card-label { color: #1a2b4a; font-size: 15px; font-weight: 600; }
.w2i-pui-info-row { flex-direction: column; align-items: flex-start; }
.w2i-pui-info-row .w2i-pui-label { padding-top: 0; }

/* Action buttons (core-rendered anchors).
 * Grid lives on .w2i-product-buttons (NOT display:contents) so frontend.css
 * `div.w2i-product-buttons > a.button { float; width:49% }` cannot force a fake
 * 2-column layout in the Elementor editor. Style values come from CSS vars on
 * the Elementor widget wrapper ({{WRAPPER}}). */
.w2i-pui-buttons {
  display: block;
  width: 100%;
}
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons {
  display: grid !important;
  grid-template-columns: repeat(var(--w2i-btn-cols, 1), minmax(0, 1fr));
  gap: var(--w2i-btn-gap, 12px);
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons:after {
  content: none !important;
  display: none !important;
  clear: none !important;
}
/* Scope to action buttons only — do not restyle anchors inside the inline calculator. */
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons > a.button {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: var(--w2i-btn-justify, center) !important;
  gap: 8px;
  padding: var(--w2i-btn-pad-t, 14px) var(--w2i-btn-pad-r, 30px) var(--w2i-btn-pad-b, 14px) var(--w2i-btn-pad-l, 30px) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--w2i-btn-border, var(--w2i-btn-bg, #1c7ed6)) !important;
  border-radius: var(--w2i-btn-radius, 6px) !important;
  background: var(--w2i-btn-bg, #1c7ed6) !important;
  background-color: var(--w2i-btn-bg, #1c7ed6) !important;
  color: var(--w2i-btn-color, #ffffff) !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: var(--w2i-btn-text-align, center) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons > a.button:hover {
  background: var(--w2i-btn-bg-h, var(--w2i-btn-bg, #1971c2)) !important;
  background-color: var(--w2i-btn-bg-h, var(--w2i-btn-bg, #1971c2)) !important;
  border-color: var(--w2i-btn-border-h, var(--w2i-btn-bg-h, var(--w2i-btn-bg, #1971c2))) !important;
  color: var(--w2i-btn-color-h, var(--w2i-btn-color, #ffffff)) !important;
}
/* Inline calculator when product quote popup is off — full width under action buttons */
.w2i-pui-buttons > #web2inkPriceCalculatorMainDiv {
  display: block;
  width: 100%;
  margin-top: var(--w2i-btn-gap, 12px);
  clear: both;
  box-sizing: border-box;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 767px) {
  .w2i-pui-gallery.w2i-pui-thumbs-left { flex-direction: column; }
  .w2i-pui-thumbs-left .w2i-pui-thumbs { flex-direction: row; order: 0; }
}