:root {
  color-scheme: dark;
  --gold: #d6a23c;
  --gold-soft: #f2cf8a;
  --text: #f7f3ed;
  --muted: rgba(247, 243, 237, 0.62);
  --line: rgba(255, 255, 255, 0.14);
  --panel: rgba(11, 11, 10, 0.95);
  --control: rgba(255, 255, 255, 0.055);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 8%, rgba(211, 151, 74, 0.18), transparent 28rem),
    linear-gradient(135deg, #070706, #171511 42%, #050505);
}

button,
select,
input {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(45rem, 1fr) minmax(28rem, 35rem);
  min-height: 100vh;
}

.showcase {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
}

.brand {
  display: none;
}

.brand p {
  margin: 0 0 0.4rem;
  color: var(--gold-soft);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brand h1 {
  margin: 0 0 0.9rem;
  max-width: 22rem;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}

.badge {
  display: inline-flex;
  border: 1px solid rgba(214, 162, 60, 0.45);
  border-radius: 0.45rem;
  padding: 0.42rem 0.7rem;
  background: rgba(10, 10, 9, 0.62);
  color: #f7d899;
  font-size: 0.85rem;
}

.bathroom-scene {
  position: absolute;
  inset: 0;
  background: #151310;
}

.wall {
  position: absolute;
  inset: 0 13% 19% 0;
  background:
    linear-gradient(90deg, transparent 32.9%, rgba(0, 0, 0, 0.35) 33%, transparent 33.3%),
    linear-gradient(90deg, transparent 65.9%, rgba(0, 0, 0, 0.22) 66%, transparent 66.3%),
    linear-gradient(0deg, transparent 32.9%, rgba(0, 0, 0, 0.25) 33%, transparent 33.3%),
    linear-gradient(0deg, transparent 65.9%, rgba(0, 0, 0, 0.2) 66%, transparent 66.3%),
    radial-gradient(circle at 48% 42%, rgba(255, 199, 128, 0.21), transparent 28rem),
    linear-gradient(90deg, #17130f, #4a4034 42%, #2c2823);
}

.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 35%, rgba(0, 0, 0, .28) 0 1px, transparent 1.5px);
  background-size: 3.2rem 3.2rem, 4.7rem 4.7rem;
}

.ceiling {
  position: absolute;
  top: 0;
  left: 32%;
  right: 10%;
  height: 5.5rem;
  clip-path: polygon(0 0, 100% 0, 83% 100%, 24% 66%);
  background: linear-gradient(100deg, #8b6a4d, #c5a17c 30%, #766150);
}

.side-wall {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 18%;
  width: 14%;
  background: linear-gradient(90deg, rgba(73, 68, 59, 0.55), #9d7853);
}

.counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10.5%;
  height: 8.5%;
  background: linear-gradient(180deg, #d6c9b8, #746c63);
  box-shadow: 0 -1.5rem 2rem rgba(0, 0, 0, 0.35);
}

.basin {
  position: absolute;
  left: 50%;
  bottom: 13.2%;
  width: min(23rem, 36vw);
  height: 4.4rem;
  transform: translateX(-50%);
  border-radius: 50% / 36%;
  background: linear-gradient(180deg, #fff4e0, #c7b8a7 52%, #6d625b 55%, #1f1d1b);
  box-shadow: 0 1.8rem 1.9rem rgba(0, 0, 0, 0.45);
}

.tap {
  position: absolute;
  left: 50%;
  bottom: 21.3%;
  width: 7.5rem;
  height: 2.8rem;
  transform: translateX(-50%);
}

.tap::before,
.tap::after {
  content: "";
  position: absolute;
  bottom: 0.1rem;
  background: linear-gradient(90deg, #201712, #bc8145, #392317);
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .45);
}

.tap::before {
  left: 1.2rem;
  width: 4.6rem;
  height: 1rem;
  border-radius: 1rem;
}

.tap::after {
  left: 4rem;
  width: 1.1rem;
  height: 2.2rem;
  border-radius: 1rem 1rem .4rem .4rem;
}

.plant {
  position: absolute;
  left: 17%;
  bottom: 15.5%;
  width: 9rem;
  height: 13rem;
  filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .45));
}

.plant::after {
  content: "";
  position: absolute;
  left: 2.8rem;
  bottom: 0;
  width: 4rem;
  height: 3.6rem;
  border-radius: 45% 45% 38% 38%;
  background: linear-gradient(135deg, #11120e, #403525);
}

.plant i {
  position: absolute;
  bottom: 3.2rem;
  left: 4.5rem;
  width: .13rem;
  background: #56441e;
  transform-origin: bottom;
}

.plant i::after {
  content: "";
  position: absolute;
  top: .8rem;
  left: -.4rem;
  width: 1.2rem;
  height: 2.1rem;
  border-radius: 90% 20%;
  background: linear-gradient(120deg, #8d842f, #2c361c);
}

.plant i:nth-child(1) { transform: rotate(-40deg); height: 7rem; }
.plant i:nth-child(2) { transform: rotate(-22deg); height: 9rem; }
.plant i:nth-child(3) { transform: rotate(-5deg); height: 8rem; }
.plant i:nth-child(4) { transform: rotate(18deg); height: 9.6rem; }
.plant i:nth-child(5) { transform: rotate(36deg); height: 7.7rem; }

.preview-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 8%;
  width: min(34rem, 47vw);
  height: min(42rem, 69vh);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}

.luxury-preview {
  pointer-events: auto;
}

.luxury-mirror {
  --mirror-w: 18rem;
  --mirror-h: 32rem;
  --glow-color: 255, 211, 122;
  --glow-alpha: .74;
  position: relative;
  width: var(--mirror-w);
  height: var(--mirror-h);
  padding: var(--frame-padding, .12rem);
  border: var(--frame-width, 1px) solid var(--frame-color, rgba(255, 242, 218, .28));
  border-radius: 1rem;
  background: var(--frame-bg, linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,.03)));
  box-shadow:
    0 0 1.3rem rgba(var(--glow-color), .72),
    0 0 5.5rem rgba(var(--glow-color), var(--glow-alpha)),
    0 0 9rem rgba(var(--glow-color), .22);
  transition: width .22s ease, height .22s ease, border-radius .22s ease, clip-path .22s ease, box-shadow .22s ease;
}

.mirror-glow {
  position: absolute;
  inset: -1.2rem;
  z-index: -1;
  border-radius: inherit;
  background: rgba(var(--glow-color), .22);
  filter: blur(1.2rem);
  opacity: var(--glow-alpha);
}

.mirror-glass {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 240, 212, .2);
  border-radius: inherit;
  background:
    linear-gradient(105deg, rgba(255,255,255,.07) 0 31%, transparent 31.5%),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.16), transparent 1.6rem),
    linear-gradient(90deg, #201915, #463a2f 42%, #151310 42.5%, #090908 70%, #30271f);
  box-shadow: inset 0 0 3rem rgba(0,0,0,.72);
}

.side-glow {
  position: absolute;
  display: none;
  pointer-events: none;
}

.side-glow.visible {
  display: block;
}

.side-glow.back {
  z-index: -1;
  background: rgba(var(--glow-color), .95);
  filter: blur(.85rem);
  box-shadow:
    0 0 1.4rem rgba(var(--glow-color), .95),
    0 0 3.4rem rgba(var(--glow-color), .86),
    0 0 5.2rem rgba(var(--glow-color), .42);
}

.side-glow.front {
  z-index: 6;
  background: rgba(var(--glow-color), .82);
  box-shadow: 0 0 .8rem rgba(var(--glow-color), .65);
}

.side-glow.top,
.side-glow.bottom {
  left: 1.1rem;
  right: 1.1rem;
  height: .34rem;
}

.side-glow.left,
.side-glow.right {
  top: 1.1rem;
  bottom: 1.1rem;
  width: .34rem;
}

.side-glow.front.top,
.side-glow.front.bottom {
  height: .68rem;
}

.side-glow.front.left,
.side-glow.front.right {
  width: .68rem;
}

.side-glow.back.top { top: -.85rem; }
.side-glow.back.bottom { bottom: -.85rem; }
.side-glow.back.left { left: -.85rem; }
.side-glow.back.right { right: -.85rem; }

.side-glow.front.top,
.side-glow.front.bottom {
  left: 1.4rem;
  right: 1.4rem;
}

.side-glow.front.left,
.side-glow.front.right {
  top: 1.4rem;
  bottom: 1.4rem;
}

.side-glow.front.top { top: 1.4rem; }
.side-glow.front.bottom { bottom: 1.4rem; }
.side-glow.front.left { left: 1.4rem; }
.side-glow.front.right { right: 1.4rem; }

.side-glow.front.top.visible + .side-glow.front.bottom.visible,
.side-glow.front.top.visible,
.side-glow.front.bottom.visible {
  left: 1.4rem;
  right: 1.4rem;
}

.side-glow.front.left.visible,
.side-glow.front.right.visible {
  top: 1.4rem;
  bottom: 1.4rem;
}

.side-glow.back.top,
.side-glow.back.bottom {
  height: .9rem;
}

.side-glow.back.left,
.side-glow.back.right {
  width: .9rem;
}

.luxury-mirror.side-back-active .mirror-glow {
  display: none !important;
}

.luxury-mirror.side-front-active .mirror-glass::before {
  content: "";
  position: absolute;
  inset: 1.4rem;
  display: block !important;
  border-style: solid;
  border-color: rgba(var(--glow-color), .82);
  border-width:
    var(--front-top-width, 0)
    var(--front-right-width, 0)
    var(--front-bottom-width, 0)
    var(--front-left-width, 0);
  border-radius: inherit;
  filter: drop-shadow(0 0 1rem rgba(var(--glow-color), .68));
  pointer-events: none;
}

.luxury-mirror.side-back-active,
.luxury-mirror.side-front-active {
  box-shadow: 0 2rem 3rem rgba(0,0,0,.5);
}

.luxury-mirror.shape-quarterCircle .mirror-glass {
  background:
    linear-gradient(108deg, rgba(255,255,255,.08) 0 28%, transparent 28.5% 100%),
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.12), transparent 2.4rem),
    radial-gradient(circle at 80% 78%, rgba(0,0,0,.28), transparent 11rem),
    linear-gradient(125deg, #3d332b 0%, #241f1b 44%, #0d0c0b 100%);
}

.luxury-mirror.shape-quarterCircle .mirror-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 0 100%, transparent 0 66%, rgba(255,255,255,.12) 66.5%, transparent 68%);
  pointer-events: none;
}

.luxury-mirror.shape-rectangle {
  border-radius: .35rem;
}

.luxury-mirror.shape-rectangleR50 {
  border-radius: var(--rounded-radius, 2rem);
}

.luxury-mirror.shape-rectangleR50 .mirror-glass,
.luxury-mirror.shape-rectangleR50 .mirror-glass::before,
.luxury-mirror.shape-rectangleR50 .mirror-glass::after {
  border-radius: var(--inner-rounded-radius, calc(var(--rounded-radius, 2rem) - .34rem));
}

.luxury-mirror.shape-rectangleR50 .mirror-glass {
  clip-path: inset(0 round var(--inner-rounded-radius, calc(var(--rounded-radius, 2rem) - .34rem)));
}

.luxury-mirror.shape-oval {
  border-radius: 50% / 50%;
}

.luxury-mirror.shape-circle {
  --mirror-w: 24rem;
  --mirror-h: 24rem;
  border-radius: 50%;
}

.luxury-mirror.shape-quarterCircle {
  --mirror-w: 23rem;
  --mirror-h: 23rem;
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.luxury-mirror.quarter-upper-left {
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.luxury-mirror.quarter-upper-left .mirror-glass::after {
  background: radial-gradient(circle at 100% 100%, transparent 0 66%, rgba(255,255,255,.12) 66.5%, transparent 68%);
}

.luxury-mirror.quarter-lower-right {
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.luxury-mirror.quarter-lower-right .mirror-glass::after {
  background: radial-gradient(circle at 0 0, transparent 0 66%, rgba(255,255,255,.12) 66.5%, transparent 68%);
}

.luxury-mirror.quarter-lower-left {
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.luxury-mirror.quarter-lower-left .mirror-glass::after {
  background: radial-gradient(circle at 100% 0, transparent 0 66%, rgba(255,255,255,.12) 66.5%, transparent 68%);
}

.luxury-mirror.shape-semicircle {
  border-radius: 50% 50% .35rem .35rem / 100% 100% .35rem .35rem;
}

.luxury-mirror.shape-semicircle .mirror-glass,
.luxury-mirror.shape-semicircle .mirror-glass::before,
.luxury-mirror.shape-semicircle .mirror-glass::after {
  border-radius: calc(50% - .34rem) calc(50% - .34rem) .12rem .12rem / calc(100% - .34rem) calc(100% - .34rem) .12rem .12rem;
}

.luxury-mirror.shape-semicircle .mirror-glass {
  clip-path: inset(0 round calc(50% - .34rem) calc(50% - .34rem) .12rem .12rem / calc(100% - .34rem) calc(100% - .34rem) .12rem .12rem);
}

.luxury-mirror.semi-lower {
  border-radius: .35rem .35rem 50% 50% / .35rem .35rem 100% 100%;
}

.luxury-mirror.semi-lower .mirror-glass,
.luxury-mirror.semi-lower .mirror-glass::before,
.luxury-mirror.semi-lower .mirror-glass::after {
  border-radius: .12rem .12rem calc(50% - .34rem) calc(50% - .34rem) / .12rem .12rem calc(100% - .34rem) calc(100% - .34rem);
}

.luxury-mirror.semi-lower .mirror-glass {
  clip-path: inset(0 round .12rem .12rem calc(50% - .34rem) calc(50% - .34rem) / .12rem .12rem calc(100% - .34rem) calc(100% - .34rem));
}

.luxury-mirror.semi-left {
  border-radius: 100% .35rem .35rem 100% / 50% .35rem .35rem 50%;
}

.luxury-mirror.semi-left .mirror-glass,
.luxury-mirror.semi-left .mirror-glass::before,
.luxury-mirror.semi-left .mirror-glass::after {
  border-radius: calc(100% - .34rem) .12rem .12rem calc(100% - .34rem) / calc(50% - .34rem) .12rem .12rem calc(50% - .34rem);
}

.luxury-mirror.semi-left .mirror-glass {
  clip-path: inset(0 round calc(100% - .34rem) .12rem .12rem calc(100% - .34rem) / calc(50% - .34rem) .12rem .12rem calc(50% - .34rem));
}

.luxury-mirror.semi-right {
  border-radius: .35rem 100% 100% .35rem / .35rem 50% 50% .35rem;
}

.luxury-mirror.semi-right .mirror-glass,
.luxury-mirror.semi-right .mirror-glass::before,
.luxury-mirror.semi-right .mirror-glass::after {
  border-radius: .12rem calc(100% - .34rem) calc(100% - .34rem) .12rem / .12rem calc(50% - .34rem) calc(50% - .34rem) .12rem;
}

.luxury-mirror.semi-right .mirror-glass {
  clip-path: inset(0 round .12rem calc(100% - .34rem) calc(100% - .34rem) .12rem / .12rem calc(50% - .34rem) calc(50% - .34rem) .12rem);
}

.luxury-mirror.shape-arched {
  border-radius: var(--arch-radius, 50%) var(--arch-radius, 50%) .35rem .35rem / var(--arch-radius, 50%) var(--arch-radius, 50%) .35rem .35rem;
}

.luxury-mirror.shape-arched .mirror-glass,
.luxury-mirror.shape-arched .mirror-glass::before,
.luxury-mirror.shape-arched .mirror-glass::after {
  border-radius: var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem .12rem / var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem .12rem;
}

.luxury-mirror.shape-arched .mirror-glass {
  clip-path: inset(0 round var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem .12rem / var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem .12rem);
}

.luxury-mirror.arch-lower {
  border-radius: .35rem .35rem var(--arch-radius, 50%) var(--arch-radius, 50%) / .35rem .35rem var(--arch-radius, 50%) var(--arch-radius, 50%);
}

.luxury-mirror.arch-lower .mirror-glass,
.luxury-mirror.arch-lower .mirror-glass::before,
.luxury-mirror.arch-lower .mirror-glass::after {
  border-radius: .12rem .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) / .12rem .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%);
}

.luxury-mirror.arch-lower .mirror-glass {
  clip-path: inset(0 round .12rem .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) / .12rem .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%));
}

