:root {
  --robeia-ink: #111111;
  --robeia-black: #050505;
  --robeia-charcoal: #181818;
  --robeia-burgundy: #2a060b;
  --robeia-oxblood: #290c13;
  --robeia-deep-wine: #2a060b;

  --robeia-page-bg: #e6e4df;
  --robeia-paper: #f7f5f1;
  --robeia-white: #f7f5f1;
  --robeia-cream: #efebe5;
  --robeia-milk: #eeebe5;
  --robeia-panel: #efebe5;
  --robeia-panel-deep: #d9d4cc;

  --robeia-border: rgb(17 17 17 / 0.3);
  --robeia-border-strong: rgb(17 17 17 / 0.5);
  --robeia-text-soft: rgb(17 17 17 / 0.8);
  --robeia-text-faint: rgb(17 17 17 / 0.6);

  --robeia-shadow-soft: 0 18px 54px rgb(17 17 17 / 0.055);
  --robeia-shadow-editorial: 0 30px 90px rgb(17 17 17 / 0.12);
  --robeia-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-serif: 'Instrument Serif', Didot, Georgia, serif;
  --font-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #f8f9fa;
  color: var(--robeia-ink);
  font-family: var(--font-sans), system-ui, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border-radius: 0;
}

/* ---------- Static base + copied mirror page CSS ---------- */

.robeia-mirror-page {
  min-height: 100vh;

  background-image: url("../img/site/colour-mirror-background.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  color: var(--robeia-ink);
}

.robeia-mirror-header {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(0.9rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--robeia-border);
}

.robeia-mirror-logo {
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.25rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.075em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.42rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-nav a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  font-size: 0.72rem;
  color: #000;
  transition:
    background 280ms var(--robeia-ease),
    color 280ms var(--robeia-ease),
    border-color 280ms var(--robeia-ease),
    transform 280ms var(--robeia-ease);
}

.robeia-mirror-nav a::before {
  content: "←";
  margin-right: 0.6rem;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.robeia-mirror-nav a:hover {
  color: var(--deep, #5a1a1e);
  transform: translateX(-3px);
}

.robeia-mirror-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(0.7rem, 1.6vw, 1.25rem) clamp(0.9rem, 3vw, 2.25rem)
    clamp(1.2rem, 2.5vw, 2rem);
}

.robeia-mirror-intro {
  display: grid;
  gap: 0.65rem;
  max-width: 42rem;
  margin-bottom: clamp(0.6rem, 1.4vw, 1rem);
}

.robeia-mirror-intro h1 {
  max-width: 15ch;
  margin: 0;

  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(48px, 4.8vw, 78px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;

  color: var(--robeia-deep-wine);
}

.robeia-mirror-intro p:not(.robeia-eyebrow) {
  max-width: 48ch;
  margin: 18px 0 0;

  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0;
  text-wrap: pretty;

  color: #56483f;
}

.robeia-mirror-workspace {
  display: grid;
  gap: clamp(0.8rem, 2vw, 1.25rem);
  align-items: start;
}

.robeia-mirror-side-panel {
  display: grid;
  gap: 0.85rem;
}

.robeia-mirror-panel-block {
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.95rem;
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-panel-label {
  margin: 0 0 0.65rem;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-upload,
.robeia-mirror-plain-button,
.robeia-mirror-save-button,
.robeia-mirror-drape-link {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-border-strong);
  background: transparent;
  padding: 0 1rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-ink);
  cursor: pointer;
  transition:
    background 320ms var(--robeia-ease),
    color 320ms var(--robeia-ease),
    border-color 320ms var(--robeia-ease),
    transform 320ms var(--robeia-ease);
}

.robeia-mirror-upload {
  border-color: var(--robeia-burgundy);
  background: var(--robeia-burgundy);
  color: var(--robeia-paper);
}

.robeia-mirror-upload input {
  display: none;
}

.robeia-mirror-upload:hover,
.robeia-mirror-plain-button:hover,
.robeia-mirror-save-button:hover,
.robeia-mirror-drape-link:hover {
  transform: translateY(-1px);
}

.robeia-mirror-plain-button:hover,
.robeia-mirror-save-button:hover,
.robeia-mirror-drape-link:hover {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-file-name {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--robeia-text-soft);
  word-break: break-word;
}

.robeia-mirror-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--robeia-border);
}

.robeia-mirror-segmented button {
  min-height: 2rem;
  border: 0;
  border-right: 1px solid var(--robeia-border);
  background: transparent;
  padding: 0 0.55rem;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--robeia-text-soft);
  cursor: pointer;
}

.robeia-mirror-segmented button:last-child {
  border-right: 0;
}

.robeia-mirror-segmented button.is-active {
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-slot-selector {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.robeia-mirror-slot-selector button {
  position: relative;
  display: grid;
  min-height: 2.1rem;
  place-items: center;
  background: var(--slot-colour);
  color: var(--robeia-ink);
}

.robeia-mirror-slot-selector button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.1rem;
  padding: 0 0.55rem;

  color: var(--robeia-ink);
  backdrop-filter: blur(10px);
}

.robeia-mirror-slot-selector button.is-active {
  background: var(--slot-colour);
  box-shadow: inset 0 0 0 0.7px rgba(5, 5, 5, 0.75);
}

.robeia-mirror-slot-selector button.is-active span {
  background: rgba(15, 14, 14, 0.88);
  color: rgba(243, 237, 237, 0.88);
}

.robeia-mirror-save-button,
.robeia-mirror-drape-link {
  width: 100%;
  margin-top: 0.35rem;
}

.robeia-mirror-selected-info {
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.85rem;
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-selected-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
}

.robeia-mirror-selected-chip {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgb(255 255 255 / 0.72);
}

.robeia-mirror-selected-info h2 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-selected-info p {
  margin: 0.16rem 0 0;
  font-size: 0.46rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-selected-info span {
  display: block;
  margin-top: 0.14rem;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(74 23 36 / 0.62);
}

.robeia-mirror-selected-info small {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--robeia-text-soft);
}

.robeia-mirror-drape-link {
  border-color: var(--robeia-burgundy);
  background: var(--robeia-burgundy);
  color: var(--robeia-paper);
}

.robeia-mirror-main {
  min-width: 0;
}

.robeia-mirror-preview {
  position: relative;
  width: max(80%, 34rem);
  height: clamp(16rem, 42vh, 24rem);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.16rem;
  background: var(--mirror-active);
  display: flex;
  align-items: center;
  justify-content: center;
}

.robeia-mirror-preview-single {
  background:
    radial-gradient(
      circle at 50% 15%,
      rgb(255 255 255 / 0.52),
      transparent 34%
    ),
    var(--mirror-active);
}

.robeia-mirror-preview-side_by_side {
  background: linear-gradient(
    90deg,
    var(--mirror-primary) 0%,
    var(--mirror-primary) 50%,
    var(--mirror-secondary) 50%,
    var(--mirror-secondary) 100%
  );
}

.robeia-mirror-preview-alternate {
  background:
    radial-gradient(
      circle at 50% 15%,
      rgb(255 255 255 / 0.52),
      transparent 34%
    ),
    var(--mirror-active);
  transition: background 420ms var(--robeia-ease);
}

.robeia-mirror-preview img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.robeia-mirror-empty-state {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  padding: 1.2rem;
  text-align: center;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-empty-state p {
  margin: 0;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.robeia-mirror-empty-state span {
  max-width: 18rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--robeia-text-soft);
}

.robeia-mirror-split-labels {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
}

.robeia-mirror-split-labels span {
  background: rgb(250 246 240 / 0.88);
  padding: 0.35rem 0.55rem;
  font-size: 0.46rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-ink);
  backdrop-filter: blur(12px);
}
.robeia-mirror-recent {
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.75rem;
}

.robeia-mirror-recent p {
  margin: 0 0 0.55rem;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-recent div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.4rem, 1fr));
  gap: 0.35rem;
}

.robeia-mirror-recent button {
  width: 100%;
  height: 1.45rem;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 0;
  cursor: pointer;
}

.robeia-mirror-tabs {
  margin-top: 1rem;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  box-shadow: var(--robeia-shadow-soft);
}

.robeia-mirror-tab-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--robeia-border);
}

.robeia-mirror-tab-list button {
  min-height: 2.2rem;
  border: 0;
  border-right: 1px solid var(--robeia-border);
  background: transparent;
  padding: 0 0.75rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-text-soft);
  cursor: pointer;
}

.robeia-mirror-tab-list button:last-child {
  border-right: 0;
}

