/**
 * Bumarket Room Visualizer — front end.
 *
 * RTL-first: the markup is Hebrew, so logical properties (inline-start/end) are
 * used throughout rather than left/right. The one exception is the compare
 * slider, which is geometrically anchored and must not flip.
 *
 * Everything is scoped under .pv-root so the plugin cannot leak into the theme,
 * and the theme cannot easily leak in.
 */

.pv-root {
  --pv-bg: #ffffff;
  --pv-surface: #f7f7f6;
  --pv-surface-2: #efeeec;
  --pv-border: #e0dfdc;
  --pv-text: #16150f;
  --pv-text-muted: #6b6a63;
  --pv-accent: #0f766e;
  --pv-accent-dark: #115e59;
  --pv-accent-soft: rgba(15, 118, 110, 0.1);
  --pv-danger: #b91c1c;
  --pv-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --pv-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  --pv-radius: 10px;
  --pv-radius-sm: 6px;
  --pv-panel-width: 360px;
  --pv-height: 720px;
  --pv-stage-bg: #e8e7e4;
  --pv-topbar-height: 60px;
  --pv-bottombar-height: 74px;

  direction: rtl;
  position: relative;
  box-sizing: border-box;
  min-height: 320px;
  color: var(--pv-text);
  background: var(--pv-bg);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.pv-root *,
.pv-root *::before,
.pv-root *::after {
  box-sizing: border-box;
}

.pv-root img {
  max-width: 100%;
  display: block;
}

/* -------------------------------------------------------------------------
 * Theme isolation
 *
 * Themes style bare elements (.entry-content a, .woocommerce button, h1-h6),
 * and those rules reach inside .pv-root. The component rules below cannot
 * defend against that on their own: when a theme sets a property we never
 * declare, it wins by default, whatever the specificity.
 *
 * So the inherited surface is neutralised once, here, on the elements the UI
 * is built from. Each selector is an element scoped to .pv-root, which
 * outranks a theme's typical single-class rule without !important — leaving
 * media queries, :hover and .is-* state classes free to win normally.
 *
 * These are defaults, not overrides: they come before the component rules, so
 * anything a component sets still applies.
 * ---------------------------------------------------------------------- */

/* Buttons: strip the UA and theme chrome back to a neutral box. */
.pv-root button,
.pv-root input[type='button'],
.pv-root input[type='submit'] {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-shadow: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Links: themes set colour, underline and hover on bare anchors. */
.pv-root a {
  color: inherit;
  text-decoration: none;
  text-shadow: none;
  background: none;
  box-shadow: none;
}

.pv-root a:hover,
.pv-root a:focus {
  color: inherit;
  text-decoration: none;
  background: none;
}

/* Headings: theme font sizes and margins break the panel rhythm. */
.pv-root h1,
.pv-root h2,
.pv-root h3,
.pv-root h4,
.pv-root h5,
.pv-root h6 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  font-size: inherit;
  line-height: 1.25;
  letter-spacing: inherit;
  text-transform: none;
  border: 0;
}

/* Icons are inline SVG and take their stroke from currentColor. */
.pv-root svg {
  max-width: none;
  vertical-align: middle;
  pointer-events: none;
}

/* Form controls used by the panel and the settings sheet. */
.pv-root input,
.pv-root select,
.pv-root textarea,
.pv-root label {
  margin: 0;
  color: inherit;
  font: inherit;
  text-transform: none;
  box-shadow: none;
}

/* Text flow: themes add margins and list bullets that break the layout. */
.pv-root p,
.pv-root ul,
.pv-root ol,
.pv-root li,
.pv-root figure {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}

/* -------------------------------------------------------------------------
 * Boot state
 * ---------------------------------------------------------------------- */

.pv-root .pv-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  color: var(--pv-text-muted);
}

.pv-root .pv-boot__spinner,
.pv-root .pv-progress__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--pv-border);
  border-top-color: var(--pv-accent);
  border-radius: 50%;
  animation: pv-spin 0.8s linear infinite;
}

@keyframes pv-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-root .pv-boot__spinner,
  .pv-root .pv-progress__spinner {
    animation-duration: 2s;
  }
}

