/* Media Grill Organizer Studio V3.1 UI layer.
   Presentation only: step rail, promotion card, review polish, focus states.
   Loaded after the V3 stylesheets; no V3 selector is removed, only refined. */

.studio-page{
  --mg-gold:#ffc300;
  --mg-ink:#0f0f0f;
  --mg-muted:#8e8e93;
  --mg-line:#e6e6ec;
  --mg-radius:24px;
}

/* ——— Step rail (desktop) ——— */
@media(min-width:761px){
  .studio-page .studio-section-nav{position:sticky;top:12px;z-index:35;margin-bottom:18px}
}
.studio-page .studio-step-rail{
  list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:6px;
  background:#fff;border:1px solid var(--mg-line);border-radius:99px;
  box-shadow:0 1px 2px #0f0f0f08;
}
.studio-step-rail li{flex:1;min-width:0}
.studio-step-rail a{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 12px;
  border-radius:99px;font-size:12px;font-weight:600;color:#6d6d75;text-decoration:none;
  white-space:nowrap;transition:background .16s ease,color .16s ease;
}
.studio-step-rail a i{
  flex:none;width:7px;height:7px;border-radius:50%;background:#d9d9de;transition:background .16s ease;
}
.studio-step-rail a.is-done i{background:var(--mg-gold)}
.studio-step-rail a.is-active{background:#0f0f0f;color:#fff}
.studio-step-rail a.is-active i{background:var(--mg-gold)}
.studio-step-rail a:hover:not(.is-active){background:#f2f2f5;color:#17171a}
.studio-step-rail a:focus-visible{outline:3px solid #d8ac2b;outline-offset:2px}
/* The select remains the mobile navigation control. */
@media(min-width:761px){.studio-page .studio-section-nav>label,.studio-page .studio-section-nav>select{display:none}}
@media(max-width:760px){.studio-page .studio-step-rail{display:none}}

/* ——— Promotion / Featured card ——— */
.studio-page .studio-promotion-card{border-left:4px solid var(--mg-gold)}
.studio-promotion-card .studio-eyebrow{margin-bottom:10px}
.studio-promotion-card h2{font-size:20px;letter-spacing:-.02em;margin:0}
.studio-promotion-lead{font-size:12px;line-height:1.6;color:#71717a;margin:8px 0 0}
.studio-promotion-price{display:flex;align-items:baseline;gap:8px;margin:16px 0 18px}
.studio-promotion-price strong{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--mg-ink)}
.studio-promotion-price span{font-size:11px;color:var(--mg-muted)}
.studio-promotion-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:13px;font-weight:600;color:#17171a;margin:0}
.studio-promotion-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.studio-promotion-switch{
  flex:none;width:42px;height:24px;border-radius:99px;background:#e4e4e9;position:relative;transition:background .18s ease;
}
.studio-promotion-switch:after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px #0003;transition:transform .18s ease;
}
.studio-promotion-toggle input:checked+.studio-promotion-switch{background:var(--mg-gold)}
.studio-promotion-toggle input:checked+.studio-promotion-switch:after{transform:translateX(18px)}
.studio-promotion-toggle input:focus-visible+.studio-promotion-switch{outline:3px solid #d8ac2b;outline-offset:2px}

/* ——— Review anchor ——— */
#studio-review{display:block;scroll-margin-top:120px}

/* ——— Shared focus discipline ——— */
.studio-page a:focus-visible,.studio-page button:focus-visible{outline:3px solid #d8ac2b;outline-offset:3px}

/* ——— Subtle motion ——— */
@media(prefers-reduced-motion:no-preference){
  .mges-opp-card{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
  .studio-step-rail a{transition:background .16s ease,color .16s ease}
}