.luxury-mirror.arch-left {
  border-radius: var(--arch-radius, 50%) .35rem .35rem var(--arch-radius, 50%) / var(--arch-radius, 50%) .35rem .35rem var(--arch-radius, 50%);
}

.luxury-mirror.arch-left .mirror-glass,
.luxury-mirror.arch-left .mirror-glass::before,
.luxury-mirror.arch-left .mirror-glass::after {
  border-radius: var(--inner-arch-radius, 50%) .12rem .12rem var(--inner-arch-radius, 50%) / var(--inner-arch-radius, 50%) .12rem .12rem var(--inner-arch-radius, 50%);
}

.luxury-mirror.arch-left .mirror-glass {
  clip-path: inset(0 round var(--inner-arch-radius, 50%) .12rem .12rem var(--inner-arch-radius, 50%) / var(--inner-arch-radius, 50%) .12rem .12rem var(--inner-arch-radius, 50%));
}

.luxury-mirror.arch-right {
  border-radius: .35rem var(--arch-radius, 50%) var(--arch-radius, 50%) .35rem / .35rem var(--arch-radius, 50%) var(--arch-radius, 50%) .35rem;
}

.luxury-mirror.arch-right .mirror-glass,
.luxury-mirror.arch-right .mirror-glass::before,
.luxury-mirror.arch-right .mirror-glass::after {
  border-radius: .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem / .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem;
}

.luxury-mirror.arch-right .mirror-glass {
  clip-path: inset(0 round .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem / .12rem var(--inner-arch-radius, 50%) var(--inner-arch-radius, 50%) .12rem);
}

.luxury-mirror.shape-threeQuarter {
  --mirror-w: 24rem;
  --mirror-h: 24rem;
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.luxury-mirror.shape-quarterCircle,
.luxury-mirror.shape-threeQuarter {
  border: 0;
  padding: 0;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible;
}

.luxury-mirror.shape-quarterCircle .mirror-glow,
.luxury-mirror.shape-threeQuarter .mirror-glow {
  display: none;
}

.luxury-mirror.shape-quarterCircle .mirror-glass,
.luxury-mirror.shape-threeQuarter .mirror-glass {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  pointer-events: none;
}

.luxury-mirror.shape-quarterCircle .ceiling-light,
.luxury-mirror.shape-threeQuarter .ceiling-light {
  display: none;
}

.luxury-mirror.shape-quarterCircle .mirror-glass::before,
.luxury-mirror.shape-quarterCircle .mirror-glass::after,
.luxury-mirror.shape-threeQuarter .mirror-glass::before,
.luxury-mirror.shape-threeQuarter .mirror-glass::after {
  display: none !important;
  content: none !important;
}

.luxury-mirror.light-off {
  box-shadow: 0 2rem 3rem rgba(0,0,0,.5);
}

.luxury-mirror.light-off .mirror-glow {
  opacity: 0;
}

.luxury-mirror.front-only {
  box-shadow: 0 2rem 3rem rgba(0,0,0,.5);
}

.luxury-mirror.front-only .mirror-glow {
  opacity: 0;
}

.luxury-mirror.front-light .mirror-glass::before,
.luxury-mirror.edge-light .mirror-glass::before {
  content: "";
  position: absolute;
  inset: 1.4rem;
  border: .68rem solid rgba(var(--glow-color), .82);
  border-radius: inherit;
  filter: drop-shadow(0 0 1rem rgba(var(--glow-color), .68));
}

.luxury-mirror.side-front-active.front-light .mirror-glass::before {
  display: block !important;
  border-style: solid !important;
  border-color: rgba(var(--glow-color), .82) !important;
  border-width:
    var(--front-top-width, 0)
    var(--front-right-width, 0)
    var(--front-bottom-width, 0)
    var(--front-left-width, 0) !important;
}

.luxury-mirror.edge-light .mirror-glass::before {
  display: none;
}

.luxury-mirror.edge-light::after {
  content: "";
  position: absolute;
  inset: calc(var(--frame-padding, .12rem) * -1 - .08rem);
  border: .42rem solid rgba(var(--glow-color), .9);
  border-radius: inherit;
  pointer-events: none;
  filter: drop-shadow(0 0 .85rem rgba(var(--glow-color), .8));
  z-index: 4;
}

.luxury-mirror.shape-quarterCircle.edge-light::after,
.luxury-mirror.shape-threeQuarter.edge-light::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

.luxury-mirror.shape-quarterCircle .mirror-glass::before,
.luxury-mirror.shape-quarterCircle .mirror-glass::after,
.luxury-mirror.shape-threeQuarter .mirror-glass::before,
.luxury-mirror.shape-threeQuarter .mirror-glass::after {
  display: none !important;
  content: none !important;
}

.ceiling-light {
  position: absolute;
  right: 29%;
  top: 18%;
  width: 1.1rem;
  height: .45rem;
  border-radius: 50%;
  background: #fff9eb;
  box-shadow: 0 0 1rem #fff2ca;
}

.switch-dot {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: .58rem;
  height: .58rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 0 .75rem rgba(var(--glow-color), .85);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.switch-dot.visible {
  opacity: 1;
}

.cosmetic-dot {
  position: absolute;
  top: 44%;
  left: 24%;
  width: var(--cosmetic-size, calc(3.8rem * var(--addon-scale, 1)));
  height: var(--cosmetic-size, calc(3.8rem * var(--addon-scale, 1)));
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.78);
  box-shadow: 0 0 1rem rgba(var(--glow-color), .65);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.option-switch {
  position: static;
  display: grid;
  place-items: center;
  width: var(--button-cell-size, 1.6rem);
  height: var(--button-cell-size, 1.6rem);
  flex: 0 0 var(--button-cell-size, 1.6rem);
  border-radius: .12rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.option-switch::after {
  content: "";
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.86);
  background: #fff7df;
  box-shadow: 0 0 .55rem rgba(var(--glow-color), .75);
}

.switch-dot {
  border-color: rgba(183, 218, 255, .9);
  background: #8fc9ff;
  box-shadow: 0 0 .65rem rgba(103, 173, 255, .82);
}

.main-switch-copy::after {
  border-color: rgba(183, 218, 255, .9);
  background: #8fc9ff;
  box-shadow: 0 0 .65rem rgba(103, 173, 255, .82);
}

.demister-switch {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.demister-switch::after {
  border-color: rgba(255, 132, 132, .92);
  background: #ff5f5f;
  box-shadow: 0 0 .65rem rgba(255, 88, 88, .82);
}

.extra-switches {
  position: absolute;
  left: 50%;
  top: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.extra-switches.vertical {
  flex-direction: column;
}

.extra-switches.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
}

.extra-switches.rotated {
  flex-direction: column;
}

.option-switch.hidden {
  display: none;
}

.cosmetic-dot.right {
  left: auto;
  right: 24%;
}

.cosmetic-dot.visible,
.clock-chip.visible,
.anti-fog-zone.visible {
  opacity: 1;
}

.switch-dot.visible,
.cosmetic-dot.visible {
  pointer-events: auto;
  cursor: grab;
}

.dragging {
  cursor: grabbing !important;
}

.drag-measure {
  position: absolute;
  z-index: 12;
  transform: translate(-50%, calc(-100% - .55rem));
  padding: .2rem .38rem;
  border-radius: .3rem;
  background: rgba(15, 23, 42, .86);
  color: #fff;
  font-size: .56rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.drag-measure.visible {
  opacity: 1;
}

.switch-dot.manual-position,
.cosmetic-dot.manual-position {
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.clock-chip {
  position: static;
  display: grid;
  place-items: center;
  width: var(--clock-cell-size, 1.9rem);
  height: var(--clock-cell-size, 1.9rem);
  flex: 0 0 var(--clock-cell-size, 1.9rem);
  padding: 0;
  border-radius: .24rem;
  background: rgba(0,0,0,.58);
  color: rgba(255,255,255,.88);
  font-size: .58rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
}

.clock-chip.left {
  left: auto;
}

.clock-chip.right {
  left: auto;
}

.anti-fog-zone {
  display: none;
}

.luxury-mirror.has-demister .mirror-glass {
  box-shadow:
    inset 0 0 0 999rem rgba(255, 70, 70, .055),
    inset 0 0 4rem rgba(255, 70, 70, .12);
}

.luxury-mirror.shape-quarterCircle.has-demister .mirror-glass,
.luxury-mirror.shape-threeQuarter.has-demister .mirror-glass {
  box-shadow: none;
}

.dimension-pill {
  display: none;
}

.spec-card {
  position: absolute;
  z-index: 6;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: .65rem;
  background: rgba(21, 21, 20, .78);
  backdrop-filter: blur(18px);
}

.spec-card div {
  padding: 1rem 1.2rem;
}

.spec-card div + div {
  border-left: 1px solid rgba(255, 255, 255, .11);
}

.spec-card dt {
  color: rgba(255, 255, 255, .7);
  font-size: .86rem;
}

.spec-card dd {
  margin: .3rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.panel {
  position: relative;
  z-index: 10;
  max-height: 100vh;
  overflow-y: auto;
  padding: 2rem;
  background:
    radial-gradient(circle at 70% 8%, rgba(255, 255, 255, .08), transparent 8rem),
    radial-gradient(circle at 20% 50%, rgba(214, 162, 60, .08), transparent 16rem),
    var(--panel);
  box-shadow: -2.4rem 0 6rem rgba(0, 0, 0, .5);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.panel-head p {
  margin: 0 0 .3rem;
  color: var(--gold-soft);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.panel-head h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 600;
}

.panel-head strong {
  white-space: nowrap;
  font-size: 1.7rem;
}

form#calculatorForm {
  display: grid;
  gap: 1rem;
  padding: 1rem 0 0;
}

.form-section {
  border-bottom: 1px solid var(--line);
  padding: 0 0 1rem;
}

.form-section h3,
.result-card h3 {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}

.shape-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}

.shape-card {
  display: grid;
  place-items: center;
  gap: .45rem;
  min-height: 5.2rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--control);
}

.shape-card.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 1.6rem rgba(214, 162, 60, .1), 0 0 0 1px rgba(214, 162, 60, .15);
}

.shape-card b {
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.shape-mini {
  display: block;
  width: 2.25rem;
  height: 2.8rem;
  border: 1.5px solid rgba(255, 255, 255, .82);
  box-shadow: 0 0 .9rem rgba(245, 207, 136, .45);
}

.shape-mini.rounded { border-radius: .55rem; }
.shape-mini.oval {
  width: 2.15rem;
  height: 2.8rem;
  border-radius: 50% / 50%;
}
.shape-mini.circle { width: 2.8rem; border-radius: 50%; }
.shape-mini.arch { border-radius: 1.4rem 1.4rem .25rem .25rem; }
.shape-mini.quarter { border-radius: 0 100% 0 0; }
.shape-mini.semi { width: 2.8rem; border-radius: 1.4rem 1.4rem 0 0; height: 1.6rem; }
.shape-mini.three {
  width: 2.7rem;
  height: 2.05rem;
  border-radius: 2.7rem 2.7rem .22rem .22rem;
  clip-path: polygon(7% 100%, 0 76%, 0 44%, 6% 24%, 18% 10%, 34% 2%, 50% 0, 66% 2%, 82% 10%, 94% 24%, 100% 44%, 100% 76%, 93% 100%);
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

label {
  display: grid;
  gap: .38rem;
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
}

select,
input[type="range"],
input[type="number"] {
  width: 100%;
}

select,
input[type="number"] {
  min-height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: .48rem;
  padding: 0 .75rem;
  color: var(--text);
  background: #151514;
}

.size-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, .8fr);
  gap: .5rem;
}

.manual-size {
  appearance: textfield;
}

.manual-size::placeholder {
  color: rgba(255, 255, 255, .45);
}

select:focus,
button:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(214, 162, 60, .7);
  outline-offset: 2px;
}

input[type="range"] {
  accent-color: var(--gold);
}

.toggle-list {
  display: grid;
  gap: .45rem;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.4rem;
  color: rgba(255, 255, 255, .9);
}

.toggle-row input {
  position: absolute;
  opacity: 0;
}

.toggle-row span {
  position: relative;
  width: 2.55rem;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .23);
  transition: background .18s ease;
}

.toggle-row span::after {
  content: "";
  position: absolute;
  top: .22rem;
  left: .25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #f8f8f8;
  transition: transform .18s ease;
}

.toggle-row input:checked + span {
  background: linear-gradient(90deg, #dfbc7b, #b7812c);
}

.toggle-row input:checked + span::after {
  transform: translateX(1rem);
}

.lighting-settings,
#switchSettings {
  margin-top: .75rem;
}

.side-picker {
  display: none;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-top: .75rem;
  padding: .7rem;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: .55rem;
}

.side-picker.visible {
  display: grid;
}

.side-group {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.side-group.visible {
  display: grid;
}

.side-picker p {
  grid-column: 1 / -1;
  margin: 0 0 .2rem;
  color: var(--muted);
  font-size: .78rem;
}

.side-picker label {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.result-card {
  padding-top: 1.2rem;
}

.price-admin details {
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.price-admin summary {
  cursor: pointer;
  padding: .9rem 1rem;
  font-weight: 750;
  color: var(--text);
}

.price-admin-note {
  margin: 0;
  padding: 0 1rem .8rem;
  color: var(--muted);
  font-size: .82rem;
}

.price-lock {
  display: grid;
  gap: .7rem;
  padding: 0 1rem 1rem;
}

.price-lock label {
  display: grid;
  gap: .35rem;
}

.price-password-error {
  margin: -.25rem 0 0;
  color: #dc2626;
  font-size: .82rem;
  font-weight: 700;
}

.price-admin-body[hidden],
.price-lock[hidden] {
  display: none;
}

.price-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: 0 1rem 1rem;
}

.price-settings label {
  display: grid;
  gap: .35rem;
}

.price-settings span {
  font-size: .76rem;
  color: var(--muted);
}

.price-actions {
  display: flex;
  gap: .65rem;
  padding: 0 1rem 1rem;
}

.secondary-btn {
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .7rem .9rem;
  background: var(--control);
  color: var(--text);
}

#breakdown {
  display: grid;
  gap: .55rem;
}

.line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
}

.line-item strong {
  color: var(--text);
}

.line-total {
  margin-top: .35rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 1.05rem;
}

.cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  margin-top: 1rem;
  border: 0;
  border-radius: .5rem;
  background: linear-gradient(135deg, #d9a641, #e0b75f);
  color: #fffaf2;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .showcase {
    position: relative;
    min-height: 48rem;
  }

  .panel {
    max-height: none;
  }
}