.robeia-mirror-tab-list button.is-active {
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-tab-panel {
  padding: 0.95rem;
}

.robeia-mirror-filters {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.95rem;
}

.robeia-mirror-filters input,
.robeia-mirror-filters select {
  min-height: 2rem;
  width: 100%;
  border: 1px solid var(--robeia-border);
  background: #ffffff;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  color: var(--robeia-ink);
  outline: none;
}

.robeia-mirror-filters input::placeholder {
  color: var(--robeia-text-faint);
}

.robeia-mirror-filters input:focus,
.robeia-mirror-filters select:focus {
  border-color: rgb(74 23 36 / 0.42);
}

.robeia-mirror-family-list {
  display: grid;
  gap: 0.75rem;
}

.robeia-mirror-family-section {
  display: grid;
  gap: 0.35rem;
}

.robeia-mirror-family-section > h3 {
  margin: 0;
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}
.robeia-mirror-colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.7rem, 1fr));
  gap: 0.4rem;
}

.robeia-mirror-colour-card {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  gap: 0.18rem;
  align-items: center;
  height: 1.25rem;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.robeia-mirror-colour-swatch {
  width: 100%;
  height: 1.2rem;
  background: transparent;
  cursor: pointer;
}

.robeia-mirror-colour-card.is-selected {
  outline: 1px solid rgb(15, 14, 14);
  outline-offset: 0.4px;
}
.robeia-mirror-heart {
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--robeia-ink);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 220ms var(--robeia-ease),
    background 220ms var(--robeia-ease),
    border-color 220ms var(--robeia-ease);
}

.robeia-mirror-heart-symbol {
  display: block;
  transform: translateY(-0.02rem);
  font-size: 0.82rem;
  line-height: 1;
}

.robeia-mirror-heart:hover {
  transform: translateY(-2px);
}

.robeia-mirror-heart.is-saved .robeia-mirror-heart-symbol {
  font-size: 0.72rem;
  animation: robeia-heart-small-pop 320ms var(--robeia-ease);
}

@keyframes robeia-heart-small-pop {
  0% {
    transform: scale(0.75);
  }

  55% {
    transform: scale(1.58);
  }

  100% {
    transform: scale(1);
  }
}

.robeia-mirror-empty-copy {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--robeia-text-soft);
}

.robeia-mirror-direction-card {
  display: grid;
  gap: 0.9rem;
}

.robeia-mirror-direction-card h2 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-direction-card > p:not(.robeia-mirror-panel-label) {
  max-width: 36rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--robeia-text-soft);
}

.robeia-mirror-direction-columns {
  display: grid;
  gap: 0.65rem;
}

.robeia-mirror-direction-columns div {
  border-top: 1px solid var(--robeia-border);
  padding-top: 0.75rem;
}

.robeia-mirror-direction-columns h3 {
  margin: 0 0 0.45rem;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-direction-columns span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--robeia-text-soft);
}

@media (min-width: 720px) {
  .robeia-mirror-filters {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .robeia-mirror-direction-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .robeia-mirror-workspace {
    grid-template-columns: 18rem minmax(0, 1fr);
  }

  .robeia-mirror-side-panel {
    position: sticky;
    top: 1rem;
  }
}

@media (max-width: 640px) {
  .robeia-mirror-header {
    min-height: 3.75rem;
  }

  .robeia-mirror-nav {
    font-size: 0.46rem;
    letter-spacing: 0.16em;
  }

  .robeia-mirror-shell {
    padding-top: 2rem;
  }

  .robeia-mirror-intro h1 {
    font-size: clamp(2.25rem, 12vw, 3.2rem);
  }

  .robeia-mirror-segmented {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-segmented button {
    border-right: 0;
    border-bottom: 1px solid var(--robeia-border);
  }

  .robeia-mirror-segmented button:last-child {
    border-bottom: 0;
  }

  .robeia-mirror-preview {
    min-height: 18rem;
  }

  .robeia-mirror-tab-list {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-tab-list button {
    border-right: 0;
    border-bottom: 1px solid var(--robeia-border);
  }

  .robeia-mirror-tab-list button:last-child {
    border-bottom: 0;
  }

  .robeia-mirror-colour-card {
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.35rem;
  }

  .robeia-mirror-colour-swatch {
    height: 2.15rem;
  }
}

.robeia-mirror-shop-card {
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.85rem;
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-shop-select {
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--robeia-border);
  background: #ffffff;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  color: var(--robeia-ink);
  outline: none;
  text-transform: capitalize;
}

.robeia-mirror-shop-select-row {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 0.45rem;
}

@media (max-width: 640px) {
  .robeia-mirror-shop-select-row {
    grid-template-columns: 1fr;
  }
}

.robeia-mirror-shop-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.robeia-mirror-shop-links a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-border-strong);
  padding: 0 0.55rem;
  font-size: 0.48rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--robeia-ink);
}

.robeia-mirror-shop-links a:hover {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-shop-card small {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--robeia-text-soft);
}

.robeia-mirror-shop-group {
  display: grid;
  gap: 0.4rem;
  border-top: 1px solid var(--robeia-border);
  padding-top: 0.65rem;
}

.robeia-mirror-shop-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.robeia-mirror-shop-group p {
  margin: 0;
  font-size: 0.5rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

/* ---------- Mirror workspace: colour tools left, portrait right ---------- */

.robeia-mirror-workspace {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.45fr);
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  align-items: start;
}

.robeia-mirror-left-tools {
  min-width: 0;
}

.robeia-mirror-main {
  min-width: 0;
  display: grid;
  gap: clamp(0.65rem, 1.4vw, 0.95rem);
}

/* ---------- Left-side colour bank / favourites / direction ---------- */

.robeia-mirror-tabs {
  margin-top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(74svh, 46rem);
  overflow: hidden;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.32rem;
  background: rgb(250 246 240 / 0.88);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.robeia-mirror-tab-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.34rem;
  border-bottom: 1px solid rgb(17 17 17 / 0.35);
  padding: 0.85rem 1rem;
  background: transparent;
}

.robeia-mirror-tab-list button {
  display: inline-flex;
  min-width: 0;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.18rem;
  background: #ffffff;
  padding: 0 0.55rem;
  overflow: hidden;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.54rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(17 17 17 / 0.7);
  cursor: pointer;
}

.robeia-mirror-tab-list button:last-child {
  border-right: 1px solid rgb(17 17 17 / 0.35);
}

.robeia-mirror-tab-list button.is-active {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-tab-panel {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.robeia-mirror-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

.robeia-mirror-filters input,
.robeia-mirror-filters select {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.18rem;
  background-color: #ffffff;
  padding: 0 0.75rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgb(17 17 17 / 0.72);
  outline: none;
}

.robeia-mirror-filters input {
  text-transform: none;
}

.robeia-mirror-filters input::placeholder {
  color: rgb(17 17 17 / 0.38);
}

.robeia-mirror-filters select {
  appearance: none;
  padding-right: 2rem;
  text-transform: uppercase;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(17 17 17 / 0.7) 50%),
    linear-gradient(135deg, rgb(17 17 17 / 0.7) 50%, transparent 50%);
  background-position:
    calc(100% - 0.9rem) 50%,
    calc(100% - 0.65rem) 50%;
  background-size:
    0.28rem 0.28rem,
    0.28rem 0.28rem;
  background-repeat: no-repeat;
}

.robeia-mirror-filters input:focus,
.robeia-mirror-filters select:focus {
  border-color: var(--robeia-ink);
}

.robeia-mirror-family-list {
  display: grid;
  gap: 0.9rem;
}

.robeia-mirror-family-section {
  display: grid;
  gap: 0.42rem;
}

.robeia-mirror-family-section > h3 {
  margin: 0;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.54rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.5);
}

.robeia-mirror-colour-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.34rem;
}

.robeia-mirror-colour-card {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.16rem;
  align-items: center;
  height: 1.18rem;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.robeia-mirror-colour-swatch {
  width: 100%;
  height: 1.12rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.robeia-mirror-colour-card.is-selected {
  outline: 1px solid var(--robeia-ink);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .robeia-mirror-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.7rem;
  }

  .robeia-mirror-tab-list button {
    min-height: 2.2rem;
    font-size: 0.46rem;
    letter-spacing: 0.1em;
  }

  .robeia-mirror-tab-panel {
    padding: 0.7rem;
  }

  .robeia-mirror-filters input,
  .robeia-mirror-filters select {
    min-height: 2.2rem;
    font-size: 0.54rem;
  }
}

/* ---------- Portrait preview: smaller and easier to compare ---------- */

.robeia-mirror-preview {
  position: relative;
  width: min(100%, 34rem);
  height: clamp(15rem, 44svh, 23rem);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.16rem;
  background: var(--mirror-active);
  display: flex;
  align-items: center;
  justify-content: center;
}

.robeia-mirror-preview img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* ---------- Bottom controls under portrait ---------- */

.robeia-mirror-bottom-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.55rem, 1.2vw, 0.85rem);
  align-items: stretch;
}

