/* Helmi Studio widget */
.helmi-studio {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 16px 32px;
    font-family: var(--font, Inter, system-ui, sans-serif);
    color: var(--text, #1F2937);
    background: var(--bg, #fff);
}
.helmi-studio-main.is-booting { display: none !important; }

.studio-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    padding-right: 120px;
    min-height: 36px;
}
.studio-header .helmi-lang-flags {
    position: absolute;
    top: 0;
    right: 0;
}
.studio-logo { max-height: 48px; width: auto; }
.studio-brand-text {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.studio-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    padding: 6px;
    background: linear-gradient(180deg, #F9FAFB, #F3F4F6);
    border-radius: calc(var(--radius, 12px) + 2px);
    border: 1px solid #E5E7EB;
}
.studio-nav-btn {
    flex: 1 1 auto;
    min-width: 120px;
    border: none;
    background: transparent;
    padding: 12px 14px;
    border-radius: var(--radius, 12px);
    font-weight: 600;
    font-size: 0.9rem;
    color: #6B7280;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s;
}
.studio-nav-btn:hover { color: var(--primary); background: #fff; }
.studio-nav-btn.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.studio-panel { animation: studioFade .35s ease; }
@keyframes studioFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.studio-lead { color: #6B7280; margin-bottom: 16px; }

.studio-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.studio-loc-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
.studio-loc-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #6B7280;
    margin-right: 4px;
}
.studio-loc-chip {
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #374151;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}
.studio-loc-chip:hover { border-color: var(--primary); color: var(--primary); }
.studio-loc-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.studio-loc-cta {
    margin-left: 4px;
    white-space: nowrap;
}
.studio-view-toggle { display: flex; gap: 4px; }
.studio-view-toggle button {
    border: 1px solid #E5E7EB;
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
}
.studio-view-toggle button.is-active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.studio-month-label {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: capitalize;
}

.studio-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}
.studio-cal-head {
    text-align: center;
    font-size: 0.75rem;
    color: #9CA3AF;
    font-weight: 600;
    padding: 4px;
}
.studio-cal-day {
    min-height: 72px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.studio-cal-day:hover { border-color: var(--primary); }
.studio-cal-day.is-empty { background: #FAFAFA; cursor: default; opacity: .5; }
.studio-cal-day.has-events { border-color: color-mix(in srgb, var(--primary) 35%, #E5E7EB); }
.studio-cal-day.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.studio-cal-num { font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.studio-cal-dot {
    display: block;
    font-size: 0.65rem;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-week {
    display: grid;
    gap: 12px;
}
.studio-week-day {
    border: 1px solid #E5E7EB;
    border-radius: var(--radius);
    padding: 14px;
    background: linear-gradient(135deg, #fff, #F9FAFB);
}
.studio-week-day h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    text-transform: capitalize;
}

.studio-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: #fff;
    transition: transform .15s, box-shadow .15s;
}
.studio-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.studio-card h3 { margin: 0 0 4px; font-size: 1rem; }
.studio-card .meta { font-size: 0.85rem; color: #6B7280; }
.studio-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.studio-card-actions .helmi-btn { width: auto; padding: 8px 14px; font-size: 0.85rem; margin: 0; }

.studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.studio-product {
    border: 1px solid #E5E7EB;
    border-radius: var(--radius);
    padding: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.studio-product-image {
    width: calc(100% + 36px);
    max-width: none;
    margin: -18px -18px 0;
    height: 160px;
    object-fit: cover;
    display: block;
    background: #F3F4F6;
}
.studio-product h3 { margin: 0; font-size: 1.05rem; }
.studio-product .price { font-weight: 700; color: var(--primary); font-size: 1.15rem; }
.studio-product .helmi-btn { margin-top: auto; }
.studio-detail-image {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 14px;
    margin: 0 0 14px;
    display: block;
    background: #F3F4F6;
}

.studio-modal {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 50; padding: 16px;
}
.studio-modal.hidden { display: none !important; }
.studio-modal-card {
    background: #fff;
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    padding: 0;
    position: relative;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}
.studio-modal-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    border: none; background: rgba(255,255,255,.9); width: 36px; height: 36px; border-radius: 50%;
    font-size: 1.4rem; cursor: pointer; color: #6B7280; line-height: 1;
}
.studio-modal-body, #studio-modal-body { padding: 28px 24px 24px; }
.studio-detail-hero {
    margin: -28px -24px 20px;
    padding: 32px 24px 22px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, #fff), #F8FAFC);
    border-bottom: 1px solid #E5E7EB;
}
.studio-detail-hero h2 { margin: 0 0 12px; font-size: 1.55rem; letter-spacing: -0.02em; }
.studio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-chip {
    display: inline-flex; align-items: center;
    padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    background: #fff; border: 1px solid #E5E7EB; color: #374151;
}
.studio-chip-price { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, #E5E7EB); }
.studio-detail-hr {
    border: 0;
    border-top: 1px solid #E8EAEF;
    margin: 20px 0 16px;
    opacity: 0.85;
}
.studio-session-list { margin: 0; }
.studio-session-list h4 { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; color: #4B5563; }
.studio-session-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.studio-session-list li {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 12px; background: #F9FAFB; border: 1px solid #EEF2F7;
}
.studio-detail-cta {
    position: sticky; bottom: 0; margin: 24px -24px -24px; padding: 16px 24px;
    background: linear-gradient(180deg, transparent, #fff 30%); border-top: 1px solid #F3F4F6;
}
.studio-checkout-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 0 24px;
}
#legal-modal { z-index: 1200; }
.studio-checkout-steps {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 16px; font-size: 0.85rem; font-weight: 600; color: #9CA3AF;
}
.studio-checkout-steps .is-active { color: var(--primary); }
.studio-checkout-steps .is-done { color: #059669; }
.studio-checkout-steps-sep { color: #D1D5DB; font-weight: 500; }
.studio-checkout-form h3 { margin: 0 0 14px; font-size: 1.15rem; }
.studio-checkout-form .form-group { margin-bottom: 12px; }
.studio-checkout-form label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.studio-checkout-form .helmi-input, .studio-checkout-form select.helmi-input {
    width: 100%; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 10px; font: inherit;
}
.studio-checkout-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.studio-checkout-actions.helmi-nav-buttons { justify-content: space-between; }
.studio-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 0.9rem; }
.studio-checkout-form .helmi-legal { margin: 16px 0 8px; }
.studio-checkout-form .helmi-promo-section { margin-top: 8px; }
.studio-checkout-form .helmi-summary { margin-bottom: 16px; }
.studio-checkout-form .helmi-payment-methods { margin-bottom: 12px; }
.studio-checkout-form .helmi-secure-badge { margin-bottom: 12px; }
.studio-flash {
    margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: 0.95rem;
}
.studio-flash.is-ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.studio-flash.is-fail { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.studio-staff-line { margin: 6px 0 8px; font-size: 0.88rem; line-height: 1.4; }
.studio-staff-block { margin: 16px 0 12px; }
.studio-staff-block .helmi-staff-card { cursor: default; }
.studio-staff-block .helmi-staff-card:hover { border-color: #E5E7EB; }
#helmi-staff-modal { z-index: 1200; }
.studio-reception-frame-wrap {
    border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden;
    background: #fff; min-height: 640px;
}
.studio-reception-iframe { width: 100%; min-height: 680px; border: 0; display: block; }
.studio-rich { line-height: 1.65; font-size: 0.95rem; }
.studio-rich h2 { font-size: 1.2rem; margin: 0 0 10px; }
.studio-rich p { margin: 0 0 10px; }

@media (max-width: 600px) {
    .studio-header {
        flex-wrap: wrap;
        padding-right: 0;
        padding-top: 0;
        row-gap: 8px;
    }
    .studio-header .helmi-lang-flags:not([hidden]) {
        position: static;
        order: -1;
        width: 100%;
        justify-content: flex-end;
        margin: 0;
    }
    .studio-cal-day { min-height: 56px; padding: 4px; }
    .studio-nav-btn { min-width: 46%; font-size: 0.8rem; padding: 10px; }
}

/* Compact density */
.helmi-studio.helmi-density-compact {
    padding: 14px 12px 24px;
    font-size: 0.9rem;
}
.helmi-studio.helmi-density-compact .studio-brand-text { font-size: 1.05rem; }
.helmi-studio.helmi-density-compact .studio-logo { max-height: 40px; }
.helmi-studio.helmi-density-compact .studio-nav { margin-bottom: 16px; padding: 4px; gap: 4px; }
.helmi-studio.helmi-density-compact .studio-nav-btn { padding: 9px 10px; font-size: 0.8rem; min-width: 100px; }
.helmi-studio.helmi-density-compact .studio-card { padding: 12px; }
.helmi-studio.helmi-density-compact .studio-cal-day { min-height: 58px; padding: 4px; }
.helmi-studio.helmi-density-compact .studio-cal-dot { font-size: 0.58rem; }
.helmi-studio.helmi-density-compact .studio-checkout-form .helmi-input,
.helmi-studio.helmi-density-compact .studio-checkout-form select.helmi-input {
    padding: 8px 10px; font-size: 0.88rem;
}
.helmi-studio.helmi-density-compact .studio-checkout-form .form-group { margin-bottom: 9px; }
.helmi-studio.helmi-density-compact .studio-checkout-form label { font-size: 0.78rem; }
.helmi-studio.helmi-density-compact .studio-reception-frame-wrap { min-height: 560px; }
.helmi-studio.helmi-density-compact .studio-reception-iframe { min-height: 600px; }

/* Guided layout variants */
.studio-guided-wrap { display: block; }
.studio-guided-wrap #studio-day-list[hidden] { display: none !important; }
.studio-day-heading {
    margin: 8px 0 12px;
    text-transform: capitalize;
    font-size: 1.05rem;
}
/* Agenda + kuukausi: pieni kalenteri vasemmalla, päivän lista oikealla */
.studio-layout-agenda .studio-guided-wrap.studio-view-month {
    display: grid;
    grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.studio-layout-agenda .studio-cal-day { min-height: 48px; }
.studio-layout-agenda .studio-cal-dot { display: none; }
.studio-layout-agenda .studio-view-month #studio-day-list {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px;
    min-height: 220px;
}
/* Agenda + viikko: yksi täysleveä lista, ei tyhjää sivupaneelia */
.studio-layout-agenda .studio-guided-wrap.studio-view-week {
    display: block;
}
.studio-layout-dense .studio-cal-day { min-height: 88px; }
.studio-layout-dense .studio-cal-dot {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.62rem;
    line-height: 1.25;
}
.studio-cal-more {
    display: block;
    font-size: 0.6rem;
    color: #6B7280;
    font-weight: 600;
    margin-top: 2px;
}
.studio-week-chip {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #E5E7EB;
    background: #fff;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 0 0 6px;
    font-size: 0.78rem;
    cursor: pointer;
}
.studio-week-chip:hover { border-color: var(--primary); color: var(--primary); }
.studio-week-dense { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.studio-week-dense .studio-week-day h4 { font-size: 0.78rem; margin-bottom: 6px; }
.studio-week-agenda {
    display: grid;
    gap: 12px;
    max-width: 720px;
}
.studio-week-agenda .studio-week-day {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
}
.studio-week-agenda .studio-week-day h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    text-transform: capitalize;
}
.studio-week-agenda .studio-week-day .meta {
    margin: 0;
    color: #9CA3AF;
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    .studio-layout-agenda .studio-guided-wrap.studio-view-month { grid-template-columns: 1fr; }
    .studio-week-dense { grid-template-columns: 1fr; }
    .studio-week-agenda { max-width: none; }
}

/* —— Virta (flow): hero + päivästrip + aikajana —— */
.studio-layout-flow .studio-guided-wrap,
.studio-guided-wrap.studio-layout-flow {
    display: block;
}
.studio-flow-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 22px 22px 20px;
    margin-bottom: 16px;
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--primary, #0D7A4F) 22%, transparent), transparent 55%),
        linear-gradient(145deg, #0F172A 0%, #1E293B 55%, #0F172A 100%);
    color: #F8FAFC;
    animation: studioFlowHeroIn .45s ease both;
}
.studio-flow-hero-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    right: -40px;
    top: -50px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary, #0D7A4F) 35%, transparent);
    filter: blur(28px);
    pointer-events: none;
}
.studio-flow-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--primary, #6EE7B7) 80%, #fff);
    position: relative;
}
.studio-flow-hero-title {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    position: relative;
}
.studio-flow-hero-meta {
    margin: 0 0 14px;
    color: #CBD5E1;
    font-size: 0.95rem;
    text-transform: capitalize;
    position: relative;
}
.studio-flow-hero-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
}
.studio-flow-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 0.78rem;
    font-weight: 600;
}
.studio-flow-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}
.studio-flow-hero .helmi-btn-primary {
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.studio-flow-hero .helmi-btn-secondary {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.studio-flow-hero .helmi-btn-secondary:hover {
    background: rgba(255,255,255,.18);
}

.studio-flow-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin-bottom: 8px;
    scrollbar-width: thin;
}
.studio-flow-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 52px;
    padding: 8px 6px;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, transform .15s, background .15s, box-shadow .15s;
}
.studio-flow-chip:hover {
    border-color: color-mix(in srgb, var(--primary, #0D7A4F) 45%, #E5E7EB);
    transform: translateY(-1px);
}
.studio-flow-chip.is-today {
    border-color: color-mix(in srgb, var(--primary, #0D7A4F) 55%, #E5E7EB);
}
.studio-flow-chip.is-selected,
.studio-flow-chip.has-events.is-selected {
    background: color-mix(in srgb, var(--primary, #0D7A4F) 12%, #fff);
    border-color: var(--primary, #0D7A4F);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #0D7A4F) 18%, transparent);
}
.studio-flow-chip-dow {
    font-size: 0.65rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
}
.studio-flow-chip-num {
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.1;
    color: #111827;
}
.studio-flow-chip-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary, #0D7A4F);
}
.studio-flow-chip-count.is-empty { color: #D1D5DB; }

.studio-flow-day { margin: 0 0 22px; }
.studio-flow-day-label {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: capitalize;
    color: #374151;
}
.studio-flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.studio-flow-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 10px;
    animation: studioFlowItemIn .4s ease both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.studio-flow-rail {
    position: relative;
    display: flex;
    justify-content: center;
}
.studio-flow-rail::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: -18px;
    width: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary, #0D7A4F) 45%, #E5E7EB), #E5E7EB);
}
.studio-flow-item:last-child .studio-flow-rail::before { display: none; }
.studio-flow-dot {
    width: 12px;
    height: 12px;
    margin-top: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary, #0D7A4F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0D7A4F) 16%, transparent);
    z-index: 1;
}
.studio-flow-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.studio-flow-card:hover {
    border-color: color-mix(in srgb, var(--primary, #0D7A4F) 35%, #E5E7EB);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    transform: translateY(-1px);
}
.studio-flow-card-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    flex: 1 1 220px;
}
.studio-flow-time {
    flex: 0 0 auto;
    min-width: 52px;
    font-weight: 750;
    font-size: 0.95rem;
    color: var(--primary, #0D7A4F);
    font-variant-numeric: tabular-nums;
}
.studio-flow-time span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9CA3AF;
}
.studio-flow-card h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
}
.studio-flow-card .meta {
    margin: 0;
    font-size: 0.82rem;
    color: #6B7280;
}
.studio-flow-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.studio-flow-item.is-past {
    opacity: 0.55;
}
.studio-flow-item.is-past .studio-flow-dot {
    border-color: #9CA3AF;
    box-shadow: none;
}
.studio-flow-item.is-full .helmi-btn-primary[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.studio-flow-today { white-space: nowrap; }

@keyframes studioFlowHeroIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@keyframes studioFlowItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
    .studio-flow-hero { padding: 18px 16px; }
    .studio-flow-hero-title { font-size: 1.25rem; }
    .studio-flow-card { padding: 12px; }
    .studio-flow-card-actions { width: 100%; }
    .studio-flow-card-actions .helmi-btn { flex: 1 1 auto; }
}

.weekcal-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.weekcal-badge.is-course { background: #EEF2FF; color: #3730A3; }
.weekcal-badge.is-guided { background: #ECFDF5; color: #047857; }
.weekcal-content {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #4B5563;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.weekcal-empty { color: #6B7280; font-size: 0.85rem; margin: 0; }
a.weekcal-book { text-decoration: none; width: auto; min-width: 96px; padding: 10px 16px; }
.studio-week-day.is-past { opacity: 0.72; }

/* Studio in-place (week / week-grid → studio without leaving widget) */
html.helmi-overlay-open,
html.helmi-overlay-open body {
    overflow: hidden;
}
.helmi-studio-main.is-hidden-for-studio {
    display: none !important;
}
.helmi-studio-inplace {
    display: flex;
    flex-direction: column;
    min-height: 640px;
    height: min(92vh, 900px);
    background: #fff;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    border: 1px solid #E5E7EB;
}
.helmi-studio-inplace-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}
.helmi-studio-inplace-back {
    width: auto !important;
    margin: 0 !important;
    padding: 8px 14px !important;
}
.helmi-studio-inplace-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #fff;
    min-height: 560px;
}
/* legacy class kept for safety */
.helmi-studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
}

.studio-cap-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.studio-cap-badge.cap-green { background: #16a34a; }
.studio-cap-badge.cap-yellow { background: #ca8a04; }
.studio-cap-badge.cap-red { background: #dc2626; }
.studio-card.has-cap { position: relative; }