@media (max-width: 740px) {
  .brand {
    top: 1.4rem;
    left: 1.2rem;
  }

  .brand h1 {
    font-size: 2.1rem;
  }

  .showcase {
    min-height: 43rem;
  }

  .preview-card {
    width: 92vw;
    height: 27rem;
    top: 7.5rem;
  }

  .spec-card {
    left: 1rem;
    right: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-card div:nth-child(3) {
    border-left: 0;
  }

  .panel {
    padding: 1.2rem;
  }

  .shape-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .control-grid,
  .side-picker,
  .price-settings {
    grid-template-columns: 1fr;
  }

  .plant {
    display: none;
  }
}

/* Legacy calculator color scheme */
:root {
  color-scheme: light;
  --gold: #3b82f6;
  --gold-soft: #014b8f;
  --text: #1f2937;
  --muted: #242424;
  --line: #e2e8f0;
  --panel: rgba(255, 255, 255, .98);
  --control: #ffffff;
}

body {
  color: var(--text);
  background: linear-gradient(135deg, #eef4fb, #f8fafc 52%, #e8f1fb);
}

.panel {
  background:
    radial-gradient(circle at 70% 8%, rgba(59, 130, 246, .08), transparent 8rem),
    radial-gradient(circle at 20% 50%, rgba(14, 165, 233, .08), transparent 16rem),
    var(--panel);
  box-shadow: -1.2rem 0 3.5rem rgba(30, 41, 59, .12);
}

.panel-head,
.form-section {
  border-color: var(--line);
}

.panel-head p,
.brand p {
  color: #014b8f;
}

.panel-head strong,
.line-item strong,
.line-total,
.form-section h3,
.result-card h3,
.panel-head h2 {
  color: #1e293b;
}

label,
.toggle-row,
.line-item,
.shape-card b {
  color: #334155;
}

.shape-card,
select,
input[type="number"],
.side-picker,
.spec-card,
.dimension-pill {
  border-color: var(--line);
  background: #ffffff;
  color: #1e293b;
}

.shape-card.active {
  border-color: #3b82f6;
  box-shadow: inset 0 0 1.4rem rgba(59, 130, 246, .08), 0 0 0 1px rgba(59, 130, 246, .22);
}

.shape-mini {
  border-color: rgba(30, 41, 59, .72);
  box-shadow: 0 0 .75rem rgba(59, 130, 246, .18);
}

.toggle-row span {
  background: #cbd5e1;
}

.toggle-row span::after {
  background: #ffffff;
}

.toggle-row input:checked + span,
.cart {
  background: #014b8f;
}

input[type="range"] {
  accent-color: #3b82f6;
}

select:focus,
button:focus-visible,
input:focus-visible {
  outline-color: rgba(59, 130, 246, .65);
}

.badge {
  border-color: rgba(59, 130, 246, .32);
  background: rgba(255, 255, 255, .82);
  color: #014b8f;
}

.spec-card {
  background: rgba(255,255,255,.88);
  border-color: rgba(226,232,240,.9);
}

.spec-card div + div {
  border-left-color: rgba(226,232,240,.9);
}

.spec-card dt {
  color: #242424;
}

.spec-card dd {
  color: #1e293b;
}

.dimension-pill {
  background: rgba(255,255,255,.92);
  color: #1e293b;
}

.bathroom-scene {
  background: #2f3742;
}

.wall {
  background:
    linear-gradient(90deg, transparent 32.9%, rgba(15, 23, 42, 0.34) 33%, transparent 33.3%),
    linear-gradient(90deg, transparent 65.9%, rgba(15, 23, 42, 0.24) 66%, transparent 66.3%),
    linear-gradient(0deg, transparent 32.9%, rgba(15, 23, 42, 0.28) 33%, transparent 33.3%),
    linear-gradient(0deg, transparent 65.9%, rgba(15, 23, 42, 0.2) 66%, transparent 66.3%),
    radial-gradient(circle at 48% 42%, rgba(255,255,255,.16), transparent 28rem),
    linear-gradient(90deg, #343e4a, #5b6674 43%, #3b4652);
}

.wall::after {
  opacity: .12;
}

.ceiling {
  background: linear-gradient(100deg, #d6dee8, #f7f9fc 34%, #c4ceda);
}

.side-wall {
  background: linear-gradient(90deg, rgba(203, 213, 225, .62), #dbe3ec);
}

.counter {
  background: linear-gradient(180deg, #f7f9fc, #cbd5e1);
  box-shadow: 0 -1rem 2rem rgba(71, 85, 105, .18);
}

.basin {
  background: linear-gradient(180deg, #ffffff, #edf2f7 52%, #aeb9c6 55%, #707b87);
}

.tap {
  background: linear-gradient(90deg, #7b8794, #d6dee8, #8b98a6);
}

.mirror-glass {
  border-color: rgba(226, 232, 240, .38);
  background:
    linear-gradient(105deg, rgba(255,255,255,.14) 0 31%, transparent 31.5%),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.2), transparent 1.6rem),
    linear-gradient(90deg, #737373, #909090 42%, #666666 42.5%, #3f3f3f 70%, #7a7a7a);
}

.luxury-mirror.shape-quarterCircle .mirror-glass {
  background:
    linear-gradient(105deg, rgba(255,255,255,.14) 0 31%, transparent 31.5%),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.2), transparent 1.6rem),
    linear-gradient(90deg, #737373, #909090 42%, #666666 42.5%, #3f3f3f 70%, #7a7a7a);
}

.brand h1 {
  color: #1e293b;
}

@media (max-width: 740px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
  }

  .showcase {
    min-height: 44rem;
  }

  .bathroom-scene {
    overflow: hidden;
  }

  .ceiling {
    left: 18%;
    right: 4%;
    height: 4.4rem;
  }

  .side-wall {
    width: 8%;
  }

  .preview-card {
    top: 3.4rem;
    width: 100vw;
    height: 24.5rem;
    overflow: visible;
  }

  .preview-card .luxury-mirror {
    transform: scale(.68);
    transform-origin: center center;
  }

  .basin {
    width: min(20rem, 78vw);
    height: 3.6rem;
    bottom: 12.4%;
  }

  .tap {
    bottom: 20.1%;
    transform: translateX(-50%) scale(.82);
  }

  .counter {
    bottom: 8.4%;
    height: 8%;
  }

  .spec-card {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.6rem;
    gap: 0;
    border-radius: .85rem;
  }

  .spec-card div {
    padding: .75rem .85rem;
  }

  .spec-card dt {
    font-size: .74rem;
  }

  .spec-card dd {
    font-size: .95rem;
  }

  .panel-head {
    align-items: center;
  }

  .panel-head h2 {
    font-size: 1.35rem;
  }

  .panel-head strong {
    font-size: 1.35rem;
  }

  .shape-card {
    min-height: 4.8rem;
  }

  .shape-card b {
    font-size: .78rem;
  }
}

/* Hybrid photo scene */
.bathroom-scene {
  background:
    radial-gradient(circle at 14% 8%, rgba(192, 148, 92, .22), transparent 20rem),
    linear-gradient(135deg, #100d0a, #211811 50%, #080706);
}

.wall {
  inset: 0 0 18% 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, rgba(0,0,0,.28) 18.2%, transparent 18.8%),
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.06) 50%, transparent 50.25%),
    linear-gradient(90deg, transparent 77.8%, rgba(0,0,0,.34) 78%, transparent 78.4%),
    linear-gradient(0deg, transparent 35%, rgba(255,255,255,.045) 35.2%, transparent 35.55%),
    linear-gradient(0deg, transparent 69%, rgba(0,0,0,.28) 69.2%, transparent 69.6%),
    radial-gradient(circle at 51% 44%, rgba(225,190,140,.24), transparent 26rem),
    linear-gradient(110deg, #19140f, #382a20 46%, #15110d);
}

.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(118deg, transparent 0 44%, rgba(255,255,255,.15) 44.1%, transparent 44.42% 100%),
    linear-gradient(71deg, transparent 0 61%, rgba(255,255,255,.08) 61.1%, transparent 61.5% 100%),
    linear-gradient(28deg, transparent 0 77%, rgba(255,255,255,.06) 77.1%, transparent 77.4% 100%);
  pointer-events: none;
}

.wall::after {
  opacity: .42;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.13) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 36%, rgba(0,0,0,.38) 0 1px, transparent 1.9px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.08) 0 1px, transparent 1.6px);
  background-size: 2.25rem 2.25rem, 3.55rem 3.55rem, 4.55rem 4.55rem;
}

.ceiling {
  left: 35%;
  right: 4%;
  height: 6.8rem;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 18% 58%);
  background: linear-gradient(105deg, #594231, #c9ad8b 42%, #6f5947);
  opacity: .96;
  box-shadow: 0 1.1rem 2.8rem rgba(0,0,0,.22);
}

.side-wall {
  bottom: 18%;
  width: 11%;
  background: linear-gradient(90deg, rgba(64, 54, 44, .72), #8f765d 46%, #d0b392);
  box-shadow: inset 1.3rem 0 2rem rgba(255,255,255,.08);
}

.counter {
  bottom: 0;
  height: 18%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 38%, rgba(255,255,255,.06) 57%, transparent),
    linear-gradient(180deg, #534338, #2b221c 55%, #15110e);
  box-shadow: 0 -1.6rem 2.7rem rgba(0,0,0,.42);
}

.basin {
  bottom: 6.5%;
  width: min(26.8rem, 45vw);
  height: 6.3rem;
  border-radius: 50% / 42%;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255,255,255,.96), rgba(245,231,209,.9) 48%, transparent 49%),
    linear-gradient(180deg, #f3e5ce, #cab99d 54%, #5c5146 56%, #1a1512);
  box-shadow: none;
  filter: drop-shadow(0 1.25rem 1.75rem rgba(0,0,0,.58));
}

.tap {
  bottom: 17.8%;
  width: 8rem;
  height: 4.5rem;
  background: transparent;
}