.robeia-mirror-panel-block,
.robeia-mirror-selected-info {
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.78rem;
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-panel-label {
  margin: 0 0 0.55rem;
  font-size: 0.46rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--robeia-border);
}

.robeia-mirror-segmented button {
  min-height: 1.85rem;
  border: 0;
  border-right: 1px solid var(--robeia-border);
  background: transparent;
  padding: 0 0.45rem;
  font-size: 0.42rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--robeia-text-soft);
  cursor: pointer;
}

.robeia-mirror-segmented button:last-child {
  border-right: 0;
}

.robeia-mirror-segmented button.is-active {
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-slot-selector {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.robeia-mirror-slot-selector button {
  position: relative;
  display: grid;
  min-height: 2rem;
  place-items: center;
  background: var(--slot-colour);
  color: var(--robeia-ink);
}

.robeia-mirror-selected-info {
  display: grid;
  gap: 0.48rem;
}

.robeia-mirror-selected-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.robeia-mirror-selected-chip {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgb(255 255 255 / 0.72);
}

.robeia-mirror-selected-info h2 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-selected-info p {
  margin: 0.14rem 0 0;
  font-size: 0.44rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-selected-info span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.44rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(74 23 36 / 0.62);
}

.robeia-mirror-selected-info small {
  font-size: 0.64rem;
  line-height: 1.4;
  color: var(--robeia-text-soft);
}

.robeia-mirror-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr) auto;
  gap: clamp(0.55rem, 1.2vw, 0.85rem);
  align-items: stretch;
}

.robeia-mirror-recent {
  margin: 0;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.7rem;
}

.robeia-mirror-shop-card {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.78rem;
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-drape-link {
  align-self: stretch;
  width: auto;
  margin-top: 0;
}

/* ---------- Responsive: keep colour tools beside portrait as long as possible ---------- */

@media (max-width: 1100px) {
  .robeia-mirror-workspace {
    grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.15fr);
  }

  .robeia-mirror-bottom-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .robeia-mirror-bottom-row {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-drape-link {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .robeia-mirror-shell {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .robeia-mirror-workspace {
    grid-template-columns: minmax(9rem, 40vw) minmax(0, 1fr);
    gap: 0.55rem;
  }

  .robeia-mirror-intro {
    margin-bottom: 0.55rem;
  }

  .robeia-mirror-intro h1 {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }

  .robeia-mirror-intro p:not(.robeia-eyebrow) {
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .robeia-mirror-tabs {
    max-height: 72svh;
  }

  .robeia-mirror-tab-list {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-tab-list button {
    min-height: 1.65rem;
    border-right: 0;
    border-bottom: 1px solid var(--robeia-border);
    font-size: 0.38rem;
    letter-spacing: 0.12em;
  }

  .robeia-mirror-tab-list button:last-child {
    border-bottom: 0;
  }

  .robeia-mirror-tab-panel {
    padding: 0.55rem;
  }

  .robeia-mirror-colour-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .robeia-mirror-preview {
    width: 100%;
    height: clamp(13rem, 40svh, 19rem);
  }

  .robeia-mirror-bottom-controls {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .robeia-mirror-panel-block,
  .robeia-mirror-selected-info,
  .robeia-mirror-shop-card,
  .robeia-mirror-recent {
    padding: 0.6rem;
  }

  .robeia-mirror-segmented {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-segmented button {
    border-right: 0;
    border-bottom: 1px solid var(--robeia-border);
  }

  .robeia-mirror-segmented button:last-child {
    border-bottom: 0;
  }

  .robeia-mirror-slot-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.robeia-mirror-preview {
  cursor: pointer;
}

.robeia-mirror-preview-input {
  display: none;
}

.robeia-mirror-preview-upload-surface {
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.robeia-mirror-preview-upload-surface.has-image {
  z-index: 4;
}

.robeia-mirror-preview-remove {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 12;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgb(247 245 241 / 0.72);
  border-radius: 999px;
  background: rgb(17 17 17 / 0.72);
  color: var(--robeia-paper);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    background 280ms var(--robeia-ease),
    transform 280ms var(--robeia-ease);
}

.robeia-mirror-preview-remove:hover {
  background: var(--robeia-ink);
  transform: translateY(-1px);
}

/* ---------- Portrait bottom controls: quiet, aligned, compact ---------- */

.robeia-mirror-bottom-controls {
  display: grid;
  grid-template-columns: 0.78fr 0.78fr 1.35fr;
  gap: clamp(0.55rem, 1.1vw, 0.85rem);
  align-items: stretch;
}

.robeia-mirror-panel-block,
.robeia-mirror-selected-info {
  min-height: 7.6rem;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: clamp(0.68rem, 1.1vw, 0.85rem);
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-panel-label {
  margin: 0 0 0.55rem;
  font-size: 0.46rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

/* ---------- Segmented buttons: not squeezed together ---------- */

.robeia-mirror-segmented {
  display: grid;
  gap: 0.38rem;
  border: 0;
}

.robeia-mirror-segmented button {
  min-height: 1.85rem;
  border: 1px solid var(--robeia-border);
  background: #ffffff;
  padding: 0 0.55rem;
  font-size: 0.42rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--robeia-text-soft);
  cursor: pointer;
}

.robeia-mirror-segmented button:last-child {
  border-right: 1px solid var(--robeia-border);
}

.robeia-mirror-segmented button.is-active {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

.robeia-mirror-slot-selector {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.robeia-mirror-slot-selector button {
  position: relative;
  display: grid;
  min-height: 2.65rem;
  place-items: center;
  border: 1px solid rgb(17 17 17 / 0.35);
  background: var(--slot-colour);
  color: var(--robeia-ink);
}

.robeia-mirror-slot-selector button span {
  display: inline-flex;
  min-height: 1.15rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  background: rgb(250 246 240 / 0.88);
  font-size: 0.42rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.robeia-mirror-slot-selector button.is-active {
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.78);
}

.robeia-mirror-slot-selector button.is-active span {
  background: rgba(15, 14, 14, 0.88);
  color: rgba(243, 237, 237, 0.88);
}

/* ---------- Selected colour: one clean editorial card ---------- */

.robeia-mirror-selected-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label label'
    'colour action'
    'copy action';
  column-gap: 0.85rem;
  row-gap: 0.45rem;
  align-items: start;
}

.robeia-mirror-selected-info > .robeia-mirror-panel-label {
  grid-area: label;
  margin-bottom: 0;
}

.robeia-mirror-selected-row {
  grid-area: colour;
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  gap: 0.62rem;
  align-items: center;
}

.robeia-mirror-selected-chip {
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgb(255 255 255 / 0.72);
}

.robeia-mirror-selected-info h2 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-selected-info p {
  margin: 0.16rem 0 0;
  font-size: 0.44rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-selected-info span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.44rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(74 23 36 / 0.62);
}

.robeia-mirror-selected-info small {
  grid-area: copy;
  max-width: 18rem;
  font-size: 0.64rem;
  line-height: 1.42;
  color: var(--robeia-text-soft);
}

.robeia-mirror-save-button {
  grid-area: action;
  align-self: center;
  width: auto;
  min-width: 8.2rem;
  margin-top: 0;
}

/* ---------- Bottom row: shopping becomes compact, not a big messy block ---------- */

.robeia-mirror-bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'shop'
    'recent';
  gap: clamp(0.55rem, 1.1vw, 0.85rem);
  align-items: stretch;
}

.robeia-mirror-recent {
  grid-area: recent;
  margin: 0;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.65rem;
}

.robeia-mirror-shop-card {
  grid-area: shop;
  display: grid;
  grid-template-columns: minmax(7rem, 0.32fr) minmax(0, 1fr);
  grid-template-areas:
    'label label'
    'select links';
  gap: 0.55rem 0.7rem;
  align-items: end;
  border: 1px solid var(--robeia-border);
  background: rgb(250 246 240 / 0.88);
  padding: 0.78rem;
  box-shadow: var(--robeia-shadow-soft);
  backdrop-filter: blur(18px);
}

.robeia-mirror-shop-card > .robeia-mirror-panel-label {
  grid-area: label;
  margin: 0;
}

.robeia-mirror-shop-select {
  grid-area: select;
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--robeia-border);
  background: #ffffff;
  padding: 0 0.7rem;
  font-size: 0.66rem;
  color: var(--robeia-ink);
  outline: none;
  text-transform: capitalize;
}

.robeia-mirror-shop-group {
  grid-area: links;
  display: grid;
  gap: 0.42rem;
  border-top: 0;
  padding-top: 0;
}

.robeia-mirror-shop-group p {
  display: none;
}

.robeia-mirror-shop-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem;
}

.robeia-mirror-shop-links a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-border-strong);
  padding: 0 0.55rem;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--robeia-ink);
}

.robeia-mirror-shop-links a:hover {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

/* Hide noisy helper text in the compact layout */
.robeia-mirror-shop-group small,
.robeia-mirror-shop-card > small {
  display: none;
}

/* ---------- Responsive cleanup ---------- */

@media (max-width: 1100px) {
  .robeia-mirror-bottom-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .robeia-mirror-selected-info {
    grid-column: 1 / -1;
  }

  .robeia-mirror-bottom-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      'shop'
      'recent';
  }
}

@media (max-width: 760px) {
  .robeia-mirror-bottom-controls {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-panel-block,
  .robeia-mirror-selected-info {
    min-height: auto;
    padding: 0.62rem;
  }

  .robeia-mirror-selected-info {
    grid-template-columns: 1fr;
    grid-template-areas:
      'label'
      'colour'
      'copy'
      'action';
  }

  .robeia-mirror-save-button {
    width: 100%;
    min-width: 0;
  }

  .robeia-mirror-shop-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      'label'
      'select'
      'links';
  }
}

/* ---------- Portrait preview colour layer: fixes side-by-side ---------- */

.robeia-mirror-preview {
  background: transparent;
}

.robeia-mirror-preview-colour-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      circle at 50% 15%,
      rgb(255 255 255 / 0.52),
      transparent 34%
    ),
    var(--mirror-active);
}

.robeia-mirror-preview-side_by_side .robeia-mirror-preview-colour-layer {
  background: linear-gradient(
    90deg,
    var(--mirror-primary) 0%,
    var(--mirror-primary) 50%,
    var(--mirror-secondary) 50%,
    var(--mirror-secondary) 100%
  );
}

.robeia-mirror-preview-alternate .robeia-mirror-preview-colour-layer {
  background:
    radial-gradient(
      circle at 50% 15%,
      rgb(255 255 255 / 0.52),
      transparent 34%
    ),
    var(--mirror-active);
  transition: background 420ms var(--robeia-ease);
}

.robeia-mirror-preview img {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.robeia-mirror-empty-state {
  z-index: 3;
}

.robeia-mirror-preview-upload-surface {
  z-index: 6;
}

.robeia-mirror-preview-remove {
  z-index: 12;
}

.robeia-mirror-split-labels {
  z-index: 7;
}

/* ---------- Cloth picture sampler ---------- */

.robeia-mirror-cloth-card {
  display: grid;
  gap: 0.7rem;
}

.robeia-mirror-cloth-input {
  display: none;
}

.robeia-mirror-cloth-upload {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-burgundy);
  background: var(--robeia-burgundy);
  padding: 0 1rem;
  font-size: 0.48rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--robeia-paper);
  cursor: pointer;
  transition:
    background 280ms var(--robeia-ease),
    color 280ms var(--robeia-ease),
    border-color 280ms var(--robeia-ease),
    transform 280ms var(--robeia-ease);
}

.robeia-mirror-cloth-upload:hover {
  transform: translateY(-1px);
}

.robeia-mirror-cloth-help,
.robeia-mirror-cloth-error {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--robeia-text-soft);
}

.robeia-mirror-cloth-error {
  color: var(--robeia-burgundy);
}

.robeia-mirror-cloth-preview-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--robeia-border);
  background: rgb(255 255 255 / 0.38);
}