.pv-root .pv-noscript,
.pv-root .pv-error {
  padding: 32px;
  text-align: center;
  color: var(--pv-danger);
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.pv-root .pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface-2);
  color: var(--pv-text);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.pv-root .pv-btn:hover { background: var(--pv-border); }
.pv-root .pv-btn:active { transform: translateY(1px); }

.pv-root .pv-btn:focus-visible,
.pv-root .pv-icon-btn:focus-visible,
.pv-root .pv-tab:focus-visible,
.pv-root .pv-product__swatch:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: 2px;
}

.pv-root .pv-btn--primary {
  background: var(--pv-accent);
  color: #ffffff;
}

.pv-root .pv-btn--primary:hover { background: var(--pv-accent-dark); }

.pv-root .pv-btn--ghost {
  background: transparent;
  border-color: var(--pv-border);
}

.pv-root .pv-btn--ghost:hover { background: var(--pv-surface); }

.pv-root .pv-btn--sm {
  padding: 6px 11px;
  font-size: 12.5px;
}

.pv-root .pv-btn[disabled],
.pv-root .pv-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.pv-root .pv-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--pv-text);
  text-decoration: underline;
  cursor: pointer;
}

.pv-root .pv-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--pv-radius-sm);
  background: transparent;
  color: var(--pv-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}

.pv-root .pv-icon-btn:hover { background: var(--pv-surface); }

.pv-root .pv-icon-btn.is-active {
  background: var(--pv-accent-soft);
  color: var(--pv-accent);
}

/* -------------------------------------------------------------------------
 * Upload screen
 * ---------------------------------------------------------------------- */

.pv-root .pv-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  padding: 36px;
  align-items: start;
}

.pv-root .pv-upload__title {
  margin: 0 0 22px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.pv-root .pv-upload__title-accent {
  color: #a1662f;
  font-style: normal;
}

.pv-root .pv-upload__title--muted { color: var(--pv-text-muted); }

.pv-root .pv-drop__wrap {
  background: var(--pv-surface);
  border-radius: 16px;
  padding: 22px;
}

.pv-root .pv-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 2px dashed #c9c7c2;
  border-radius: 12px;
  background: #ffffff;
  color: var(--pv-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pv-root .pv-drop:hover,
.pv-root .pv-drop.is-dragover {
  border-color: var(--pv-accent);
  background: var(--pv-accent-soft);
}

.pv-root .pv-drop__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}

.pv-root .pv-drop__title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.pv-root .pv-drop__hint {
  margin: 0;
  font-size: 14px;
  color: var(--pv-text-muted);
}

.pv-root .pv-drop__actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.pv-root .pv-handoff {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--pv-border);
  text-align: center;
}

.pv-root .pv-handoff__text {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--pv-text-muted);
}

.pv-root .pv-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.pv-root .pv-room-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.pv-root .pv-room-card__image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--pv-surface-2);
  aspect-ratio: 4 / 3;
}

.pv-room-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}

.pv-room-card:hover .pv-room-card__image img { transform: scale(1.05); }

.pv-root .pv-room-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pv-text-muted);
}

/* -------------------------------------------------------------------------
 * Editor shell
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Full-screen modal
 *
 * The editor escapes the page entirely rather than sitting in the theme's
 * content column. A visualiser squeezed into a 700px template column is
 * unusable, and every theme sizes that column differently, so the only reliable
 * way to control the layout is to leave the document flow.
 * ---------------------------------------------------------------------- */

/* The modal carries .pv-root itself (see openModal), so this is written as a
   compound selector rather than a descendant one — .pv-root .pv-modal would
   never match. */
.pv-root.pv-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  background: var(--pv-bg);
  /* Dynamic viewport units so mobile browser chrome does not clip the bottom. */
  height: 100vh;
  height: 100dvh;
  animation: pv-modal-in 0.22s ease-out;
}

@keyframes pv-modal-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-root.pv-modal { animation: none; }
}

/* The page behind must not scroll while the modal is open. */
body.pv-modal-open {
  overflow: hidden !important;
}

.pv-root .pv-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pv-panel-width);
  width: 100%;
  height: 100%;
  background: var(--pv-stage-bg);
  overflow: hidden;
}

/* The stage fills its column; the toolbars float above it rather than taking
   their own rows, so the photo gets the whole area. */
