/**
 * 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; flex-direction: row; }
/* prefix_class lands on the Elementor wrapper; also allow class on .w2i-pui-gallery */
.w2i-pui-thumbs-left .w2i-pui-gallery,
.w2i-pui-gallery.w2i-pui-thumbs-left { flex-direction: row; }
.w2i-pui-thumbs-bottom .w2i-pui-gallery,
.w2i-pui-gallery.w2i-pui-thumbs-bottom { flex-direction: column; }

@media (max-width: 767px) {
  .w2i-pui-gallery { 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;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.05) !important;
  border-radius: 8px !important;
  padding: var(--w2i-gallery-main-pad-t, 10px) var(--w2i-gallery-main-pad-r, 10px) var(--w2i-gallery-main-pad-b, 10px) var(--w2i-gallery-main-pad-l, 10px) !important;
  box-sizing: border-box;
}
.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;
  padding: var(--w2i-gallery-main-pad-t, 10px) var(--w2i-gallery-main-pad-r, 10px) var(--w2i-gallery-main-pad-b, 10px) var(--w2i-gallery-main-pad-l, 10px);
  box-sizing: border-box;
}

.w2i-pui-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.w2i-pui-thumbs-left .w2i-pui-thumbs,
.w2i-pui-gallery.w2i-pui-thumbs-left .w2i-pui-thumbs { flex-direction: column; flex: 0 0 auto; order: -1; }
.w2i-pui-thumbs-bottom .w2i-pui-thumbs,
.w2i-pui-gallery.w2i-pui-thumbs-bottom .w2i-pui-thumbs {
  flex-direction: row;
  order: 0;
  width: 100%;
  justify-content: center;
}

.w2i-pui .w2i-pui-thumb {
  display: block;
  width: 72px; height: 72px;
  padding: var(--w2i-gallery-thumb-pad-t, 0) var(--w2i-gallery-thumb-pad-r, 0) var(--w2i-gallery-thumb-pad-b, 0) var(--w2i-gallery-thumb-pad-l, 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;
  box-sizing: border-box;
}
.w2i-pui .w2i-pui-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: var(--w2i-gallery-thumb-img-pad-t, 0) var(--w2i-gallery-thumb-img-pad-r, 0) var(--w2i-gallery-thumb-img-pad-b, 0) var(--w2i-gallery-thumb-img-pad-l, 0);
  box-sizing: border-box;
}
.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; }

/* Single action buttons (Elementor Button markup + Web2Ink functional class). */
.elementor-widget-w2i_product_btn_design .w2i-pui-action-btn,
.elementor-widget-w2i_product_btn_express .w2i-pui-action-btn,
.elementor-widget-w2i_product_btn_template .w2i-pui-action-btn,
.elementor-widget-w2i_product_btn_price .w2i-pui-action-btn,
a.elementor-button.w2i-pui-action-btn {
  float: none !important;
  clear: none !important;
  text-decoration: none;
  box-sizing: border-box;
}
.elementor-widget-w2i_product_btn_design .elementor-button-wrapper,
.elementor-widget-w2i_product_btn_express .elementor-button-wrapper,
.elementor-widget-w2i_product_btn_template .elementor-button-wrapper,
.elementor-widget-w2i_product_btn_price .elementor-button-wrapper {
  width: 100%;
}

/* ---------------- 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; }

/* Separate part widgets: no built-in section labels — options fill the row. */
.w2i-pd-colors .w2i-pui-row,
.w2i-pd-sizes .w2i-pui-row,
.w2i-pd-methods .w2i-pui-row,
.w2i-pd-locations .w2i-pui-row {
  gap: 0;
}
.w2i-pd-colors .w2i-pui-swatches,
.w2i-pd-sizes .w2i-pui-sizes,
.w2i-pd-methods .w2i-pui-cards,
.w2i-pd-locations .w2i-pui-cards {
  width: 100%;
}

/* 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.02);
  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).
 * Layout 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}}). Display defaults to grid; Flex is
 * available from Action buttons → Display. */
