/* ==========================================================================
   Easyprint Core — components (ordering form, uploads, designer, account).
   Colours and type come from the theme's tokens; the fallbacks below keep
   things usable under any theme. Square corners throughout, by design.
   ========================================================================== */

:root {
	--ep-ink: var(--ink, #231f20);
	--ep-paper: var(--well, #f3f3f3);
	--ep-line: var(--line, #dddddd);
	--ep-muted: var(--muted, #6b6765);
	--ep-cyan: var(--cyan, #4e91d3);
	--ep-magenta: var(--magenta, #b91c70);
	--ep-yellow: var(--yellow, #f2f145);
	--ep-ok: #1f7a4d;
	--ep-warn: #9a5b00;
	--ep-ease: cubic-bezier(.2, .7, .2, 1);
}

.ep-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.ep-hint { margin: .5rem 0 0; font-size: .875rem; color: var(--ep-muted); }
.ep-link { color: var(--ep-ink); font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--ep-magenta); text-underline-offset: 3px; }
.ep-lead { font-size: 1.0625rem; color: var(--ep-muted); max-width: 60ch; }
.ep-empty { padding: 1.5rem; background: var(--ep-paper); color: var(--ep-muted); }
.ep-hp { position: absolute; left: -9999px; }

.ep-note { display: flex; gap: .75rem; align-items: flex-start; margin: 0; padding: 1rem 1.125rem; background: var(--ep-paper); border-left: 4px solid var(--ep-cyan); font-size: .9375rem; }
.ep-note.is-ok { border-left-color: var(--ep-ok); }
.ep-note .ep-icon { margin-top: .1em; }
.ep-error { margin: .75rem 0 0; padding: .75rem 1rem; background: #fbeaf2; border-left: 4px solid var(--ep-magenta); font-size: .9375rem; font-weight: 500; }

/* --- Ordering form ------------------------------------------------------- */

.ep-config { margin: 1.5rem 0 0; }
.ep-step { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.ep-step__title { display: flex; align-items: center; gap: .75rem; width: 100%; margin: 0 0 .875rem; padding: 0; font-size: .875rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ep-step__title small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ep-muted); }
.ep-step__num {
	display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none;
	background: var(--ep-ink); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}

.ep-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ep-chip { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 2.875rem; padding: .625rem 1rem; border: 1.5px solid var(--ep-line); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; font: inherit; color: inherit; text-align: left; }
.ep-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ep-chip__label { font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.ep-chip small { margin-top: .125rem; font-size: .75rem; color: var(--ep-muted); }
.ep-chip:hover { border-color: var(--ep-ink); }
.ep-chip:has(input:checked), .ep-chip[aria-pressed="true"] { border-color: var(--ep-ink); background: var(--ep-ink); color: #fff; box-shadow: 4px 4px 0 var(--ep-yellow); }
.ep-chip:has(input:checked) small { color: rgba(255, 255, 255, .75); }
.ep-chip:has(input:focus-visible), .ep-chip--button:focus-visible { outline: 3px solid var(--ep-cyan); outline-offset: 2px; }

/* Quantity × turnaround price grid */
.ep-grid-wrap { overflow-x: auto; border: 1.5px solid var(--ep-ink); }
.ep-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ep-grid th, .ep-grid td { padding: 0; border-bottom: 1px solid var(--ep-line); text-align: center; }
.ep-grid thead th { padding: .75rem .5rem; background: var(--ep-ink); color: #fff; font-size: .8125rem; font-weight: 700; vertical-align: bottom; }
.ep-grid thead th:first-child { text-align: left; padding-left: 1rem; }
.ep-grid thead small { display: block; margin-top: .125rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.ep-grid tbody th { padding: .625rem 1rem; text-align: left; font-weight: 700; background: var(--ep-paper); white-space: nowrap; }
.ep-grid tbody tr:last-child > * { border-bottom: 0; }
.ep-cell { position: relative; display: block; padding: .75rem .5rem; cursor: pointer; transition: background .12s; }
.ep-cell input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ep-cell__price { font-weight: 600; }
.ep-cell:hover { background: #fffde0; }
.ep-cell:has(input:checked) { background: var(--ep-yellow); box-shadow: inset 0 0 0 2px var(--ep-ink); }
.ep-cell:has(input:checked) .ep-cell__price { font-weight: 800; }
.ep-cell:has(input:focus-visible) { outline: 3px solid var(--ep-cyan); outline-offset: -3px; }

/* Banner size */
.ep-size { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: .875rem; }
.ep-size label { display: grid; gap: .25rem; font-size: .8125rem; font-weight: 600; }
.ep-size input { width: 8.5rem; padding: .625rem .75rem; border: 1.5px solid var(--ep-ink); font: inherit; font-size: 1rem; font-weight: 600; border-radius: 0; }
.ep-size__x { padding-bottom: .75rem; font-weight: 700; }
.ep-size__qty input { width: 6rem; }

/* Artwork choice cards */
.ep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.ep-card { position: relative; display: grid; align-content: start; gap: .25rem; padding: 1rem; border: 1.5px solid var(--ep-line); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ep-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ep-card__icon { color: var(--ep-magenta); }
.ep-card__icon .ep-icon { width: 1.75rem; height: 1.75rem; }
.ep-card__title { font-weight: 700; font-size: .9375rem; }
.ep-card__desc { font-size: .8125rem; line-height: 1.4; color: var(--ep-muted); }
.ep-card:hover { border-color: var(--ep-ink); }
.ep-card:has(input:checked) { border-color: var(--ep-ink); box-shadow: inset 0 0 0 1px var(--ep-ink), 4px 4px 0 var(--ep-cyan); }
.ep-card:has(input:focus-visible) { outline: 3px solid var(--ep-cyan); outline-offset: 2px; }
.ep-panel { margin-top: 1rem; }

.ep-design-pick { display: flex; gap: 1rem; align-items: center; padding: 1rem; background: var(--ep-paper); }
.ep-design-pick .ep-design-thumb { width: 96px; height: auto; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.ep-design-pick__name { margin: 0; font-weight: 700; }
.ep-template-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; margin-top: .75rem; }
.ep-template-mini { display: grid; gap: .375rem; color: inherit; text-decoration: none; font-size: .8125rem; font-weight: 600; }
.ep-template-mini img { width: 100%; height: auto; border: 1px solid var(--ep-line); transition: transform .2s var(--ep-ease), box-shadow .2s; }
.ep-template-mini:hover img { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--ep-magenta); }

.ep-config textarea, .ep-fields input, .ep-fields textarea { width: 100%; padding: .75rem; border: 1.5px solid var(--ep-line); background: #fff; font: inherit; font-size: .9375rem; border-radius: 0; }
.ep-config textarea:focus, .ep-fields input:focus, .ep-fields textarea:focus, .ep-size input:focus { outline: none; border-color: var(--ep-ink); box-shadow: 0 0 0 3px rgba(78, 145, 211, .35); }
.ep-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .875rem; }
.ep-fields label { display: grid; gap: .3rem; font-size: .8125rem; font-weight: 600; }
.ep-fields__wide { grid-column: 1 / -1; }

/* Summary */
.ep-summary { position: relative; padding: 1.25rem; background: var(--ep-ink); color: #fff; box-shadow: 6px 6px 0 var(--ep-magenta); }
.ep-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ep-summary__label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ep-yellow); }
.ep-summary__price { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ep-summary__meta { display: flex; justify-content: space-between; gap: 1rem; margin: .25rem 0 0; font-size: .8125rem; color: rgba(255, 255, 255, .7); }
.ep-summary__ready { display: flex; gap: .5rem; align-items: center; margin: .875rem 0 0; font-size: .875rem; }
.ep-summary__spec { display: grid; gap: .25rem; margin: .875rem 0 1rem; padding: .875rem 0 0; border-top: 1px solid rgba(255, 255, 255, .18); list-style: none; font-size: .8125rem; }
.ep-summary__spec li { display: flex; justify-content: space-between; gap: 1rem; }
.ep-summary__spec span { color: rgba(255, 255, 255, .65); }
.ep-summary__spec strong { font-weight: 600; text-align: right; }
.ep-summary .button, .ep-summary button.button { width: 100%; padding: 1rem; background: var(--ep-yellow) !important; color: var(--ep-ink) !important; font-size: 1rem; font-weight: 800; }
.ep-summary .button:hover { background: #fff !important; }
.ep-summary .ep-error { color: var(--ep-ink); }
.ep-summary--quote .ep-hint { color: rgba(255, 255, 255, .7); margin-bottom: 1rem; }

/* --- Uploads ------------------------------------------------------------- */

.ep-uploader { display: grid; gap: .75rem; }
.ep-uploader__intro { margin: 0; }
.ep-drop { position: relative; display: grid; justify-items: center; gap: .375rem; padding: 1.75rem 1rem; border: 2px dashed var(--ep-ink); background: var(--ep-paper); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.ep-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ep-drop__icon .ep-icon { width: 2rem; height: 2rem; color: var(--ep-magenta); }
.ep-drop__title { font-weight: 700; }
.ep-drop__title u { text-decoration-color: var(--ep-magenta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ep-drop__hint { font-size: .8125rem; color: var(--ep-muted); }
.ep-drop:hover, .ep-drop.is-over { background: #fffde0; border-color: var(--ep-magenta); }
.ep-drop:has(input:focus-visible) { outline: 3px solid var(--ep-cyan); outline-offset: 2px; }
.ep-files { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ep-file { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .25rem .625rem; padding: .75rem .875rem; border: 1px solid var(--ep-line); background: #fff; font-size: .875rem; }
.ep-file__name { font-weight: 600; overflow-wrap: anywhere; }
.ep-file__size { color: var(--ep-muted); }
.ep-file__bar { grid-column: 1 / -1; height: 3px; background: var(--ep-line); }
.ep-file__bar span { display: block; width: 0; height: 100%; background: var(--ep-cyan); transition: width .2s; }
.ep-file.is-done .ep-file__bar { display: none; }
.ep-file__check { grid-column: 1 / -1; display: flex; gap: .4rem; align-items: flex-start; font-size: .8125rem; color: var(--ep-muted); }
.ep-file__check.is-ok { color: var(--ep-ok); }
.ep-file__check.is-warn { color: var(--ep-warn); }
.ep-file__remove { grid-row: 1; grid-column: 4; padding: .25rem; border: 0; background: none; color: var(--ep-muted); cursor: pointer; }
.ep-file__remove:hover { color: var(--ep-magenta); }
.ep-file.is-error { border-color: var(--ep-magenta); }
.ep-send { justify-self: start; }

/* --- Template cards ---------------------------------------------------------- */

.ep-templates { margin: 0 0 3rem; }
.ep-templates__head { max-width: 56ch; margin-bottom: 1.5rem; }
.ep-templates__head p { margin-top: .75rem; color: var(--ep-muted); }
.ep-templates__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ep-template-card a { display: grid; gap: 1rem; color: inherit; text-decoration: none; }
.ep-template-card__image { display: block; padding: 18px; background: var(--ep-paper); }
.ep-template-card__image img { width: 100%; height: auto; box-shadow: 0 10px 30px rgba(35, 31, 32, .16); transition: transform .35s var(--ep-ease); }
.ep-template-card a:hover img { transform: translateY(-6px) rotate(-1deg); }
.ep-template-card__body { display: grid; gap: .25rem; }
.ep-template-card__format { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ep-magenta); }
.ep-template-card__name { font-size: 1.125rem; font-weight: 900; text-transform: uppercase; }
.ep-template-card__desc { font-size: .875rem; color: var(--ep-muted); }
.ep-template-card__cta { margin-top: .25rem; font-size: .875rem; font-weight: 700; }
.ep-template-card__cta span { display: inline-block; transition: transform .2s; }
.ep-template-card a:hover .ep-template-card__cta span { transform: translateX(4px); }

/* --- Designer ---------------------------------------------------------------- */

.ep-designer { padding: 0 var(--gutter, 24px) 4rem; max-width: 1600px; margin: 0 auto; }
.ep-designer__bar { position: sticky; top: var(--header-h, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 0 calc(-1 * var(--gutter, 24px)); padding: .5rem var(--gutter, 24px); background: #fff; border-bottom: 1px solid var(--ep-line); }
.ep-designer__title { flex: 1 1 260px; }
.ep-designer__title .eyebrow a { color: inherit; text-decoration: none; }
.ep-designer__title h1 { margin: .125rem 0 0; font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; }
.ep-designer__title h1 span { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ep-muted); }
.ep-designer__status { margin: 0; font-size: .8125rem; color: var(--ep-muted); }
.ep-designer__status[data-state="saved"]::before { content: "● "; color: var(--ep-ok); }
.ep-designer__status[data-state="saving"]::before, .ep-designer__status[data-state="dirty"]::before { content: "● "; color: var(--ep-yellow); }
.ep-designer__status[data-state="error"] { color: var(--ep-magenta); }
.ep-designer__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ep-designer__layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.25rem; align-items: start; margin-top: 1rem; }
.ep-designer__form { display: grid; gap: .875rem; }
.ep-designer__help { padding: 1rem; background: var(--ep-paper); }
.ep-group { padding: 1rem; border: 1px solid var(--ep-line); background: #fff; }
.ep-group__title { display: flex; align-items: center; gap: .625rem; margin: 0 0 1rem; font-size: .9375rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.ep-group__title span { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; background: var(--ep-ink); color: #fff; font-size: .75rem; }
.ep-field { display: grid; gap: .375rem; margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.ep-field:last-child { margin-bottom: 0; }
.ep-field__label { font-size: .8125rem; font-weight: 700; padding: 0; }
.ep-field__help { font-size: .75rem; color: var(--ep-muted); }
.ep-field input[type="text"], .ep-field textarea, .ep-field select { width: 100%; padding: .625rem .75rem; border: 1.5px solid var(--ep-line); background: #fff; font: inherit; font-size: .9375rem; line-height: 1.45; border-radius: 0; }
.ep-field input[type="text"]:focus, .ep-field textarea:focus, .ep-field select:focus { outline: none; border-color: var(--ep-ink); box-shadow: 0 0 0 3px rgba(78, 145, 211, .35); }
.ep-photo { display: flex; gap: .875rem; align-items: flex-start; }
.ep-photo__thumb { width: 84px; height: 104px; object-fit: cover; background: var(--ep-paper); border: 1px solid var(--ep-line); flex: none; }
.ep-photo__body { display: grid; gap: .5rem; flex: 1; }
.ep-photo__pick { position: relative; justify-self: start; overflow: hidden; }
.ep-photo__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ep-photo__pos { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; }
.ep-photo__pos select { width: auto; padding: .375rem .5rem; }
.ep-photo__check { margin: 0; font-size: .75rem; color: var(--ep-muted); }
.ep-photo__check.is-ok { color: var(--ep-ok); }
.ep-photo__check.is-warn { color: var(--ep-warn); }
.ep-field--image.is-uploading .ep-photo__thumb { opacity: .4; }
.ep-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: row; }
.ep-list__row { display: grid; grid-template-columns: 1fr auto; gap: .375rem; padding: .5rem; background: var(--ep-paper); counter-increment: row; }
.ep-list__inputs { display: grid; gap: .375rem; }
.ep-list__inputs input:first-child { font-weight: 600; }
.ep-list__tools { display: flex; flex-direction: column; }
.ep-list__tools button, .ep-preview__zoom button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--ep-ink); cursor: pointer; }
.ep-list__tools button:hover, .ep-preview__zoom button:hover { background: var(--ep-ink); color: #fff; }
.ep-list__tools .ep-icon { width: 1rem; height: 1rem; }
.ep-list__add { display: inline-flex; align-items: center; gap: .375rem; justify-self: start; margin-top: .25rem; padding: .5rem .75rem; border: 1.5px dashed var(--ep-ink); background: #fff; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.ep-list__add:hover { background: var(--ep-yellow); border-style: solid; }
.ep-list__add:disabled { opacity: .4; cursor: not-allowed; }
.ep-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.ep-swatch { position: relative; display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem .375rem .375rem; border: 1.5px solid var(--ep-line); cursor: pointer; font-size: .8125rem; font-weight: 600; }
.ep-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ep-swatch__chip { width: 1.5rem; height: 1.5rem; }
.ep-swatch:has(input:checked) { border-color: var(--ep-ink); box-shadow: 3px 3px 0 var(--ep-yellow); }
.ep-swatch:has(input:focus-visible) { outline: 3px solid var(--ep-cyan); outline-offset: 2px; }

.ep-designer__preview { position: sticky; top: calc(var(--header-h, 0px) + 4.75rem); display: grid; gap: .5rem; }
.ep-preview__tools { display: flex; justify-content: space-between; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.ep-preview__tools .ep-toggle { font-size: .8125rem; }
.ep-preview__zoom { display: flex; border: 1.5px solid var(--ep-ink); }
.ep-preview__zoom button { width: auto; min-width: 2.25rem; padding: 0 .5rem; font: inherit; font-size: .8125rem; font-weight: 700; }
.ep-toggle { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
.ep-toggle input { width: 1.125rem; height: 1.125rem; accent-color: var(--ep-ink); }
.ep-preview__stage { position: relative; overflow: hidden; min-height: 320px; background: #e9e9e9; transition: height .2s var(--ep-ease); }
.ep-preview__stage.is-scroll { overflow: auto; overscroll-behavior: contain; }
.ep-preview__stage iframe { display: block; border: 0; transform-origin: 0 0; background: #e9e9e9; pointer-events: none; }
.ep-preview__views { display: flex; border: 1.5px solid var(--ep-ink); }
.ep-preview__views button { padding: .25rem .5rem; border: 0; background: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.ep-preview__views button[aria-pressed="true"] { background: var(--ep-ink); color: #fff; }
.ep-pages__flip { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; padding: 0; border: 0; background: var(--ep-ink); color: #fff; cursor: pointer; }
.ep-pages__flip--prev { left: .5rem; }
.ep-pages__flip--next { right: .5rem; }
.ep-pages__flip:hover { background: var(--ep-magenta); }
.ep-pages__flip[hidden], .ep-pages[hidden] { display: none; }
.ep-pages__flip:disabled { opacity: .2; cursor: default; background: var(--ep-ink); }
.ep-pages__flip .ep-icon { width: 1.375rem; height: 1.375rem; }
.ep-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.ep-pages button { min-width: 2.5rem; padding: .25rem .5rem; border: 1.5px solid var(--ep-ink); background: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.ep-pages button:hover { background: var(--ep-paper); }
.ep-pages button[aria-current="true"] { background: var(--ep-ink); color: #fff; box-shadow: 3px 3px 0 var(--ep-yellow); }
.ep-preview__loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--ep-muted); }
.ep-designer.is-rendering .ep-preview__stage::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--ep-cyan), var(--ep-magenta), var(--ep-yellow)); animation: ep-progress 1s linear infinite; transform-origin: 0 50%; }
@keyframes ep-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ep-group__title .ep-icon { width: 1.125rem; height: 1.125rem; }
.ep-font__sample { display: block; padding: .5rem .75rem; overflow: hidden; background: var(--ep-paper); font-size: 1.625rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.ep-extra .ep-hint { margin: 0 0 1rem; }
.ep-extra__sets { display: grid; gap: 1.25rem; }
.ep-extra__sets:not(:empty) { margin-bottom: 1rem; }
.ep-xset { display: grid; gap: .75rem; padding: .875rem; border: 1.5px dashed var(--ep-ink); }
.ep-xset__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ep-xset__title { margin: 0; font-size: .8125rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ep-xset__head .ep-link { padding: 0; border: 0; background: none; font: inherit; font-size: .8125rem; cursor: pointer; }
.ep-xp { padding: .875rem; background: var(--ep-paper); }
.ep-xp__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ep-xp__head .ep-group__title { margin: 0; font-size: .8125rem; }
.ep-xp__head .ep-group__title span[data-num] { min-width: 1.75rem; height: 1.75rem; }
.ep-xp__head .ep-group__title span[data-label] { display: inline; min-width: 0; height: auto; background: none; color: inherit; font-size: inherit; }
.ep-photo__thumb[src=""] { visibility: hidden; }
.ep-photo:has(.ep-photo__thumb[src=""]) { background: linear-gradient(#fff, #fff) 0 0 / 84px 104px no-repeat; }
.ep-xp__kinds { display: flex; border: 1.5px solid var(--ep-ink); }
.ep-xp__kinds button { padding: .25rem .625rem; border: 0; background: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.ep-xp__kinds button[aria-pressed="true"] { background: var(--ep-ink); color: #fff; }
.ep-xp[data-kind="words"] .ep-xp__photo, .ep-xp[data-kind="photo"] .ep-xp__words { display: none; }
.ep-preview__note { margin: 0; padding: .625rem .875rem; background: var(--ep-paper); font-size: .8125rem; }
.ep-preview__note.is-warn { background: #fbeaf2; border-left: 4px solid var(--ep-magenta); }

@media (max-width: 960px) {
	.ep-designer__layout { grid-template-columns: 1fr; }
	.ep-designer__preview { position: relative; top: 0; order: -1; }
	.ep-designer__bar { position: relative; top: 0; }
}

/* --- My account -------------------------------------------------------------- */

.ep-dash { display: grid; gap: 2rem; }
.ep-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.ep-stat { display: grid; gap: .25rem; padding: 1.25rem; background: var(--ep-paper); border-top: 4px solid var(--ep-ink); }
.ep-stat:nth-child(1) { border-top-color: var(--ep-cyan); }
.ep-stat:nth-child(2) { border-top-color: var(--ep-magenta); }
.ep-stat:nth-child(3) { border-top-color: var(--ep-yellow); }
.ep-stat__value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.ep-stat__label { font-size: .8125rem; color: var(--ep-muted); }
.ep-dash__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ep-dash__title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.ep-dash__section { margin-top: 2.25rem; }
.ep-dash .ep-dash__section { margin-top: .5rem; }

.ep-progress { padding: 1.25rem; background: var(--ep-ink); color: #fff; }
.ep-progress__label { margin: 0 0 .75rem; }
.ep-progress__label .woocommerce-Price-amount { color: var(--ep-yellow); }
.ep-progress__bar { height: 12px; background: rgba(255, 255, 255, .15); }
.ep-progress__bar span { display: block; height: 100%; width: var(--progress); background: linear-gradient(90deg, var(--ep-cyan), var(--ep-magenta) 60%, var(--ep-yellow)); animation: ep-grow 1.2s var(--ep-ease) both; transform-origin: 0 50%; }
@keyframes ep-grow { from { transform: scaleX(0); } }
.ep-progress__scale { display: flex; justify-content: space-between; margin: .5rem 0 0; font-size: .75rem; color: rgba(255, 255, 255, .7); }

.ep-offers { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ep-offer { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "what name button" "code terms button"; align-items: center; gap: .25rem 1rem; padding: 1rem 1.25rem; border: 2px dashed var(--ep-magenta); background: #fff; }
.ep-offer__what { grid-area: what; font-size: 1.25rem; font-weight: 800; color: var(--ep-magenta); }
.ep-offer__name { grid-area: name; font-weight: 600; }
.ep-offer__code { grid-area: code; padding: .125rem .5rem; background: var(--ep-paper); font-size: .875rem; letter-spacing: .08em; }
.ep-offer__terms { grid-area: terms; font-size: .8125rem; color: var(--ep-muted); }
.ep-offer .button { grid-area: button; }

.ep-reorders { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ep-reorder { display: grid; grid-template-columns: 88px 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--ep-line); background: #fff; }
.ep-reorder__image img { width: 88px; height: 88px; object-fit: cover; background: var(--ep-paper); }
.ep-reorder__name { margin: 0; font-weight: 700; }
.ep-reorder__name a { color: inherit; text-decoration: none; }
.ep-reorder__spec { margin: .25rem 0 0; font-size: .8125rem; }
.ep-reorder__meta { margin: .25rem 0 0; font-size: .75rem; color: var(--ep-muted); }
.ep-reorder__action { display: grid; gap: .375rem; justify-items: end; text-align: right; }
.ep-reorder__price { margin: 0; font-weight: 800; font-size: 1.125rem; }
.ep-reorder__price small { display: block; font-size: .75rem; font-weight: 500; color: var(--ep-muted); }
.ep-check { display: inline-flex; gap: .375rem; align-items: center; font-size: .8125rem; }

.ep-tiers { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ep-tier { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name gives" "icon rule gives" "bar bar bar"; gap: .125rem 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--ep-paper); }
.ep-tier__icon { grid-area: icon; color: var(--ep-magenta); }
.ep-tier.is-done .ep-tier__icon { color: var(--ep-ok); }
.ep-tier__name { grid-area: name; font-weight: 900; text-transform: uppercase; }
.ep-tier__rule { grid-area: rule; font-size: .8125rem; color: var(--ep-muted); }
.ep-tier__gives { grid-area: gives; font-weight: 700; text-align: right; }
.ep-tier__bar { grid-area: bar; height: 4px; margin-top: .625rem; background: var(--ep-line); }
.ep-tier__bar span { display: block; height: 100%; width: var(--progress); background: var(--ep-ink); }
.ep-history { margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.ep-history li { padding: .5rem 0; border-bottom: 1px solid var(--ep-line); }
.ep-history span { display: inline-block; min-width: 7.5rem; color: var(--ep-muted); }

.ep-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ep-design__thumb img { width: 100%; height: auto; border: 1px solid var(--ep-line); transition: transform .2s var(--ep-ease); }
.ep-design__thumb:hover img { transform: translateY(-3px); }
.ep-design__name { margin: .625rem 0 0; font-weight: 700; }
.ep-design__meta { margin: .125rem 0 0; font-size: .75rem; color: var(--ep-muted); }
.ep-design__actions { display: flex; gap: .75rem; margin: .375rem 0 0; font-size: .8125rem; font-weight: 700; }
.ep-design__actions a { color: inherit; }

/* Sign-up */
.ep-register { margin: 0 0 1rem; padding: 0; border: 0; }
.ep-segment { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ep-ink); }
.ep-segment label { position: relative; display: block; text-align: center; cursor: pointer; }
.ep-segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ep-segment span { display: block; padding: .75rem; font-weight: 700; }
.ep-segment label:has(input:checked) span { background: var(--ep-ink); color: #fff; }
.ep-register__why { margin: .625rem 0 1rem; font-size: .8125rem; color: var(--ep-muted); }
.ep-register__business { display: none; }
.ep-register:has(input[value="business"]:checked) .ep-register__business { display: block; }

/* --- Artists ------------------------------------------------------------------- */

.ep-artists { margin: 0 0 3rem; }
.ep-artists__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.ep-artist-card { display: grid; gap: .25rem; padding: 1rem; background: var(--ep-paper); color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s var(--ep-ease); }
.ep-artist-card:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--ep-cyan); }
.ep-artist-card__photo img, .ep-artist-card__initial { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .5rem; background: var(--ep-ink); color: var(--ep-yellow); font-size: 3rem; font-weight: 800; }
.ep-artist-card__name { font-weight: 800; }
.ep-artist-card__where, .ep-artist-card__count { font-size: .8125rem; color: var(--ep-muted); }
.ep-artist-intro { display: flex; gap: 1.25rem; align-items: center; margin: 1rem 0 2rem; }
.ep-artist-intro__photo { width: 120px; height: 120px; object-fit: cover; }
.ep-byline { margin: -.25rem 0 1rem; font-weight: 600; color: var(--ep-muted); }
.ep-byline a { color: var(--ep-ink); }

.ep-price-from, .ep-price-suffix { font-size: .75em; font-weight: 600; color: var(--ep-muted); }
.ep-price-note { font-weight: 700; }

@media (max-width: 640px) {
	.ep-reorder { grid-template-columns: 64px 1fr; }
	.ep-reorder__image img { width: 64px; height: 64px; }
	.ep-reorder__action { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; align-items: center; text-align: left; }
	.ep-offer { grid-template-columns: 1fr; grid-template-areas: "what" "name" "code" "terms" "button"; }
	.ep-summary { margin: 0 calc(-1 * var(--gutter, 16px)); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ep-progress__bar span, .ep-designer.is-rendering .ep-preview__stage::after { animation: none; }
	.ep-template-card a:hover img, .ep-template-mini:hover img, .ep-artist-card:hover { transform: none; }
}