.pv-root .pv-stage-col {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--pv-stage-bg);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Product panel
 * ---------------------------------------------------------------------- */

/* A solid column beside the stage, deliberately not an overlay: a drawer over
   the photo would hide the very surface the customer is choosing a tile for. */
/* A solid column beside the stage, deliberately not an overlay: a drawer over
   the photo would hide the very surface the customer is choosing a tile for. */
.pv-root .pv-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  /* Padding must not push the column past its track. */
  box-sizing: border-box;
  background: var(--pv-bg);
  border-inline-start: 1px solid var(--pv-border);
}

.pv-root .pv-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 14px 14px 10px;
}

.pv-root .pv-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm);
  background: #ffffff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.pv-root .pv-tab.is-active {
  background: var(--pv-surface-2);
  border-color: #c9c7c2;
}

.pv-root .pv-tab__check {
  display: none;
  color: var(--pv-accent);
}

.pv-tab.is-active .pv-tab__check { display: inline-flex; }

.pv-root .pv-panel__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 12px;
}

.pv-root .pv-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--pv-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pv-text-muted);
}

.pv-root .pv-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 9px 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--pv-text);
}

.pv-root .pv-search__input:focus { outline: none; }

.pv-root .pv-view-toggle {
  display: inline-flex;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm);
  overflow: hidden;
}

.pv-root .pv-view-btn {
  padding: 8px 10px;
  border: 0;
  background: #ffffff;
  color: var(--pv-text-muted);
  cursor: pointer;
}

.pv-root .pv-view-btn.is-active {
  background: var(--pv-text);
  color: #ffffff;
}

.pv-root .pv-panel__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
}

.pv-root .pv-select {
  flex: 1 1 130px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm);
  background: #ffffff;
  font: inherit;
  font-size: 13px;
}

.pv-root .pv-panel__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pv-root .pv-panel__list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-content: start;
}

.pv-root .pv-product {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pv-root .pv-product:hover {
  border-color: #c1bfba;
  box-shadow: var(--pv-shadow);
}

.pv-root .pv-product.is-selected {
  border-color: var(--pv-accent);
  box-shadow: 0 0 0 1px var(--pv-accent);
}

.pv-panel__list.is-grid .pv-product {
  flex-direction: column;
  gap: 8px;
}

.pv-root .pv-product__swatch {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: var(--pv-radius-sm);
  overflow: hidden;
  background: var(--pv-surface-2);
  cursor: pointer;
}

.pv-panel__list.is-grid .pv-product__swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.pv-product__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pv-root .pv-product__check {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: transparent;
  transition: color 0.15s, background 0.15s;
  /* Unselected, the badge is decorative and must not steal the swatch's click;
     selected, it becomes the control that removes the product. */
  pointer-events: none;
  cursor: pointer;
}

.pv-product.is-selected .pv-product__check {
  background: var(--pv-accent);
  color: #ffffff;
  pointer-events: auto;
}

.pv-product.is-selected .pv-product__check:hover {
  background: var(--pv-danger);
}

/* Turn the tick into a cross on hover, so it reads as "remove". */
.pv-product.is-selected .pv-product__check:hover svg {
  transform: rotate(45deg);
}

.pv-product__check svg {
  transition: transform 0.15s;
}

.pv-root .pv-product__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.pv-root .pv-product__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.pv-root .pv-product__name-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-root .pv-product__detail {
  margin: 0;
  font-size: 12.5px;
  color: var(--pv-text-muted);
}

.pv-root .pv-product__price {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.pv-product__price del { opacity: 0.55; font-weight: 400; }

/* Variation pickers. The panel column is narrow, so the label and the control
   share a row and the control takes the slack. */
.pv-root .pv-product__variations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.pv-root .pv-product__variation-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pv-text-muted);
}

.pv-root .pv-product__variation-label {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-root .pv-product__variation {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--pv-text);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: 6px;
}

.pv-root .pv-product__variation:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: 1px;
}

.pv-root .pv-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pv-root .pv-panel__status {
  padding: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--pv-text-muted);
}