.tap::before,
.tap::after {
  background: linear-gradient(90deg, #21120a, #d19648 45%, #6a3b1c);
  box-shadow: 0 .45rem 1.1rem rgba(0,0,0,.45);
}

.tap::before {
  left: 1.1rem;
  bottom: .2rem;
  width: 4.9rem;
  height: 1.12rem;
}

.tap::after {
  left: 4.5rem;
  bottom: .2rem;
  width: 1.35rem;
  height: 3.5rem;
}

.plant {
  left: 8%;
  bottom: 17%;
  width: 8.8rem;
  height: 15.3rem;
  filter: drop-shadow(0 1.25rem 1.5rem rgba(0,0,0,.65));
}

.plant::after {
  background: linear-gradient(135deg, #0d0d0b, #2b241c);
}

.plant i {
  background: #6d5629;
}

.plant i::after {
  background: linear-gradient(120deg, #9ca65a, #28351f);
}

.preview-card {
  top: 7%;
  width: min(35rem, 48vw);
  height: min(43rem, 70vh);
}

.luxury-mirror {
  padding: max(var(--frame-padding, .12rem), .18rem);
  border-color: rgba(18, 18, 16, .52);
  background: linear-gradient(135deg, rgba(238,246,255,.38), rgba(255,255,255,.05) 52%, rgba(0,0,0,.44));
  box-shadow:
    inset 0 0 0 1px rgba(238,246,255,.34),
    inset 0 0 0 2.6px rgba(18, 18, 16, .42),
    0 1.35rem 2.25rem rgba(0,0,0,.62),
    0 0 1.8rem rgba(var(--glow-color), .26),
    0 0 6rem rgba(var(--glow-color), calc(var(--glow-alpha) * .62));
}

.luxury-mirror.has-frame {
  padding: var(--frame-padding, .46rem);
  border-width: var(--frame-width, 4px);
  border-style: solid;
  border-color: var(--frame-color);
  background: var(--frame-bg);
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.68),
    0 0 1.8rem rgba(var(--glow-color), .24),
    0 0 6rem rgba(var(--glow-color), calc(var(--glow-alpha) * .58));
}

.luxury-mirror.frame-silver {
  border-color: #8f969d;
}

.luxury-mirror.frame-gold {
  border-color: #ffd982;
}

.luxury-mirror.frame-black {
  border-color: #050505;
}

.luxury-mirror.has-frame .mirror-glass {
  border-color: transparent;
  box-shadow:
    inset 0 0 3.4rem rgba(0,0,0,.62);
}

.luxury-mirror.has-frame.has-demister .mirror-glass {
  box-shadow:
    inset 0 0 0 999rem rgba(255, 70, 70, .065),
    inset 0 0 4rem rgba(255, 70, 70, .14),
    inset 0 0 3.4rem rgba(0,0,0,.62);
}

.luxury-mirror.shape-quarterCircle.frame-silver,
.luxury-mirror.shape-quarterCircle.frame-gold,
.luxury-mirror.shape-quarterCircle.frame-black,
.luxury-mirror.shape-threeQuarter.frame-silver,
.luxury-mirror.shape-threeQuarter.frame-gold,
.luxury-mirror.shape-threeQuarter.frame-black {
  padding: 0;
  border: 0;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.mirror-glow {
  inset: -2rem;
  background: rgba(var(--glow-color), .42);
  filter: blur(1.75rem);
  opacity: calc(var(--glow-alpha) * .95);
}

.mirror-glass {
  border-color: rgba(238,246,255,.40);
  background:
    linear-gradient(107deg, rgba(255,255,255,.25) 0 29%, transparent 29.5%),
    radial-gradient(circle at 63% 25%, rgba(255,255,255,.18), transparent 3.1rem),
    radial-gradient(ellipse at 80% 52%, rgba(255,255,255,.09), transparent 6.2rem),
    linear-gradient(90deg, #999a96, #62645f 42%, #262520 42.5%, #12110f 72%, #40362d);
  box-shadow:
    inset 0 0 3.4rem rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(18,18,16,.34);
}

.mirror-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 51%, rgba(0,0,0,.16) 51% 58%, transparent 58%),
    radial-gradient(ellipse at 67% 23%, rgba(255,255,235,.2), transparent 3.4rem);
  pointer-events: none;
}

.ceiling-light {
  z-index: 2;
  right: 32%;
  top: 21%;
  width: 1.15rem;
  height: .46rem;
  background: #fff7e3;
  box-shadow:
    -1.6rem 1.1rem 1.7rem rgba(255,255,245,.22),
    0 0 1.25rem rgba(255,247,227,.35);
}

.luxury-mirror.front-light .mirror-glass::before,
.luxury-mirror.edge-light .mirror-glass::before,
.luxury-mirror.side-front-active .mirror-glass::before {
  z-index: 5;
  pointer-events: none;
  border-color: rgba(var(--glow-color), .94);
  filter:
    drop-shadow(0 0 .75rem rgba(var(--glow-color), .8))
    drop-shadow(0 0 1.3rem rgba(var(--glow-color), .45));
}

.side-glow.back {
  background: rgba(var(--glow-color), .92);
  filter: blur(1.05rem);
  box-shadow:
    0 0 1.8rem rgba(var(--glow-color), .95),
    0 0 4.4rem rgba(var(--glow-color), .68),
    0 0 7rem rgba(var(--glow-color), .24);
}

.side-glow.front {
  background: rgba(var(--glow-color), .92);
  box-shadow:
    0 0 .85rem rgba(var(--glow-color), .75),
    0 0 1.5rem rgba(var(--glow-color), .32);
}

.luxury-mirror.shape-quarterCircle,
.luxury-mirror.shape-threeQuarter {
  filter: none !important;
}

.luxury-mirror .mirror-glass::before,
.luxury-mirror .mirror-glass::after,
.luxury-mirror::after,
.side-glow {
  pointer-events: none !important;
}

.switch-dot,
.cosmetic-dot,
.extra-switches {
  z-index: 30 !important;
}

.switch-dot.visible,
.cosmetic-dot.visible,
.extra-switches.visible {
  pointer-events: auto !important;
}

.spec-card {
  left: 2rem;
  right: 2rem;
  bottom: 1.25rem;
  border-color: rgba(255,255,255,.12);
  background: rgba(8,8,8,.72);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.28);
}

.spec-card dt {
  color: rgba(255,255,255,.62);
}

.spec-card dd {
  color: #fff;
}

@media (max-width: 740px) {
  .showcase {
    min-height: 46rem;
  }

  .wall {
    inset: 0 0 16% 0;
  }

  .ceiling {
    left: 18%;
    right: 4%;
    height: 4.8rem;
  }

  .preview-card {
    top: 3.2rem;
    width: 100vw;
    height: 24rem;
  }

  .preview-card .luxury-mirror {
    transform: scale(.66);
    transform-origin: center center;
  }

  .counter {
    height: 17%;
  }

  .basin {
    bottom: 7.8%;
    width: min(20rem, 78vw);
    height: 3.9rem;
  }

  .tap {
    bottom: 16.2%;
    transform: translateX(-50%) scale(.82);
  }

  .plant {
    display: none;
  }

  .spec-card {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Order panel UX pass */
.panel {
  scrollbar-gutter: stable;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(241, 245, 249, .98)),
    var(--panel) !important;
}

.panel-head {
  z-index: 40;
  align-items: center;
  margin: -2rem -2rem 0;
  padding: 1.35rem 2rem 1.15rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  border-bottom: 1px solid rgba(203, 213, 225, .82);
  box-shadow: 0 .55rem 1.4rem rgba(15, 23, 42, .045);
}

.panel-head p {
  margin-bottom: .18rem;
  letter-spacing: .08em;
}

.panel-head .order-summary {
  max-width: 18rem;
  margin: .42rem 0 0;
  color: #242424;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.panel-head h2 {
  font-size: 1.45rem;
  letter-spacing: 0;
}

.panel-head strong {
  /*min-width: 7.8rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: .65rem;
  background: #eff6ff;*/
  color: rgb(225,74,92);
  font-size: 1.45rem;
  line-height: 1;
  text-align: right;
}

#calculatorForm {
  counter-reset: order-step;
  gap: .85rem;
  padding: 1.15rem 0 10.5rem;
}

.form-section {
  counter-increment: order-step;
  padding: 1rem 0 1.15rem;
  border-bottom: 1px solid rgba(226, 232, 240, .92);
}

.form-section.price-admin {
  counter-increment: none;
  padding: .85rem 0 .2rem;
}

.form-section h3,
.result-card h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
  color: #242424;
  font-size: .98rem;
  letter-spacing: 0;
}

#calculatorForm .form-section h3::before {
  content: counter(order-step);
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #d7ebf5;
  color: #014b8f;
  font-size: .78rem;
  font-weight: 800;
}

.shape-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
}

.shape-card {
  min-height: 4.85rem;
  padding: .65rem .4rem;
  border-radius: 20px;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    background .16s ease;
}

.shape-card:hover {
  border-color: rgba(59, 130, 246, .38);
  background: #f8fbff;
  transform: translateY(-1px);
}

.shape-card.active {
  background:
    linear-gradient(180deg, #eff6ff, #ffffff);
  border-color: #014b8f;
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, .18),
    0 .7rem 1.4rem rgba(37, 99, 235, .12);
}

.shape-card.active b {
  color: #014b8f;
}

.shape-mini {
  width: 2rem;
  height: 2.45rem;
  border-width: 1.35px;
}

.shape-mini.circle,
.shape-mini.semi {
  width: 2.45rem;
}

.shape-card b {
  font-size: .74rem;
  line-height: 1.15;
}

.control-grid {
  gap: .7rem;
}

.advanced-controls {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed #dbe3ee;
}

.hidden-control {
  display: none !important;
}

label {
  gap: .42rem;
  color: #242424;
  font-size: .8rem;
  font-weight: 600;
}

select,
input[type="number"],
input[type="password"] {
  min-height: 2.85rem;
  border-radius: 32px;
  border-color: #dbe3ee;
  background: #fff;
  color: #242424;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

select:hover,
input[type="number"]:hover,
input[type="password"]:hover {
  border-color: #bfdbfe;
}

.size-pair {
  grid-template-columns: minmax(0, 1fr) minmax(6.3rem, .75fr);
}

.manual-size {
  background: #f8fafc;
  font-weight: 750;
}

.manual-size {
  display: none;
}

.admin-unlocked .manual-size {
  display: block;
}

html:not(.admin-unlocked) .size-pair {
  grid-template-columns: 1fr;
}

.visual-choice-grid {
  display: grid;
  gap: .55rem;
  margin: .15rem 0 .75rem;
}

.frame-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.addon-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.addon-detail {
  display: grid;
  align-self: stretch;
  align-content: center;
  min-height: 4.35rem;
  padding: .7rem;
  border: 1px dashed #cbd5e1;
  border-radius: 20px;
  background: #f8fafc;
}

.visual-choice {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .38rem;
  min-height: 5.6rem;
  padding: .7rem .45rem;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.visual-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.42) 36%, transparent 52%);
  transform: translateX(-45%);
  transition: opacity .16s ease, transform .24s ease;
}

.visual-choice:hover {
  border-color: rgba(59, 130, 246, .38);
  background: #f8fbff;
  transform: translateY(-1px);
}

.visual-choice:hover::after {
  opacity: .55;
  transform: translateX(45%);
}

.visual-choice.disabled,
.visual-choice:disabled,
.toggle-row.disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.35);
}

.visual-choice.disabled:hover,
.visual-choice:disabled:hover,
.toggle-row.disabled:hover {
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.visual-choice.active {
  border-color: #014b8f;
  background:
    radial-gradient(circle at 18% 12%, rgba(59, 130, 246, .16), transparent 2.8rem),
    linear-gradient(180deg, #eff6ff, #fff);
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, .18),
    0 .65rem 1.25rem rgba(37, 99, 235, .11);
}

.visual-choice.active::before {
  content: "";
  position: absolute;
  right: .5rem;
  top: .5rem;
  width: .56rem;
  height: .56rem;
  border-radius: 50%;
  background: #014b8f;
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
}

.visual-choice b {
  color: #242424;
  font-size: .78rem;
  line-height: 1.12;
}

.visual-choice.active b {
  color: #014b8f;
}

.visual-choice small {
  max-width: 7rem;
  color: #242424;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.15;
}

.frame-swatch {
  position: relative;
  display: block;
  width: 2.9rem;
  height: 2.05rem;
  border-radius: .25rem;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 .36rem currentColor;
}

.frame-swatch::after {
  content: "";
  position: absolute;
  inset: .48rem;
  border-radius: .12rem;
  background:
    linear-gradient(115deg, rgba(255,255,255,.72) 0 38%, transparent 39%),
    linear-gradient(90deg, #b8c0c2, #3f403d 52%, #181817);
}

.frame-none {
  color: #dbe3ee;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

.frame-none::before {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  top: 50%;
  height: 2px;
  background: #ef4444;
  transform: rotate(-24deg);
  z-index: 2;
}

.frame-silver {
  color: #8f969d;
}

.frame-gold {
  color: #c99a32;
}

.frame-black {
  color: #171717;
}

.addon-choice {
  grid-template-columns: 3rem minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  min-height: 4.35rem;
  text-align: left;
}

.addon-choice small {
  grid-column: 2;
}

.addon-icon {
  grid-row: span 2;
  position: relative;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: .55rem;
  background:
    linear-gradient(180deg, #f8fafc, #e2e8f0);
  color: #014b8f;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: 0;
}

.addon-cosmetic::before {
  content: "";
  width: 1.34rem;
  height: 1.34rem;
  border: .18rem solid rgba(37, 99, 235, .9);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, #b8c0c2 36% 58%, #1f2937 59%);
  box-shadow: 0 0 .55rem rgba(37, 99, 235, .36);
}

.addon-fog::before {
  content: "";
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 36%, transparent 37%),
    repeating-linear-gradient(90deg, transparent 0 .28rem, rgba(37,99,235,.82) .29rem .38rem),
    linear-gradient(180deg, rgba(239,246,255,.98), rgba(191,219,254,.78));
  border: 1px solid rgba(37,99,235,.28);
  box-shadow:
    inset 0 0 .5rem rgba(37,99,235,.18),
    0 0 .55rem rgba(37,99,235,.22);
}

.addon-clock,
.addon-weather {
  background:
    linear-gradient(115deg, rgba(255,255,255,.62) 0 34%, transparent 35%),
    linear-gradient(180deg, #2b3038, #111827);
  color: #d7ebf5;
  text-shadow: 0 0 .35rem rgba(147, 197, 253, .9);
}

.switch-option {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 1fr) auto;
  align-items: center;
  gap: .75rem;
  text-align: left;
}

.switch-option.disabled {
  background: #f8fafc;
}

.switch-option.disabled .toggle-switch {
  opacity: .55;
}

.switch-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.15rem;
  border: 1px solid #dbe3ee;
  border-radius: .55rem;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
}

.switch-preview::after {
  content: none !important;
}

.switch-preview i {
  position: relative;
  display: block;
  width: 1.65rem;
  height: 1.05rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 .18rem #eff6ff;
}

.switch-preview i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: .18rem;
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: #014b8f;
  box-shadow: 0 0 .55rem rgba(37, 99, 235, .55);
  transform: translateY(-50%);
}

.switch-copy {
  display: grid !important;
  gap: .12rem;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-self: stretch;
  color: #1e293b;
}

.switch-copy::after {
  content: none !important;
}

.switch-copy b {
  white-space: nowrap;
}

.switch-copy small {
  color: #242424;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
}

.toggle-list {
  gap: .55rem;
}

.toggle-row {
  min-height: 3rem;
  padding: .68rem .75rem;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  background: #fff;
  color: #1e293b;
  font-weight: 600;
}

.toggle-row b {
  min-width: 0;
  font-size: .86rem;
}

.toggle-row:has(input:checked) {
  border-color: #d7ebf5;
  background: #d7ebf5;
  color: #014b8f;
}

.toggle-row .toggle-switch {
  flex: 0 0 auto;
  width: 2.7rem;
  height: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}

.toggle-row .toggle-switch::after {
  top: .23rem;
}

.toggle-row input:checked + .toggle-switch::after {
  transform: translateX(1.14rem);
}

.lighting-option {
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr) auto;
  gap: .75rem;
  text-align: left;
}

.lighting-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.15rem;
  border-radius: .55rem;
  background:
    linear-gradient(180deg, #f8fafc, #e2e8f0);
  border: 1px solid #dbe3ee;
}

.lighting-preview::after {
  content: none !important;
}

.lighting-preview i {
  position: relative;
  display: block;
  width: 1.42rem;
  height: 1.65rem;
  border-radius: .18rem;
  background:
    linear-gradient(115deg, rgba(255,255,255,.7) 0 36%, transparent 37%),
    linear-gradient(90deg, #a5adb1, #3b3b38 52%, #171715);
  border: 1px solid rgba(15, 23, 42, .58);
  box-shadow: inset 0 0 .55rem rgba(0,0,0,.22);
}

.preview-back i {
  box-shadow:
    0 0 .62rem rgba(37, 99, 235, .9),
    0 0 1.15rem rgba(37, 99, 235, .38),
    inset 0 0 .55rem rgba(0,0,0,.22);
}

.preview-front i::after {
  content: "";
  position: absolute;
  inset: .28rem;
  border: .16rem solid rgba(37, 99, 235, .9);
  border-radius: .12rem;
  box-shadow: 0 0 .5rem rgba(37, 99, 235, .55);
}

.preview-edge i {
  border-color: rgba(37, 99, 235, .95);
  box-shadow:
    0 0 .52rem rgba(37, 99, 235, .8),
    inset 0 0 .55rem rgba(0,0,0,.22);
}

.preview-none i {
  opacity: .72;
}

.lighting-settings,
#switchSettings {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px dashed #dbe3ee;
}

