/* Give the model a quiet line of grain while its real render is being prepared. */
html[data-profile="touch32"] body.minimal #app .mini-card .product-image[data-model-expected="true"]:has(.touch-card-model:not([data-ready="true"]):not([data-failed="true"]))::after {
  inset: 50% auto auto 50%;
  width: 72px;
  height: 4px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, #dfd9cb 0 1px, transparent 1.35px) center / 8px 4px repeat-x;
  opacity: .33;
  animation: none;
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-profile="touch32"] body.minimal #app .mini-card .product-image[data-model-expected="true"]:has(.touch-card-model:not([data-ready="true"]):not([data-failed="true"]))::after {
    mask-size: 46% 100%;
    mask-repeat: no-repeat;
    animation: study-grain-wait 2.25s ease-in-out infinite alternate;
  }
}

@keyframes study-grain-wait {
  from { mask-position: left; opacity: .24; }
  50% { opacity: .56; }
  to { mask-position: right; opacity: .24; }
}


/* 01 — Fil lumineux on the editorial panel, keeping the reference type scale. */
html[data-profile="touch32"] body.minimal:is(:not([data-study-layout]), [data-study-layout="thread"]) #app .mini-look-anchors .anchor-stage {
  border: 0;
  background: var(--touch-anchor-surface);
  position: relative;
}
html[data-profile="touch32"] body.minimal:is(:not([data-study-layout]), [data-study-layout="thread"]) #app .anchor-stage::after {
  content: ''; position: absolute; bottom: 0; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, #e3ded4a8, #e3ded422 65%, transparent);
}
html[data-profile="touch32"] body.minimal:is(:not([data-study-layout]), [data-study-layout="thread"]) #app .touch-anchor-tabs button:not(.touch-style-tab) {
  position: relative;
  border: 1px solid transparent;
  border-bottom-color: #ddd8cd30;
  background: #191917c7;
  color: #c4c0b6;
  transition: transform .32s ease, background .32s ease, color .32s ease, border-color .32s ease, box-shadow .32s ease;
}
html[data-profile="touch32"] body.minimal:is(:not([data-study-layout]), [data-study-layout="thread"]) #app .touch-anchor-tabs button[aria-pressed="true"]:not(.touch-style-tab) {
  color: #f1ede4;
  background: #30302be0;
  border-color: #ddd8cd20;
  border-bottom-color: #e7e1d5a8;
  box-shadow: 0 7px 12px -10px #e6dfbfb0;
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  html[data-profile="touch32"] body.minimal:is(:not([data-study-layout]), [data-study-layout="thread"]) #app .touch-anchor-tabs button:not(.touch-style-tab) { transform: none; transition: none; }
}


/* Keep paging in the central touch zone, between the two rows. */
html[data-profile="touch32"] body.minimal #app .mini-rail > .touch-pager {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 62px;
  gap: 20px;
  border: 0;
  background: transparent;
}
html[data-profile="touch32"] body.minimal #app .mini-rail { row-gap: 12px; }
html[data-profile="touch32"] body.minimal #app .mini-rail > .touch-pager button { min-height: 58px; }
html[data-profile="touch32"] body.minimal #app .mini-selection-title { margin-top: 20px; margin-bottom: 18px; }


/* One light source per frame visual. It sits behind the exact image or canvas. */
body.minimal:not([data-lighting-study]) #app [data-frame-light] {
  position: relative;
  isolation: isolate;
}
body.minimal:not([data-lighting-study]) #app .frame-halo {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  margin: 0;
  inset: 10% 17%;
  background: var(--touch-frame-halo);
}
html[data-touch-theme="white-city"] body.minimal:not([data-lighting-study]) #app .frame-halo {
  background: radial-gradient(ellipse at center, rgb(255 253 247 / .18), rgb(255 253 247 / .09) 24%, transparent 73%);
}
body.minimal #app .light-study-reflection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
html[data-profile="touch32"] body.minimal:not([data-lighting-study]) #app [data-frame-selected="true"],
html[data-profile="touch32"] body.minimal:not([data-lighting-study]) #app [data-frame-selectable]:active {
  border-color: var(--mineral-secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mineral-secondary) 24%, transparent);
}
html[data-profile="touch32"] body.minimal:not([data-lighting-study]) #app .mini-card.is-described:not([data-frame-selected="true"]):not(:active):not([data-owned="exact"]):not([data-owned="model"]) {
  border-color: var(--mineral-soft-line);
  box-shadow: none;
}

html[data-profile="touch32"] body.minimal #app .model-mount[data-preview-state="loading"] .model-loading {
  animation: none;
  position: absolute;
  inset: 74% auto auto 50%;
  width: 72px;
  height: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  transform: translate(-50%, -50%);
  color: transparent;
  background: radial-gradient(circle, var(--mineral-secondary) 0 1px, transparent 1.35px) center / 8px 4px repeat-x;
  opacity: .45;
}
html[data-profile="touch32"] body.minimal #app .model-mount[data-preview-state="loading"] .model-loading::before,
html[data-profile="touch32"] body.minimal #app .model-mount[data-preview-state="loading"] .model-loading::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-profile="touch32"] body.minimal #app .model-mount[data-preview-state="loading"] .model-loading {
    mask: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent) left / 46% 100% no-repeat;
    animation: study-grain-wait 2.25s ease-in-out infinite alternate;
  }
}

body.minimal:not([data-lighting-study]) #app .mini-pair .model-mount[data-frame-light] { position: absolute; }
body.minimal dialog .product-image:has(img[src*="/frames-touch32/"]) {
  background: radial-gradient(ellipse at center, rgb(233 230 218 / .18), transparent 62%);
}