.pv-root .pv-panel__sentinel {
  height: 1px;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Toolbars
 * ---------------------------------------------------------------------- */

/* Floats over the photo. A translucent card rather than a full-width bar, so
   the room is never covered edge to edge. */
.pv-root .pv-topbar {
  position: absolute;
  inset-block-start: 14px;
  inset-inline: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: var(--pv-shadow);
  pointer-events: auto;
}

.pv-root .pv-topbar__center {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.pv-root .pv-topbar__start,
.pv-root .pv-topbar__end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv-root .pv-menu { position: relative; }

.pv-root .pv-menu__list {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 30;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: #ffffff;
  box-shadow: var(--pv-shadow-lg);
}

.pv-root .pv-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--pv-radius-sm);
  background: none;
  font: inherit;
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
}

.pv-root .pv-menu__item:hover { background: var(--pv-surface); }

/* Also floats, and is centred rather than stretched: it only needs to be as
   wide as the selected product's details. */
.pv-root .pv-bottombar {
  position: absolute;
  inset-block-end: 16px;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: fit-content;
  max-width: calc(100% - 28px);
  margin-inline: auto;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--pv-shadow-lg);
}

.pv-root .pv-bottombar[hidden] { display: none; }

.pv-root .pv-bottombar__product {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.pv-bottombar__swatch img {
  width: 48px;
  height: 48px;
  border-radius: var(--pv-radius-sm);
  object-fit: cover;
}

.pv-root .pv-bottombar__title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pv-root .pv-bottombar__brand {
  font-size: 12px;
  color: var(--pv-text-muted);
}

.pv-root .pv-bottombar__name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-root .pv-bottombar__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pv-root .pv-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 0;
  border-radius: var(--pv-radius-sm);
  background: none;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  position: relative;
}

.pv-root .pv-tool:hover { background: var(--pv-surface); }

.pv-root .pv-grout__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Stage
 * ---------------------------------------------------------------------- */

/* Fills the whole column: the toolbars float on top rather than stealing rows,
   so the room photo gets every available pixel. */
.pv-root .pv-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pv-stage-bg);
  touch-action: none;
}

/* The photo scales up to fill the stage rather than sitting at its natural
   size. A room shown small in a sea of grey wastes the screen the modal exists
   to claim; the aspect ratio set in JS keeps it undistorted. */
.pv-root .pv-stage__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* Fit inside the stage while preserving the photo's own proportions. */
  object-fit: contain;
  margin: auto;
  transform-origin: center;
  will-change: transform;
}

/* The render canvas is the element that defines the visible size, so it carries
   the fitting rule and the viewport wraps tightly around it. */
.pv-root .pv-canvas--render {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The `hidden` attribute only sets `display: none` at user-agent priority, so
   any author rule setting `display` silently defeats it. This caught the
   before/after image: it is created hidden, but `display: block` here made it
   visible and — being z-index 3 — it covered the rendered floor completely.
   The rule must come first so later `display` declarations do not resurrect it. */
.pv-root [hidden] {
  display: none !important;
}

.pv-root .pv-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.pv-root .pv-canvas--objects,
.pv-root .pv-canvas--overlay,
.pv-root .pv-canvas--before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pv-root .pv-canvas--objects { pointer-events: none; }
.pv-root .pv-canvas--overlay { pointer-events: none; }

/* `contain`, matching .pv-canvas--render. With `fill` the untouched photo was
   stretched to the layer box while the rendered result letterboxed itself
   inside the same box, so the two halves of the compare slider disagreed
   wherever the box was not exactly the photo's aspect ratio. */
.pv-root .pv-canvas--before { object-fit: contain; z-index: 3; }

.pv-root .pv-stage[data-mode='perspective'] { cursor: grab; }
.pv-root .pv-stage[data-mode='refine'] { cursor: crosshair; }

/* -------------------------------------------------------------------------
 * Surface hotspots
 * ---------------------------------------------------------------------- */

.pv-root .pv-hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* The layer is a passthrough; only the markers themselves are clickable. */
  pointer-events: none;
}

.pv-root .pv-hotspots[hidden] { display: none; }

.pv-root .pv-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 21, 15, 0.72);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: background 0.15s, transform 0.15s;
}

.pv-root .pv-hotspot:hover {
  background: rgba(22, 21, 15, 0.9);
  transform: translate(-50%, -50%) scale(1.04);
}