.robeia-mirror-cloth-preview {
  display: block;
  width: 100%;
  height: clamp(10rem, 28svh, 16rem);
  object-fit: cover;
  cursor: crosshair;
}

.robeia-mirror-cloth-remove {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid rgb(247 245 241 / 0.72);
  border-radius: 999px;
  background: rgb(17 17 17 / 0.72);
  color: var(--robeia-paper);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.robeia-mirror-cloth-result {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  border-top: 1px solid var(--robeia-border);
  padding-top: 0.7rem;
}

.robeia-mirror-cloth-chip {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgb(255 255 255 / 0.72);
}

.robeia-mirror-cloth-result h3 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-cloth-result p {
  margin: 0.16rem 0 0;
  font-size: 0.46rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-cloth-result span {
  display: block;
  margin-top: 0.16rem;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--robeia-text-soft);
}

@media (max-width: 760px) {
  .robeia-mirror-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Compact control boxes: stop View mode / slot boxes stretching ---------- */

.robeia-mirror-bottom-controls {
  align-items: start;
}

.robeia-mirror-panel-block {
  min-height: 0;
}

.robeia-mirror-panel-block .robeia-mirror-segmented {
  gap: 0.3rem;
}

.robeia-mirror-panel-block .robeia-mirror-segmented button {
  min-height: 1.7rem;
}

.robeia-mirror-slot-selector button {
  min-height: 2rem;
}

/* ---------- Eyebrow row: "Free colour mirror" left, drape link right ---------- */

.robeia-mirror-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

/* Match the "Back to Robeia" nav text: sans, small caps-style tracking */
.robeia-mirror-eyebrow-row .robeia-eyebrow {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
}

/* ---------- Mobile: two-column controls instead of stacking ---------- */

@media (max-width: 760px) {
  .robeia-mirror-bottom-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .robeia-mirror-selected-info {
    grid-column: 1 / -1;
  }

  .robeia-mirror-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .robeia-mirror-panel-block,
  .robeia-mirror-selected-info {
    min-width: 0;
    overflow: visible;
  }

  .robeia-mirror-segmented button,
  .robeia-mirror-tab-list button {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
}

/* ---------- View mode: keep Single | Side by side | Alternate on one row ---------- */

@media (max-width: 760px) {
  .robeia-mirror-mode-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
  }

  .robeia-mirror-mode-control button {
    min-width: 0;
    min-height: 1.9rem;
    padding: 0 0.25rem;
    font-size: clamp(0.3rem, 1.35vw, 0.38rem);
    letter-spacing: 0.08em;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: normal;
  }
}

/* ---------- Selected colour + shopping card like mockup ---------- */

.robeia-mirror-bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  align-items: stretch;
}

.robeia-mirror-selected-shop-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.32rem;
  background: rgb(250 246 240 / 0.88);
  padding: 0;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.robeia-mirror-selected-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.robeia-mirror-selected-shop-card .robeia-mirror-selected-row {
  display: grid;
  grid-template-columns: 4.55rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.robeia-mirror-selected-shop-card .robeia-mirror-selected-chip {
  width: 4.55rem;
  height: 4.55rem;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 0.22rem;
}

.robeia-mirror-selected-copy {
  min-width: 0;
}

.robeia-mirror-selected-copy h2 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-selected-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
  align-items: center;
  margin-top: 0.42rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-selected-copy small {
  display: block;
  margin-top: 0.5rem;
  max-width: 24rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-selected-actions {
  display: grid;
  gap: 0.8rem;
  justify-items: end;
  align-content: center;
}

.robeia-mirror-favourite-inline {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(17 17 17 / 0.72);
}

.robeia-mirror-favourite-inline span {
  font-size: 1.42rem;
  line-height: 1;
}

.robeia-mirror-favourite-inline:hover {
  background: transparent;
  color: var(--robeia-ink);
  transform: none;
}

.robeia-mirror-shop-main-link {
  display: inline-flex;
  min-height: 2.75rem;
  min-width: 10.2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-ink);
  border-radius: 0.16rem;
  background: var(--robeia-ink);
  padding: 0 1.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-paper);
}

.robeia-mirror-shop-row {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid rgb(17 17 17 / 0.35);
  padding: 0.85rem 1rem 1rem;
}

.robeia-mirror-shop-title {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-shop-controls {
  display: grid;
  grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: stretch;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-select {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.16rem;
  background: #ffffff;
  padding: 0 0.85rem;
  font-size: 0.92rem;
  color: var(--robeia-ink);
  outline: none;
  text-transform: capitalize;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  min-width: 0;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links a {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(17 17 17 / 0.45);
  border-radius: 0.16rem;
  background: #ffffff;
  padding: 0 0.75rem;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--robeia-ink);
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links a:hover {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

@media (max-width: 1100px) {
  .robeia-mirror-selected-card-top {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    align-items: stretch;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-row {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.7rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-chip {
    width: 3.4rem;
    height: 3.4rem;
  }

  .robeia-mirror-selected-copy {
    min-width: 0;
  }

  .robeia-mirror-selected-copy h2 {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .robeia-mirror-selected-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    align-items: stretch;
  }

  .robeia-mirror-favourite-inline {
    width: 100%;
    justify-content: center;
  }

  .robeia-mirror-shop-main-link {
    width: 100%;
    min-width: 0;
  }

  .robeia-mirror-shop-controls {
    grid-template-columns: 1fr;
  }
}

/* ---------- Final right-side preview style: match mockup ---------- */

.robeia-mirror-main {
  min-width: 0;
  display: grid;
  gap: 0.7rem;
}

/* Keep left/right layout the same, only make the right preview fill its column */
.robeia-mirror-main > .robeia-mirror-preview {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 20rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.32rem;
  background:
    radial-gradient(
      circle at 50% 32%,
      rgb(255 236 236 / 0.72),
      transparent 34%
    ),
    linear-gradient(135deg, #c88288 0%, #d5a0a5 42%, #b56870 100%);
  box-shadow: none;
  cursor: pointer;
}

/* Dashed inside border like the reference upload preview */
.robeia-mirror-main > .robeia-mirror-preview::after {
  content: '';
  position: absolute;
  inset: 1.05rem;
  z-index: 5;
  border: 1px dashed rgb(255 255 255 / 0.68);
  border-radius: 0.28rem;
  pointer-events: none;
}

/* Hide dashed upload frame after portrait exists */
.robeia-mirror-main
  > .robeia-mirror-preview:has(
    .robeia-mirror-preview-upload-surface.has-image
  )::after {
  display: none;
}

.robeia-mirror-preview-colour-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      circle at 50% 32%,
      rgb(255 236 236 / 0.72),
      transparent 34%
    ),
    var(--mirror-active);
}

.robeia-mirror-preview-side_by_side .robeia-mirror-preview-colour-layer {
  background: linear-gradient(
    90deg,
    var(--mirror-primary) 0%,
    var(--mirror-primary) 50%,
    var(--mirror-secondary) 50%,
    var(--mirror-secondary) 100%
  );
}

.robeia-mirror-preview img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  pointer-events: none;
}

/* Upload empty state text */
.robeia-mirror-empty-state {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.7rem;
  padding: 2rem;
  text-align: center;
  color: rgb(42 6 11 / 0.68);
}

.robeia-mirror-empty-state::before {
  content: '▧';
  display: block;
  font-size: 2.1rem;
  line-height: 1;
  color: rgb(42 6 11 / 0.32);
}

.robeia-mirror-empty-state p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.72);
}

.robeia-mirror-empty-state span {
  display: block;
  margin-top: -0.2rem;
  font-size: 0.74rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: rgb(17 17 17 / 0.8);
}

/* ---------- Buttons directly under preview: match mockup ---------- */

.robeia-mirror-bottom-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

.robeia-mirror-bottom-controls .robeia-mirror-panel-block {
  min-height: 0;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.32rem;
  background: rgb(250 246 240 / 0.88);
  padding: 0.65rem 0.85rem;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.robeia-mirror-bottom-controls .robeia-mirror-panel-label {
  margin: 0 0 0.65rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-bottom-controls .robeia-mirror-segmented {
  display: grid;
  gap: 0.34rem;
  border: 0;
}

.robeia-mirror-bottom-controls .robeia-mirror-mode-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.robeia-mirror-bottom-controls .robeia-mirror-segmented button {
  min-height: 2.65rem;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.18rem;
  background: #ffffff;
  padding: 0 0.75rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.7);
  white-space: nowrap;
  cursor: pointer;
}

.robeia-mirror-bottom-controls .robeia-mirror-segmented button:last-child {
  border-right: 1px solid rgb(17 17 17 / 0.35);
}

/* View mode active = dark */
.robeia-mirror-bottom-controls .robeia-mirror-mode-control button.is-active {
  border-color: var(--robeia-ink);
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

/* Each colour slot shows its own colour, so Colour A and Colour B are both visible */
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button {
  background: var(--slot-colour);
}

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button span {
  display: inline-flex;
  min-height: auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: inherit;
  backdrop-filter: none;
}

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button.is-active {
  border-color: rgb(17 17 17 / 0.14);
  background: var(--slot-colour);
  color: var(--robeia-paper);
  box-shadow: none;
}

.robeia-mirror-bottom-controls
  .robeia-mirror-slot-selector
  button.is-active
  span {
  background: transparent;
  color: var(--robeia-paper);
}

/* Keep mobile still side-by-side like the mockup */
@media (max-width: 760px) {
  .robeia-mirror-main > .robeia-mirror-preview {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 17rem;
  }

  .robeia-mirror-bottom-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-panel-block {
    padding: 0.7rem;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-segmented button {
    min-height: 2.25rem;
    padding: 0 0.45rem;
    font-size: clamp(0.42rem, 1.7vw, 0.58rem);
    letter-spacing: 0.1em;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-mode-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .robeia-mirror-bottom-controls .robeia-mirror-slot-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Final reset: selected colour card must not inherit old overlay grid ---------- */

.robeia-mirror-selected-shop-card,
.robeia-mirror-selected-shop-card * {
  box-sizing: border-box;
}

.robeia-mirror-selected-shop-card .robeia-mirror-selected-row,
.robeia-mirror-selected-shop-card .robeia-mirror-save-button,
.robeia-mirror-selected-shop-card .robeia-mirror-shop-select,
.robeia-mirror-selected-shop-card .robeia-mirror-shop-group,
.robeia-mirror-selected-shop-card .robeia-mirror-shop-links {
  grid-area: auto;
}

.robeia-mirror-selected-shop-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.32rem;
  background: rgb(250 246 240 / 0.88);
  padding: 0;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.robeia-mirror-selected-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.robeia-mirror-selected-shop-card .robeia-mirror-selected-row {
  display: grid;
  grid-template-columns: 4.55rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.robeia-mirror-selected-shop-card .robeia-mirror-selected-chip {
  width: 4.55rem;
  height: 4.55rem;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 0.22rem;
}

.robeia-mirror-selected-copy {
  min-width: 0;
}

.robeia-mirror-selected-copy h2 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-selected-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
  align-items: center;
  margin-top: 0.42rem;
}

.robeia-mirror-selected-meta span {
  display: inline-flex;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-selected-copy small {
  display: block;
  margin-top: 0.5rem;
  max-width: 24rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-selected-actions {
  display: grid;
  gap: 0.8rem;
  justify-items: end;
  align-content: center;
}

.robeia-mirror-favourite-inline {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(17 17 17 / 0.72);
}

.robeia-mirror-favourite-inline span {
  display: inline-flex;
  margin: 0;
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: 0;
  color: inherit;
}

.robeia-mirror-shop-main-link {
  display: inline-flex;
  min-height: 2.75rem;
  min-width: 10.2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-ink);
  border-radius: 0.16rem;
  background: var(--robeia-ink);
  padding: 0 1.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-paper);
}

.robeia-mirror-shop-row {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid rgb(17 17 17 / 0.35);
  padding: 0.85rem 1rem 1rem;
}

.robeia-mirror-shop-title {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-shop-title span {
  display: inline;
  margin: 0;
}

.robeia-mirror-shop-controls {
  display: grid;
  grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: stretch;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-select {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.16rem;
  background: #ffffff;
  padding: 0 0.85rem;
  font-size: 0.92rem;
  color: var(--robeia-ink);
  outline: none;
  text-transform: capitalize;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-group {
  display: block;
  border-top: 0;
  padding-top: 0;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  min-width: 0;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links a {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(17 17 17 / 0.45);
  border-radius: 0.16rem;
  background: #ffffff;
  padding: 0 0.75rem;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--robeia-ink);
}

/* ---------- Real final fix: remove old shop-card grid overlay ---------- */

.robeia-mirror-selected-shop-card {
  grid-template-areas: none;
  grid-template-rows: none;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.robeia-mirror-selected-shop-card > * {
  grid-area: auto;
  position: static;
}

.robeia-mirror-selected-shop-card .robeia-mirror-selected-row,
.robeia-mirror-selected-actions,
.robeia-mirror-favourite-inline,
.robeia-mirror-selected-shop-card .robeia-mirror-save-button,
.robeia-mirror-shop-main-link,
.robeia-mirror-shop-row,
.robeia-mirror-shop-controls,
.robeia-mirror-selected-shop-card .robeia-mirror-shop-select,
.robeia-mirror-selected-shop-card .robeia-mirror-shop-group,
.robeia-mirror-selected-shop-card .robeia-mirror-shop-links {
  grid-area: auto;
}

/* ---------- Colour A / Colour B: same font as View mode buttons ---------- */

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button,
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button span {
  font-family: inherit;
  font-style: normal;
}

/* ---------- Final size pass: smaller text, shorter buttons, softer corners ---------- */

/* One shared size for tabs, View mode and Colour A / Colour B */
.robeia-mirror-tab-list button,
.robeia-mirror-bottom-controls .robeia-mirror-segmented button,
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button,
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button span {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.robeia-mirror-tab-list button,
.robeia-mirror-bottom-controls .robeia-mirror-segmented button,
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button {
  min-height: 1.9rem;
  border-radius: 0.14rem;
}

/* Smaller panel labels and headings */
.robeia-mirror-panel-label,
.robeia-mirror-bottom-controls .robeia-mirror-panel-label,
.robeia-mirror-shop-title,
.robeia-mirror-selected-meta,
.robeia-mirror-family-section > h3 {
  font-size: 0.42rem;
  letter-spacing: 0.16em;
}

.robeia-mirror-selected-copy h2 {
  font-size: 1.05rem;
}

.robeia-mirror-selected-copy small {
  font-size: 0.68rem;
}

.robeia-mirror-favourite-inline {
  font-size: 0.66rem;
}

.robeia-mirror-shop-main-link {
  min-height: 2.1rem;
  min-width: 8rem;
  font-size: 0.48rem;
  border-radius: 0.12rem;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-select {
  min-height: 2.05rem;
  font-size: 0.66rem;
  border-radius: 0.12rem;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links a {
  min-height: 2.05rem;
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  border-radius: 0.12rem;
}

.robeia-mirror-filters input,
.robeia-mirror-filters select {
  min-height: 2rem;
  font-size: 0.5rem;
  border-radius: 0.12rem;
}

.robeia-mirror-colour-swatch,
.robeia-mirror-recent button {
  border-radius: 0.1rem;
}

/* Softer corners on panels */
.robeia-mirror-tabs,
.robeia-mirror-bottom-controls .robeia-mirror-panel-block,
.robeia-mirror-selected-shop-card,
.robeia-mirror-preview,
.robeia-mirror-main > .robeia-mirror-preview {
  border-radius: 0.22rem;
}

.robeia-mirror-preview-remove {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.95rem;
}

/* ---------- Depth and group filters side by side ---------- */

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

.robeia-mirror-filters > input {
  grid-column: 1 / -1;
}

/* ---------- Small screens: same layout, smaller parts, nothing spills out ---------- */

@media (max-width: 520px) {
  .robeia-mirror-bottom-controls .robeia-mirror-segmented button,
  .robeia-mirror-bottom-controls .robeia-mirror-slot-selector button,
  .robeia-mirror-bottom-controls .robeia-mirror-slot-selector button span,
  .robeia-mirror-tab-list button {
    font-size: 0.42rem;
    letter-spacing: 0.06em;
    min-width: 0;
    min-height: 1.75rem;
    padding: 0 0.3rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-panel-block {
    padding: 0.6rem;
  }

  .robeia-mirror-selected-card-top {
    padding: 0.75rem;
    gap: 0.7rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-chip {
    width: 3rem;
    height: 3rem;
  }

  .robeia-mirror-selected-copy h2 {
    font-size: 0.95rem;
    line-height: 1;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .robeia-mirror-selected-meta {
    gap: 0.3rem 0.45rem;
  }

  .robeia-mirror-selected-meta span {
    font-size: 0.4rem;
    letter-spacing: 0.08em;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .robeia-mirror-selected-copy small {
    font-size: 0.6rem;
    line-height: 1.35;
  }

  .robeia-mirror-selected-actions {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .robeia-mirror-favourite-inline {
    justify-content: center;
    font-size: 0.56rem;
  }

  .robeia-mirror-favourite-inline span {
    font-size: 1rem;
  }

  .robeia-mirror-shop-main-link {
    width: 100%;
    min-width: 0;
    min-height: 1.9rem;
    padding: 0 0.4rem;
    font-size: 0.42rem;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: normal;
  }

  .robeia-mirror-shop-row {
    padding: 0.7rem 0.75rem 0.8rem;
  }

  .robeia-mirror-shop-controls {
    grid-template-columns: 1fr;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-shop-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-shop-links a {
    min-height: 1.8rem;
    padding: 0 0.2rem;
    font-size: 0.36rem;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ---------- Preview empty-state text: smaller ---------- */

.robeia-mirror-empty-state p {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
}

.robeia-mirror-empty-state span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.robeia-mirror-empty-state::before {
  font-size: 1.5rem;
}

@media (max-width: 520px) {
  .robeia-mirror-empty-state p {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .robeia-mirror-empty-state span {
    font-size: 0.72rem;
  }
}

/* ---------- Open-link icon on shop buttons ---------- */

.robeia-mirror-shop-link-icon {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  margin-left: 0.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Medium screens: View mode and Colour A/B fit their panels ---------- */

@media (min-width: 521px) and (max-width: 1100px) {
  .robeia-mirror-bottom-controls .robeia-mirror-segmented button,
  .robeia-mirror-bottom-controls .robeia-mirror-slot-selector button,
  .robeia-mirror-bottom-controls .robeia-mirror-slot-selector button span {
    min-width: 0;
    padding: 0 0.3rem;
    font-size: 0.44rem;
    letter-spacing: 0.06em;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-segmented button {
    min-height: 2.1rem;
  }
}

/* ---------- Medium screens: selected colour card stacks, nothing squeezes ---------- */

@media (min-width: 521px) and (max-width: 1100px) {
  .robeia-mirror-selected-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    align-items: stretch;
    min-width: 0;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-row {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.7rem;
    min-width: 0;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-chip {
    width: 3.2rem;
    height: 3.2rem;
  }

  .robeia-mirror-selected-copy {
    min-width: 0;
  }

  .robeia-mirror-selected-copy h2 {
    font-size: 1.1rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .robeia-mirror-selected-meta {
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
  }

  .robeia-mirror-selected-meta span {
    font-size: 0.46rem;
    letter-spacing: 0.1em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .robeia-mirror-selected-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    justify-items: stretch;
    min-width: 0;
  }

  .robeia-mirror-favourite-inline {
    width: 100%;
    min-width: 0;
    justify-content: center;
    font-size: 0.6rem;
  }

  .robeia-mirror-shop-main-link {
    width: 100%;
    min-width: 0;
    min-height: 2.1rem;
    padding: 0 0.4rem;
    font-size: 0.46rem;
    letter-spacing: 0.08em;
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Medium screens: tab labels wrap inside their buttons ---------- */

@media (min-width: 521px) and (max-width: 1100px) {
  .robeia-mirror-tab-list button {
    min-width: 0;
    min-height: 2.3rem;
    padding: 0 0.3rem;
    font-size: 0.42rem;
    letter-spacing: 0.06em;
    line-height: 1.15;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}

/* ---------- Full colour analysis advert (direction tab) ---------- */

.robeia-mirror-analysis-promo {
  display: grid;
  gap: 0.95rem;
}

.robeia-mirror-analysis-promo h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-analysis-promo > p:not(.robeia-mirror-panel-label) {
  max-width: 34rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.62;
  color: var(--robeia-text-soft);
}

.robeia-mirror-analysis-steps {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.robeia-mirror-analysis-steps div {
  border-top: 1px solid var(--robeia-border);
  padding-top: 0.7rem;
}

.robeia-mirror-analysis-steps span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
}

.robeia-mirror-analysis-steps h3 {
  margin: 0;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--robeia-deep-wine);
}

.robeia-mirror-analysis-steps p {
  margin: 0.28rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--robeia-text-soft);
}

.robeia-mirror-analysis-link {
  display: inline-flex;
  width: fit-content;
  min-height: 2.2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--robeia-border);
  padding: 0 1rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--robeia-text-faint);
  cursor: default;
}

/* ---------- Selected shop card: match the platform page ---------- */

.robeia-mirror-favourite-inline {
  width: auto;
  min-width: max-content;
  justify-content: center;
  font-size: 0.6rem;
  white-space: nowrap;
}

.robeia-mirror-selected-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: max-content;
}

.robeia-mirror-selected-shop-card .robeia-mirror-shop-links a {
  min-height: 1.8rem;
  padding: 0 0.2rem;
  font-size: 0.34rem;
  letter-spacing: 0.04em;
}

.robeia-mirror-shop-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  align-items: stretch;
  min-width: 0;
}

.robeia-mirror-shop-link-icon {
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.16rem;
}

.robeia-mirror-shop-main-link {
  width: 100%;
  min-width: 0;
  min-height: 1.9rem;
  padding: 0 0.4rem;
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: normal;
}

.robeia-mirror-shop-select-row .robeia-mirror-shop-select {
  grid-area: auto;
  min-width: 0;
}

/* Face window: only the face is shown, the selected colour stays visible around it. The uploaded file is not changed. */
.robeia-mirror-portrait-image {
  position: absolute;
  z-index: 2;
  top: 9%;
  left: 50%;
  height: 80%;
  width: auto;
  aspect-ratio: 3 / 4;
  border-radius: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  box-shadow: none;
  pointer-events: none;
}

.robeia-mirror-portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-crop-x, 50%) var(--portrait-crop-y, 22%);
  transform: scale(var(--portrait-zoom, 1.6));
  transform-origin: var(--portrait-crop-x, 50%) var(--portrait-crop-y, 22%);
  pointer-events: none;
}

.robeia-mirror-bottom-controls {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.robeia-mirror-crop-panel {
  display: grid;
  gap: 0.55rem;
}

.robeia-mirror-crop-panel label {
  display: grid;
  gap: 0.28rem;
}

.robeia-mirror-crop-panel label span {
  font-size: 0.42rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(17 17 17 / 0.8);
}

.robeia-mirror-crop-panel input[type='range'] {
  width: 100%;
  accent-color: var(--robeia-ink);
}

.robeia-mirror-crop-panel button {
  min-height: 1.9rem;
  border: 1px solid rgb(17 17 17 / 0.35);
  border-radius: 0.14rem;
  background: #ffffff;
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--robeia-ink);
  cursor: pointer;
}

.robeia-mirror-crop-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
}

.robeia-mirror-crop-mode-row button.is-active {
  background: var(--robeia-ink);
  color: #fff;
}

.robeia-mirror-auto-photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.robeia-mirror-crop-note {
  margin: 0;
  font-size: 0.5rem;
  line-height: 1.5;
  color: rgb(17 17 17 / 0.6);
}

@media (max-width: 760px) {
  .robeia-mirror-bottom-controls {
    grid-template-columns: 1fr;
  }
}

/* Medium screens: the three bottom control blocks stack, so button labels never overlap */
@media (min-width: 521px) and (max-width: 1100px) {
  .robeia-mirror-bottom-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .robeia-mirror-bottom-controls .robeia-mirror-panel-block {
    min-width: 0;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-segmented button {
    min-width: 0;
    white-space: normal;
  }
}

/* Wide screens: control blocks wrap onto new rows when there is no room, and button labels wrap inside their buttons */
.robeia-mirror-bottom-controls .robeia-mirror-segmented button {
  min-width: 0;
  white-space: normal;
  letter-spacing: 0.1em;
  padding: 0 0.5rem;
}

/* Face crop on its own row; View mode and Active colour slot side by side */
@media (min-width: 761px) {
  .robeia-mirror-bottom-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .robeia-mirror-bottom-controls .robeia-mirror-crop-panel {
    grid-column: 1 / -1;
  }
}

/* ---------- Consolidated responsive layout (replaces the earlier conflicting layout rules) ---------- */

.robeia-mirror-shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2.5vw, 2.25rem);
}

.robeia-mirror-workspace {
  display: block;
  min-width: 0;
}

.robeia-mirror-main {
  display: grid;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  grid-template-areas:
    'palette preview'
    'palette controls'
    'palette shop';
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: start;
  min-width: 0;
}

.robeia-mirror-left-tools {
  grid-area: palette;
  min-width: 0;
}

.robeia-mirror-main > .robeia-mirror-preview {
  grid-area: preview;
  position: relative;
  width: 100%;
  max-width: 52rem;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 5 / 4;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.22rem;
}

.robeia-mirror-tabs {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(76svh, 48rem);
  min-width: 0;
  overflow: hidden;
}

.robeia-mirror-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.robeia-mirror-bottom-controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
  min-width: 0;
}

.robeia-mirror-crop-panel {
  grid-column: 1 / -1;
}

.robeia-mirror-bottom-row {
  grid-area: shop;
  min-width: 0;
}

.robeia-mirror-panel-block,
.robeia-mirror-shop-card,
.robeia-mirror-selected-shop-card {
  min-width: 0;
}

/* Tablet and smaller: the colour bank moves under the portrait */
@media (max-width: 1023px) {
  .robeia-mirror-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'preview'
      'palette'
      'controls'
      'shop';
  }

  .robeia-mirror-main > .robeia-mirror-preview {
    max-width: 42rem;
  }

  .robeia-mirror-tabs {
    max-height: 58svh;
  }
}

/* Mobile: larger touch targets, readable labels */
@media (max-width: 640px) {
  .robeia-mirror-shell {
    padding-inline: 0.75rem;
  }

  .robeia-mirror-main > .robeia-mirror-preview {
    aspect-ratio: 4 / 5;
    max-width: 100%;
  }

  /* Side by side on phones: two full-width panels, one above the other */
  .robeia-mirror-main > .robeia-mirror-preview-side_by_side.is-auto-ready {
    aspect-ratio: 5 / 8;
  }

  .robeia-mirror-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .robeia-mirror-tab-list button {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.4rem;
    font-size: 0.7rem;
    white-space: normal;
  }

  .robeia-mirror-colour-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .robeia-mirror-colour-card {
    min-width: 0;
    min-height: 2.25rem;
    height: auto;
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .robeia-mirror-colour-swatch {
    min-height: 2rem;
    height: 2rem;
  }

  .robeia-mirror-heart {
    width: 1.5rem;
    height: 2rem;
  }

  .robeia-mirror-bottom-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .robeia-mirror-crop-panel {
    grid-column: auto;
  }

  .robeia-mirror-mode-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .robeia-mirror-shop-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .robeia-mirror-selected-card-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .robeia-mirror-selected-actions {
    min-width: 0;
    justify-content: start;
  }

  .robeia-mirror-preview-side_by_side.is-auto-ready
    .robeia-mirror-split-labels {
    inset: 0;
    display: block;
    padding: 0;
  }

  .robeia-mirror-preview-side_by_side.is-auto-ready
    .robeia-mirror-split-labels
    span {
    position: absolute;
    left: 0.7rem;
    top: 0.7rem;
  }

  .robeia-mirror-preview-side_by_side.is-auto-ready
    .robeia-mirror-split-labels
    span:last-child {
    top: calc(50% + 0.7rem);
  }
}

/* Tabs wrap to two rows in the narrower colour column so no label is cut off */
.robeia-mirror-tab-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tablet and phone: the controls sit beside the portrait in the left 30%; buttons wrap under each other when there is no room */
@media (max-width: 1023px) {
  .robeia-mirror-main {
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
    grid-template-areas:
      'controls preview'
      'shop preview'
      'palette palette';
    align-items: start;
  }

  .robeia-mirror-bottom-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .robeia-mirror-main > .robeia-mirror-preview {
    max-width: none;
    width: 100%;
  }

  .robeia-mirror-mode-control,
  .robeia-mirror-slot-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .robeia-mirror-mode-control button,
  .robeia-mirror-slot-selector button {
    flex: 1 1 auto;
  }
}

/* Mode and colour buttons keep their words whole; the buttons wrap onto the next row instead */
@media (max-width: 1023px) {
  .robeia-mirror-mode-control button,
  .robeia-mirror-slot-selector button {
    white-space: nowrap;
    min-width: max-content;
  }
}

/* Side column: the buttons wrap onto the next row when they run out of room */
@media (max-width: 1023px) {
  .robeia-mirror-bottom-controls .robeia-mirror-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border: 0;
  }

  .robeia-mirror-bottom-controls .robeia-mirror-segmented button {
    flex: 1 1 auto;
    min-width: max-content;
    white-space: nowrap;
    padding: 0 0.5rem;
    letter-spacing: 0.08em;
  }

  .robeia-mirror-bottom-row .robeia-mirror-shop-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .robeia-mirror-bottom-row .robeia-mirror-shop-links a {
    flex: 1 1 auto;
    min-width: max-content;
  }
}

/* Tablet and phone: the colour bank sits directly under the portrait, in the same column */
@media (max-width: 1023px) {
  .robeia-mirror-main {
    grid-template-areas:
      'controls preview'
      'shop palette';
  }

  .robeia-mirror-main > .robeia-mirror-preview {
    align-self: start;
  }

  .robeia-mirror-left-tools {
    align-self: start;
  }
}

/* Tablet and phone: the portrait and the colour bank form one right-hand column; the controls and shopping sit on the left */
@media (max-width: 1023px) {
  .robeia-mirror-main {
    grid-template-areas:
      'controls stage'
      'shop stage';
  }

  .robeia-mirror-stage {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    min-width: 0;
    align-self: start;
  }

  .robeia-mirror-stage > .robeia-mirror-preview {
    grid-area: auto;
    align-self: auto;
  }

  .robeia-mirror-stage > .robeia-mirror-left-tools {
    grid-area: auto;
  }
}

/* The colour bank fills the width of the portrait above it */
@media (max-width: 1023px) {
  .robeia-mirror-stage > .robeia-mirror-left-tools {
    align-self: stretch;
    width: 100%;
  }
}

/* Tablet and phone: the colour tabs are smaller */
@media (max-width: 1023px) {
  .robeia-mirror-tabs .robeia-mirror-tab-list {
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .robeia-mirror-tabs .robeia-mirror-tab-list button {
    min-height: 1.6rem;
    padding: 0 0.3rem;
    font-size: 0.4rem;
    letter-spacing: 0.08em;
  }
}

/* Desktop: the wrapper does not change the layout, so the portrait and colour bank keep their desktop places */
@media (min-width: 1024px) {
  .robeia-mirror-stage {
    display: contents;
  }
}

/* Tablet and phone: the colour swatches are the same size as on desktop */
@media (max-width: 1023px) {
  .robeia-mirror-tabs .robeia-mirror-colour-card {
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.16rem;
    height: 1.18rem;
    min-height: 0;
    min-width: 0;
  }

  .robeia-mirror-tabs .robeia-mirror-colour-swatch {
    height: 1.12rem;
    min-height: 0;
    width: 100%;
  }

  .robeia-mirror-tabs .robeia-mirror-heart {
    width: 1.05rem;
    height: 1.05rem;
  }
}

/* Tablet and phone: the selected colour card sits directly under the colour slot, in the left column */
@media (max-width: 1023px) {
  .robeia-mirror-main {
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
    grid-template-areas: 'side stage';
    align-items: start;
  }

  .robeia-mirror-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    align-self: start;
  }

  .robeia-mirror-side > .robeia-mirror-bottom-controls,
  .robeia-mirror-side > .robeia-mirror-bottom-row {
    grid-area: auto;
    width: 100%;
  }
}

/* Desktop: the wrapper does not change the layout */
@media (min-width: 1024px) {
  .robeia-mirror-side {
    display: contents;
  }
}

/* Desktop layout: two columns, with the preview on the right and the controls underneath */
@media (min-width: 1024px) {
  .robeia-mirror-shell {
    display: grid;

    align-items: start;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 0.75fr)
      minmax(0, 0.75fr);

    grid-template-areas:
      "back back back"
      "heading heading heading"
      "description mode slot"
      "palette preview preview"
      "palette crop crop"
      "palette shop shop";

    column-gap: clamp(28px, 3vw, 54px);
    row-gap: 14px;

    width: 100%;
    max-width: 1480px;
    margin: 0 auto;

    padding: 30px clamp(24px, 4vw, 60px) 70px;
  }

  .robeia-mirror-workspace,
  .robeia-mirror-main,
  .robeia-mirror-stage,
  .robeia-mirror-side {
    display: contents;
  }

  .robeia-mirror-eyebrow-row {
    grid-area: back;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
  }

  .robeia-mirror-intro {
    display: contents;
  }

  .robeia-mirror-intro h1 {
    grid-area: heading;
    margin-bottom: 12px;
  }

  .robeia-mirror-intro p:not(.robeia-eyebrow) {
    grid-area: description;
    align-self: center;
    max-width: 44ch;
    margin: 0;
    line-height: 1.7;
  }

  .robeia-mirror-left-tools {
    grid-area: palette;
    min-width: 0;
    align-self: stretch;
    position: relative;
    height: 0;
    min-height: 100%;
  }

  .robeia-mirror-stage > .robeia-mirror-preview {
    grid-area: preview;

    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;

    align-self: start;
    margin: 0;
  }

  .robeia-mirror-bottom-controls {
    display: contents;
  }

  .robeia-mirror-bottom-controls > :nth-child(1) {
    grid-area: crop;
    grid-column: 2 / 4;
  }

  .robeia-mirror-bottom-controls > :nth-child(2) {
    grid-area: mode;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }

  .robeia-mirror-bottom-controls > :nth-child(3) {
    grid-area: slot;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }

  .robeia-mirror-bottom-row {
    grid-area: shop;
    width: 100%;
  }

  .robeia-mirror-tabs {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
  }

  .robeia-mirror-tab-panel {
    min-height: 0;
    overflow-y: auto;
  }
}

/* Direction tab: Coming soon and Join the waitlist sit side by side */
.robeia-mirror-analysis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.robeia-mirror-analysis-link-live {
  border-color: var(--robeia-ink);
  color: var(--robeia-ink);
  cursor: pointer;
}

.robeia-mirror-analysis-link-live:hover {
  background: var(--robeia-ink);
  color: var(--robeia-paper);
}

/* Face mode: the face picture sits inside the coloured preview, with the colour showing around it (as on the platform) */
.robeia-mirror-preview img.robeia-mirror-face-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Phone and small tablet: view mode and the active colour slot side by side at the
   top, then the portrait, the face crop, the colour bank, and the colour card at the
   bottom. Everything below the top row is full width, stacked. */
@media (max-width: 760px) {
  .robeia-mirror-main {
    display: grid;
    grid-template-columns: 60% minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
  }

  .robeia-mirror-stage,
  .robeia-mirror-side,
  .robeia-mirror-bottom-controls {
    display: contents;
  }

  .robeia-mirror-bottom-controls > :nth-child(2) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .robeia-mirror-bottom-controls > :nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .robeia-mirror-preview {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none;
  }

  .robeia-mirror-bottom-controls > :nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-width: 0;
  }

  .robeia-mirror-left-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    min-width: 0;
  }

  .robeia-mirror-bottom-row {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    min-width: 0;
  }
}

/* Phones: the face crop sliders sit side by side, two per row, inside the face crop panel. */
@media (max-width: 760px) {
  .robeia-mirror-crop-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    align-items: flex-start;
  }

  .robeia-mirror-crop-panel > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  .robeia-mirror-crop-panel > label {
    flex: 1 1 calc(33.333% - 0.5rem);
  }
}

/* Phones: the depth dropdown sits to the right of the search box. */
@media (max-width: 760px) {
  .robeia-mirror-filters {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
  }

  .robeia-mirror-filters > input {
    grid-column: 1 !important;
    width: 100% !important;
  }

  .robeia-mirror-filters > select {
    grid-column: 2 !important;
    width: auto !important;
  }
}

/* Phones: the colour slot buttons sit side by side, in the 40% column beside view mode. */
@media (max-width: 760px) {
  .robeia-mirror-slot-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.3rem;
  }

  .robeia-mirror-slot-selector button {
    min-width: 0;
    padding: 0.3rem 0.1rem;
  }

  .robeia-mirror-slot-selector button span {
    font-size: 0.5rem !important;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 0 !important;
    min-height: 0;
  }
}

/* Phones: the colour slot buttons are the same height as the view mode buttons. */
@media (max-width: 760px) {
  .robeia-mirror-slot-selector button {
    min-height: 1.75rem !important;
  }

  .robeia-mirror-slot-selector button span {
    min-height: 0 !important;
  }
}

/* Phones: the four colour bank tabs sit in one row. */
@media (max-width: 760px) {
  .robeia-mirror-tab-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .robeia-mirror-tab-list button {
    font-size: 0.5rem !important;
    letter-spacing: 0.06em;
    padding: 0 0.2rem;
    white-space: nowrap;
  }
}

/* Colour A / Colour B label: the text follows the colour, so it stays readable on light and dark colours */
.robeia-mirror-slot-selector button span {
  color: var(--slot-ink, #111111) !important;
}

/* Colour A / Colour B: one button under the other on small screens, so nothing overflows */
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
}

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button {
  min-width: 0 !important;
  width: 100%;
  white-space: normal !important;
  padding: 0 0.3rem;
}

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button span {
  white-space: normal !important;
  min-width: 0;
}

/* Colour A and Colour B: always one under the other, each button the full width of the panel */
.robeia-mirror-bottom-controls .robeia-mirror-slot-selector {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 0.3rem;
}

.robeia-mirror-bottom-controls .robeia-mirror-slot-selector button {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* A border around the portrait, the same as the other sections */
.robeia-mirror-preview {
  border: 1px solid var(--robeia-border);
}

/* Phones: the colour bank is tall enough to show the colours down to Yellows */
@media (max-width: 760px) {
  .robeia-mirror-tabs {
    max-height: 135svh;
  }
}

/* Tablets: the colour bank is tall enough to show the colours down to Yellows */
@media (min-width: 761px) and (max-width: 1023px) {
  .robeia-mirror-tabs {
    max-height: 135svh;
  }
}

/* Selected colour card: larger text on phones */
@media (max-width: 760px) {
  .robeia-mirror-selected-shop-card .robeia-mirror-selected-copy h2 {
    font-size: 1.1rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-meta,
  .robeia-mirror-selected-shop-card .robeia-mirror-selected-meta span {
    font-size: 0.55rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-selected-copy small {
    font-size: 0.72rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-favourite-inline {
    font-size: 0.66rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-shop-title {
    font-size: 0.55rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-shop-select {
    font-size: 0.72rem;
  }

  .robeia-mirror-selected-shop-card .robeia-mirror-shop-links a {
    font-size: 0.52rem;
  }
}

/* Desktop: the View mode panel is only as tall as its content and sits at the bottom of its row, next to the portrait */
@media (min-width: 1024px) {
  .robeia-mirror-bottom-controls > :nth-child(2) {
    height: auto;
    align-self: end;
  }
}

/* Phones: View mode sits at the bottom of its row, next to the portrait, like on desktop */
@media (max-width: 760px) {
  .robeia-mirror-bottom-controls > :nth-child(2) {
    height: auto;
    align-self: end;
  }
}