.side-picker {
  margin-top: .75rem;
  padding: .8rem;
  border: 1px solid #d7ebf5;
  border-radius: .8rem;
  background: #f8fbff;
}

.side-group {
  gap: .45rem;
}

.side-picker p {
  color: #014b8f;
  font-size: .78rem;
  font-weight: 800;
}

.side-picker label {
  justify-content: center;
  min-height: 2.2rem;
  border: 1px solid #dbe3ee;
  border-radius: .6rem;
  background: #fff;
  color: #334155;
  font-size: .78rem;
}

.side-picker input {
  accent-color: #014b8f;
}

.price-admin details {
  border-radius: 20px;
  border-style: dashed;
  background: transparent;
}

.price-admin summary {
  padding: .65rem .75rem;
  color: #242424;
  font-size: .82rem;
}

.price-admin details:not(.unlocked) {
  opacity: .72;
}

.price-admin details:not(.unlocked) summary {
  color: #94a3b8;
}

.admin-only[hidden] {
  display: none !important;
}

.result-card {
  position: sticky;
  bottom: 0;
  z-index: 35;
  margin: 0 -2rem -2rem;
  padding: 1.1rem 2rem 1.35rem;
  border-top: 1px solid rgba(203, 213, 225, .92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.99));
  box-shadow: 0 -1.1rem 2.3rem rgba(15, 23, 42, .1);
  backdrop-filter: blur(14px);
}

.result-card h3 {
  justify-content: space-between;
  margin-bottom: .9rem;
}

/*.result-card h3::after {
  content: "� ���";
  padding: .24rem .5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #014b8f;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}*/

#breakdown {
  gap: .52rem;
}

.line-item {
  color: #242424;
  padding: .1rem 0;
  font-weight: 600;
}

.line-total {
  margin-top: .2rem;
  padding-top: .75rem;
  border-top: 1px solid #dbe3ee;
  color: #242424;
}

.line-total span {
  font-size: .98rem;
}

.line-total strong {
  font-size: 1.2rem;
}

.cart,
.secondary-btn {
  border-radius: 20px;
  font-weight: 800;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.cart:hover,
.secondary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 .75rem 1.35rem rgba(37, 99, 235, .14);
}

.cart {
  min-height: 3.1rem;
}

.mobile-preview-btn {
  display: none;
  min-height: 3rem;
  width: 100%;
  margin-top: .8rem;
}

@media (max-width: 1180px) {
  .panel-head,
  .result-card {
    position: static;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 740px) {
  .panel {
    padding: 1rem;
  }

  .panel-head,
  .result-card {
    margin: 0;
    padding: 1rem 0;
    box-shadow: none;
    background: transparent;
  }

  #calculatorForm {
    padding-bottom: 0;
  }

  .mobile-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }


  .shape-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-head .order-summary {
    max-width: none;
  }

  .frame-choice-grid,
  .addon-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toggle-row {
    min-height: 2.85rem;
  }
}

/* Photoreal bathroom background */
.bathroom-scene {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 18%, rgba(0,0,0,.06) 70%, rgba(0,0,0,.36)),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.1) 46%, rgba(0,0,0,.35)),
    url("../img/main-warm-bathroom-bg.png") center center / cover no-repeat !important;
}

.bathroom-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 37%, transparent 0 18rem, rgba(0,0,0,.22) 38rem),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.3));
}

.wall,
.ceiling,
.side-wall,
.plant,
.counter,
.basin,
.tap {
  display: none !important;
}

.preview-card {
  z-index: 2;
  top: 5.4% !important;
  height: min(41rem, 66vh) !important;
}

.spec-card {
  z-index: 3;
}

@media (max-width: 740px) {
  .bathroom-scene {
    background-position: center top !important;
  }

  .preview-card {
    top: 4.2rem !important;
    height: 23rem !important;
  }
}

/* Clearer in-mirror feature visuals */
/* Final sensor-button cleanup: no underlines, centered readable icons */
.cosmetic-switch::after,
.main-switch-copy::after,
.demister-switch::after,
.option-switch::after {
  content: none !important;
  display: none !important;
}

.option-switch {
  position: relative !important;
}

.cosmetic-switch::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 64% !important;
  height: 64% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  border: 1.4px solid rgba(255,255,255,.86) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(255,247,218,.28), transparent 62%) !important;
  box-shadow:
    0 0 .18rem rgba(255,255,255,.45),
    0 0 .62rem rgba(var(--glow-color), .72) !important;
  transform: translate(-50%, -50%) !important;
}

.main-switch-copy::before {
  content: "" !important;
  left: 50% !important;
  top: 50% !important;
  width: 54% !important;
  height: 54% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  background:
    linear-gradient(rgba(210,232,255,.98), rgba(210,232,255,.98)) 50% 4% / 14% 45% no-repeat,
    conic-gradient(from 42deg, transparent 0 76deg, rgba(210,232,255,.98) 76deg 284deg, transparent 284deg 360deg) !important;
  color: transparent !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  text-shadow:
    0 0 .2rem rgba(255,255,255,.6),
    0 0 .48rem rgba(147,197,253,.55) !important;
}

.demister-switch::before {
  content: "?" !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 238, 196, .96) !important;
  font-family: Arial, sans-serif !important;
  font-size: calc(var(--button-cell-size, 1.6rem) * .4) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  writing-mode: horizontal-tb !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  text-shadow:
    0 0 .22rem rgba(255,255,255,.55),
    0 0 .48rem rgba(255,218,144,.45) !important;
}

.switch-dot {
  width: calc(var(--button-cell-size, 1.6rem) * .54) !important;
  height: calc(var(--button-cell-size, 1.6rem) * .54) !important;
  border: 1.4px solid rgba(255,255,255,.72) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow:
    0 0 .32rem rgba(255,255,255,.2),
    inset 0 0 .18rem rgba(255,255,255,.12) !important;
}

.switch-dot::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 54% !important;
  height: 54% !important;
  border-radius: 50% !important;
  background:
    linear-gradient(rgba(210,232,255,.98), rgba(210,232,255,.98)) 50% 4% / 14% 45% no-repeat,
    conic-gradient(from 42deg, transparent 0 76deg, rgba(210,232,255,.98) 76deg 284deg, transparent 284deg 360deg) !important;
  transform: translate(-50%, -50%) !important;
  filter:
    drop-shadow(0 0 .2rem rgba(255,255,255,.6))
    drop-shadow(0 0 .48rem rgba(147,197,253,.55)) !important;
}

/* Default controls keep the calculated bottom-safe height until the user drags them */
.extra-switches.visible:not(.manual-position) {
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.switch-dot.visible:not(.manual-position) {
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.extra-switches:has(.option-switch:not(.hidden)):not(.vertical):not(.rotated) {
  overflow: visible !important;
}

.extra-switches:has(.option-switch:not(.hidden)):not(.vertical):not(.rotated) .clock-chip.visible {
  position: absolute !important;
  left: calc(100% + .32rem) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.extra-switches .clock-chip:not(.visible) {
  display: none !important;
}

/* Unified SVG path renderer. This block intentionally neutralizes legacy
   CSS shape rendering so every mirror shape is drawn by the same SVG paths. */
.luxury-mirror.renderer-svg,
.luxury-mirror.renderer-svg.shape-rectangle,
.luxury-mirror.renderer-svg.shape-rectangleR50,
.luxury-mirror.renderer-svg.shape-oval,
.luxury-mirror.renderer-svg.shape-circle,
.luxury-mirror.renderer-svg.shape-semicircle,
.luxury-mirror.renderer-svg.shape-quarterCircle,
.luxury-mirror.renderer-svg.shape-threeQuarter,
.luxury-mirror.renderer-svg.shape-arched {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.luxury-mirror.renderer-svg::before,
.luxury-mirror.renderer-svg::after {
  display: none !important;
  content: none !important;
}

.luxury-mirror.renderer-svg .mirror-glow,
.luxury-mirror.renderer-svg .side-glow {
  display: none !important;
}

.luxury-mirror.renderer-svg .svg-shape-mirror {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.luxury-mirror.renderer-svg #svgShapeBack,
.luxury-mirror.renderer-svg #svgShapeGlass,
.luxury-mirror.renderer-svg #svgShapeReflection,
.luxury-mirror.renderer-svg #svgShapeEdge,
.luxury-mirror.renderer-svg #svgShapeFront {
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.luxury-mirror.renderer-svg #svgShapeBack {
  fill: none !important;
  opacity: 0 !important;
  stroke: rgba(var(--glow-color), .78) !important;
  stroke-width: 22px !important;
  filter:
    blur(.34rem)
    drop-shadow(0 0 1.8rem rgba(var(--glow-color), .95))
    drop-shadow(0 0 4.4rem rgba(var(--glow-color), .72))
    drop-shadow(0 0 8.4rem rgba(var(--glow-color), .42)) !important;
}

.luxury-mirror.renderer-svg:not(.light-off):not(.front-only):not(.edge-light) #svgShapeBack {
  opacity: 1 !important;
}

.luxury-mirror.renderer-svg #svgShapeGlass {
  fill: url("#svgShapeGlassGradient") !important;
  stroke: var(--preview-mirror-stroke, rgba(238,246,255,.40)) !important;
  stroke-width: var(--preview-stroke-width, 1px) !important;
  filter: var(--preview-shape-shadow) !important;
}

.luxury-mirror.renderer-svg.has-demister #svgShapeGlass {
  fill: #493835 !important;
}

.luxury-mirror.renderer-svg #svgShapeReflection {
  fill: url("#svgShapeBathReflection") !important;
  opacity: .82 !important;
  stroke: none !important;
  filter: drop-shadow(0 0 .28rem rgba(255,255,255,.16)) !important;
}

.luxury-mirror.renderer-svg #svgShapeEdge {
  fill: none !important;
  opacity: 1 !important;
  stroke: var(--preview-mirror-stroke, rgba(238,246,255,.40)) !important;
  stroke-width: var(--preview-stroke-width, 1px) !important;
  filter: drop-shadow(0 0 .16rem rgba(255,255,255,.16)) !important;
}

.luxury-mirror.renderer-svg.has-frame:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.has-frame.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.has-frame.front-only #svgShapeEdge {
  stroke: var(--frame-color) !important;
  stroke-width: calc(var(--frame-width, 4px) * 2.35) !important;
  filter:
    drop-shadow(0 .1rem .1rem rgba(0,0,0,.5))
    drop-shadow(0 0 .16rem rgba(255,255,255,.12)) !important;
}

.luxury-mirror.renderer-svg.frame-black:not(.edge-light) #svgShapeEdge {
  stroke: #050505 !important;
}

.luxury-mirror.renderer-svg.edge-light #svgShapeEdge {
  stroke: rgba(var(--glow-color), .96) !important;
  stroke-width: var(--preview-edge-led-width, 6px) !important;
  filter:
    drop-shadow(0 0 .75rem rgba(var(--glow-color), var(--preview-glow-strong, .82)))
    drop-shadow(0 0 1.35rem rgba(var(--glow-color), var(--preview-glow-soft, .46))) !important;
}

.luxury-mirror.renderer-svg #svgShapeFront {
  fill: none !important;
  opacity: 0 !important;
  stroke: rgba(var(--glow-color), .95) !important;
  stroke-width: var(--preview-front-led-width, 10px) !important;
  filter:
    drop-shadow(0 0 .75rem rgba(var(--glow-color), var(--preview-glow-strong, .82)))
    drop-shadow(0 0 1.35rem rgba(var(--glow-color), var(--preview-glow-soft, .46))) !important;
}

.luxury-mirror.renderer-svg.front-light #svgShapeFront {
  opacity: 1 !important;
}

.luxury-mirror.renderer-svg .mirror-glass,
.luxury-mirror.renderer-svg .mirror-glass::before,
.luxury-mirror.renderer-svg .mirror-glass::after {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.luxury-mirror.renderer-svg .mirror-glass {
  position: relative !important;
  z-index: 8 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.luxury-mirror.renderer-svg .mirror-glass::before,
.luxury-mirror.renderer-svg .mirror-glass::after {
  display: none !important;
  content: none !important;
}

.luxury-mirror.renderer-svg #svgShapeGlass,
.luxury-mirror.renderer-svg.shape-quarterCircle #svgShapeGlass,
.luxury-mirror.renderer-svg.shape-threeQuarter #svgShapeGlass {
  fill: url("#svgShapeGlassGradient") !important;
  opacity: 1 !important;
  stroke: var(--preview-mirror-stroke, rgba(238,246,255,.40)) !important;
  stroke-width: var(--preview-stroke-width, 1px) !important;
}

.luxury-mirror.renderer-svg #svgShapeReflection,
.luxury-mirror.renderer-svg.shape-quarterCircle #svgShapeReflection,
.luxury-mirror.renderer-svg.shape-threeQuarter #svgShapeReflection {
  fill: url("#svgShapeBathReflection") !important;
  opacity: .82 !important;
}

.luxury-mirror.renderer-svg.has-demister #svgShapeGlass,
.luxury-mirror.renderer-svg.has-demister.shape-quarterCircle #svgShapeGlass,
.luxury-mirror.renderer-svg.has-demister.shape-threeQuarter #svgShapeGlass {
  fill: #513331 !important;
  filter: var(--preview-shape-shadow) !important;
}

.luxury-mirror.renderer-svg.has-demister #svgShapeReflection,
.luxury-mirror.renderer-svg.has-demister.shape-quarterCircle #svgShapeReflection,
.luxury-mirror.renderer-svg.has-demister.shape-threeQuarter #svgShapeReflection {
  opacity: .66 !important;
  filter:
    sepia(.35)
    saturate(1.35)
    hue-rotate(318deg) !important;
}

.luxury-mirror.renderer-svg .switch-dot,
.luxury-mirror.renderer-svg .cosmetic-dot,
.luxury-mirror.renderer-svg .extra-switches,
.luxury-mirror.renderer-svg .anti-fog-zone {
  z-index: 30 !important;
}

