/* Softroom Option Zoom 1.0.0 — all presentation rules are scoped to the module. */
.sroz-swatch { position: relative; }
.sroz-option-label { cursor: zoom-in; }
.sroz-option-label.sroz-is-selected { cursor: pointer; }
.sroz-option-label.sroz-is-selected img { outline: 2px solid #27221e; outline-offset: 1px; }
.sroz-preview-button {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #c7c1b9;
  border-radius: 50%;
  background: #fff;
  color: #27221e;
  box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
  font: inherit;
  line-height: 1;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.sroz-preview-button--flow { position: relative; top: -4px; right: auto; margin-left: 3px; vertical-align: top; }
.sroz-preview-button svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.sroz-preview-button:hover { color: #000; border-color: #27221e; background: #f5f3ef; }
.sroz-preview-button:focus-visible,
.sroz-close:focus-visible,
.sroz-select-button:focus-visible { outline: 3px solid #a96a24; outline-offset: 3px; }
.sroz-hover[hidden],
.sroz-overlay[hidden],
.sroz-large-image[hidden],
.sroz-image-status[hidden] { display: none !important; }
.sroz-hover {
  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 12px;
  border: 1px solid #ded9d2;
  border-radius: 10px;
  background: #fff;
  color: #27221e;
  box-shadow: 0 10px 36px rgb(0 0 0 / 20%);
  font: 13px/1.45 Arial, sans-serif;
  pointer-events: none;
}
.sroz-hover-title { margin: 0 0 9px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.sroz-image-area { display: flex; align-items: center; justify-content: center; min-height: 100px; background: #f6f5f3; border-radius: 5px; }
.sroz-large-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; border: 0; object-fit: contain; }
.sroz-hover .sroz-large-image { max-height: min(280px, calc(100vh - 145px)); }
.sroz-image-status { margin: 9px 0 0; color: #68635d; font-size: 12px; line-height: 1.45; text-align: center; }
body.sroz-modal-open { overflow: hidden; }
.sroz-overlay {
  position: fixed;
  z-index: 2147483100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(20 18 16 / 76%);
  color: #27221e;
  font: 15px/1.5 Arial, sans-serif;
  text-align: left;
}
.sroz-overlay *, .sroz-overlay *::before, .sroz-overlay *::after { box-sizing: border-box; }
.sroz-panel {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 24px;
  overflow-y: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 70px rgb(0 0 0 / 25%);
}
.sroz-title { margin: 0 48px 18px 0; padding: 0; border: 0; color: #27221e; font: 600 19px/1.35 Arial, sans-serif; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.sroz-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd7ce;
  border-radius: 50%;
  background: #fff;
  color: #27221e;
  font: 28px/1 Arial, sans-serif;
  cursor: pointer;
}
.sroz-close:hover { background: #f2efeb; color: #000; }
.sroz-panel .sroz-image-area { min-height: 140px; }
.sroz-panel .sroz-large-image { max-height: calc(100vh - 245px); max-height: calc(100dvh - 245px); min-height: 0; touch-action: pinch-zoom; }
.sroz-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sroz-selection { color: #68635d; font-size: 13px; }
.sroz-selection--active { color: #28543d; font-weight: 600; }
.sroz-selection--active::before { content: '\2713'; display: inline-block; margin-right: 6px; }
.sroz-select-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 19px;
  border: 1px solid #27221e;
  border-radius: 5px;
  background: #27221e;
  color: #fff;
  font: 600 14px/1.4 Arial, sans-serif;
  text-transform: none;
  cursor: pointer;
}
.sroz-select-button:hover { border-color: #51473d; background: #51473d; color: #fff; }
.sroz-select-button:disabled { opacity: .5; cursor: not-allowed; }
.sroz-help { margin: 12px 0 0; color: #77716a; font-size: 12px; line-height: 1.45; }
@media (max-width: 575px) {
  .sroz-overlay { padding: 10px; }
  .sroz-panel { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 18px; border-radius: 10px; }
  .sroz-title { margin-right: 38px; font-size: 16px; }
  .sroz-close { top: 9px; right: 9px; width: 38px; height: 38px; }
  .sroz-panel .sroz-large-image { max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
  .sroz-controls { margin-top: 14px; gap: 10px; }
  .sroz-select-button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sroz-overlay *, .sroz-hover { scroll-behavior: auto; transition: none; animation: none; }
}