.page:has(.ee-designer) .em-page-header { display: none; }
.page:has(.ee-designer) .em-page-content { width: 100%; max-width: none; padding: 0; }

.ee-designer {
    --ee-brand: var(--surface-brand, #0038a0);
    --ee-brand-dark: var(--em-blue-800, #00287a);
    --ee-brand-soft: var(--surface-brand-soft, #eef3fd);
    --ee-accent: var(--surface-accent, #f5c518);
    --ee-border: var(--border-subtle, #e6e2db);
    --ee-text: var(--text-strong, #171717);
    --ee-muted: var(--text-muted, #6b7280);
    max-width: 1480px;
    margin: 0 auto;
    padding: 28px 24px 72px;
    color: var(--ee-text);
}

.ee-designer *, .ee-designer *::before, .ee-designer *::after { box-sizing: border-box; }
.ee-designer__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ee-designer__eyebrow { color: var(--ee-brand); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.ee-designer__header h2 { margin: 4px 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.ee-designer__header p { margin: 0; color: var(--ee-muted); }
.ee-designer__steps { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--ee-border); border-radius: 999px; background: #fff; }
.ee-designer__steps span { padding: 7px 12px; border-radius: 999px; color: var(--ee-muted); font-size: 12px; font-weight: 650; }
.ee-designer__steps .is-active { background: var(--ee-brand-soft); color: var(--ee-brand); }

.ee-designer__layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(420px, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.ee-panel, .ee-stage-panel { border: 1px solid var(--ee-border); border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(24,48,89,.06); }
.ee-panel { padding: 18px; }
.ee-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ee-panel__heading span { color: var(--ee-brand); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.ee-panel__heading h3 { margin: 2px 0 0; font-size: 18px; }
.ee-search input, .ee-field select, .ee-quantity input { min-height: 40px; border: 1px solid var(--ee-border); border-radius: 10px; background: #fff; }
.ee-search input { width: 116px; padding: 8px 10px; font-size: 13px; }

.ee-artwork-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 610px; overflow: auto; padding: 2px; }
.ee-artwork { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 7px; border: 1px solid var(--ee-border); border-radius: 12px; background: #fff; color: var(--ee-text); text-align: left; cursor: pointer; }
.ee-artwork:hover, .ee-artwork.is-selected { border-color: var(--ee-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ee-brand) 12%, transparent); }
.ee-artwork__image { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f7f7f5; }
.ee-artwork__image img { width: 82%; height: 82%; object-fit: contain; }
.ee-artwork strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ee-artwork small { color: var(--ee-brand); font-size: 11px; }
.ee-empty { padding: 40px 12px; border: 1px dashed var(--ee-border); border-radius: 12px; text-align: center; }
.ee-empty p { margin-bottom: 0; color: var(--ee-muted); font-size: 13px; }

.ee-stage-panel { padding: 14px; }
.ee-stage-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 12px; }
.ee-stage-toolbar div { display: flex; gap: 6px; }
.ee-stage-toolbar button { padding: 6px 10px; border: 1px solid var(--ee-border); border-radius: 8px; background: #fff; color: var(--ee-muted); font-size: 12px; cursor: pointer; }
.ee-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f1efe9; user-select: none; }
.ee-stage__mockup { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ee-stage__area { position: absolute; left: 30%; top: 24%; width: 40%; height: 48%; border: 1px dashed rgba(0,56,160,.42); pointer-events: none; }
.ee-stage__hint { position: absolute; inset: 50% auto auto 50%; padding: 6px 9px; border-radius: 6px; background: rgba(255,255,255,.84); color: var(--ee-muted); font-size: 11px; transform: translate(-50%,-50%); white-space: nowrap; }
.ee-stage__art { position: absolute; left: 50%; top: 50%; width: 46%; cursor: grab; filter: drop-shadow(0 1px 1px rgba(0,0,0,.28)); pointer-events: auto; touch-action: none; transform-origin: center; }
.ee-stage__art:active { cursor: grabbing; }
.ee-stage__art img { display: block; width: 100%; height: auto; pointer-events: none; mix-blend-mode: multiply; }
.ee-stage-note { margin: 10px 4px 0; color: var(--ee-muted); font-size: 12px; text-align: center; }

.ee-options { display: grid; gap: 15px; }
.ee-options .ee-panel__heading { margin-bottom: 0; }
.ee-field { display: grid; gap: 7px; }
.ee-field > span, .ee-range > span, .ee-quantity > span { font-size: 12px; font-weight: 700; }
.ee-field select { width: 100%; padding: 0 11px; color: var(--ee-text); }
.ee-variant-fields { display: grid; gap: 12px; }
.ee-range { display: grid; gap: 7px; }
.ee-range > span { display: flex; justify-content: space-between; }
.ee-range output { color: var(--ee-brand); }
.ee-range input { width: 100%; accent-color: var(--ee-brand); }
.ee-order-box { display: grid; gap: 12px; margin: 4px -4px -4px; padding: 16px; border-radius: 12px; background: var(--ee-brand-soft); }
.ee-order-box > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.ee-order-box > div:first-child span { color: var(--ee-muted); font-size: 13px; }
.ee-order-box > div:first-child strong { color: var(--ee-brand); font-size: 20px; }
.ee-quantity { display: flex; align-items: center; justify-content: space-between; }
.ee-quantity input { width: 72px; padding: 0 8px; text-align: center; }
.ee-add-button { min-height: 50px; padding: 12px 16px; border: 0; border-radius: 11px; background: var(--ee-brand); box-shadow: 0 8px 20px rgba(0,56,160,.18); color: #fff; font-weight: 750; cursor: pointer; }
.ee-add-button:hover { background: var(--ee-brand-dark); transform: translateY(-1px); }
.ee-add-button:disabled { opacity: .55; cursor: wait; transform: none; }
.ee-feedback { min-height: 18px; color: var(--ee-brand); font-size: 12px; text-align: center; }
.ee-feedback.is-error { color: #b42318; }

@media (max-width: 1080px) {
    .ee-designer__layout { grid-template-columns: minmax(220px, 280px) 1fr; }
    .ee-options { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ee-options .ee-panel__heading, .ee-options .ee-order-box { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .ee-designer { padding: 18px 14px 90px; }
    .ee-designer__header { align-items: flex-start; flex-direction: column; }
    .ee-designer__steps { width: 100%; justify-content: space-between; overflow: auto; }
    .ee-designer__layout { display: flex; flex-direction: column; }
    .ee-stage-panel { order: 1; width: 100%; }
    .ee-library { order: 2; width: 100%; }
    .ee-options { order: 3; display: grid; grid-template-columns: 1fr; width: 100%; }
    .ee-options .ee-panel__heading, .ee-options .ee-order-box { grid-column: auto; }
    .ee-artwork-grid { grid-template-columns: repeat(3, minmax(0,1fr)); max-height: none; }
}