.luxury-mirror.renderer-svg .anti-fog-zone.visible {
  display: block !important;
  opacity: 1 !important;
}

.luxury-mirror.renderer-svg.shape-quarterCircle .mirror-glass,
.luxury-mirror.renderer-svg.shape-threeQuarter .mirror-glass,
.luxury-mirror.renderer-svg.shape-quarterCircle:not(.light-off):not(.front-only):not(.edge-light) .mirror-glass,
.luxury-mirror.renderer-svg.shape-threeQuarter:not(.light-off):not(.front-only):not(.edge-light) .mirror-glass {
  background: transparent none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.luxury-mirror.renderer-svg.shape-quarterCircle .mirror-glass::before,
.luxury-mirror.renderer-svg.shape-quarterCircle .mirror-glass::after,
.luxury-mirror.renderer-svg.shape-threeQuarter .mirror-glass::before,
.luxury-mirror.renderer-svg.shape-threeQuarter .mirror-glass::after {
  display: none !important;
  content: none !important;
  background: transparent none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (max-width: 740px) {
  .bathroom-scene {
    background-position: center top !important;
  }

  .preview-card {
    left: 50% !important;
    top: 3rem !important;
    height: 21rem !important;
    transform: translateX(-50%) !important;
  }

  .preview-card .luxury-mirror {
    transform: scale(.58) !important;
    transform-origin: center center !important;
  }
}
/* Realistic capacitive controls inside the SVG mirror preview. */
.luxury-mirror.renderer-svg .extra-switches {
  gap: calc(var(--button-cell-size, 1.6rem) * .42) !important;
  padding: calc(var(--button-cell-size, 1.6rem) * .12) !important;
  border-radius: calc(var(--button-cell-size, 1.6rem) * .16) !important;
  background: rgba(5, 8, 12, .18) !important;
  box-shadow:
    inset 0 0 .08rem rgba(255,255,255,.08),
    0 .12rem .42rem rgba(0,0,0,.18) !important;
  backdrop-filter: blur(.12rem) !important;
}

.luxury-mirror.renderer-svg .option-switch {
  position: relative !important;
  border-radius: calc(var(--button-cell-size, 1.6rem) * .14) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 -.08rem .12rem rgba(0,0,0,.24) !important;
}

.luxury-mirror.renderer-svg .option-switch::after {
  content: none !important;
  display: none !important;
}

.luxury-mirror.renderer-svg .option-switch::before,
.luxury-mirror.renderer-svg .cosmetic-switch::before,
.luxury-mirror.renderer-svg .main-switch-copy::before,
.luxury-mirror.renderer-svg .demister-switch::before {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy::before,
.luxury-mirror.renderer-svg .switch-dot::before {
  content: "" !important;
  display: block !important;
  width: 58% !important;
  height: 58% !important;
  border-radius: 50% !important;
  background:
    linear-gradient(rgba(168,213,255,.98), rgba(168,213,255,.98)) 50% 2% / 13% 43% no-repeat,
    conic-gradient(from 43deg, transparent 0 74deg, rgba(168,213,255,.98) 74deg 286deg, transparent 286deg 360deg) !important;
  box-shadow:
    0 0 .2rem rgba(255,255,255,.5),
    0 0 .55rem rgba(99,179,255,.55) !important;
}

.luxury-mirror.renderer-svg .cosmetic-switch::before {
  content: "" !important;
  display: block !important;
  width: 60% !important;
  height: 60% !important;
  border-radius: 50% !important;
  border: 1.4px solid rgba(255,246,218,.94) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,246,218,.98) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(255,246,218,.72) 43% 49%, transparent 50%) !important;
  box-shadow:
    0 0 .18rem rgba(255,255,255,.46),
    0 0 .58rem rgba(var(--glow-color), .62) !important;
}

.luxury-mirror.renderer-svg .demister-switch::before {
  content: "" !important;
  display: block !important;
  width: 68% !important;
  height: 58% !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 22% 62%, transparent 0 34%, rgba(255,168,118,.96) 36% 43%, transparent 45%) 0 0 / 33% 100% no-repeat,
    radial-gradient(ellipse at 50% 38%, transparent 0 34%, rgba(255,168,118,.96) 36% 43%, transparent 45%) 50% 0 / 33% 100% no-repeat,
    radial-gradient(ellipse at 78% 62%, transparent 0 34%, rgba(255,168,118,.96) 36% 43%, transparent 45%) 100% 0 / 33% 100% no-repeat !important;
  box-shadow:
    0 0 .18rem rgba(255,230,180,.42),
    0 0 .52rem rgba(255,132,82,.46) !important;
}

.luxury-mirror.renderer-svg .switch-dot {
  width: calc(var(--button-cell-size, 1.6rem) * .82) !important;
  height: calc(var(--button-cell-size, 1.6rem) * .82) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: calc(var(--button-cell-size, 1.6rem) * .12) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.018)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 -.08rem .12rem rgba(0,0,0,.22) !important;
}

.luxury-mirror.renderer-svg .clock-chip {
  border-radius: calc(var(--clock-cell-size, 1.9rem) * .13) !important;
  background: rgba(0, 0, 0, .72) !important;
  color: rgba(124, 218, 255, .94) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
  font-size: calc(var(--clock-cell-size, 1.9rem) * .24) !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 .18rem rgba(77, 195, 255, .7),
    0 0 .5rem rgba(77, 195, 255, .35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124,218,255,.12),
    inset 0 0 .32rem rgba(124,218,255,.08) !important;
}
/* Reference-style illuminated round mirror controls. */
.luxury-mirror.renderer-svg .extra-switches {
  gap: calc(var(--button-cell-size, 1.6rem) * .72) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.luxury-mirror.renderer-svg .option-switch {
  position: relative !important;
  width: calc(var(--button-cell-size, 1.6rem) * 1.28) !important;
  height: calc(var(--button-cell-size, 1.6rem) * 1.28) !important;
  flex-basis: calc(var(--button-cell-size, 1.6rem) * 1.28) !important;
  border-radius: 50% !important;
  background: rgba(190, 196, 198, .10) !important;
  box-shadow:
    0 0 .2rem rgba(255,255,255,.16),
    0 .08rem .24rem rgba(0,0,0,.16) !important;
}

.luxury-mirror.renderer-svg .option-switch::before,
.luxury-mirror.renderer-svg .switch-dot::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 88% !important;
  height: 88% !important;
  border-radius: 50% !important;
  border: calc(var(--button-cell-size, 1.6rem) * .105) solid rgba(236, 250, 255, .94) !important;
  background: rgba(160, 168, 170, .08) !important;
  box-shadow:
    0 0 .28rem rgba(255,255,255,.62),
    0 0 .75rem rgba(221, 245, 255, .44),
    0 0 1.1rem rgba(120, 150, 255, .18) !important;
  transform: translate(-50%, -50%) !important;
}

.luxury-mirror.renderer-svg .option-switch::after,
.luxury-mirror.renderer-svg .switch-dot::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  transform: translate(-50%, -50%) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy::before,
.luxury-mirror.renderer-svg .switch-dot::before {
  border-color: rgba(126, 237, 255, .94) !important;
  box-shadow:
    0 0 .28rem rgba(117,239,255,.7),
    0 0 .86rem rgba(93,180,255,.55),
    .34rem .12rem .58rem rgba(77,83,255,.28) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy::after,
.luxury-mirror.renderer-svg .switch-dot::after {
  width: 58% !important;
  height: 58% !important;
  border-radius: 50% !important;
  background:
    linear-gradient(rgba(126,237,255,.98), rgba(126,237,255,.98)) 50% 0 / 16% 48% no-repeat,
    conic-gradient(from 42deg, rgba(126,237,255,.98) 0 278deg, transparent 278deg 360deg) center 56% / 100% 100% no-repeat !important;
  -webkit-mask:
    linear-gradient(#000 0 0) 50% 0 / 16% 48% no-repeat,
    radial-gradient(circle at 50% 56%, transparent 0 38%, #000 39% 54%, transparent 55%) !important;
  mask:
    linear-gradient(#000 0 0) 50% 0 / 16% 48% no-repeat,
    radial-gradient(circle at 50% 56%, transparent 0 38%, #000 39% 54%, transparent 55%) !important;
  box-shadow:
    0 0 .2rem rgba(126,237,255,.72),
    0 0 .65rem rgba(93,180,255,.54) !important;
}

.luxury-mirror.renderer-svg .demister-switch::before {
  border-color: rgba(247, 252, 232, .96) !important;
  box-shadow:
    0 0 .3rem rgba(255,255,245,.68),
    0 0 .88rem rgba(255,250,214,.48) !important;
}

.luxury-mirror.renderer-svg .demister-switch::after {
  width: 64% !important;
  height: 62% !important;
  background:
    radial-gradient(ellipse at 20% 38%, transparent 0 38%, rgba(247,252,232,.98) 40% 47%, transparent 49%) 0 8% / 31% 72% no-repeat,
    radial-gradient(ellipse at 50% 38%, transparent 0 38%, rgba(247,252,232,.98) 40% 47%, transparent 49%) 50% 8% / 31% 72% no-repeat,
    radial-gradient(ellipse at 80% 38%, transparent 0 38%, rgba(247,252,232,.98) 40% 47%, transparent 49%) 100% 8% / 31% 72% no-repeat,
    linear-gradient(rgba(247,252,232,.98), rgba(247,252,232,.98)) 50% 88% / 88% 9% no-repeat !important;
  box-shadow:
    0 0 .18rem rgba(255,255,245,.7),
    0 0 .56rem rgba(255,250,214,.5) !important;
}

.luxury-mirror.renderer-svg .cosmetic-switch::before {
  border-color: rgba(247, 252, 232, .94) !important;
  box-shadow:
    0 0 .26rem rgba(255,255,245,.58),
    0 0 .72rem rgba(var(--glow-color), .42) !important;
}

.luxury-mirror.renderer-svg .cosmetic-switch::after {
  width: 54% !important;
  height: 54% !important;
  border-radius: 50% !important;
  border: calc(var(--button-cell-size, 1.6rem) * .055) solid rgba(247,252,232,.94) !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 .16rem rgba(255,255,245,.25),
    0 0 .32rem rgba(255,255,245,.42) !important;
}

.luxury-mirror.renderer-svg .switch-dot {
  width: calc(var(--button-cell-size, 1.6rem) * 1.08) !important;
  height: calc(var(--button-cell-size, 1.6rem) * 1.08) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(190, 196, 198, .10) !important;
  box-shadow:
    0 0 .2rem rgba(255,255,255,.16),
    0 .08rem .24rem rgba(0,0,0,.16) !important;
}
/* Reference clock/weather module and simplified anti-fog waves. */
.luxury-mirror.renderer-svg .demister-switch::after {
  width: 58% !important;
  height: 58% !important;
  background:
    radial-gradient(ellipse at 18% 50%, transparent 0 34%, rgba(247,252,232,.98) 36% 44%, transparent 46%) 0 50% / 32% 100% no-repeat,
    radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(247,252,232,.98) 36% 44%, transparent 46%) 50% 50% / 32% 100% no-repeat,
    radial-gradient(ellipse at 82% 50%, transparent 0 34%, rgba(247,252,232,.98) 36% 44%, transparent 46%) 100% 50% / 32% 100% no-repeat !important;
  box-shadow:
    0 0 .18rem rgba(255,255,245,.7),
    0 0 .56rem rgba(255,250,214,.5) !important;
}

.luxury-mirror.renderer-svg .clock-chip.visible {
  display: grid !important;
  grid-template-columns: auto calc(var(--clock-cell-size, 1.9rem) * .82) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  column-gap: calc(var(--clock-cell-size, 1.9rem) * .28) !important;
  width: auto !important;
  min-width: calc(var(--clock-cell-size, 1.9rem) * 2.75) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .86) !important;
  flex: 0 0 auto !important;
  padding: 0 calc(var(--clock-cell-size, 1.9rem) * .18) !important;
  border-radius: calc(var(--clock-cell-size, 1.9rem) * .18) !important;
  background: rgba(0, 0, 0, .78) !important;
  color: rgba(226, 232, 255, .96) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 .34rem rgba(100,120,255,.12),
    0 .06rem .28rem rgba(0,0,0,.24) !important;
}

.luxury-mirror.renderer-svg .clock-chip .led-main {
  display: block !important;
  color: rgba(230, 234, 255, .98) !important;
  font-size: calc(var(--clock-cell-size, 1.9rem) * .36) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-shadow:
    0 0 .16rem rgba(210,218,255,.8),
    0 0 .48rem rgba(128,148,255,.55) !important;
  white-space: nowrap !important;
}

.luxury-mirror.renderer-svg .clock-chip .led-sub {
  display: block !important;
  color: rgba(165, 204, 255, .86) !important;
  font-size: calc(var(--clock-cell-size, 1.9rem) * .24) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 .28rem rgba(128,148,255,.45) !important;
  white-space: nowrap !important;
}

.luxury-mirror.renderer-svg .clock-chip.weather-module {
  grid-template-columns: auto auto calc(var(--clock-cell-size, 1.9rem) * .82) !important;
  min-width: calc(var(--clock-cell-size, 1.9rem) * 3.25) !important;
}

.luxury-mirror.renderer-svg .clock-chip .led-round {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: calc(var(--clock-cell-size, 1.9rem) * .74) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .74) !important;
  border-radius: 50% !important;
  border: calc(var(--clock-cell-size, 1.9rem) * .07) solid rgba(190, 218, 255, .94) !important;
  color: rgba(190, 218, 255, .94) !important;
  font-size: calc(var(--clock-cell-size, 1.9rem) * .25) !important;
  text-shadow:
    0 0 .16rem rgba(190,218,255,.74),
    0 0 .44rem rgba(108,142,255,.5) !important;
  box-shadow:
    0 0 .2rem rgba(190,218,255,.6),
    0 0 .58rem rgba(108,142,255,.42) !important;
}

.luxury-mirror.renderer-svg .clock-chip .clock-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 42% !important;
  height: 42% !important;
  border-left: calc(var(--clock-cell-size, 1.9rem) * .055) solid rgba(190,218,255,.95) !important;
  border-bottom: calc(var(--clock-cell-size, 1.9rem) * .055) solid rgba(190,218,255,.95) !important;
  transform: translate(-18%, -54%) rotate(-38deg) !important;
  transform-origin: left bottom !important;
}
/* Premium dark mirror UI controls: inline SVG icons, reference-style glow. */
.luxury-mirror.renderer-svg .mirror-controls {
  display: flex !important;
  align-items: center !important;
  gap: calc(var(--button-cell-size, 1.6rem) * .72) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.luxury-mirror.renderer-svg .mirror-btn {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: calc(var(--button-cell-size, 1.6rem) * 1.34) !important;
  height: calc(var(--button-cell-size, 1.6rem) * 1.34) !important;
  flex: 0 0 calc(var(--button-cell-size, 1.6rem) * 1.34) !important;
  border-radius: calc(var(--button-cell-size, 1.6rem) * .24) !important;
  border: calc(var(--button-cell-size, 1.6rem) * .055) solid rgba(248, 250, 252, .94) !important;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.12), transparent 58%),
    rgba(7, 9, 10, .18) !important;
  box-shadow:
    0 0 .16rem rgba(255,255,255,.68),
    0 0 .7rem rgba(255,255,255,.38),
    0 0 1.35rem rgba(255,255,255,.18),
    inset 0 0 .25rem rgba(255,255,255,.08) !important;
}