.pv-root .pv-hotspot.is-active {
  background: var(--pv-accent);
}

.pv-root .pv-hotspot__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pv-root .pv-hotspot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Mask correction bar
 * ---------------------------------------------------------------------- */

.pv-root .pv-refinebar {
  position: absolute;
  inset-block-end: 92px;
  inset-inline: 0;
  z-index: 55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
  padding: 12px 18px;
  width: fit-content;
  max-width: 92%;
  border-radius: 999px;
  background: rgba(22, 21, 15, 0.94);
  color: #ffffff;
  box-shadow: var(--pv-shadow-lg);
}

.pv-root .pv-refinebar__hint {
  font-size: 13px;
}

.pv-root .pv-refinebar__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv-refinebar .pv-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  min-width: 40px;
}

.pv-refinebar .pv-btn.is-active {
  background: rgba(255, 255, 255, 0.34);
}

.pv-refinebar .pv-btn--primary {
  background: var(--pv-accent);
}

/* Compare slider: geometrically anchored, so it deliberately uses left/right
   rather than logical properties — the handle must track the clip edge. */
.pv-root .pv-compare {
  position: absolute;
  inset-block: 0;
  z-index: 4;
  width: 0;
  pointer-events: none;
}

.pv-root .pv-compare[hidden] { display: none; }

.pv-root .pv-compare__line {
  position: absolute;
  inset-block: 0;
  left: -1px;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

.pv-root .pv-compare__grip {
  position: absolute;
  top: 50%;
  left: -22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pv-text);
  box-shadow: var(--pv-shadow);
  transform: translateY(-50%);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

/* -------------------------------------------------------------------------
 * Progress, toasts, dialogs
 * ---------------------------------------------------------------------- */

.pv-root .pv-progress {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(2px);
}

.pv-root .pv-progress[hidden] { display: none; }

.pv-root .pv-progress__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(340px, 82vw);
  padding: 26px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--pv-shadow-lg);
  text-align: center;
}

.pv-root .pv-progress__label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.pv-root .pv-progress__detail {
  margin: 0;
  font-size: 13px;
  color: var(--pv-text-muted);
  font-variant-numeric: tabular-nums;
}

.pv-root .pv-progress__track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--pv-surface-2);
  overflow: hidden;
}

.pv-root .pv-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pv-accent);
  transition: width 0.2s;
}

.pv-root .pv-toasts {
  position: absolute;
  inset-block-end: 90px;
  inset-inline: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.pv-root .pv-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(460px, 90%);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(22, 21, 15, 0.94);
  color: #ffffff;
  font-size: 14px;
  box-shadow: var(--pv-shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: auto;
}

.pv-root .pv-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pv-root .pv-toast--error { background: rgba(153, 27, 27, 0.96); }

.pv-root .pv-toast__action {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.pv-root .pv-confirm,
.pv-root .pv-share {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 21, 15, 0.45);
}

.pv-root .pv-confirm__card,
.pv-root .pv-share__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(400px, 88vw);
  padding: 26px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--pv-shadow-lg);
}

.pv-root .pv-confirm__text { margin: 0; font-size: 15px; line-height: 1.5; }

.pv-root .pv-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.pv-root .pv-share__title { margin: 0; font-size: 17px; }

.pv-root .pv-share__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

/* -------------------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------------------- */

.pv-root .pv-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.16);
  transition: height 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}

.pv-root .pv-sheet.is-dragging { transition: none; }

.pv-root .pv-sheet__handle {
  flex: 0 0 auto;
  height: 26px;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  position: relative;
}

.pv-root .pv-sheet__handle::before {
  content: '';
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #cfcdc8;
  transform: translateX(50%);
}

.pv-root .pv-sheet__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.pv-sheet__body .pv-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  border: 0;
}

