/* 2.0 refresh: the shop dashboard in the ShopToWay look of the home page.
   Loaded after app.css on platform pages only (not on shops). */

/* ===== Dashboard: dark sidebar, welcome banner, quick actions, colour stat cards ===== */
body.sep-dash { background: #f5f4fb; }
.sep-dash .sep-dtop { background: rgba(255, 255, 255, .86); border-bottom-color: #ebe8f5; }
@media (min-width: 900px) {
	.sep-dash .sep-side { background: #fff; border-right: 1px solid #ebe8f5; color: #1b1744; }
	.sep-dash .sep-side__brand { color: #1b1744; }
	.sep-dash .sep-side__nav a { color: #4b4770; }
	.sep-dash .sep-side__nav a:hover { background: #f5f3ff; color: #1b1744; }
	.sep-dash .sep-side__nav a.is-active { background: #efeaff; color: #5b30e6; box-shadow: inset 3px 0 0 #6a3cf6; }
	.sep-dash .sep-side__nav a .sep-count { background: #F2545B; color: #fff; }
	.sep-dash .sep-side__foot .sep-btn--soft { background: linear-gradient(135deg, #a764fb, #6a3cf6 45%, #3b2ded); color: #fff !important; }
	.sep-dash .sep-side__out { color: #6b6790 !important; }
	.sep-dash .sep-side__out:hover { color: #1b1744 !important; }
	.sep-dash .sep-dash__content { max-width: 1040px; }
}

/* Welcome banner (shop home) and the share card (portfolio home) */
.sep-welcome, .sep-dash .sep-share {
	position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 26px 24px; margin-bottom: 16px; color: #fff;
	background: radial-gradient(70% 90% at 100% 110%, rgba(124, 58, 237, .85), transparent 65%), radial-gradient(50% 70% at 0 0, rgba(242, 84, 91, .28), transparent 70%), #0d0c14;
	box-shadow: 0 24px 50px -30px rgba(76, 29, 149, .7);
}
.sep-welcome__text { position: relative; z-index: 1; max-width: 560px; }
.sep-welcome__live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(52, 211, 153, .14); color: #6ee7b7; font-size: 13px; font-weight: 700; }
.sep-welcome__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.sep-welcome .sep-h1 { margin: 12px 0 2px; color: #fff; font-size: clamp(28px, 4vw, 38px); }
.sep-welcome__url { margin: 0 0 18px !important; color: rgba(255, 255, 255, .7); font-weight: 600; word-break: break-all; }
.sep-welcome__art { position: absolute; z-index: 0; right: 18px; bottom: -14px; width: 170px; height: auto; opacity: .95; animation: sep-float 5s ease-in-out infinite alternate; --r: 5deg; }
.sep-welcome .sep-btn--light, .sep-dash .sep-share .sep-btn--light { background: #fff; color: #0d0c14 !important; }
.sep-welcome .sep-btn--ghost, .sep-dash .sep-share .sep-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sep-welcome .sep-btn--ghost:hover, .sep-dash .sep-share .sep-btn--ghost:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 640px) { .sep-welcome__art { width: 110px; right: -8px; bottom: -10px; opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sep-welcome__art { animation: none; } }

/* Quick actions */
.sep-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 700px) { .sep-quick { grid-template-columns: repeat(4, 1fr); } }
.sep-quick a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #ebe8f5; box-shadow: 0 1px 2px rgba(27, 23, 68, .04); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sep-quick a:hover { transform: translateY(-2px); border-color: #d9d1fb; box-shadow: 0 16px 30px -18px rgba(76, 29, 149, .35); }
.sep-quick__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.sep-quick__icon .sep-i { width: 20px; height: 20px; }
.sep-quick b { font-size: 15px; color: #1b1744; }
.sep-quick small { font-size: 12.5px; color: #6b6790; }

/* Colour accents shared by quick actions and stats */
.sep-dash .is-violet { background: #efeaff !important; color: #6a3cf6 !important; }
.sep-dash .is-coral { background: #ffe9ea !important; color: #e0414a !important; }
.sep-dash .is-green { background: #dcfce7 !important; color: #15803d !important; }
.sep-dash .is-blue { background: #e0ecff !important; color: #2563eb !important; }

/* Stat cards: four separate cards with a coloured icon (an older rule turned them into one strip) */
body.sep-dash .sep-dash__content .sep-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
@media (min-width: 700px) { body.sep-dash .sep-dash__content .sep-stats { grid-template-columns: repeat(4, 1fr); } }
body.sep-dash .sep-dash__content .sep-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #ebe8f5; box-shadow: 0 1px 2px rgba(27, 23, 68, .04); text-align: left; }
body.sep-dash .sep-dash__content .sep-stat + .sep-stat { border-left: 1px solid #ebe8f5; }
body.sep-dash .sep-dash__content .sep-stat__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
body.sep-dash .sep-dash__content .sep-stat b { font-size: 28px; margin-top: 12px; color: #1b1744; }
body.sep-dash .sep-dash__content .sep-stat small { color: #6b6790; font-size: 13.5px; }
body.sep-dash .sep-dash__content a.sep-stat:hover { border-color: #c4b5fd; }

/* Cards, setup steps and lists */
.sep-dash .sep-card { border-radius: 20px; border-color: #ebe8f5; box-shadow: 0 1px 2px rgba(27, 23, 68, .04); margin-bottom: 16px; }
.sep-dash .sep-card__head h2 { font-size: 18px; color: #1b1744; }
.sep-dash .sep-progress { background: #efeaff; height: 8px; border-radius: 99px; }
.sep-dash .sep-progress span { background: linear-gradient(90deg, #a764fb, #6a3cf6); border-radius: 99px; }
.sep-dash .sep-steps .is-done .sep-steps__dot { background: #6a3cf6; border-color: #6a3cf6; }
.sep-dash .sep-link { color: #6a3cf6; font-weight: 700; }

/* Phone top bar: shop on the first row, the buttons in one tidy row under it */
@media (max-width: 640px) {
	.sep-dash .sep-dtop { flex-wrap: wrap; row-gap: 8px; column-gap: 6px; justify-content: flex-start; }
	.sep-dash .sep-dtop__shop { flex: 1 1 calc(100% - 64px); order: 0; }
	.sep-dash .sep-dtop > details:last-of-type { order: 1; margin-right: 0 !important; }
	.sep-dash .sep-dtop > #sep-install, .sep-dash .sep-dtop > #sep-push, .sep-dash .sep-dtop > details.sep-switch:first-of-type { order: 2; margin: 0 !important; }
	.sep-dash .sep-dtop .sep-btn--soft { min-height: 34px; padding: 6px 11px; font-size: 13px; white-space: nowrap; gap: 6px; }
	.sep-dash .sep-dtop .sep-btn--soft .sep-i { width: 16px; height: 16px; }
	/* The Switch list opens full width under the top bar, so it never runs off either side of the screen. */
	.sep-dash .sep-dtop > details.sep-switch:first-of-type { position: static !important; }
	.sep-dash .sep-dtop > details.sep-switch:first-of-type > div { left: 16px !important; right: 16px !important; top: calc(100% + 6px) !important; min-width: 0 !important; }
}

@keyframes sep-float { from { transform: translateY(10px) rotate(var(--r, 0deg)); } to { transform: translateY(-10px) rotate(calc(var(--r, 0deg) * -1)); } }

/* Notifications: a short list of what is new, each line opens the order or the support chat */
.sep-notif__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 360px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #ebe8f5; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(27, 23, 68, .35); overflow: hidden; }
.sep-notif__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid #f0edf9; }
.sep-notif__head b { font-size: 15px; color: #1b1744; }
.sep-notif__head span { padding: 3px 9px; border-radius: 999px; background: #ffe9ea; color: #e0414a; font-size: 12px; font-weight: 700; }
.sep-notif__list { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.sep-notif__list a { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: #1b1744; text-decoration: none; }
.sep-notif__list a:hover { background: #f7f5ff; }
.sep-notif__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; }
.sep-notif__icon .sep-i { width: 18px; height: 18px; }
.sep-notif__icon.is-coral { background: #ffe9ea; color: #e0414a; }
.sep-notif__icon.is-blue { background: #e0ecff; color: #2563eb; }
.sep-notif__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sep-notif__text b { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep-notif__text small { font-size: 12.5px; color: #6b6790; }
.sep-notif__list time { flex: none; font-size: 11.5px; color: #8a86a6; white-space: nowrap; padding-top: 2px; }
.sep-notif__all { display: block; padding: 12px 16px; border-top: 1px solid #f0edf9; color: #6a3cf6; font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; }
.sep-notif__all:hover { background: #f7f5ff; }
.sep-notif__empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 16px; color: #6b6790; font-size: 14px; }
.sep-notif__empty .sep-i { width: 18px; height: 18px; color: #15803d; }
@media (max-width: 640px) {
	.sep-dash .sep-dtop > details.sep-notif { position: static !important; }
	.sep-notif__panel { left: 12px; right: 12px; width: auto; max-width: none; top: calc(100% + 6px); }
}

/* ===== Home in a hosting-panel layout: shop card + main column, status tiles on the right ===== */
@media (min-width: 900px) { .sep-dash .sep-dash__content { max-width: 1240px; } }
.sep-home__head { margin-bottom: 18px; }
.sep-home__head .sep-h1 { font-size: clamp(26px, 3vw, 34px); color: #1b1744; }
.sep-home__head .sep-muted { margin-top: 4px; color: #6b6790; }
.sep-home__grid { display: grid; gap: 16px; }
@media (min-width: 1100px) { .sep-home__grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .sep-home__side { position: sticky; top: 96px; } }
.sep-home__main > * { margin-bottom: 16px; }

/* Shop card with a small browser preview */
:not(body).sep-site { display: grid; gap: 20px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid #ebe8f5; box-shadow: 0 1px 2px rgba(27, 23, 68, .04); }
@media (min-width: 700px) { :not(body).sep-site { grid-template-columns: 300px 1fr; align-items: center; } }
.sep-site__preview { display: block; border-radius: 14px; overflow: hidden; border: 1px solid #e7e4f4; background: #f7f6fd; box-shadow: 0 18px 40px -26px rgba(27, 23, 68, .45); transition: transform .25s, box-shadow .25s; }
.sep-site__preview:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -24px rgba(76, 29, 149, .45); }
.sep-site__chrome { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #ece9f7; }
.sep-site__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #e2dff0; }
.sep-site__chrome i:nth-child(1) { background: #f87171; } .sep-site__chrome i:nth-child(2) { background: #fbbf24; } .sep-site__chrome i:nth-child(3) { background: #34d399; }
.sep-site__chrome em { margin-left: 8px; flex: 1; min-width: 0; padding: 3px 8px; border-radius: 6px; background: #f3f1fb; color: #6b6790; font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep-site__mock { display: grid; gap: 8px; padding: 10px; }
.sep-site__mockbar { display: flex; align-items: center; gap: 8px; }
.sep-site__mockbar img, .sep-site__mockbar b { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; display: grid; place-items: center; background: var(--acc, #6a3cf6); color: #fff; font-size: 12px; }
.sep-site__mockbar strong { font-size: 12px; color: #1b1744; }
.sep-site__mockhero { height: 62px; border-radius: 10px; background: linear-gradient(120deg, var(--acc, #6a3cf6), color-mix(in srgb, var(--acc, #6a3cf6) 40%, #fff)); }
.sep-site__mockgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sep-site__mockgrid i { height: 38px; border-radius: 8px; background: #ebe8f5; }
.sep-site__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sep-site__top h2 { font-size: 22px; color: #1b1744; }
.sep-site__state { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.sep-site__state.is-live { background: #dcfce7; color: #15803d; }
.sep-site__state.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22c55e; vertical-align: 1px; }
.sep-site__state.is-off { background: #ffe9ea; color: #e0414a; }
.sep-site__url { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #6a3cf6 !important; font-weight: 700; }
.sep-site__url .sep-i { width: 15px; height: 15px; }
.sep-site__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; margin: 16px 0 18px; padding: 14px 0; border-top: 1px solid #f0edf9; border-bottom: 1px solid #f0edf9; }
.sep-site__meta dt { font-size: 12px; color: #8a86a6; font-weight: 600; }
.sep-site__meta dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; color: #1b1744; }
.sep-site__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sep-site__btns .sep-btn { min-height: 42px; padding: 9px 16px; font-size: 14px; }
.sep-site__btns .sep-btn:not(.sep-btn--soft) { background: linear-gradient(135deg, #a764fb, #6a3cf6 45%, #3b2ded); color: #fff !important; }
@media (max-width: 520px) { .sep-site__meta { grid-template-columns: 1fr 1fr; } }

/* Status tiles on the right */
.sep-home__side { display: grid; gap: 12px; }
.sep-tile { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #ebe8f5; box-shadow: 0 1px 2px rgba(27, 23, 68, .04); }
.sep-tile__head { display: flex; align-items: center; gap: 12px; }
.sep-tile__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.sep-tile__icon .sep-i { width: 20px; height: 20px; }
.sep-tile__head div { display: grid; min-width: 0; }
.sep-tile__head small { font-size: 12px; font-weight: 600; color: #8a86a6; }
.sep-tile__head b { font-size: 15.5px; color: #1b1744; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep-tile__note { margin: 10px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: #6b6790; }
.sep-tile__link { display: inline-block; margin-top: 10px; color: #6a3cf6 !important; font-size: 14px; font-weight: 700; }
.sep-tile--help { background: linear-gradient(135deg, #f5f0ff, #fff 60%); }

/* Header search */
.sep-dsearch { display: none; }
@media (min-width: 1000px) {
	.sep-dsearch { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; margin: 0 auto 0 24px; padding: 0 14px; height: 42px; border-radius: 12px; background: #f5f4fb; border: 1px solid #ebe8f5; color: #8a86a6; }
	.sep-dsearch:focus-within { border-color: #a78bfa; background: #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, .12); }
	.sep-dsearch .sep-i { width: 18px; height: 18px; flex: none; }
	.sep-dash .sep-dsearch input[type=search] { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 14.5px; color: #1b1744; }
	.sep-dash .sep-dsearch input[type=search]:focus { box-shadow: none; }
	.sep-dash .sep-dtop > #sep-install { margin-left: 0 !important; }
}

/* Products list: a tick box on the left, a delete button on the right, and a bar for deleting ticked products */
.sep-dash .sep-pitem { display: flex; align-items: center; gap: 4px; padding-left: 10px; }
.sep-dash .sep-pitem .sep-prow { flex: 1; min-width: 0; }
.sep-dash .sep-pitem.is-on { background: #f7f5ff; }
.sep-pitem__tick { display: grid; place-items: center; width: 32px; height: 32px; flex: none; cursor: pointer; }
.sep-pitem__tick input { width: 18px; height: 18px; accent-color: #6a3cf6; cursor: pointer; }
.sep-pitem__del { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 10px; border: 0; border-radius: 12px; background: transparent; color: #a19dbd; cursor: pointer; transition: background .2s, color .2s; }
.sep-pitem__del:hover, .sep-pitem__del:focus-visible { background: #ffe9ea; color: #e0414a; }
.sep-pitem__del .sep-i { width: 18px; height: 18px; }
.sep-pbulk__bar { position: sticky; top: 84px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px 10px 16px; border-radius: 16px; background: #1b1744; color: #fff; box-shadow: 0 16px 36px -18px rgba(27, 23, 68, .6); }
.sep-pbulk__bar[hidden] { display: none; }
.sep-pbulk__bar .sep-check { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sep-pbulk__bar .sep-check input { width: 18px; height: 18px; accent-color: #a78bfa; }
.sep-pbulk__bar .sep-btn { min-height: 40px; padding: 8px 14px; background: #F2545B !important; color: #fff !important; box-shadow: none; }
@media (max-width: 640px) { .sep-pbulk__bar { top: 120px; } .sep-pitem__del { margin-right: 4px; } .sep-dash .sep-pitem { padding-left: 4px; } }

/* ===== hPanel look: light, flat, thin borders, solid purple, flush sidebar highlight ===== */
body.sep-dash { --hp: #673de6; --hp-ink: #2f1c6a; --hp-line: #dad9e8; --hp-soft: #ebe4ff; --hp-bg: #f4f5ff; --hp-muted: #6d7081; background: var(--hp-bg); }
.sep-dash .sep-dash__content > * { animation: none !important; }
@keyframes sep-fade { from { opacity: 0; } }
.sep-dash .sep-dtop { background: #fff; border-bottom: 1px solid var(--hp-line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sep-dash .sep-dtop .sep-btn--soft { background: transparent; color: var(--hp) !important; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hp-line); }
.sep-dash .sep-dsearch { border-radius: 8px; background: #fff; border-color: var(--hp-line); }
@media (min-width: 900px) {
	.sep-dash .sep-side { padding-left: 0; border-right: 1px solid var(--hp-line); }
	.sep-dash .sep-side__brand { padding-left: 24px; color: var(--hp-ink); }
	.sep-dash .sep-side__nav a { margin-right: 4px; padding: 12px 16px 12px 24px; border-radius: 0 999px 999px 0; color: var(--hp-ink); font-weight: 600; font-size: 14.5px; box-shadow: none !important; }
	.sep-dash .sep-side__nav a:hover { background: #f4f2ff; color: var(--hp-ink); }
	.sep-dash .sep-side__nav a.is-active { background: var(--hp-soft); color: var(--hp); box-shadow: none !important; }
	.sep-dash .sep-side__foot { padding-left: 16px; }
	.sep-dash .sep-side__foot .sep-btn--soft { background: var(--hp) !important; border-radius: 8px; box-shadow: none; }
}
/* Cards: white, thin border, small radius, no shadow */
.sep-dash .sep-card, .sep-dash .sep-plist, .sep-dash .sep-stat, .sep-dash .sep-quick a, .sep-dash .sep-list, .sep-dash .sep-hpn__overview, .sep-dash .sep-hpn__score, .sep-dash .sep-hpn__tips,
body.sep-dash .sep-dash__content .sep-stat { border-radius: 8px !important; border: 1px solid var(--hp-line) !important; box-shadow: none !important; background: #fff; }
.sep-dash .sep-quick a:hover { transform: none; border-color: var(--hp) !important; }
.sep-dash .sep-btn:not(.sep-btn--soft):not(.sep-btn--ghost):not(.sep-btn--light):not(.sep-btn--danger-ghost) { background: var(--hp) !important; border-radius: 8px; box-shadow: none !important; }
.sep-dash .sep-btn:hover { transform: none; }
.sep-dash .sep-h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--hp-ink); }
.sep-dash .sep-card__head h2, .sep-dash .sep-hpn h2 { font-size: 17px; font-weight: 700; color: var(--hp-ink); }
.sep-dash .sep-chips a.is-active { background: var(--hp-ink); }
.sep-dash .sep-search { border-radius: 8px; box-shadow: none; }

/* Home, laid out like the hPanel website dashboard */
.sep-hpn__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 18px; }
.sep-hpn__crumbs { display: flex; align-items: center; gap: 6px; margin: 0; padding-left: 20px; border-left: 1px solid var(--hp-line); color: var(--hp-muted); font-size: 14.5px; }
.sep-hpn__crumbs .sep-i { width: 18px; height: 18px; color: var(--hp-muted); }
.sep-hpn__overview { margin-bottom: 20px; overflow: hidden; }
.sep-hpn__site { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 24px; border-bottom: 1px solid var(--hp-line); }
.sep-hpn__logo { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hp-soft); color: var(--hp); font-weight: 800; overflow: visible; }
.sep-hpn__logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sep-hpn__logo.is-live::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; background: #00b090; border: 2px solid #fff; }
.sep-hpn__name { display: inline-flex; align-items: center; gap: 6px; color: var(--hp-ink) !important; font-weight: 700; font-size: 16px; }
.sep-hpn__name .sep-i { width: 16px; height: 16px; }
.sep-hpn__site p { margin: 4px 0 0 !important; color: var(--hp-muted); font-size: 14px; }
.sep-hpn__actions { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.sep-hpn__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--hp); color: #fff !important; font: 700 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.sep-hpn__btn:hover { background: #5025d1; }
.sep-hpn__btn .sep-i { width: 18px; height: 18px; }
.sep-hpn__btn--line { background: #fff; color: var(--hp) !important; box-shadow: inset 0 0 0 1px var(--hp-line); }
.sep-hpn__btn--line:hover { background: var(--hp-soft); }
.sep-hpn__status { display: grid; grid-template-columns: repeat(4, 1fr); }
.sep-hpn__status > div { display: grid; gap: 4px; padding: 20px 24px; }
.sep-hpn__status b { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--hp-ink); }
.sep-hpn__status b .sep-i { width: 18px; height: 18px; color: var(--hp-ink); }
.sep-hpn__status small { padding-left: 28px; color: var(--hp-muted); font-size: 14px; }
.sep-hpn__status a { margin-top: 10px; padding-left: 28px; color: var(--hp) !important; font-weight: 700; font-size: 14.5px; }
@media (max-width: 900px) { .sep-hpn__status { grid-template-columns: 1fr 1fr; } .sep-hpn__status > div { padding: 16px; } }
@media (max-width: 520px) { .sep-hpn__actions { margin-left: 0; width: 100%; } .sep-hpn__actions > * { flex: 1; justify-content: center; } .sep-hpn__crumbs { display: none; } }
.sep-dash .sep-quick { margin-bottom: 20px; gap: 16px; }
.sep-dash .sep-quick a { padding: 18px 20px; }
.sep-dash .sep-quick b { color: var(--hp-ink); }
.sep-hpn__row { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 900px) { .sep-hpn__row { grid-template-columns: 300px 1fr; } }
.sep-hpn__score, .sep-hpn__tips { padding: 22px 24px; }
.sep-hpn__ring { --p: 0; display: grid; place-items: center; width: 108px; height: 108px; margin: 18px 0 14px 4px; border-radius: 50%; background: conic-gradient(#00b090 calc(var(--p) * 1%), #e3f7f2 0); }
.sep-hpn__ring::before { content: ""; grid-area: 1 / 1; width: 88px; height: 88px; border-radius: 50%; background: #fff; }
.sep-hpn__ring b { grid-area: 1 / 1; z-index: 1; font-size: 26px; color: #008a72; }
.sep-hpn__score p { margin: 0 0 12px !important; color: var(--hp-muted); font-size: 14px; }
.sep-hpn__score a { color: var(--hp) !important; font-weight: 700; }
.sep-hpn__tips h2 { margin-bottom: 18px; }
.sep-hpn__tip { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 8px; background: #f2edff; border: 1px solid #cfc2fb; }
.sep-hpn__tip + .sep-hpn__tip { margin-top: 12px; }
.sep-hpn__tipicon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; color: var(--hp); }
.sep-hpn__tipicon .sep-i { width: 22px; height: 22px; }
.sep-hpn__tip div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sep-hpn__tip b { color: var(--hp); font-size: 15.5px; }
.sep-hpn__tip small { color: var(--hp-muted); font-size: 13.5px; }
@media (max-width: 600px) { .sep-hpn__tip { flex-wrap: wrap; } .sep-hpn__tip .sep-hpn__btn { width: 100%; justify-content: center; } }
.sep-hpn > section, .sep-hpn > nav { margin-bottom: 20px; }
.sep-dash .sep-hpn__title .sep-h1 { font-size: 24px !important; margin: 0; }
@media (min-width: 900px) {
	body.sep-dash .sep-side { padding-left: 0 !important; padding-right: 16px !important; }
	body.sep-dash .sep-side__nav a { border-radius: 0 999px 999px 0 !important; padding-left: 24px !important; }
	body.sep-dash .sep-side__nav { gap: 2px; }
}

/* ===== Shop settings in the hPanel style: cards with a header line, live preview on the right ===== */
@media (min-width: 1100px) {
	.sep-dash .sep-shopgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
	.sep-dash .sep-shopgrid > .sep-subnav { display: none; }
	.sep-setside { position: sticky; top: 96px; }
}
.sep-setside { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1100px) { .sep-setside { margin-top: 0; } }
/* One column of full-width cards (the old two-column form felt cramped) */
.sep-dash form.sep-form.sep-shopform:not(.sep-card) { display: block !important; max-width: none !important; }
.sep-dash form.sep-form.sep-shopform:not(.sep-card) > .sep-card + .sep-card { margin-top: 20px !important; }
.sep-dash .sep-shopform > .sep-card { display: block !important; padding: 0 !important; overflow: hidden; }
.sep-dash .sep-shopform > .sep-card > * { margin-left: 24px; margin-right: 24px; }
.sep-dash .sep-shopform > .sep-card > h2 { margin: 0 0 20px !important; padding: 18px 24px; border-bottom: 1px solid var(--hp-line); background: #fff; font-size: 17px; }
.sep-dash .sep-shopform > .sep-card > .sep-card__sub { margin-top: -6px !important; margin-bottom: 16px !important; }
.sep-dash .sep-shopform > .sep-card > :last-child { margin-bottom: 24px; }
.sep-dash .sep-shopform > .sep-card > .sep-field + .sep-field { margin-top: 18px; }
.sep-dash .sep-shopform input[type=text], .sep-dash .sep-shopform input[type=email], .sep-dash .sep-shopform input[type=tel], .sep-dash .sep-shopform input[type=url], .sep-dash .sep-shopform input[type=number], .sep-dash .sep-shopform textarea, .sep-dash .sep-shopform select, .sep-dash .sep-shopform .sep-affix { border-radius: 8px; border-color: var(--hp-line); box-shadow: none; }
.sep-dash .sep-shopform input:focus, .sep-dash .sep-shopform textarea:focus, .sep-dash .sep-shopform .sep-affix:focus-within { border-color: var(--hp); box-shadow: 0 0 0 3px rgba(103, 61, 230, .15); }
.sep-dash .sep-shopform .sep-btn--soft { background: var(--hp-soft); color: var(--hp) !important; border-radius: 8px; }
.sep-dash .sep-savebar { margin-top: 20px !important; }
.sep-dash .sep-savebar .sep-btn { min-height: 50px; border-radius: 8px; box-shadow: 0 10px 24px -14px rgba(103, 61, 230, .8) !important; }
.sep-dash .sep-shopmain > .sep-ownercard { max-width: none; }

/* Live preview card */
.sep-pv { padding: 16px; border-radius: 8px; background: #fff; border: 1px solid var(--hp-line); }
.sep-pv__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sep-pv__head b { font-size: 15.5px; color: var(--hp-ink); }
.sep-pv__head a { display: inline-flex; align-items: center; gap: 4px; color: var(--hp) !important; font-weight: 700; font-size: 13.5px; }
.sep-pv__head a .sep-i { width: 14px; height: 14px; }
.sep-pv__frame { display: grid; gap: 8px; padding-bottom: 10px; border-radius: 10px; overflow: hidden; border: 1px solid #e7e4f4; background: #faf9ff; transition: background .3s; }
.sep-pv__frame.is-glass { background: radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--acc) 22%, #fff), #f2f7ff 70%); }
.sep-pv__chrome { display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: #fff; border-bottom: 1px solid #eeecf6; }
.sep-pv__chrome i { width: 7px; height: 7px; border-radius: 50%; background: #e2dff0; }
.sep-pv__chrome i:nth-child(1) { background: #f87171; } .sep-pv__chrome i:nth-child(2) { background: #fbbf24; } .sep-pv__chrome i:nth-child(3) { background: #34d399; }
.sep-pv__chrome em { margin-left: 6px; flex: 1; min-width: 0; padding: 2px 7px; border-radius: 5px; background: #f3f1fb; color: #6b6790; font-size: 10.5px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep-pv__bar { display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.sep-pv__bar img, .sep-pv__bar b { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: var(--acc); color: #fff; font-size: 11px; transition: background .3s; }
.sep-pv__bar strong { flex: 1; font-size: 11.5px; color: #1b1744; }
.sep-pv__bar i { width: 18px; height: 8px; border-radius: 4px; background: var(--acc); opacity: .5; transition: background .3s; }
.sep-pv__hero { display: grid; gap: 4px; margin: 0 10px; padding: 14px 12px; border-radius: 9px; color: #fff; background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 45%, #fff)); transition: background .3s; }
.is-glass .sep-pv__hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); backdrop-filter: blur(4px); }
.sep-pv__hero strong { font-size: 14px; line-height: 1.2; }
.sep-pv__hero small { font-size: 10.5px; line-height: 1.4; opacity: .92; }
.sep-pv__hero em { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: #fff; color: var(--acc); font-size: 10px; font-style: normal; font-weight: 800; }
.sep-pv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 10px; }
.sep-pv__grid i { height: 44px; border-radius: 7px; background: #ebe8f5; }
.is-glass .sep-pv__grid i { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.sep-pv__note { margin: 10px 0 0 !important; font-size: 12.5px; color: var(--hp-muted); }

/* ===== One type scale on every dashboard page, taken from Home ===== */
body.sep-dash { font-size: 15px; }
body.sep-dash .sep-dash__content h1, body.sep-dash .sep-dash__content .sep-h1 { font-size: 24px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--hp-ink); margin: 0; }
body.sep-dash .sep-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
body.sep-dash .sep-dash__content > .sep-h1, body.sep-dash .sep-home__main > .sep-h1, body.sep-dash .sep-dash__content > h1 { margin-bottom: 18px; }
body.sep-dash .sep-dash__content h2 { font-size: 17px !important; font-weight: 700; color: var(--hp-ink); }
body.sep-dash .sep-dash__content h3 { font-size: 15.5px; font-weight: 700; color: var(--hp-ink); }
body.sep-dash .sep-dash__content p, body.sep-dash .sep-muted { font-size: 14.5px; }
body.sep-dash .sep-dash__content small { font-size: 13px; }
body.sep-dash .sep-field > span:first-child { font-size: 14px; font-weight: 600; color: var(--hp-ink); }
body.sep-dash .sep input[type=text], body.sep-dash .sep input[type=email], body.sep-dash .sep input[type=tel], body.sep-dash .sep input[type=password], body.sep-dash .sep input[type=number], body.sep-dash .sep input[type=url], body.sep-dash .sep input[type=search], body.sep-dash .sep textarea, body.sep-dash .sep select { font-size: 15px; }
/* Lists: product and order rows */
body.sep-dash .sep-prow__main b, body.sep-dash .sep-row__main b { font-size: 15.5px; font-weight: 700; color: var(--hp-ink); }
body.sep-dash .sep-prow__price { font-size: 14.5px; }
body.sep-dash .sep-prow__main small, body.sep-dash .sep-row__main small { font-size: 13px; color: var(--hp-muted); }
body.sep-dash .sep-row__end b { font-size: 15.5px; }
/* Chips and buttons */
body.sep-dash .sep-chips a, body.sep-dash .sep-pills a, body.sep-dash .sep-pills button { font-size: 14px; }
body.sep-dash .sep-btn { font-size: 14.5px; }
body.sep-dash .sep-btn--lg { font-size: 15.5px; }
body.sep-dash .sep-stat b { font-size: 28px; }
body.sep-dash .sep-stat small { font-size: 13.5px; }

/* Refer & earn. */
.sep-ref__pitch { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 6px; }
.sep-ref__badge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--hp-soft); color: var(--hp); }
.sep-ref__badge .sep-i { width: 24px; height: 24px; }
.sep-ref__pitch h2 { margin: 0 0 4px; font-size: 19px !important; }
.sep-ref__pitch p { margin: 0 !important; color: var(--hp-muted); font-size: 14.5px; line-height: 1.55; max-width: 640px; }
.sep-ref__share { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px 24px 22px; border-bottom: 1px solid var(--hp-line); }
.sep-ref__field { flex: 1 1 320px; display: grid; gap: 6px; min-width: 0; }
.sep-ref__field--code { flex: 0 1 150px; }
.sep-ref__field small { color: var(--hp-muted); font-size: 13px; font-weight: 600; }
.sep-ref__field input { width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid var(--hp-line); border-radius: 8px; background: var(--hp-bg); color: var(--hp-ink); font: 600 14.5px/1 var(--font); }
.sep-ref__field--code input { letter-spacing: .08em; text-align: center; color: var(--hp); font-weight: 800; }
.sep-ref .sep-hpn__actions { margin-left: 0; }
.sep-ref__wa { background: #1faa59; }
.sep-ref__wa:hover { background: #178a47; }
.sep-ref__bar { display: block; height: 6px; margin: 8px 0 0 28px; border-radius: 99px; background: linear-gradient(90deg, var(--hp) calc(var(--p) * 1%), var(--hp-soft) 0); }
.sep-ref__how { padding: 22px 24px; }
.sep-ref__how ol { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .sep-ref__how ol { grid-template-columns: repeat(3, 1fr); } }
.sep-ref__how li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 16px; border-radius: 8px; background: var(--hp-bg); }
.sep-ref__how li span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hp); color: #fff; font-weight: 800; font-size: 14px; }
.sep-ref__how li b { color: var(--hp-ink); font-size: 15px; }
.sep-ref__how li small { color: var(--hp-muted); font-size: 13.5px; line-height: 1.5; }
.sep-ref__list { margin: 0; padding: 0; list-style: none; }
.sep-ref__list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hp-line); }
.sep-ref__list li:first-child { border-top: 0; }
.sep-ref__list li > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sep-ref__list li b { color: var(--hp-ink); font-size: 15px; }
.sep-ref__list li small { color: var(--hp-muted); font-size: 13.5px; }
.sep-ref__list .sep-hpn__logo .sep-i { width: 20px; height: 20px; }
.sep-ref__pill { flex: none; padding: 5px 10px; border-radius: 99px; font: 700 12.5px/1 var(--font); font-style: normal; white-space: nowrap; }
.sep-ref__pill.is-blue { background: #e6f0ff; color: #1d5bd8; }
.sep-ref__pill.is-violet { background: var(--hp-soft); color: var(--hp); }
.sep-ref__pill.is-green { background: #def7ef; color: #008a72; }
.sep-ref__pill.is-coral { background: #ffe9e5; color: #d63c25; }
.sep-ref__pill.is-muted { background: #eef0f4; color: var(--hp-muted); }
.sep-ref__empty { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; text-align: center; }
.sep-ref__empty b { color: var(--hp-ink); font-size: 15.5px; margin-top: 6px; }
.sep-ref__empty small { color: var(--hp-muted); font-size: 14px; }
.sep-ref__terms { padding: 0 !important; }
.sep-ref__terms summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; list-style: none; }
.sep-ref__terms summary::-webkit-details-marker { display: none; }
.sep-ref__terms summary h2 { margin: 0; }
.sep-ref__terms summary .sep-i { width: 18px; height: 18px; color: var(--hp-muted); transform: rotate(90deg); transition: transform .2s; }
.sep-ref__terms[open] summary .sep-i { transform: rotate(-90deg); }
.sep-ref__terms ul { margin: 0; padding: 0 24px 20px 44px; color: var(--hp-muted); font-size: 14px; line-height: 1.6; }
.sep-ref__terms li + li { margin-top: 6px; }
@media (max-width: 600px) { .sep-ref__pitch, .sep-ref__share { padding-left: 16px; padding-right: 16px; } .sep-ref__field--code { flex: 1 1 100%; } .sep-ref__share .sep-hpn__actions { width: 100%; } .sep-ref__share .sep-hpn__actions > * { flex: 1; justify-content: center; } }

/* Phone tab bar: four pages plus More. */
.sep-dash .sep-tabbar__more.is-active .sep-tabbar__icon, .sep-dash .sep-tabbar__more[aria-expanded="true"] .sep-tabbar__icon { background: var(--a-soft); color: var(--a-ink); }
.sep-dash .sep-tabbar__more.is-active, .sep-dash .sep-tabbar__more[aria-expanded="true"] { color: var(--a-ink); }
.sep-more { position: fixed; inset: 0; z-index: 39; }
.sep-more[hidden] { display: none; }
.sep-more__backdrop { position: absolute; inset: 0; background: rgba(27, 23, 68, .32); }
.sep-more__panel { position: absolute; left: 0; right: 0; bottom: calc(var(--tab) + env(safe-area-inset-bottom)); padding: 8px 16px 14px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -12px 40px -16px rgba(27, 23, 68, .35); animation: sep-more-up .16s ease-out; }
@keyframes sep-more-up { from { transform: translateY(16px); opacity: 0; } }
.sep-more__grip { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 99px; background: var(--hp-line); }
.sep-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sep-more__grid a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; color: var(--hp-ink); font-size: 13px; font-weight: 600; text-align: center; }
.sep-more__grid a.is-active, .sep-more__grid a:active { background: var(--hp-soft); color: var(--hp); }
.sep-more__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hp-bg); color: var(--hp); }
.sep-more__icon .sep-i { width: 22px; height: 22px; }
.sep-more__icon .sep-badge { top: -4px; right: -4px; }
.sep-more__foot { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hp-line); }
.sep-more__foot a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 10px; background: var(--hp-bg); color: var(--hp-ink); font-size: 14px; font-weight: 600; }
.sep-more__foot .sep-i { width: 18px; height: 18px; }
@media (min-width: 900px) { .sep-more { display: none !important; } }
.sep-more-open .sep-aichat { display: none; }

/* Orders list: one row per order with what you need to act on it. */
.sep-ord__alert { margin-bottom: 18px; }
.sep-ord .sep-chips { margin-bottom: 18px; }
.sep-ord__table { padding: 0 !important; overflow: hidden; }
.sep-ord__head, .sep-ord__row { display: grid; grid-template-columns: 96px minmax(170px, 1.3fr) minmax(150px, 1.3fr) 140px 90px 110px 118px; align-items: center; gap: 16px; padding: 0 24px; }
.sep-ord__head { min-height: 48px; border-bottom: 1px solid var(--hp-line); background: var(--hp-bg); color: var(--hp-muted); font-size: 13px; font-weight: 700; }
.sep-ord__list { margin: 0; padding: 0; list-style: none; }
.sep-ord__row { position: relative; min-height: 76px; border-top: 1px solid var(--hp-line); }
.sep-ord__row:first-child { border-top: 0; }
.sep-ord__row:hover { background: #faf9ff; }
.sep-ord__row.is-new { box-shadow: inset 3px 0 0 #f59e0b; }
.sep-ord__open { position: absolute; inset: 0; z-index: 1; overflow: hidden; color: transparent !important; font-size: 0; }
.sep-ord__no, .sep-ord__items, .sep-ord__cust > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sep-ord__row b { overflow: hidden; color: var(--hp-ink); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sep-ord__row small { overflow: hidden; color: var(--hp-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sep-ord__cust { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sep-ord__cust .sep-row__avatar { width: 38px; height: 38px; font-size: 15px; background: var(--hp-soft); color: var(--hp); }
.sep-ord__pay { justify-self: start; padding: 5px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sep-ord__pay.is-paid { background: #def7ef; color: #008a72; }
.sep-ord__pay.is-cod { background: #fff4e0; color: #a35a00; }
.sep-ord__pay.is-due { background: #ffe9e5; color: #d63c25; }
.sep-ord__total { color: var(--hp-ink); font-size: 15.5px; font-weight: 800; }
.sep-ord__status .sep-pill { margin: 0; }
.sep-ord__acts { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; pointer-events: none; }
.sep-ord__acts a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--hp-bg); color: var(--hp); pointer-events: auto; }
.sep-ord__acts a:hover { background: var(--hp-soft); }
.sep-ord__acts a.is-wa { color: #1faa59; }
.sep-ord__acts .sep-i { width: 18px; height: 18px; }
.sep-ord__chev { display: grid; place-items: center; width: 24px; color: var(--hp-muted); }
.sep-ord__chev .sep-i { width: 18px; height: 18px; }
@media (max-width: 1180px) {
	.sep-ord__head, .sep-ord__row { grid-template-columns: 80px minmax(150px, 1.3fr) minmax(130px, 1fr) 90px 104px 118px; }
	.sep-ord__head span:nth-child(4), .sep-ord__pay { display: none; }
}
@media (max-width: 760px) {
	.sep-ord__head { display: none; }
	.sep-ord__row { grid-template-columns: 1fr auto; grid-template-areas: "cust status" "items total" "no acts"; gap: 10px 12px; padding: 16px; }
	.sep-ord__cust { grid-area: cust; }
	.sep-ord__status { grid-area: status; justify-self: end; }
	.sep-ord__items { grid-area: items; padding-left: 50px; }
	.sep-ord__total { grid-area: total; justify-self: end; align-self: start; }
	.sep-ord__no { grid-area: no; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; padding-left: 50px; }
	.sep-ord__acts { grid-area: acts; }
	.sep-ord__pay { display: inline-block; grid-area: items; align-self: end; justify-self: start; margin-left: 50px; }
	.sep-ord__items { padding-bottom: 30px; }
	.sep-ord__row.is-new { box-shadow: inset 3px 0 0 #f59e0b; }
}

/* One order: summary strip, progress and items on the left, customer and payment on the right. */
.sep-ordp .sep-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--hp-muted) !important; font-size: 14px; font-weight: 600; }
.sep-ordp .sep-back:hover { color: var(--hp) !important; }
.sep-ordp .sep-back .sep-i { width: 16px; height: 16px; }
.sep-ordp__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
.sep-ordp__title .sep-h1 { margin: 0 !important; }
.sep-ordp__title p { flex-basis: 100%; margin: 0 !important; color: var(--hp-muted); font-size: 14px; }
.sep-ordp__sum .sep-hpn__status small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep-ordp__grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .sep-ordp__grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.sep-ordp__main, .sep-ordp__side { display: grid; gap: 20px; min-width: 0; }
.sep-ordp .sep-card { margin: 0 !important; padding: 22px 24px !important; }
.sep-ordp .sep-card h2 { margin: 0 0 16px !important; }
.sep-ordp__next { display: flex; align-items: center; gap: 10px; margin: 0 0 20px !important; padding: 12px 14px; border-radius: 10px; background: #fff4e0; color: #8a4b00; font-size: 14.5px; font-weight: 600; }
.sep-ordp__next.is-confirmed, .sep-ordp__next.is-shipped { background: var(--hp-soft); color: var(--hp); }
.sep-ordp__next.is-delivered { background: #def7ef; color: #00745f; }
.sep-ordp__next.is-cancelled { background: #ffe9e5; color: #b8321e; }
.sep-ordp .sep-track { margin-bottom: 22px; }
.sep-ordp .sep-track li { color: var(--hp-muted); font-size: 13px; font-weight: 600; }
.sep-ordp .sep-track li.is-done { color: var(--hp-ink); }
.sep-ordp .sep-track li span { width: 16px; height: 16px; background: var(--hp-line); }
.sep-ordp .sep-track li + li::before { top: 7px; background: var(--hp-line); }
.sep-ordp .sep-track li.is-done span, .sep-ordp .sep-track li.is-done::before { background: var(--hp); }
.sep-ordp .sep-status-btns { gap: 10px; }
.sep-ordp .sep-status-btns .sep-btn { flex: 0 1 auto; min-height: 42px; padding: 0 18px; border-radius: 8px; font-size: 14.5px; }
.sep-ordp .sep-status-btns .sep-btn:not(.sep-btn--soft):not(.sep-btn--danger-ghost) { order: -1; background: var(--hp) !important; color: #fff !important; }
.sep-ordp .sep-status-btns .sep-btn--soft { background: #fff !important; color: var(--hp) !important; box-shadow: inset 0 0 0 1px var(--hp-line); }
.sep-ordp .sep-status-btns .sep-btn--danger-ghost { margin-left: auto; background: transparent !important; color: #d63c25 !important; }
.sep-ordp .sep-lines li { padding: 10px 0; font-size: 15px; color: var(--hp-ink); }
.sep-ordp .sep-lines__sub { color: var(--hp-muted); font-size: 14px !important; padding: 6px 0 !important; }
.sep-ordp .sep-lines__total { margin-top: 6px; padding-top: 14px !important; border-top: 1px solid var(--hp-line); font-size: 17px !important; font-weight: 800; }
.sep-ordp__who { display: flex; align-items: center; gap: 12px; }
.sep-ordp__who .sep-row__avatar { width: 44px; height: 44px; background: var(--hp-soft); color: var(--hp); }
.sep-ordp__who div { display: grid; gap: 2px; min-width: 0; }
.sep-ordp__who b { color: var(--hp-ink); font-size: 16px; }
.sep-ordp__who small { color: var(--hp-muted); font-size: 14px; }
.sep-ordp__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; }
.sep-ordp__contact .sep-hpn__btn { justify-content: center; }
.sep-ordp__wa { background: #1faa59; }
.sep-ordp__wa:hover { background: #178a47; }
.sep-ordp__facts { display: grid; gap: 14px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--hp-line); }
.sep-ordp__facts dt { color: var(--hp-muted); font-size: 13px; font-weight: 600; }
.sep-ordp__facts dd { margin: 3px 0 0; color: var(--hp-ink); font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.sep-ordp__facts dd a { color: var(--hp-ink) !important; }
.sep-ordp__copy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--hp); font: 700 13.5px/1 var(--font); cursor: pointer; }
.sep-ordp__copy .sep-i { width: 15px; height: 15px; }
.sep-ordp .sep-note { margin: 16px 0 0 !important; padding: 12px 14px; border-radius: 10px; background: var(--hp-bg); color: var(--hp-ink); font-size: 14px; }
.sep-ordp .sep-paybox span:first-child { color: var(--hp-ink); }
.sep-ordp .sep-paid-form .sep-btn { min-height: 42px; border-radius: 8px; background: #fff !important; color: var(--hp) !important; box-shadow: inset 0 0 0 1px var(--hp-line); }
@media (max-width: 600px) { .sep-ordp .sep-card { padding: 18px 16px !important; } .sep-ordp .sep-status-btns .sep-btn { flex: 1 1 100%; } .sep-ordp .sep-status-btns .sep-btn--danger-ghost { margin-left: 0; } }

/* Your own domain: the card has its own header row, so it keeps padding and spacing. */
.sep-dash .sep-shopform > .sep-card.sep-domain { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px; padding: 0 24px 24px !important; }
.sep-dash .sep-shopform > .sep-card.sep-domain > * { margin: 0 !important; }
.sep-domain > .sep-rzpset__head { margin: 0 -24px !important; padding: 18px 24px; border-bottom: 1px solid var(--hp-line); }
.sep-domain .sep-rzpset__head b { color: var(--hp-ink); font-size: 17px; }
.sep-domain .sep-rzpset__head small { margin-top: 2px; color: var(--hp-muted); font-size: 14px; line-height: 1.5; }
.sep-domain .sep-rzpset__logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--hp-soft) !important; color: var(--hp); }
.sep-domain .sep-rzpset__logo .sep-i { width: 22px; height: 22px; }
.sep-domain__live { border-radius: 10px; }
.sep-domain__note { border-radius: 10px; }
.sep-domain .sep-field { display: grid; gap: 8px; width: 100%; max-width: none !important; }
.sep-domain .sep-field input { width: 100% !important; max-width: none !important; }
.sep-domain .sep-field > span { color: var(--hp-ink); font-size: 14.5px; font-weight: 700; }
.sep-domain .sep-field small { color: var(--hp-muted); font-size: 13.5px; }
.sep-domain__steps { padding: 20px 22px; border-radius: 12px; background: var(--hp-bg); border: 1px solid var(--hp-line); }
.sep-domain__steps h3 { color: var(--hp-ink); font-size: 16px; }
.sep-domain__steps ol { color: var(--hp-ink); }
.sep-domain__steps > p { color: var(--hp-muted); }
.sep-domain .sep-dns { border-color: var(--hp-line); border-radius: 10px; }
.sep-domain .sep-dns__row { border-top-color: var(--hp-line); }
.sep-domain .sep-dns__row--head { background: #fafaff; }
.sep-domain .sep-dns__value { border-color: var(--hp-line); border-radius: 8px; }
.sep-domain__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-top: 18px; border-top: 1px solid var(--hp-line); }
.sep-domain__actions .sep-btn { min-height: 44px; padding: 0 22px; border-radius: 8px; background: var(--hp) !important; color: #fff !important; }
.sep-domain__actions .sep-btn .sep-i { width: 18px; height: 18px; }
.sep-domain__actions .sep-check { color: var(--hp-muted); font-size: 14px; }
@media (max-width: 600px) { .sep-dash .sep-shopform > .sep-card.sep-domain { padding: 0 16px 18px !important; } .sep-domain > .sep-rzpset__head { margin: 0 -16px !important; padding: 16px; } .sep-domain__steps { padding: 16px; } .sep-domain__actions .sep-btn { width: 100%; justify-content: center; } }

/* Look page: theme picker (Classic, Glass, Street) with a tiny drawing of each. */
.sep-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .sep-themes { grid-template-columns: 1fr; } }
.sep-theme { position: relative; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--hp-line); border-radius: 12px; background: #fff; cursor: pointer; }
.sep-theme:hover { border-color: #b9a8f5; }
.sep-theme:has(input:checked) { border-color: var(--hp); box-shadow: 0 0 0 3px rgba(103, 61, 230, .15); }
.sep-theme input { position: absolute; top: 12px; right: 12px; accent-color: var(--hp); }
.sep-theme b { margin-top: 6px; color: var(--hp-ink); font-size: 15px; }
.sep-theme b em { margin-left: 4px; padding: 2px 7px; border-radius: 99px; background: #f2545b; color: #fff; font-size: 11px; font-style: normal; vertical-align: 2px; }
.sep-theme small { color: var(--hp-muted); font-size: 13px; line-height: 1.45; }
.sep-theme__art { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 34px 26px; gap: 5px; height: 76px; padding: 6px; border-radius: 8px; background: #f6f4fb; overflow: hidden; }
.sep-theme__art i { border-radius: 5px; background: #e2dcf5; }
.sep-theme__art i:first-child { grid-column: 1 / -1; background: var(--hp); opacity: .8; }
.sep-theme--glass .sep-theme__art { background: radial-gradient(60% 80% at 20% 20%, #c9b8ff, transparent), radial-gradient(60% 80% at 90% 80%, #9fdcff, transparent), #eef2ff; }
.sep-theme--glass .sep-theme__art i { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.sep-theme--glass .sep-theme__art i:first-child { background: rgba(255, 255, 255, .55); opacity: 1; }
.sep-theme--street .sep-theme__art { border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px #000; }
.sep-theme--street .sep-theme__art i { border-radius: 0; background: #ececec; }
.sep-theme--street .sep-theme__art i:first-child { background: #000; opacity: 1; }
/* Look page preview in the Street theme. */
.sep-pv__frame.is-street { border-radius: 0; }
.sep-pv__frame.is-street .sep-pv__bar { border-bottom: 1px solid #000; }
.sep-pv__frame.is-street .sep-pv__bar strong { text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
.sep-pv__frame.is-street .sep-pv__bar b, .sep-pv__frame.is-street .sep-pv__bar img { border-radius: 0; }
.sep-pv__frame.is-street .sep-pv__hero { border-radius: 0; background: #000 !important; }
.sep-pv__frame.is-street .sep-pv__hero strong { text-transform: uppercase; font-weight: 900; letter-spacing: -.01em; }
.sep-pv__frame.is-street .sep-pv__hero em { border-radius: 0; background: #fff; color: #000; text-transform: uppercase; letter-spacing: .1em; }
.sep-pv__frame.is-street .sep-pv__grid i { border-radius: 0; background: #f2f2f2; }

/* Themes page: cards like WordPress Appearance › Themes, each with a drawn mini shop. */
.sep-thms__lead { margin: -6px 0 20px !important; color: var(--hp-muted); font-size: 14.5px; }
.sep-thms__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.sep-thm { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hp-line); border-radius: 12px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.sep-thm:hover { border-color: #c9bdf7; box-shadow: 0 18px 40px -24px rgba(47, 28, 106, .45); }
.sep-thm.is-active { border-color: var(--hp); box-shadow: 0 0 0 3px rgba(103, 61, 230, .14); }
.sep-thm__shot { position: relative; padding: 16px; background: #f4f5ff; border-bottom: 1px solid var(--hp-line); }
.sep-thm__peek { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; gap: 8px; align-items: center; background: rgba(27, 23, 68, .55); color: #fff !important; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .2s; }
.sep-thm__peek .sep-i { width: 20px; height: 20px; }
.sep-thm__shot:hover .sep-thm__peek, .sep-thm__peek:focus-visible { opacity: 1; }
.sep-thm__body { flex: 1; padding: 16px 18px 6px; }
.sep-thm__name { display: flex; align-items: center; gap: 8px; }
.sep-thm__name b { color: var(--hp-ink); font-size: 17px; }
.sep-thm__name em { padding: 3px 9px; border-radius: 99px; background: #f2545b; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 700; }
.sep-thm__name em.is-on { background: #def7ef; color: #008a72; }
.sep-thm__body p { margin: 6px 0 0 !important; color: var(--hp-muted); font-size: 14px; line-height: 1.5; }
.sep-thm__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.sep-thm__tags li { padding: 4px 9px; border-radius: 6px; background: var(--hp-bg); color: var(--hp-ink); font-size: 12.5px; font-weight: 600; }
.sep-thm__foot { display: flex; gap: 10px; padding: 14px 18px 18px; }
.sep-thm__foot > *, .sep-thm__foot form .sep-hpn__btn { flex: 1; justify-content: center; }
.sep-thm__foot form { display: flex; flex: 1; margin: 0; }
.sep-thm--soon { align-items: center; justify-content: center; gap: 8px; min-height: 280px; padding: 24px; border-style: dashed; background: #fbfbff; text-align: center; }
.sep-thm--soon b { color: var(--hp-ink); font-size: 16px; }
.sep-thm--soon p { margin: 0 !important; max-width: 30ch; color: var(--hp-muted); font-size: 14px; }
.sep-thm--soon a { color: var(--hp) !important; font-weight: 700; }
.sep-thm__soonicon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--hp-soft); color: var(--hp); }
.sep-thm__soonicon .sep-i { width: 24px; height: 24px; }

/* The mini shop drawing: header, banner, three products. */
.sep-thm__art { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 14px 1.3fr 1fr; gap: 6px; aspect-ratio: 16 / 10; padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px -14px rgba(27, 23, 68, .35); }
.sep-thm__art i { display: block; border-radius: 5px; background: #ebe7f7; }
.sep-thm__art i:nth-child(1) { grid-column: 1 / -1; background: none; border-bottom: 2px solid #ebe7f7; border-radius: 0; }
.sep-thm__art i:nth-child(2) { grid-column: 1 / -1; background: linear-gradient(120deg, #673de6, #a78bfa); }
.sep-thm__art--glass { background: radial-gradient(60% 80% at 15% 15%, #c9b8ff, transparent), radial-gradient(60% 80% at 90% 85%, #9fdcff, transparent), #eef2ff; }
.sep-thm__art--glass i { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.sep-thm__art--glass i:nth-child(1) { border-bottom-color: rgba(255, 255, 255, .8); }
.sep-thm__art--glass i:nth-child(2) { background: rgba(255, 255, 255, .5); }
.sep-thm__art--street { border-radius: 0; gap: 4px; }
.sep-thm__art--street i { border-radius: 0; background: #efefef; }
.sep-thm__art--street i:nth-child(1) { border-bottom: 2px solid #000; }
.sep-thm__art--street i:nth-child(2) { background: #000; }

/* Look page: the active theme with a link to the Themes page. */
.sep-thmnow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sep-thmnow .sep-thm__art { width: 120px; flex: none; box-shadow: none; border: 1px solid var(--hp-line); }
.sep-thmnow > div { flex: 1; min-width: 180px; display: grid; gap: 4px; }
.sep-thmnow b { color: var(--hp-ink); font-size: 16px; }
.sep-thmnow b em { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #def7ef; color: #008a72; font-size: 11.5px; font-style: normal; }
.sep-thmnow small { color: var(--hp-muted); font-size: 13.5px; }
.sep-hpn__crumbs a { color: var(--hp) !important; font-weight: 600; }

/* Customize page: each theme's own settings as segmented choices. */
.sep-tset { display: grid; }
.sep-tset__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 16px 0; border-top: 1px solid var(--hp-line); }
.sep-tset__row:first-child { border-top: 0; padding-top: 4px; }
.sep-tset__label { display: grid; gap: 2px; min-width: 200px; flex: 1; }
.sep-tset__label b { color: var(--hp-ink); font-size: 15px; }
.sep-tset__label small { color: var(--hp-muted); font-size: 13px; line-height: 1.45; }
.sep-tset__seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: var(--hp-bg); box-shadow: inset 0 0 0 1px var(--hp-line); }
.sep-tset__seg label { margin: 0; cursor: pointer; }
.sep-tset__seg input { position: absolute; opacity: 0; pointer-events: none; }
.sep-tset__seg span { display: block; padding: 8px 14px; border-radius: 8px; color: var(--hp-muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sep-tset__seg input:checked + span { background: #fff; color: var(--hp); box-shadow: 0 1px 3px rgba(27, 23, 68, .16); }
.sep-tset__seg input:focus-visible + span { outline: 2px solid var(--hp); outline-offset: 1px; }
.sep-tset__row > input[type=text] { flex: 0 1 240px; }
@media (max-width: 600px) { .sep-tset__seg { width: 100%; } .sep-tset__seg label { flex: 1; text-align: center; } .sep-tset__row > input[type=text] { flex-basis: 100%; } }
.sep-tset__photo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sep-tset__photo img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hp-line); }
.sep-tset__photo .sep-btn { cursor: pointer; }
.sep-tset__photo .sep-btn .sep-i { width: 18px; height: 18px; }
/* Theme cards: two buttons always fit side by side inside the card. */
.sep-thm__foot { gap: 8px; }
.sep-thm__foot > *, .sep-thm__foot form .sep-hpn__btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 14px; gap: 6px; }
.sep-thm__foot .sep-hpn__btn .sep-i { width: 16px; height: 16px; flex: none; }

/* Profile page: name, email, password and sign out. */
.sep-prof__head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 22px 24px; margin-bottom: 20px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; }
.sep-prof__avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hp-soft); color: var(--hp); font: 700 26px/1 var(--font); }
.sep-prof__head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sep-prof__head > div b { font-size: 19px; color: var(--hp-ink); overflow-wrap: anywhere; }
.sep-prof__head > div small { font-size: 14px; color: var(--hp-muted); overflow-wrap: anywhere; }
.sep-prof__facts { display: flex; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.sep-prof__facts li { display: flex; flex-direction: column; gap: 4px; }
.sep-prof__facts span { font-size: 12.5px; color: var(--hp-muted); }
.sep-prof__facts b { font-size: 15px; color: var(--hp-ink); }
.sep-prof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.sep-dash .sep-prof__card { margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sep-dash .sep-prof__card h2 { margin: 0; font-size: 18px; }
.sep-dash .sep-prof__card > p.sep-muted { margin: -10px 0 0; font-size: 14px; }
.sep-dash .sep-prof__card .sep-field { margin: 0; }
.sep-dash .sep-prof__card input[readonly] { background: var(--hp-bg); color: var(--hp-muted); cursor: default; }
.sep-dash .sep-prof__card .sep-hpn__btn { align-self: flex-start; }
.sep-prof__err { margin: 0; color: #c2410c !important; font-weight: 600; }
.sep-prof__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.sep-prof__row a { font-size: 14px; font-weight: 600; color: var(--hp); }
.sep-dash .sep-prof__out { margin-top: 20px; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sep-dash .sep-prof__out .sep-hpn__btn { align-self: center; }
@media (max-width: 600px) {
	.sep-prof__grid { grid-template-columns: minmax(0, 1fr); }
	.sep-prof__facts { margin-left: 0; width: 100%; }
	.sep-dash .sep-prof__card { padding: 20px 16px; }
	.sep-dash .sep-prof__card .sep-hpn__btn { align-self: stretch; justify-content: center; }
}

/* Phones: the shop settings pages sit in the More sheet, so no row of pills above the form. */
.sep-dash .sep-shopgrid > .sep-subnav { display: none; }
.sep-more__label { margin: 4px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hp-muted); }
.sep-more__grid--set { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hp-line); }
.sep-more__grid--set a { padding: 10px 2px; font-size: 12.5px; }
.sep-more__panel { max-height: calc(100dvh - var(--tab) - 40px); overflow-y: auto; }

/* Plan page: invoice download links and the billing details form. */
.sep-bill__inv { display: flex; width: max-content; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--sep-brand, #5a36f0); text-decoration: none; white-space: nowrap; }
.sep-bill__inv::before { content: "\2193"; font-weight: 800; }
.sep-bill__inv:hover { text-decoration: underline; }
.sep-bill__coupon { margin: 12px 0 0; }
.sep-bill__coupon-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.sep-bill__coupon-row .sep-input { flex: 1 1 160px; max-width: 220px; }
[data-sep-coupon-msg] { margin-top: 6px; font-size: .88em; }
.sep-billto { display: grid; gap: 14px; }
.sep-billto h2, .sep-billto p { margin: 0; }
.sep-billto .sep-btn { justify-self: start; }
@media (min-width: 761px) { .sep-billto .sep-field { max-width: 560px; } }

/* Your own domain: buy a new domain. */
.sep-dombuy [hidden] { display: none !important; }
.sep-dombuy { margin: 4px 0 8px; padding: 18px; border: 1px solid var(--sep-line, #e7e4f2); border-radius: 16px; background: linear-gradient(180deg, #f7f4ff, #fff); }
.sep-dombuy h3 { margin: 0 0 4px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.sep-dombuy h4 { margin: 0 0 4px; font-size: 15px; }
.sep-dombuy > p { margin: 0 0 12px; }
.sep-dombuy__search { display: flex; gap: 8px; }
.sep-dombuy__search input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--sep-line, #ddd8ee); border-radius: 12px; font: inherit; font-size: 16px; background: #fff; }
.sep-dombuy__msg { margin: 10px 0 0; font-size: 14px; color: var(--sep-muted, #6c6889); }
.sep-dombuy__msg.is-bad, .sep-dombuy__done.is-bad { color: #b42318; }
.sep-dombuy__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sep-dombuy__list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--sep-line, #e7e4f2); border-radius: 12px; background: #fff; }
.sep-dombuy__list li > span:first-child { flex: 1; min-width: 0; }
.sep-dombuy__list b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.sep-dombuy__list small { display: block; font-size: 12px; color: var(--sep-muted, #6c6889); }
.sep-dombuy__list li.is-taken { opacity: .55; }
.sep-dombuy__price { text-align: right; font-weight: 800; white-space: nowrap; }
.sep-dombuy__buy { margin-top: 14px; display: grid; gap: 10px; }
.sep-dombuy__buy p { margin: 0; }
.sep-dombuy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sep-dombuy__wide { grid-column: 1 / -1; }
.sep-dombuy__fine { font-size: 13px; }
.sep-dombuy__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sep-dombuy__done { margin-top: 12px; padding: 14px; border-radius: 12px; background: #ecfdf3; color: #065f46; font-weight: 600; }
.sep-dombuy__or { position: relative; margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--sep-muted, #6c6889); }
.sep-dombuy__or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--sep-line, #e7e4f2); }
.sep-dombuy__or span { position: relative; padding: 0 10px; background: #fff; }
.sep-dombuy__owned { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; background: #f7f4ff; font-size: 14px; }
.sep-dombuy__owned p { margin: 0; }
.sep-dombuy__owned svg { flex: none; width: 20px; height: 20px; color: var(--sep-brand, #5a36f0); }
@media (max-width: 560px) { .sep-dombuy__grid { grid-template-columns: 1fr; } .sep-dombuy__list li { flex-wrap: wrap; } }

/* Link from a website's dashboard back to the account home. */
.sep-dash .sep-side__home { display: block; margin: -4px 12px 12px; padding: 9px 12px; border-radius: 10px; background: #f7f5ff; color: #5b30e6; font-size: 13px; font-weight: 700; text-decoration: none; }
.sep-dash .sep-side__home:hover { background: #efeaff; }