/* MRVS sticker controls: flat painted faces, ink outlines, live typography.
   Load after studio.css, motion.css and turntable.css. */
@font-face{
  font-family:"MRVS Rounded";
  src:url('assets/nunito-variable-v1.ttf') format('truetype');
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
}
:root{
  --sticker-ink:#17181c;
  --sticker-paper:#f7efdc;
  --sticker-orange:#ff941f;
  --sticker-font:"MRVS Rounded","Arial Rounded MT Bold",Arial,sans-serif;
}

/* The silhouette carries the sticker style; small text stays solid and clear. */
.button.primary{
  min-height:60px;
  padding:8px 10px 8px 22px;
  gap:18px;
  border:4px solid var(--sticker-ink);
  border-radius:21px;
  background:var(--sticker-orange) url('assets/ui-orange-paper-v2.png') center/cover no-repeat;
  color:var(--sticker-ink);
  box-shadow:0 0 0 2px var(--sticker-paper);
  font-family:var(--sticker-font);
  font-size:14px;
  font-weight:1000;
  line-height:1.3;
  letter-spacing:.2px;
  text-transform:uppercase;
  text-shadow:none;
  -webkit-text-stroke:0;
  filter:none;
  transition:transform .3s var(--ease-out),box-shadow .25s;
}
.button.primary:hover{
  background-color:var(--sticker-orange);
  box-shadow:0 0 0 2px #fff8e9;
  filter:none;
  transform:translateY(-2px) rotate(-.35deg);
}
.button.primary .button-label{font:inherit;letter-spacing:inherit}
.button.primary .button-arrow{
  width:34px;
  height:34px;
  border:2px solid var(--sticker-ink);
  border-radius:50%;
  background:var(--sticker-paper);
  color:var(--sticker-ink);
  box-shadow:none;
}
.button.primary .button-arrow>.icon{width:17px;height:17px;stroke-width:2}
.button.primary:focus-visible,
.secondary-button:focus-visible,
.closing .dark-button:focus-visible{
  outline:2px dashed #fff7e3;
  outline-offset:7px;
}
.hero-actions .secondary-button{
  min-height:60px;
  padding:12px 18px;
  border:2px solid #f7efdc80;
  border-radius:19px;
  background:#1c1d22;
  color:var(--sticker-paper);
  box-shadow:none;
  font-family:var(--sticker-font);
  font-size:13px;
  font-weight:900;
  letter-spacing:.1px;
}
.hero-actions .secondary-button:hover{
  border-color:var(--sticker-paper);
  background:#24252b;
  color:var(--sticker-paper);
  transform:translateY(-2px);
}
.hero-actions .secondary-button>.icon{color:var(--sticker-orange);stroke-width:1.8}
.nav-cta{
  padding:5px 6px 5px 15px;
  border:1.5px solid #f7efdc73;
  border-radius:16px;
  background:#1c1d22;
  box-shadow:none;
  font-family:var(--sticker-font);
  font-size:12px;
  font-weight:900;
}
.nav-cta:hover{background:#24252b;border-color:var(--sticker-paper);box-shadow:none}
.nav-cta>span{
  border:1px solid #f7efdc47;
  border-radius:50%;
  background:none;
  color:var(--sticker-paper);
  box-shadow:none;
}
.nav-cta:hover>span{
  background:var(--sticker-orange);
  border-color:var(--sticker-orange);
  color:var(--sticker-ink);
  transform:translate(1px,-1px);
}
.spec-download.button.primary{
  min-height:50px;
  padding:11px 14px;
  gap:10px;
  border-width:3px;
  border-radius:16px;
  font-size:12px;
  letter-spacing:.15px;
}
.spec-download.button.primary>.icon{width:16px;height:16px;stroke-width:1.9}

/* Small controls echo the same paper-and-ink palette without thick letter strokes. */
.filter,.preview-tab{font-family:var(--sticker-font);font-weight:900}
.filter.active{
  background:var(--sticker-orange) url('assets/ui-orange-paper-v2.png') center/cover no-repeat;
  border-color:var(--sticker-ink);
  color:var(--sticker-ink);
  box-shadow:0 0 0 1px var(--sticker-paper);
}
.filter.active:hover{background-color:var(--sticker-orange);color:var(--sticker-ink)}
.preview-tab.active{
  background:var(--sticker-paper);
  color:var(--sticker-ink);
  border-color:var(--sticker-ink);
  box-shadow:0 0 0 1px #f7efdc9c;
}
.preview-tab.active:hover{color:var(--sticker-ink)}
.round-button,.saved-button,.card-topbar .favorite,.dialog-close,.menu-button{
  border:1.5px solid #f7efdc57;
  background:#1c1d22;
  box-shadow:none;
}
.round-button:hover,.saved-button:hover,.dialog-close:hover{
  border-color:var(--sticker-paper);
  background:#292a30;
  color:var(--sticker-paper);
}
.card-topbar .favorite:hover,.card-topbar .favorite[aria-pressed=true]{
  border-color:var(--sticker-ink);
  background:var(--sticker-orange);
  color:var(--sticker-ink);
  box-shadow:0 0 0 1px var(--sticker-paper);
}
.card-topbar .model-gallery{
  font-family:var(--sticker-font);
  font-weight:1000;
  font-size:9px;
  border-color:#f7efdc57;
  border-radius:9px;
  background:#1c1d22;
  color:var(--sticker-paper);
}
.card-topbar .model-gallery:hover{border-color:var(--sticker-paper);color:var(--sticker-paper)}
.turntable .turntable-button{
  border:2px solid var(--sticker-ink);
  border-radius:9px;
  background:var(--sticker-paper);
  color:var(--sticker-ink);
  box-shadow:none;
  font-weight:700;
}
.turntable .turntable-button:hover{
  background:var(--sticker-orange);
  border-color:var(--sticker-ink);
  color:var(--sticker-ink);
}

/* Flat paper panel: there is no stretched button plate or raised side wall. */
.closing{
  border:3px solid var(--sticker-ink);
  border-radius:25px;
  background:var(--sticker-orange) url('assets/ui-orange-paper-v2.png') center/cover no-repeat;
  color:var(--sticker-ink);
  box-shadow:0 0 0 1px #f7efdc99;
  outline:0;
}
.closing:before,.closing:after{content:none;display:none}
.closing h2{
  font-family:var(--sticker-font);
  font-weight:1000;
  line-height:1.04;
  letter-spacing:-2.2px;
  color:var(--sticker-ink);
  text-shadow:none;
  -webkit-text-stroke:0;
}
.closing h2>span{color:var(--sticker-ink)}
.closing-top>.eyebrow,.closing-bottom{color:var(--sticker-ink)}
.closing-bottom{border-top-color:#17181c45}
.closing .dark-button{
  min-height:58px;
  gap:19px;
  padding:8px 10px 8px 19px;
  border:3px solid var(--sticker-ink);
  border-radius:19px;
  background:var(--sticker-paper);
  color:var(--sticker-ink);
  box-shadow:0 0 0 1px var(--sticker-paper);
  font-family:var(--sticker-font);
  font-size:14px;
  font-weight:1000;
  letter-spacing:.2px;
  text-transform:uppercase;
  filter:none;
}
.closing .dark-button:hover{
  background:#fff8e9;
  color:var(--sticker-ink);
  box-shadow:0 0 0 1px #fff8e9;
  transform:translateY(-2px) rotate(.35deg);
}
.closing .dark-button .button-arrow{
  width:34px;
  height:34px;
  border:2px solid var(--sticker-ink);
  border-radius:50%;
  background:var(--sticker-orange);
  color:var(--sticker-ink);
  box-shadow:none;
}
.closing .dark-button .button-arrow>.icon{stroke-width:2}

@media(max-width:1200px){
  .hero-actions .button.primary{font-size:13px;padding-left:18px;gap:15px}
  .hero-actions .secondary-button{font-size:12px;padding-inline:15px}
}
@media(max-width:680px){
  .hero-actions .button.primary{min-height:58px;font-size:13px;border-radius:19px;padding:8px 10px 8px 18px;gap:14px}
  .hero-actions .secondary-button{min-height:52px;font-size:12px;border-radius:18px;padding:12px 16px}
  .spec-download.button.primary{min-height:50px;font-size:11px;border-radius:16px;padding:11px 13px}
  .closing{border-radius:22px}
  .closing h2{font-size:44px;letter-spacing:-1.3px;line-height:1.04}
  .closing .dark-button{min-height:54px;font-size:13px;border-radius:18px;padding-left:17px;gap:19px}
  .card-topbar .model-gallery{font-size:9px}
}
@media(max-width:360px){
  .hero-actions .button.primary{font-size:12px;letter-spacing:0}
  .hero-actions .secondary-button{font-size:12px}
  .closing h2{font-size:39px;letter-spacing:-1px}
  .closing .dark-button{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .button.primary,.hero-actions .secondary-button,.nav-cta,.closing .dark-button{transition:none}
}