.luxury-mirror.renderer-svg .mirror-btn::before,
.luxury-mirror.renderer-svg .mirror-btn::after {
  content: none !important;
  display: none !important;
}

.luxury-mirror.renderer-svg .mirror-icon {
  display: block !important;
  width: 68% !important;
  height: 68% !important;
  overflow: visible !important;
  fill: none !important;
  stroke: rgba(248, 250, 252, .96) !important;
  stroke-width: 3.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 0 .12rem rgba(255,255,255,.9))
    drop-shadow(0 0 .42rem rgba(255,255,255,.5)) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy .mirror-icon {
  stroke: rgba(210, 239, 255, .98) !important;
  filter:
    drop-shadow(0 0 .12rem rgba(210,239,255,.95))
    drop-shadow(0 0 .44rem rgba(91,184,255,.62)) !important;
}

.luxury-mirror.renderer-svg .demister-switch .mirror-icon,
.luxury-mirror.renderer-svg .cosmetic-switch .mirror-icon {
  stroke: rgba(255, 255, 248, .96) !important;
}

.luxury-mirror.renderer-svg .mirror-display {
  display: grid !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(248, 250, 252, .96) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
  line-height: 1 !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-only {
  grid-template-columns: auto !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather {
  grid-template-columns: auto calc(var(--clock-cell-size, 1.9rem) * .08) calc(var(--clock-cell-size, 1.9rem) * .82) auto !important;
  column-gap: calc(var(--clock-cell-size, 1.9rem) * .28) !important;
}

.luxury-mirror.renderer-svg .mirror-display .led-main {
  display: block !important;
  color: rgba(248, 250, 252, .98) !important;
  font-size: calc(var(--clock-cell-size, 1.9rem) * .48) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 .12rem rgba(255,255,255,.92),
    0 0 .44rem rgba(255,255,255,.52),
    0 0 .8rem rgba(122,150,255,.34) !important;
}

.luxury-mirror.renderer-svg .mirror-display .display-separator {
  display: block !important;
  width: 1px !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .92) !important;
  background: rgba(248, 250, 252, .42) !important;
  box-shadow: 0 0 .24rem rgba(255,255,255,.3) !important;
}

.luxury-mirror.renderer-svg .mirror-display .mirror-icon-weather {
  width: calc(var(--clock-cell-size, 1.9rem) * .78) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .78) !important;
  stroke-width: 2.7 !important;
}

@media (max-width: 740px) {
  .luxury-mirror.renderer-svg .mirror-controls {
    gap: calc(var(--button-cell-size, 1.6rem) * .48) !important;
  }

  .luxury-mirror.renderer-svg .mirror-btn {
    width: calc(var(--button-cell-size, 1.6rem) * 1.18) !important;
    height: calc(var(--button-cell-size, 1.6rem) * 1.18) !important;
    flex-basis: calc(var(--button-cell-size, 1.6rem) * 1.18) !important;
  }

  .luxury-mirror.renderer-svg .mirror-display .led-main {
    font-size: calc(var(--clock-cell-size, 1.9rem) * .4) !important;
  }
}
/* User tweak: round buttons and frameless stacked weather display. */
.luxury-mirror.renderer-svg .mirror-btn {
  border-radius: 50% !important;
}