/* -------------------------------------------------------------------------
 * Mobile
 *
 * The stage still fills the screen and the panel becomes a bottom sheet, but
 * the sheet is deliberately shallow by default: the customer is choosing a tile
 * for a surface they need to keep looking at, so the room must stay visible
 * while they browse.
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pv-root { --pv-height: 100vh; --pv-height: 100dvh; }

  .pv-root .pv-upload {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 20px;
  }

  /* One column: the stage fills the modal and the sheet floats over its lower
     edge, rather than the two sharing the width. */
  .pv-root .pv-editor {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .pv-editor--mobile .pv-stage-col {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* The sheet covers the lower part of the screen, so the stage centres the
     photo in the area that remains visible. Without this the room is pushed
     into a thin band with dead space above it, because a wide photo fitted to a
     tall viewport leaves the width unused.
     The variable is updated as the sheet is dragged, so the room re-centres
     rather than staying put behind it. */
  .pv-editor--mobile .pv-stage {
    inset-block-end: var(--pv-sheet-height, 42%);
    transition: inset-block-end 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* A wide room photo cannot fill a portrait area, so the leftover space is
       put above the image rather than split evenly: the room then sits against
       the sheet, where the customer's attention and thumb already are, instead
       of floating in the middle with grey on both sides. */
    align-items: flex-end;
    padding-block-end: 8px;
  }

  .pv-editor--mobile.is-sheet-dragging .pv-stage {
    transition: none;
  }

  .pv-root .pv-topbar {
    inset-block-start: 10px;
    inset-inline: 10px;
    padding: 4px 6px;
    gap: 2px;
    /* Must stay one row: wrapping made it 80px tall and ate into the room. */
    flex-wrap: nowrap;
  }

  .pv-root .pv-topbar__center {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .pv-root .pv-photo-btn {
    padding: 8px 10px;
    flex: 0 0 auto;
  }

  /* On the narrowest screens the camera label goes too; the icon and its
     aria-label carry the meaning. */
  @media (max-width: 420px) {
    .pv-photo-btn span { display: none; }
  }

  /* Labels are dropped on narrow screens; the accessible name stays on each
     button's aria-label, so nothing is lost for assistive tech. */
  .pv-root .pv-icon-btn__label,
  .pv-exit span,
  .pv-tool span {
    display: none;
  }

  .pv-root .pv-icon-btn { padding: 8px; }

  .pv-photo-btn span { display: inline; }

  .pv-root .pv-topbar__center { gap: 0; }

  /* Sits directly above the sheet's collapsed height. */
  .pv-root .pv-bottombar {
    inset-block-end: calc(12% + 12px);
    padding: 6px 8px 6px 12px;
    gap: 10px;
    max-width: calc(100% - 20px);
  }

  .pv-bottombar__swatch img { width: 40px; height: 40px; }
  .pv-root .pv-bottombar__name { max-width: 34vw; }

  .pv-root .pv-toasts { inset-block-end: calc(12% + 74px); }

  /* Hotspot labels shrink so several fit across a phone screen. */
  .pv-root .pv-hotspot {
    font-size: 12px;
    padding: 5px 10px 5px 7px;
  }

  .pv-root .pv-panel__list.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  }

  .pv-root .pv-rooms {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  /* The refine toolbar clears the sheet. */
  .pv-root .pv-refinebar {
    inset-block-end: calc(12% + 78px);
    padding: 10px 14px;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .pv-root .pv-product { padding: 8px; }
  .pv-root .pv-product__swatch { width: 72px; height: 72px; }
  .pv-root .pv-upload__title { font-size: 24px; }

  /* Two products per row keeps swatches large enough to judge a tile by. */
  .pv-root .pv-panel__list.is-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Landscape phones are short: the sheet would swallow the room, so the panel
   returns to a side column. */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 640px) {
  .pv-root .pv-editor {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .pv-root .pv-sheet {
    position: static;
    height: 100% !important;
    border-radius: 0;
    box-shadow: none;
    border-inline-start: 1px solid var(--pv-border);
  }

  .pv-root .pv-sheet__handle { display: none; }

  /* The sheet is a side column here, not an overlay, so the stage keeps its
     full height — the reservation made for portrait would waste it. */
  .pv-editor--mobile .pv-stage {
    inset-block-end: 0;
  }

  .pv-root .pv-bottombar { inset-block-end: 14px; }
  .pv-root .pv-toasts { inset-block-end: 76px; }
  .pv-root .pv-refinebar { inset-block-end: 78px; }
}

/* -------------------------------------------------------------------------
 * Product page call to action
 * ---------------------------------------------------------------------- */

.pv-root .pv-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: 8px;
}