.w2i-pui-buttons {
  display: block;
  width: 100%;
}
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons {
  display: var(--w2i-btn-display, grid) !important;
  grid-template-columns: repeat(var(--w2i-btn-cols, 1), minmax(0, 1fr));
  flex-direction: var(--w2i-btn-flex-dir, row);
  flex-wrap: var(--w2i-btn-flex-wrap, wrap);
  justify-content: var(--w2i-btn-flex-justify, flex-start);
  align-items: var(--w2i-btn-flex-align, var(--w2i-btn-grid-align, stretch));
  gap: var(--w2i-btn-gap, 12px);
  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: var(--w2i-btn-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: var(--w2i-btn-border-w, 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, box-shadow .15s ease;
}
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons > a.button:hover,
.w2i-pui .w2i-pui-buttons div.w2i-product-buttons > a.button:focus {
  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.
 * Values are overridable from Elementor (Product Details → Style → Price Calculator)
 * via CSS vars on {{WRAPPER}}. Higher specificity + !important beat frontend.css and
 * Elementor Kit form/button rules inside the editor iframe. */
.w2i-pui-buttons > #web2inkPriceCalculatorMainDiv,
.w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin-top: var(--w2i-calc-mt, var(--w2i-btn-gap, 12px));
  clear: both;
  box-sizing: border-box;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc {
  max-width: 100% !important;
  margin-top: var(--w2i-calc-mt, var(--w2i-btn-gap, 12px)) !important;
  margin-bottom: var(--w2i-calc-mb, 0);
  padding: var(--w2i-calc-pad-t, 18px) var(--w2i-calc-pad-r, 18px) var(--w2i-calc-pad-b, 18px) var(--w2i-calc-pad-l, 18px) !important;
  border-radius: var(--w2i-calc-radius, 16px) !important;
  border-width: var(--w2i-calc-border-w, 1px) !important;
  border-style: solid !important;
  border-color: var(--w2i-calc-border, rgba(226,232,240,.95)) !important;
  background: var(--w2i-calc-bg, #fff) !important;
  background-color: var(--w2i-calc-bg, #fff) !important;
  box-shadow: var(--w2i-calc-shadow, 0 8px 28px rgba(15,23,42,.12));
  float: none !important;
  grid-column: 1 / -1;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkPriceCalculatorForm > h5.w2i-title,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkPriceCalculatorForm > h5.w2i-title {
  color: var(--w2i-calc-title-color, #0f172a) !important;
  border-bottom-color: var(--w2i-calc-divider, #eef2f7) !important;
  font-size: var(--w2i-calc-title-size, 1.05em);
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv ul li.InnerDivInf,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .addonInf ul li:first-child,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv ul li.InnerDivInf,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .addonInf ul li:first-child {
  color: var(--w2i-calc-label-color, #64748b) !important;
  float: none !important;
  width: 100% !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv .valInf,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv .valInf ul,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv .valInf,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv .valInf ul {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv ul li.InnerDivVal select,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv .countNumber,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv .addonInf select,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkPriceCalculatorForm select[name='process'],
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv ul li.InnerDivVal select,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv .countNumber,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv .addonInf select,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkPriceCalculatorForm select[name='process'] {
  border-color: var(--w2i-calc-input-border, #e2e8f0) !important;
  border-radius: var(--w2i-calc-input-radius, 10px) !important;
  background: var(--w2i-calc-input-bg, #fff) !important;
  background-color: var(--w2i-calc-input-bg, #fff) !important;
  color: var(--w2i-calc-input-color, #0f172a) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv ul li.InnerDivVal select:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv .countNumber:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv .addonInf select:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkPriceCalculatorForm select[name='process']:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv ul li.InnerDivVal select:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv .countNumber:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv .addonInf select:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkPriceCalculatorForm select[name='process']:focus {
  border-color: var(--w2i-calc-accent, #03A7F2) !important;
  box-shadow: 0 0 0 3px var(--w2i-calc-accent-ring, rgba(3,167,242,.18)) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorInnerDiv div.w2i-size-list,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorInnerDiv div.w2i-size-list {
  border-color: var(--w2i-calc-divider, #eef2f7) !important;
  border-radius: var(--w2i-calc-input-radius, 12px) !important;
  background: var(--w2i-calc-muted-bg, linear-gradient(180deg,#f8fafc 0%,#fff 100%)) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-size-list input,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-size-list select,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-size-list input,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-size-list select,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv div.w2i-size-list input,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv div.w2i-size-list select {
  border-color: var(--w2i-calc-size-input-border, var(--w2i-calc-input-border, #e2e8f0)) !important;
  border-width: var(--w2i-calc-input-border-w, 1px) !important;
  border-style: solid !important;
  border-radius: var(--w2i-calc-input-radius-sm, 8px) !important;
  background: var(--w2i-calc-size-input-bg, var(--w2i-calc-input-bg, #fff)) !important;
  background-color: var(--w2i-calc-size-input-bg, var(--w2i-calc-input-bg, #fff)) !important;
  color: var(--w2i-calc-size-input-color, var(--w2i-calc-input-color, #0f172a)) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-size-list input:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-size-list select:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-size-list input:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-size-list select:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv div.w2i-size-list input:focus,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv div.w2i-size-list select:focus {
  border-color: var(--w2i-calc-size-input-focus, var(--w2i-calc-accent, #03A7F2)) !important;
  box-shadow: 0 0 0 3px var(--w2i-calc-accent-ring, rgba(3,167,242,.16)) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-bordertop,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2ibordertop,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkPriceCalculatorForm,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-bordertop,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2ibordertop,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkPriceCalculatorForm {
  border-top-color: var(--w2i-calc-divider, #eef2f7) !important;
  border-bottom-color: var(--w2i-calc-divider, #eef2f7) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkPriceCalculatorForm > div.w2i-bordertop.w2i-pad5,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkPriceCalculatorForm > div.w2i-bordertop.w2i-pad5 {
  border-color: var(--w2i-calc-divider, #eef2f7) !important;
  border-radius: var(--w2i-calc-input-radius, 12px) !important;
  background: var(--w2i-calc-muted-bg, linear-gradient(180deg,#f8fafc 0%,#fff 100%)) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorPerItemValue,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorPerItemValue {
  color: var(--w2i-calc-peritem-color, #64748b) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .web2inkPriceCalculatorValue,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .web2inkPriceCalculatorValue {
  color: var(--w2i-calc-total-color, #0f172a) !important;
  font-size: var(--w2i-calc-total-size, 1.55rem) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-calc-color-swatch.is-selected .w2i-calc-color-swatch-ring,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-calc-color-swatch.is-selected .w2i-calc-color-swatch-ring {
  border-color: var(--w2i-calc-swatch-selected, var(--w2i-calc-accent, #03A7F2)) !important;
  box-shadow: 0 0 0 3px var(--w2i-calc-accent-ring, rgba(3,167,242,.16)) !important;
}
/* Color swatches — Elementor Style → Calculator — Color Swatches */
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv .w2i-calc-color-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--w2i-calc-swatch-gap, 8px) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv .w2i-calc-color-swatch {
  position: relative !important;
  width: var(--w2i-calc-swatch-size, 28px) !important;
  height: var(--w2i-calc-swatch-size, 28px) !important;
  min-width: var(--w2i-calc-swatch-size, 28px) !important;
  min-height: var(--w2i-calc-swatch-size, 28px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--w2i-calc-swatch-radius, 999px) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px var(--w2i-calc-swatch-inset, rgba(15,23,42,0.12)) !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  line-height: 0 !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv .w2i-calc-color-swatch-ring {
  border-radius: var(--w2i-calc-swatch-radius, 999px) !important;
  border-width: var(--w2i-calc-swatch-ring-w, 2px) !important;
  border-style: solid !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .web2inkPriceCalculatorInnerDiv .w2i-calc-color-name {
  display: var(--w2i-calc-swatch-name-display, block) !important;
  color: var(--w2i-calc-swatch-name-color, #475569) !important;
  margin: var(--w2i-calc-swatch-name-mar-t, 0) var(--w2i-calc-swatch-name-mar-r, 0) var(--w2i-calc-swatch-name-mar-b, 2px) var(--w2i-calc-swatch-name-mar-l, 0) !important;
  padding: var(--w2i-calc-swatch-name-pad-t, 0) var(--w2i-calc-swatch-name-pad-r, 0) var(--w2i-calc-swatch-name-pad-b, 0) var(--w2i-calc-swatch-name-pad-l, 0) !important;
}
/* Show/hide via Elementor switcher prefix_class on the widget wrapper */
.elementor-element.w2i-pui-calc-cname- .w2i-pui .w2i-calc-color-name,
.elementor-element.w2i-pui-calc-cname- .w2i-pui-buttons .w2i-calc-color-name {
  display: none !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-quote-actions > a.button,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkSendEmailQuoteToolTip,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-quote-actions > a.button,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkSendEmailQuoteToolTip {
  border-radius: var(--w2i-calc-btn-radius, 10px) !important;
  min-height: var(--w2i-calc-btn-minh, 44px);
  padding: var(--w2i-calc-btn-pad-t, 10px) var(--w2i-calc-btn-pad-r, 14px) var(--w2i-calc-btn-pad-b, 10px) var(--w2i-calc-btn-pad-l, 14px) !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkSendEmailQuoteToolTip,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkSendEmailQuoteToolTip {
  border-color: var(--w2i-calc-btn-primary-bg, #03A7F2) !important;
  background: var(--w2i-calc-btn-primary-bg, #03A7F2) !important;
  background-color: var(--w2i-calc-btn-primary-bg, #03A7F2) !important;
  color: var(--w2i-calc-btn-primary-color, #fff) !important;
  box-shadow: var(--w2i-calc-btn-primary-shadow, 0 2px 8px rgba(3,167,242,.28));
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat #web2inkSendEmailQuoteToolTip:hover,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc #web2inkSendEmailQuoteToolTip:hover {
  border-color: var(--w2i-calc-btn-primary-bg-h, #0284c7) !important;
  background: var(--w2i-calc-btn-primary-bg-h, #0284c7) !important;
  background-color: var(--w2i-calc-btn-primary-bg-h, #0284c7) !important;
  color: var(--w2i-calc-btn-primary-color-h, #fff) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-quote-actions > a.button:not(#web2inkSendEmailQuoteToolTip),
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-quote-actions > a.button:not(#web2inkSendEmailQuoteToolTip) {
  background: var(--w2i-calc-btn-secondary-bg, #fff) !important;
  background-color: var(--w2i-calc-btn-secondary-bg, #fff) !important;
  border-color: var(--w2i-calc-btn-secondary-border, #d0d5dd) !important;
  color: var(--w2i-calc-btn-secondary-color, #344054) !important;
}
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-flat .w2i-quote-actions > a.button:not(#web2inkSendEmailQuoteToolTip):hover,
.w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv.w2i-pui-calc .w2i-quote-actions > a.button:not(#web2inkSendEmailQuoteToolTip):hover {
  background: var(--w2i-calc-btn-secondary-bg-h, #f8fafc) !important;
  background-color: var(--w2i-calc-btn-secondary-bg-h, #f8fafc) !important;
  border-color: var(--w2i-calc-btn-secondary-border-h, #98a2b3) !important;
  color: var(--w2i-calc-btn-secondary-color-h, #101828) !important;
}

/* Elementor editor / preview iframe — keep the calculator panel visible and layout-stable
 * while Style controls are tuned (matches live inline .w2i-flat chrome). */
.elementor-editor-active .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv,
.elementor-editor-preview .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv,
.elementor-element-edit-mode .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
/* Show color swatches in the editor even when the product has only one color
 * (core adds .w2i-hidden) so Style → Color Swatches has a live target. */
.elementor-editor-active .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv ul.w2i-hidden:has(.w2i-calc-color-swatches),
.elementor-editor-preview .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv ul.w2i-hidden:has(.w2i-calc-color-swatches),
.elementor-element-edit-mode .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv ul.w2i-hidden:has(.w2i-calc-color-swatches) {
  display: block !important;
}
.elementor-editor-active .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .w2i-quote-actions,
.elementor-editor-preview .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .w2i-quote-actions,
.elementor-element-edit-mode .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .w2i-quote-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
/* Prevent quote / design links from navigating away while editing */
.elementor-editor-active .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .w2i-quote-actions > a.button,
.elementor-editor-preview .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .w2i-quote-actions > a.button,
.elementor-element-edit-mode .w2i-pui .w2i-pui-buttons > #web2inkPriceCalculatorMainDiv .w2i-quote-actions > a.button {
  pointer-events: none;
}

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