.luxury-mirror.renderer-svg .mirror-display,
.luxury-mirror.renderer-svg .mirror-display.clock-only,
.luxury-mirror.renderer-svg .mirror-display.clock-weather {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather {
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: calc(var(--clock-cell-size, 1.9rem) * .18) !important;
  row-gap: calc(var(--clock-cell-size, 1.9rem) * .08) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .display-separator {
  display: none !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .mirror-icon-weather {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: calc(var(--clock-cell-size, 1.9rem) * .7) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .7) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .weather-temp {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: calc(var(--clock-cell-size, 1.9rem) * .34) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .led-time {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}
/* User tweak: smaller centered icons inside round mirror buttons. */
.luxury-mirror.renderer-svg .mirror-btn {
  display: grid !important;
  place-items: center !important;
}

.luxury-mirror.renderer-svg .mirror-btn .mirror-icon {
  position: static !important;
  width: 34% !important;
  height: 34% !important;
  margin: auto !important;
  transform: none !important;
  transform-origin: center center !important;
}

.luxury-mirror.renderer-svg .mirror-btn .mirror-icon * {
  vector-effect: non-scaling-stroke !important;
}
/* User tweak: make the full mirror controls block smaller. */
.luxury-mirror.renderer-svg .mirror-controls {
  gap: calc(var(--button-cell-size, 1.6rem) * .42) !important;
}

.luxury-mirror.renderer-svg .mirror-btn {
  width: calc(var(--button-cell-size, 1.6rem) * .9) !important;
  height: calc(var(--button-cell-size, 1.6rem) * .9) !important;
  flex-basis: calc(var(--button-cell-size, 1.6rem) * .9) !important;
  border-width: calc(var(--button-cell-size, 1.6rem) * .04) !important;
}

.luxury-mirror.renderer-svg .mirror-btn .mirror-icon {
  width: 42% !important;
  height: 42% !important;
}

.luxury-mirror.renderer-svg .mirror-display .led-main {
  font-size: calc(var(--clock-cell-size, 1.9rem) * .34) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .weather-temp {
  font-size: calc(var(--clock-cell-size, 1.9rem) * .25) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .mirror-icon-weather {
  width: calc(var(--clock-cell-size, 1.9rem) * .5) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .5) !important;
}
/* User tweak: smaller buttons, original icon proportions inside them. */
.luxury-mirror.renderer-svg .mirror-controls {
  gap: calc(var(--button-cell-size, 1.6rem) * .36) !important;
}

.luxury-mirror.renderer-svg .mirror-btn {
  width: calc(var(--button-cell-size, 1.6rem) * .72) !important;
  height: calc(var(--button-cell-size, 1.6rem) * .72) !important;
  flex-basis: calc(var(--button-cell-size, 1.6rem) * .72) !important;
}

.luxury-mirror.renderer-svg .mirror-btn .mirror-icon {
  width: 68% !important;
  height: 68% !important;
}
/* User tweak: thinner strokes inside mirror buttons. */
.luxury-mirror.renderer-svg .mirror-btn .mirror-icon {
  stroke-width: 1.85 !important;
  filter:
    drop-shadow(0 0 .08rem rgba(255,255,255,.82))
    drop-shadow(0 0 .24rem rgba(255,255,255,.38)) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy .mirror-icon {
  stroke-width: 1.85 !important;
  filter:
    drop-shadow(0 0 .08rem rgba(210,239,255,.85))
    drop-shadow(0 0 .28rem rgba(91,184,255,.48)) !important;
}
/* User tweak: extra thin and exactly centered icons. */
.luxury-mirror.renderer-svg .mirror-btn {
  position: relative !important;
}

.luxury-mirror.renderer-svg .mirror-btn .mirror-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 66% !important;
  height: 66% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  stroke-width: 1.25 !important;
  filter:
    drop-shadow(0 0 .06rem rgba(255,255,255,.72))
    drop-shadow(0 0 .18rem rgba(255,255,255,.28)) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy .mirror-icon {
  stroke-width: 1.25 !important;
  filter:
    drop-shadow(0 0 .06rem rgba(210,239,255,.78))
    drop-shadow(0 0 .22rem rgba(91,184,255,.38)) !important;
}
/* User tweak: standalone power button size matches grouped mirror buttons. */
.luxury-mirror.renderer-svg .switch-dot {
  width: calc(var(--button-cell-size, 1.6rem) * .72) !important;
  height: calc(var(--button-cell-size, 1.6rem) * .72) !important;
}
/* User tweak: grouped power matches standalone style; controls block half-size. */
.luxury-mirror.renderer-svg .mirror-controls {
  gap: calc(var(--button-cell-size, 1.6rem) * .18) !important;
}

.luxury-mirror.renderer-svg .mirror-btn {
  width: calc(var(--button-cell-size, 1.6rem) * .36) !important;
  height: calc(var(--button-cell-size, 1.6rem) * .36) !important;
  flex-basis: calc(var(--button-cell-size, 1.6rem) * .36) !important;
  border-width: calc(var(--button-cell-size, 1.6rem) * .022) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy .mirror-icon-power {
  display: none !important;
}

.luxury-mirror.renderer-svg .main-switch-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 88% !important;
  height: 88% !important;
  border-radius: 50% !important;
  border: calc(var(--button-cell-size, 1.6rem) * .052) solid rgba(126, 237, 255, .94) !important;
  background: rgba(190, 196, 198, .10) !important;
  box-shadow:
    0 0 .18rem rgba(117,239,255,.62),
    0 0 .48rem rgba(93,180,255,.42) !important;
  transform: translate(-50%, -50%) !important;
}

.luxury-mirror.renderer-svg .main-switch-copy::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 58% !important;
  height: 58% !important;
  transform: translate(-50%, -50%) !important;
  background:
    linear-gradient(rgba(126,237,255,.98), rgba(126,237,255,.98)) 50% 0 / 16% 48% no-repeat,
    conic-gradient(from 42deg, rgba(126,237,255,.98) 0 278deg, transparent 278deg 360deg) center 56% / 100% 100% no-repeat !important;
  -webkit-mask:
    linear-gradient(#000 0 0) 50% 0 / 16% 48% no-repeat,
    radial-gradient(circle at 50% 56%, transparent 0 38%, #000 39% 54%, transparent 55%) !important;
  mask:
    linear-gradient(#000 0 0) 50% 0 / 16% 48% no-repeat,
    radial-gradient(circle at 50% 56%, transparent 0 38%, #000 39% 54%, transparent 55%) !important;
  box-shadow:
    0 0 .1rem rgba(126,237,255,.62),
    0 0 .28rem rgba(93,180,255,.36) !important;
}

.luxury-mirror.renderer-svg .mirror-btn .mirror-icon {
  width: 58% !important;
  height: 58% !important;
  stroke-width: 1 !important;
}

.luxury-mirror.renderer-svg .mirror-display .led-main {
  font-size: calc(var(--clock-cell-size, 1.9rem) * .22) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .weather-temp {
  font-size: calc(var(--clock-cell-size, 1.9rem) * .16) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .mirror-icon-weather {
  width: calc(var(--clock-cell-size, 1.9rem) * .32) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .32) !important;
  stroke-width: 1.6 !important;
}
/* User tweak: 15px mirror buttons and tighter clock/weather spacing. */
.luxury-mirror.renderer-svg .mirror-controls {
  gap: calc(var(--button-cell-size, 1.6rem) * .12) !important;
}

.luxury-mirror.renderer-svg .mirror-btn,
.luxury-mirror.renderer-svg .switch-dot {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
}

.luxury-mirror.renderer-svg .mirror-display {
  margin-left: calc(var(--button-cell-size, 1.6rem) * -.08) !important;
}
/* User tweak: slightly larger mirror controls. */
.luxury-mirror.renderer-svg .mirror-btn,
.luxury-mirror.renderer-svg .switch-dot {
  width: 17px !important;
  height: 17px !important;
  flex-basis: 17px !important;
}

.luxury-mirror.renderer-svg .mirror-display .led-main {
  font-size: calc(var(--clock-cell-size, 1.9rem) * .25) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .weather-temp {
  font-size: calc(var(--clock-cell-size, 1.9rem) * .18) !important;
}

.luxury-mirror.renderer-svg .mirror-display.clock-weather .mirror-icon-weather {
  width: calc(var(--clock-cell-size, 1.9rem) * .36) !important;
  height: calc(var(--clock-cell-size, 1.9rem) * .36) !important;
}
/* User tweak: inactive mirror control items must not render inside the shared block. */
.luxury-mirror.renderer-svg .mirror-btn.hidden,
.luxury-mirror.renderer-svg .option-switch.hidden {
  display: none !important;
}

.luxury-mirror.renderer-svg .mirror-display:not(.visible) {
  display: none !important;
}
/* User tweak: make the silver frame read as brushed aluminum. */
.luxury-mirror.frame-silver {
  border-color: #b8c0c7 !important;
  background:
    linear-gradient(135deg,
      #f3f6f8 0%,
      #aeb6bd 16%,
      #6d767e 34%,
      #dce1e4 52%,
      #8c959d 70%,
      #f8fafb 86%,
      #747d85 100%) !important;
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 0 2px rgba(68,76,84,.28),
    0 0 1.8rem rgba(var(--glow-color), .22),
    0 0 6rem rgba(var(--glow-color), calc(var(--glow-alpha) * .48)) !important;
}

.luxury-mirror.renderer-svg.frame-silver:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-silver.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-silver.front-only #svgShapeEdge {
  stroke: url("#svgShapeAluminumFrame") !important;
  filter:
    drop-shadow(0 .1rem .12rem rgba(0,0,0,.58))
    drop-shadow(0 -.04rem .05rem rgba(255,255,255,.52))
    drop-shadow(0 0 .18rem rgba(255,255,255,.18)) !important;
}

.frame-silver {
  color: #aeb6bd !important;
  background:
    linear-gradient(135deg,
      #f3f6f8 0%,
      #aeb6bd 18%,
      #6d767e 36%,
      #dce1e4 54%,
      #8c959d 72%,
      #f8fafb 88%,
      #747d85 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    inset 0 0 0 2px rgba(64,72,80,.26),
    0 .35rem .7rem rgba(0,0,0,.16) !important;
}
/* User tweak: make gold and black frames read as real metal profiles. */
.luxury-mirror.frame-gold {
  border-color: #e7b94f !important;
  background:
    linear-gradient(135deg,
      #fff1b8 0%,
      #d8a742 16%,
      #8c5f16 34%,
      #f2cc65 52%,
      #b67a22 70%,
      #ffe6a0 86%,
      #8b5b17 100%) !important;
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(255,246,199,.78),
    inset 0 0 0 2px rgba(94,57,10,.28),
    0 0 1.8rem rgba(var(--glow-color), .22),
    0 0 6rem rgba(var(--glow-color), calc(var(--glow-alpha) * .48)) !important;
}

.luxury-mirror.frame-black {
  border-color: #17191b !important;
  background:
    linear-gradient(135deg,
      #3a3d3f 0%,
      #181a1c 18%,
      #050607 38%,
      #2a2d30 55%,
      #0b0c0e 74%,
      #44484b 90%,
      #090a0b 100%) !important;
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.76),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 0 2px rgba(0,0,0,.7),
    0 0 1.45rem rgba(var(--glow-color), .18),
    0 0 5rem rgba(var(--glow-color), calc(var(--glow-alpha) * .36)) !important;
}

.luxury-mirror.renderer-svg.frame-gold:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-gold.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-gold.front-only #svgShapeEdge {
  stroke: url("#svgShapeGoldFrame") !important;
  filter:
    drop-shadow(0 .1rem .12rem rgba(0,0,0,.56))
    drop-shadow(0 -.04rem .05rem rgba(255,235,165,.5))
    drop-shadow(0 0 .2rem rgba(255,212,112,.18)) !important;
}

.luxury-mirror.renderer-svg.frame-black:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-black.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-black.front-only #svgShapeEdge {
  stroke: url("#svgShapeBlackFrame") !important;
  filter:
    drop-shadow(0 .12rem .14rem rgba(0,0,0,.72))
    drop-shadow(0 -.035rem .04rem rgba(255,255,255,.16))
    drop-shadow(0 0 .12rem rgba(255,255,255,.08)) !important;
}

.frame-gold {
  color: #d8a742 !important;
  background:
    linear-gradient(135deg,
      #fff1b8 0%,
      #d8a742 18%,
      #8c5f16 36%,
      #f2cc65 54%,
      #b67a22 72%,
      #ffe6a0 88%,
      #8b5b17 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,246,199,.82),
    inset 0 0 0 2px rgba(94,57,10,.26),
    0 .35rem .7rem rgba(0,0,0,.16) !important;
}

.frame-black {
  color: #17191b !important;
  background:
    linear-gradient(135deg,
      #3a3d3f 0%,
      #181a1c 18%,
      #050607 38%,
      #2a2d30 55%,
      #0b0c0e 74%,
      #44484b 90%,
      #090a0b 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 0 0 2px rgba(0,0,0,.7),
    0 .35rem .7rem rgba(0,0,0,.2) !important;
}
/* User tweak: metal frame swatches should match the real frame preview. */
.frame-swatch.frame-silver,
.frame-swatch.frame-gold,
.frame-swatch.frame-black {
  box-shadow: none !important;
}

.frame-swatch.frame-silver::after,
.frame-swatch.frame-gold::after,
.frame-swatch.frame-black::after {
  inset: .42rem !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.42) 0 26%, transparent 27%),
    linear-gradient(90deg, #6d747a, #1b1d1f 58%, #08090a) !important;
}

.frame-swatch.frame-gold::after {
  background:
    linear-gradient(115deg, rgba(255,246,199,.5) 0 26%, transparent 27%),
    linear-gradient(90deg, #8c5f16, #3f2506 58%, #1b0f02) !important;
}

.frame-swatch.frame-silver {
  background:
    linear-gradient(135deg, #f3f6f8 0%, #aeb6bd 18%, #6d767e 36%, #dce1e4 54%, #8c959d 72%, #f8fafb 88%, #747d85 100%) !important;
}

.frame-swatch.frame-gold {
  background:
    linear-gradient(135deg, #fff1b8 0%, #d8a742 18%, #8c5f16 36%, #f2cc65 54%, #b67a22 72%, #ffe6a0 88%, #8b5b17 100%) !important;
}

.frame-swatch.frame-black {
  background:
    linear-gradient(135deg, #3a3d3f 0%, #181a1c 18%, #050607 38%, #2a2d30 55%, #0b0c0e 74%, #44484b 90%, #090a0b 100%) !important;
}
/* User tweak: remove backlight-like halo from physical frames. */
.luxury-mirror.has-frame {
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.62) !important;
}

.luxury-mirror.frame-silver {
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 0 2px rgba(68,76,84,.28) !important;
}

.luxury-mirror.frame-gold {
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,246,199,.78),
    inset 0 0 0 2px rgba(94,57,10,.28) !important;
}

.luxury-mirror.frame-black {
  box-shadow:
    0 1.45rem 2.55rem rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 0 2px rgba(0,0,0,.7) !important;
}

.luxury-mirror.renderer-svg.frame-silver:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-silver.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-silver.front-only #svgShapeEdge {
  filter:
    drop-shadow(0 .08rem .1rem rgba(0,0,0,.55))
    drop-shadow(0 -.035rem .035rem rgba(255,255,255,.42)) !important;
}

.luxury-mirror.renderer-svg.frame-gold:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-gold.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-gold.front-only #svgShapeEdge {
  filter:
    drop-shadow(0 .08rem .1rem rgba(0,0,0,.55))
    drop-shadow(0 -.035rem .035rem rgba(255,235,165,.38)) !important;
}

.luxury-mirror.renderer-svg.frame-black:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-black.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.frame-black.front-only #svgShapeEdge {
  filter:
    drop-shadow(0 .1rem .12rem rgba(0,0,0,.68))
    drop-shadow(0 -.025rem .03rem rgba(255,255,255,.12)) !important;
}
/* User tweak: remove remaining vertical glow from frame SVG stroke. */
.luxury-mirror.renderer-svg.has-frame:not(.edge-light) #svgShapeEdge,
.luxury-mirror.renderer-svg.has-frame.light-off #svgShapeEdge,
.luxury-mirror.renderer-svg.has-frame.front-only #svgShapeEdge {
  filter: none !important;
}

.luxury-mirror.renderer-svg.has-frame:not(.edge-light) .mirror-glow,
.luxury-mirror.renderer-svg.has-frame.light-off .mirror-glow,
.luxury-mirror.renderer-svg.has-frame.front-only .mirror-glow {
  opacity: 0 !important;
}
/* User tweak: ordinary rectangle corners stay sharp, including inner lighting. */
.luxury-mirror.renderer-svg.shape-rectangle #svgShapeBack,
.luxury-mirror.renderer-svg.shape-rectangle #svgShapeGlass,
.luxury-mirror.renderer-svg.shape-rectangle #svgShapeReflection,
.luxury-mirror.renderer-svg.shape-rectangle #svgShapeEdge,
.luxury-mirror.renderer-svg.shape-rectangle #svgShapeFront {
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
  stroke-miterlimit: 10 !important;
}
/* User tweak: inner front lighting uses sharp joins on every shape. */
.luxury-mirror.renderer-svg #svgShapeFront {
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
  stroke-miterlimit: 10 !important;
}
/* User tweak: stronger edge light and cosmetic mirror light. */
.luxury-mirror.renderer-svg.edge-light #svgShapeEdge {
  stroke-width: var(--preview-edge-led-width, 9px) !important;
}

.luxury-mirror.renderer-svg .cosmetic-dot {
  border-width: 3px !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow:
    0 0 .34rem rgba(255,255,255,.72),
    0 0 1.1rem rgba(var(--glow-color), .78),
    0 0 1.8rem rgba(var(--glow-color), .34) !important;
}
/* Workshop-only pseudo AR preview. */
body.ar-open {
  overflow: hidden;
}

.ar-modal[hidden] {
  display: none !important;
}

.ar-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #050607;
  color: #fff;
}

.ar-view {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent),
    #111;
  touch-action: none;
}

.ar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.ar-mirror-stage {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(62vw, 46vh);
  max-width: 84vw;
  min-width: 8rem;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 1.2rem 1.6rem rgba(0,0,0,.42));
}

.ar-mirror-stage:active {
  cursor: grabbing;
}

.ar-mirror-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ar-mirror-svg path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

#arGlassPath {
  fill: url("#arGlassGradient");
  opacity: .76;
  stroke: rgba(245,248,252,.72);
  stroke-width: 1px;
}

#arFramePath {
  fill: none;
  opacity: 0;
  stroke: var(--ar-frame-stroke);
  stroke-width: var(--ar-frame-width, 5px);
}

.ar-mirror-svg.ar-has-frame #arFramePath {
  opacity: 1;
}

#arBackPath {
  fill: none;
  opacity: 0;
  stroke: var(--ar-led-color, #f4f0e5);
  stroke-width: 18px;
  filter:
    drop-shadow(0 0 1.1rem var(--ar-led-color, #f4f0e5))
    drop-shadow(0 0 2.4rem var(--ar-led-color, #f4f0e5));
}

.ar-mirror-svg.ar-back-on #arBackPath {
  opacity: .55;
}

#arFrontPath {
  fill: none;
  opacity: 0;
  stroke: var(--ar-led-color, #f4f0e5);
  stroke-width: 9px;
  filter:
    drop-shadow(0 0 .5rem var(--ar-led-color, #f4f0e5))
    drop-shadow(0 0 1.2rem var(--ar-led-color, #f4f0e5));
}

.ar-mirror-svg.ar-front-on #arFrontPath {
  opacity: .95;
}

.ar-mirror-svg.ar-edge-on #arFramePath {
  opacity: 1;
  stroke: var(--ar-led-color, #f4f0e5);
  stroke-width: var(--ar-edge-width, 9px);
  filter:
    drop-shadow(0 0 .65rem var(--ar-led-color, #f4f0e5))
    drop-shadow(0 0 1.35rem var(--ar-led-color, #f4f0e5));
}

.ar-message {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: .6rem .85rem;
  border-radius: .8rem;
  background: rgba(4, 7, 12, .72);
  color: rgba(255,255,255,.9);
  font-size: .9rem;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.ar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem max(1rem, env(safe-area-inset-left)) calc(.9rem + env(safe-area-inset-bottom));
  background: rgba(248,250,252,.98);
  color: #242424;
  box-shadow: 0 -1rem 2rem rgba(0,0,0,.28);
}

.ar-scale-label {
  display: grid;
  gap: .35rem;
  min-width: min(16rem, 52vw);
  font-size: .82rem;
  font-weight: 800;
  color: #334155;
}

.ar-scale-label input {
  width: 100%;
}

#arPreviewButton {
  width: 100%;
  margin-top: .8rem;
}

@media (max-width: 740px) {
  .ar-mirror-stage {
    width: 68vw;
  }

  .ar-toolbar {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .ar-scale-label {
    min-width: 100%;
  }
}

.entry-header{
	display: none;
}

.separate-containers .inside-article{
	padding-left: 0px;
	padding-right: 0px;
}

@media only screen and (max-width: 600px) {
	.entry-content {
		padding-top: 0px !important;
	}
}

.form-section.price-admin{
	display: none !important;
}

.add-to-cart-custom-mirror{
	width: 100%;
	height: 42px;
	font-weight: 700 !important;
	border-radius: 5px;
	font-size: 13px;
	text-transform: uppercase;
	background: rgb(215, 235, 245);
	color: #014b8f;
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
	margin-top: 10px;
	transition: all .3s ease-out;
}
.add-to-cart-custom-mirror:hover{
	background: #014b8f;
	color: #ffffff;
}

#previewButton{
	width: 100%;
	height: 42px;
	font-weight: 700 !important;
	border-radius: 5px;
	font-size: 13px;
	text-transform: uppercase;
	background: #014b8f;
	color: #ffffff;
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
	margin-top: 10px;
	transition: all .3s ease-out;
}

@media only screen and (min-width: 741px) {
	#previewButton{
		display: none !important;
	}
}

.line-item.line-total strong{
	color: rgb(225,74,92);
}

select, input[type="text"]{
	border-color: rgba(0, 0, 0, 0.1) !important;
	color: #000000 !important;
	font-weight: 500;
}

select:focus {
	color: #000000 !important;
}
@media only screen and (min-width: 741px) {
	.showcase {
		min-height: calc(100vh - 135px);
		max-height: calc(100vh - 135px);
		height: calc(100vh - 135px);
	}
	.app-shell {
		min-height: calc(100vh - 135px);
		max-height: calc(100vh - 135px);
		height: calc(100vh - 135px);
	}
	.panel{
		min-height: calc(100vh - 135px);
		max-height: calc(100vh - 135px);
		height: calc(100vh - 135px);
		padding-bottom: 0px;
	}
	.panel-head{
		padding-top: 10px;
    	padding-bottom: 10px;
		box-shadow: none;
	}
	.result-card{
		padding-bottom: 15px;
		padding-top: 15px;
	}
	
	.luxury-mirror.renderer-svg .mirror-glass *, .luxury-mirror.renderer-svg .mirror-glass{
		transform: scale(1);
	}
	
	.luxury-mirror.renderer-svg .svg-shape-mirror{
		transform: scale(1);
	}
	.preview-card {
		top: 0% !important;
		transform: translateX(-50%) scale(.8);
	}
	
	#calculatorForm{
		padding-bottom: 35px !important;
	}
	
	#breakdown {
    	gap: 3px;
	}
}

.panel{
	background: #f6f5f8 !important;
}

.result-card{
	border-top: none !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

.result-card h3{
	margin-bottom: 10px;
}

.line-total {
    margin-top: 0px;
    padding-top: 0px;
    border-top: none;
    color: #242424;
}

.panel-head{
	border-bottom: none;
	box-shadow: none;
}

.added_to_cart.wc-forward{
	display: none !important;
}

@media only screen and (max-width: 740px) {
	.panel{
		padding: 0px;
	}
	.panel-head{
		padding-left: 15px !important;
		padding-right: 15px !important;
		background-color: #ffffff !important;
	}
	form#calculatorForm {
		padding-bottom: 0;
		padding-top: 0;
        padding-left: 15px;
        padding-right: 15px;
		gap: 0px !important;
	}
	form#calculatorForm .form-section{
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.visual-choice-grid {
		margin-bottom: 0px;
	}
	select, input[type="text"]{
		min-height: 38px;
		height: 38px;
	}
	.result-card{
		border-top: none !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		padding-bottom: 50px !important;
	}
	
	form#calculatorForm .form-section:last-child{
		border-bottom: none !important;
	}
	/*.preview-card .luxury-mirror.shape-semicircle, .preview-card .luxury-mirror.shape-threeQuarter{
		transform: scale(.58) translate(-20%) !important
	}*/
	
	.preview-card {
		    place-items: center;
    		justify-content: center;
    		align-items: center;
	}
}