/* ==========================================================================
   EpinHub — Creative dark gaming UI
   ========================================================================== */

/* --- Tokens — Indigo Steel (solid colors, no gradients) ------------------- */
:root {
	--bg-0:       #0c1020;
	--bg-1:       #141a30;
	--bg-2:       #1d2546;
	--bg-3:       #28335f;
	--surface:    #141a30;
	--surface-2:  #1d2546;
	--border:     #232b48;
	--border-hi:  #3a4673;

	--text:       #eef0f8;
	--text-mute:  #9ba2bf;
	--text-dim:   #5e6585;

	--brand:      #4f70e8;
	--brand-hi:   #6a87f0;
	--brand-soft: rgba(79, 112, 232, 0.14);

	--accent:     #ffb800;
	--accent-hi:  #ffc933;
	--accent-soft:rgba(255, 184, 0, 0.14);

	--danger:     #e74c3c;
	--warn:       #ffb800;
	--success:    #2ecc71;
	--info:       #3498db;

	--shadow-sm:  0 2px 8px rgba(0,0,0,.3);
	--shadow-md:  0 8px 24px rgba(0,0,0,.4);
	--shadow-lg:  0 20px 50px rgba(0,0,0,.5);

	--radius-sm:  8px;
	--radius:     12px;
	--radius-lg:  18px;

	--ease:       cubic-bezier(.4, 0, .2, 1);
	--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg-0);
	min-height: 100vh;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: var(--brand); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand); }

h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1em; color: var(--text-mute); }
code, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background: var(--brand); color: white; }

/* --- Utility containers --------------------------------------------------- */
.ep-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 22px;
	width: 100%;
}

.ep-section {
	padding: 80px 0;
	position: relative;
}
.ep-section--alt {
	background: var(--bg-1);
}

.ep-section__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.ep-section__head h1, .ep-section__head h2 {
	margin: 0;
}

.ep-link {
	color: var(--brand);
	font-weight: 600;
	font-size: .95rem;
	transition: transform .2s var(--ease);
}
.ep-link:hover { transform: translateX(4px); }

/* --- Background FX --------------------------------------------------------- */
.ep-bg-fx {
	position: fixed; inset: 0;
	pointer-events: none; z-index: 0;
	overflow: hidden;
}
.ep-orb,
.ep-orb--a,
.ep-orb--b,
.ep-orb--c { display: none; }

.ep-bg-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(79,112,232,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(79,112,232,.03) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
@keyframes orb {
	0%, 100% { transform: translate(0,0) scale(1); }
	33%      { transform: translate(40px, -30px) scale(1.1); }
	66%      { transform: translate(-30px, 40px) scale(.95); }
}

/* --- Announcement bar ------------------------------------------------------ */
.ep-announce {
	position: relative;
	z-index: 5;
	font-size: .82rem;
	color: rgba(231,234,255,.8);
	border-bottom: 1px solid var(--border);
	background: rgba(11,13,24,.6);
	backdrop-filter: blur(8px);
}
.ep-announce .ep-container {
	display: flex; gap: 32px;
	overflow: hidden; white-space: nowrap;
	padding-top: 9px; padding-bottom: 9px;
	justify-content: space-around;
}
.ep-announce span { letter-spacing: .03em; }
@media (max-width: 768px) {
	.ep-announce .ep-container { justify-content: flex-start; gap: 18px; overflow-x: auto; scrollbar-width: none; }
	.ep-announce .ep-container::-webkit-scrollbar { display: none; }
}

/* --- Header ---------------------------------------------------------------- */
.ep-header {
	position: sticky; top: 0;
	z-index: 100;
	backdrop-filter: blur(14px);
	background: rgba(6, 8, 20, 0.78);
	border-bottom: 1px solid var(--border);
}
.ep-header__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 76px;
	padding-top: 10px; padding-bottom: 10px;
}

.ep-logo {
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--text);
	transition: transform .25s var(--ease);
	flex-shrink: 0;
}
.ep-logo:hover { transform: scale(1.02); }
.ep-logo__mark {
	display: inline-block;
	flex-shrink: 0;
	filter: drop-shadow(0 0 12px rgba(255,61,113,.5));
}
.ep-logo__text {
	display: flex; flex-direction: column; line-height: 1;
	white-space: nowrap;
}
.ep-logo__text strong {
	font-size: 1.1rem;
	color: var(--text);
	letter-spacing: -.01em;
	font-weight: 800;
	white-space: nowrap;
}
.ep-logo__text small {
	font-size: .65rem;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-top: 3px;
	font-weight: 600;
	white-space: nowrap;
}

.ep-nav {
	flex: 1;
	min-width: 0;
}
.ep-nav__list {
	display: flex; gap: 2px;
	list-style: none; margin: 0; padding: 0;
	justify-content: center;
	flex-wrap: nowrap;
}
.ep-nav__list li { flex-shrink: 0; }
.ep-nav__list a {
	color: var(--text-mute);
	font-weight: 500;
	font-size: .9rem;
	padding: 9px 12px;
	border-radius: 10px;
	transition: all .25s var(--ease);
	position: relative;
	white-space: nowrap;
	display: inline-block;
}
.ep-nav__list a:hover {
	color: var(--text);
	background: rgba(255,61,113,.10);
}

.ep-header__actions {
	display: flex; align-items: center; gap: 8px;
	flex-shrink: 0;
}

.ep-search {
	display: flex; align-items: center;
	background: rgba(20,24,50,.6);
	border: 1px solid var(--border);
	border-radius: 12px;
	height: 42px;
	padding-right: 6px;
	transition: border-color .2s var(--ease), box-shadow .2s;
	width: 240px;
	max-width: 100%;
}

/* Adapt header for narrower viewports */
@media (max-width: 1380px) {
	.ep-logo__text small { display: none; }
	.ep-search { width: 200px; }
}
@media (max-width: 1180px) {
	.ep-search { display: none; }
	.ep-nav__list a { padding: 9px 10px; font-size: .86rem; }
}
.ep-search:focus-within {
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(255,61,113,.15);
}
.ep-search input {
	flex: 1;
	border: 0; background: transparent;
	padding: 0 14px;
	color: var(--text);
	font-size: .92rem;
	outline: none;
}
.ep-search input::placeholder { color: var(--text-dim); }
.ep-search button {
	width: 32px; height: 32px;
	border-radius: 8px;
	color: var(--text-mute);
	display: grid; place-items: center;
}
.ep-search button:hover { color: var(--text); background: rgba(255,61,113,.15); }

.ep-iconbtn {
	width: 42px; height: 42px;
	border-radius: 12px;
	background: rgba(20,24,50,.6);
	border: 1px solid var(--border);
	display: grid; place-items: center;
	color: var(--text-mute);
	transition: all .2s var(--ease);
}
.ep-iconbtn:hover { color: var(--text); border-color: var(--border-hi); transform: translateY(-1px); }

.ep-cartbtn {
	position: relative;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--brand);
	display: grid; place-items: center;
	color: white;
	transition: all .25s var(--ease);
	box-shadow: 0 6px 20px rgba(255,61,113,.35);
}
.ep-cartbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255,61,113,.5); color: white; }
.ep-cartbtn__count {
	position: absolute;
	top: -6px; right: -6px;
	background: var(--accent);
	color: white;
	font-size: 10px;
	font-weight: 800;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	border-radius: 99px;
	display: grid; place-items: center;
	border: 2px solid var(--bg-0);
	transform: scale(1);
	animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

.ep-mobiletoggle { display: none; }

@media (max-width: 1024px) {
	.ep-header__inner { justify-content: space-between; }
	.ep-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: rgba(6,8,20,.95);
		border-bottom: 1px solid var(--border);
		padding: 16px;
		backdrop-filter: blur(20px);
	}
	.ep-nav.is-open { display: block; }
	.ep-nav__list { flex-direction: column; gap: 0; flex-wrap: wrap; }
	.ep-nav__list a { display: block; padding: 14px; border-radius: 0; border-bottom: 1px solid var(--border); }
	.ep-mobiletoggle { display: grid; }
}

/* --- Buttons --------------------------------------------------------------- */
.ep-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px;
	border-radius: 12px;
	font-weight: 600;
	font-size: .94rem;
	transition: all .25s var(--ease);
	cursor: pointer;
	white-space: nowrap;
	border: 1px solid transparent;
	user-select: none;
}
.ep-btn:disabled { opacity: .5; cursor: not-allowed; }

.ep-btn--primary {
	background: var(--brand);
	color: white;
	box-shadow: 0 8px 24px rgba(255,61,113,.35);
}
.ep-btn--primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(255,61,113,.5);
	color: white;
}
.ep-btn--ghost {
	background: rgba(20,24,50,.6);
	color: var(--text);
	border-color: var(--border-hi);
}
.ep-btn--ghost:hover:not(:disabled) {
	background: rgba(20,24,50,.85);
	border-color: var(--brand);
	color: var(--text);
}
.ep-btn--xl {
	padding: 13px 22px;
	font-size: .98rem;
	border-radius: 12px;
}
.ep-btn--add {
	background: rgba(255,61,113,.15);
	color: var(--text);
	padding: 9px 14px;
	font-size: .85rem;
	border-radius: 10px;
}
.ep-btn--add:hover:not(:disabled) {
	background: var(--brand);
	color: white;
}

/* --- Hero ------------------------------------------------------------------ */
.ep-hero {
	position: relative;
	padding: 80px 0 90px;
	overflow: hidden;
}
.ep-hero::before { display: none; }
.ep-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 60px;
	align-items: center;
}
@media (max-width: 1024px) {
	.ep-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}

.ep-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 99px;
	background: rgba(255,61,113,.18);
	border: 1px solid var(--border-hi);
	color: var(--text);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .02em;
	margin-bottom: 22px;
}

.ep-hero__title {
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin-bottom: 22px;
}
.ep-grad {
	color: var(--brand);
	display: inline-block;
}

.ep-hero__lede {
	font-size: 1.1rem;
	color: var(--text-mute);
	max-width: 540px;
	margin-bottom: 30px;
}

.ep-hero__cta {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin-bottom: 50px;
}

.ep-hero__stats {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
	max-width: 540px;
}
.ep-hero__stats li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	transition: transform .25s var(--ease), border-color .25s;
}
.ep-hero__stats li:hover { transform: translateY(-3px); border-color: var(--border-hi); }
.ep-hero__stats strong {
	font-size: 1.25rem; font-weight: 800;
	color: var(--brand);
}
.ep-hero__stats span { font-size: .76rem; color: var(--text-dim); }
@media (max-width: 540px) {
	.ep-hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Hero card stack visual */
.ep-hero__art {
	display: grid; place-items: center;
	min-height: 480px;
	perspective: 1200px;
}
.ep-card-stack {
	position: relative;
	width: 380px; height: 240px;
	transform-style: preserve-3d;
	animation: float 6s ease-in-out infinite;
}
@keyframes float {
	0%, 100% { transform: translateY(0) rotateY(-8deg); }
	50%      { transform: translateY(-15px) rotateY(8deg); }
}
.ep-cardvis {
	position: absolute;
	width: 380px; height: 240px;
	border-radius: 18px;
	padding: 26px;
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 30px 80px rgba(255,61,113,.4);
	font-family: 'Outfit', sans-serif;
	border: 1px solid rgba(255,255,255,.08);
	transition: transform .6s var(--ease);
}
.ep-cardvis--1 { background: #1e3a5f; transform: rotate(-8deg) translate(-30px, 10px); }
.ep-cardvis--2 { background: #2c2f4a; transform: rotate(0deg); }
.ep-cardvis--3 { background: #4a3a1d; transform: rotate(8deg) translate(30px, 10px); }

.ep-cardvis__brand { font-size: .7rem; letter-spacing: .25em; font-weight: 700; opacity: .9; }
.ep-cardvis__amount { font-size: 1.6rem; font-weight: 800; }
.ep-cardvis__chip {
	width: 42px; height: 32px; border-radius: 6px;
	background: var(--accent);
	margin-top: -10px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -2px 0 rgba(0,0,0,.2);
}
.ep-cardvis__num { font-family: 'JetBrains Mono'; font-size: .9rem; letter-spacing: .15em; opacity: .85; }

@media (max-width: 540px) {
	.ep-hero__art { min-height: 360px; }
	.ep-card-stack, .ep-cardvis { width: 300px; height: 190px; }
	.ep-cardvis__amount { font-size: 1.3rem; }
}

/* --- Categories grid ------------------------------------------------------- */
.ep-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.ep-cats__item {
	position: relative;
	display: flex; flex-direction: column; gap: 6px;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all .3s var(--ease);
	color: var(--text);
}
.ep-cats__item:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--text); background: var(--surface-2); }
.ep-cats__item::before, .ep-cats__shine { display: none; }

.ep-cats__emoji { font-size: 2rem; margin-bottom: 6px; }
.ep-cats__name { font-weight: 700; font-size: 1.05rem; }
.ep-cats__meta { font-size: .8rem; color: var(--text-dim); }

/* --- Product grid & card --------------------------------------------------- */
.ep-grid {
	display: grid;
	gap: 22px;
}
.ep-grid--products { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ep-grid--posts    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.ep-card {
	--brand: #4f70e8;
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
	display: flex; flex-direction: column;
}
.ep-card:hover {
	transform: translateY(-4px);
	border-color: var(--brand);
	box-shadow: 0 12px 30px rgba(0,0,0,.4);
}

.ep-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bg-2);
}
.ep-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.ep-card:hover .ep-card__media img { transform: scale(1.08); }

.ep-card__badge,
.ep-card__discount {
	position: absolute;
	top: 10px;
	font-size: .68rem;
	font-weight: 800;
	padding: 5px 10px;
	border-radius: 4px;
	letter-spacing: .05em;
	text-transform: uppercase;
	z-index: 3;
}
.ep-card__badge {
	left: 10px;
	background: var(--accent);
	color: #1a1100;
}
.ep-card__discount {
	right: 10px;
	background: var(--danger);
	color: #fff;
}

.ep-card__glow { display: none; }

.ep-card__body {
	padding: 16px;
	display: flex; flex-direction: column;
	flex: 1; gap: 8px;
}
.ep-card__cat {
	font-size: .7rem;
	font-weight: 700;
	color: var(--brand);
	text-transform: uppercase;
	letter-spacing: .12em;
}
.ep-card__title {
	font-size: 1.02rem;
	margin: 0;
	line-height: 1.3;
}
.ep-card__title a { color: var(--text); }
.ep-card__title a:hover { color: var(--brand); }

.ep-card__price {
	display: flex; align-items: baseline; gap: 8px;
	margin-top: auto;
}
.ep-card__old { color: var(--text-dim); text-decoration: line-through; font-size: .9rem; }
.ep-card__now { font-size: 1.18rem; font-weight: 800; color: var(--text); }

.ep-card__foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--border);
	margin-top: 6px;
}
.ep-card__stock {
	font-size: .76rem;
	font-weight: 600;
}
.ep-card__stock.in  { color: var(--success); }
.ep-card__stock.low { color: var(--warn); }
.ep-card__stock.out { color: var(--text-dim); }

.ep-stock-row {
	font-weight: 600;
	padding: 10px 14px !important;
	border-radius: 8px;
	border: 1px solid var(--border);
}
.ep-stock-row--in   { color: var(--success);  background: rgba(46,204,113,.08); border-color: rgba(46,204,113,.25); }
.ep-stock-row--low  { color: var(--warn);     background: rgba(255,184,0,.08);  border-color: rgba(255,184,0,.30); }
.ep-stock-row--out  { color: var(--danger);   background: rgba(231,76,60,.08);  border-color: rgba(231,76,60,.30); }

/* --- Features ------------------------------------------------------------- */
.ep-features {
	padding: 60px 0;
	background: var(--bg-1);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.ep-features__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.ep-feature {
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: all .3s var(--ease);
	position: relative; overflow: hidden;
}
.ep-feature:hover { transform: translateY(-4px); border-color: var(--brand); }
.ep-feature__icon {
	width: 54px; height: 54px;
	border-radius: 12px;
	background: var(--brand);
	display: grid; place-items: center;
	font-size: 1.6rem;
	margin-bottom: 16px;
}
.ep-feature h3 { margin-bottom: 6px; }
.ep-feature p  { font-size: .92rem; margin: 0; }
@media (max-width: 920px)  { .ep-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ep-features__grid { grid-template-columns: 1fr; } }

/* --- CTA newsletter -------------------------------------------------------- */
.ep-cta {
	padding: 40px 0 90px;
}
.ep-cta__inner {
	background: var(--brand);
	border-radius: var(--radius-lg);
	padding: 50px;
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.ep-cta h2 { color: white; margin-bottom: 8px; }
.ep-cta p  { color: rgba(255,255,255,.85); margin: 0; }
.ep-cta__form {
	display: flex; gap: 8px;
	background: rgba(0,0,0,.2);
	padding: 6px;
	border-radius: 99px;
	backdrop-filter: blur(10px);
	position: relative;
}
.ep-cta__form input {
	flex: 1; border: 0; background: transparent;
	padding: 14px 22px; color: white;
	outline: none; font-size: .96rem;
}
.ep-cta__form input::placeholder { color: rgba(255,255,255,.6); }
.ep-cta__form button {
	background: white; color: var(--brand);
	padding: 12px 24px; border-radius: 99px;
	font-weight: 700;
}
@media (max-width: 768px) {
	.ep-cta__inner { grid-template-columns: 1fr; padding: 30px; }
}

/* --- Shop layout ----------------------------------------------------------- */
.ep-shop-hero {
	padding: 50px 0 30px;
	position: relative;
}
.ep-breadcrumb { font-size: .85rem; color: var(--text-dim); margin-bottom: 14px; }
.ep-breadcrumb a { color: var(--text-mute); }
.ep-breadcrumb a:hover { color: var(--brand); }

.ep-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 30px;
	align-items: start;
}
@media (max-width: 920px) {
	.ep-shop-layout { grid-template-columns: 1fr; }
}

.ep-shop-aside { position: sticky; top: 100px; }
.ep-aside-block {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 14px;
}
.ep-aside-block h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 10px; }
.ep-cat-list { list-style: none; margin: 0; padding: 0; }
.ep-cat-list a {
	display: flex; justify-content: space-between; align-items: center;
	padding: 9px 12px; border-radius: 8px;
	color: var(--text-mute);
	font-size: .92rem;
}
.ep-cat-list a:hover { background: rgba(255,61,113,.10); color: var(--text); }
.ep-cat-list a.is-active { background: rgba(255,61,113,.18); color: white; font-weight: 600; }
.ep-cat-list a span { font-size: .78rem; color: var(--text-dim); }

.ep-pay-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--text-mute); }
.ep-pay-list li { padding: 6px 0; }

.ep-aside-promo {
	background: var(--brand);
	border-radius: var(--radius);
	padding: 22px;
	color: white;
	text-align: center;
}
.ep-aside-promo span { font-size: 2rem; }
.ep-aside-promo strong { display: block; margin: 6px 0; }
.ep-aside-promo p { font-size: .85rem; color: rgba(255,255,255,.85); margin: 0 0 12px; }
.ep-aside-promo .ep-btn { background: rgba(0,0,0,.2); color: white; border-color: rgba(255,255,255,.3); }

.ep-shop-toolbar {
	display: flex; align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-mute);
	font-size: .88rem;
}
.ep-shop-toolbar__count {
	font-weight: 600;
	color: var(--text);
	margin-right: auto;
}
.ep-filter {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .82rem;
}
.ep-filter > span { color: var(--text-mute); white-space: nowrap; }
.ep-filter input[type=number] {
	width: 78px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 7px 10px;
	border-radius: 7px;
	font: inherit;
	outline: none;
	-moz-appearance: textfield;
}
.ep-filter input[type=number]::-webkit-outer-spin-button,
.ep-filter input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-filter input[type=number]:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(79,112,232,.15);
}
.ep-filter--check {
	cursor: pointer; user-select: none;
	padding: 6px 10px;
	border-radius: 7px;
	transition: background .15s;
}
.ep-filter--check:has(input:checked) {
	background: rgba(79,112,232,.15);
	color: var(--text);
}
.ep-filter--check input { accent-color: var(--brand); }

.ep-sort {
	display: inline-flex; align-items: center; gap: 6px;
}
.ep-sort > span { color: var(--text-mute); }
.ep-sort select {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 7px 10px;
	padding-right: 28px;
	border-radius: 7px;
	font: inherit;
	cursor: pointer;
	outline: none;
}
.ep-sort select:focus {
	border-color: var(--brand);
}

.ep-btn--sm {
	padding: 7px 14px;
	font-size: .85rem;
	border-radius: 7px;
}
.ep-filter-clear {
	font-size: .82rem;
	color: var(--danger);
}
.ep-filter-clear:hover { color: var(--danger); text-decoration: underline; }

@media (max-width: 768px) {
	.ep-shop-toolbar {
		flex-wrap: wrap;
	}
	.ep-shop-toolbar__count {
		flex-basis: 100%;
		margin-right: 0;
		padding-bottom: 4px;
		border-bottom: 1px solid var(--border);
		margin-bottom: 4px;
	}
	.ep-filter input[type=number] { width: 70px; }
}

.ep-pagination {
	margin-top: 30px;
	display: flex; justify-content: center;
}
.ep-pagination .nav-links,
.ep-pagination > * {
	display: flex; gap: 6px; flex-wrap: wrap;
}
.ep-pagination a, .ep-pagination span {
	padding: 8px 14px; border-radius: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
}
.ep-pagination .current,
.ep-pagination a:hover {
	background: var(--brand); border-color: var(--brand); color: white;
}

.ep-empty {
	text-align: center;
	padding: 70px 20px;
	background: var(--surface);
	border: 1px dashed var(--border-hi);
	border-radius: var(--radius);
}
.ep-empty h2, .ep-empty h3 { margin: 14px 0 8px; }

/* --- Single product -------------------------------------------------------- */
.ep-product {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 50px;
	align-items: start;
}
@media (max-width: 920px) {
	.ep-product { grid-template-columns: 1fr; gap: 30px; }
}

.ep-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	background: var(--bg-2);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.ep-product__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.ep-product__badge,
.ep-product__discount {
	position: absolute;
	top: 18px;
	font-size: .82rem;
	font-weight: 800;
	padding: 8px 14px;
	border-radius: 99px;
	letter-spacing: .03em;
	text-transform: uppercase;
	z-index: 2;
	backdrop-filter: blur(6px);
}
.ep-product__badge { left: 18px; background: var(--accent); color: white; }
.ep-product__discount { right: 18px; background: var(--danger); color: white; }

.ep-product__info h1 { margin-bottom: 12px; }

.ep-product__rating span:last-child { color: var(--text-dim); font-size: .9rem; }

.ep-product__price {
	display: flex; align-items: baseline; gap: 14px;
	padding: 18px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	margin-bottom: 22px;
}
.ep-product__old { color: var(--text-dim); text-decoration: line-through; font-size: 1.1rem; }
.ep-product__now { font-size: 2.2rem; font-weight: 900; color: var(--brand); }

.ep-product__meta {
	display: grid; gap: 6px;
	margin-bottom: 24px;
	color: var(--text-mute);
	font-size: .92rem;
}
.ep-product__form {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	margin-bottom: 22px;
	align-items: stretch;
}
.ep-product__form .ep-btn { white-space: nowrap; }
.ep-qty {
	display: inline-flex;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	height: 46px;
}
.ep-qty input {
	border: 0; background: transparent;
	color: var(--text);
	width: 48px; text-align: center;
	font-weight: 700; font-size: 1rem;
	outline: none;
	-moz-appearance: textfield;
}
.ep-qty input::-webkit-outer-spin-button,
.ep-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-qty__btn { width: 38px; color: var(--text); font-size: 1.1rem; transition: background .2s; }
.ep-qty__btn:hover { background: rgba(255,61,113,.15); }

.ep-product__note {
	background: rgba(0,214,143,.10);
	border: 1px solid rgba(0,214,143,.3);
	color: var(--success);
	padding: 12px 16px;
	border-radius: 10px;
	font-size: .9rem;
	margin-bottom: 22px;
}

.ep-acc {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
}
.ep-acc summary {
	padding: 14px 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex; align-items: center; justify-content: space-between;
}
.ep-acc summary::-webkit-details-marker { display: none; }
.ep-acc summary::after { content: '+'; font-size: 1.4rem; color: var(--text-dim); transition: transform .2s; }
.ep-acc[open] summary::after { transform: rotate(45deg); }
.ep-acc__body { padding: 0 18px 18px; color: var(--text-mute); font-size: .92rem; }

/* --- Cart page ------------------------------------------------------------- */
.ep-cart {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 30px;
	align-items: start;
}
@media (max-width: 920px) {
	.ep-cart { grid-template-columns: 1fr; }
}
.ep-cart__items {
	display: flex; flex-direction: column; gap: 12px;
}
.ep-cart-row {
	display: grid;
	grid-template-columns: 80px 1fr auto auto auto;
	align-items: center; gap: 18px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: border-color .25s;
}
.ep-cart-row:hover { border-color: var(--border-hi); }
.ep-cart-row__media {
	width: 80px; height: 80px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg-3);
}
.ep-cart-row__media img { width: 100%; height: 100%; object-fit: cover; }
.ep-cart-row__info { display: flex; flex-direction: column; gap: 4px; }
.ep-cart-row__info a { color: var(--text); }
.ep-cart-row__unit { color: var(--text-dim); font-size: .85rem; }
.ep-cart-row__line { font-weight: 800; font-size: 1.05rem; min-width: 90px; text-align: right; }
.ep-cart-row__remove { color: var(--text-dim); font-size: 1.2rem; padding: 6px; transition: color .2s; }
.ep-cart-row__remove:hover { color: var(--danger); }
@media (max-width: 600px) {
	.ep-cart-row {
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			"media info remove"
			"qty   qty  line";
		gap: 10px 12px;
		padding: 12px;
	}
	.ep-cart-row__media  { grid-area: media; width: 64px; height: 64px; }
	.ep-cart-row__info   { grid-area: info; min-width: 0; }
	.ep-cart-row__info a strong { display: block; word-break: break-word; }
	.ep-cart-row__remove { grid-area: remove; align-self: start; }
	.ep-cart-row .ep-qty { grid-area: qty; height: 40px; justify-self: start; }
	.ep-cart-row__line   { grid-area: line; align-self: center; text-align: right; min-width: 0; }
}

.ep-cart__summary {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	position: sticky; top: 100px;
}
.ep-cart__summary h3 { margin-bottom: 16px; }
.ep-sum-row {
	display: flex; justify-content: space-between;
	padding: 9px 0;
	color: var(--text-mute);
}
.ep-sum-row strong { color: var(--text); }
.ep-sum-row--total {
	border-top: 1px solid var(--border);
	margin-top: 8px;
	padding-top: 14px;
	font-size: 1.1rem;
}
.ep-sum-row--total strong { font-size: 1.3rem; color: var(--brand); }
.ep-cart__summary .ep-btn { width: 100%; margin-top: 12px; }

.ep-secure {
	text-align: center;
	font-size: .82rem;
	color: var(--text-dim);
	margin-top: 14px;
}
.ep-pay-rail {
	display: flex; justify-content: center; gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.ep-pay-rail span {
	background: var(--bg-3);
	font-size: .72rem;
	padding: 5px 9px;
	border-radius: 6px;
	color: var(--text-mute);
}

/* --- Checkout -------------------------------------------------------------- */
.ep-checkout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 30px;
	align-items: start;
}
@media (max-width: 920px) { .ep-checkout { grid-template-columns: 1fr; } }
.ep-checkout__main { display: flex; flex-direction: column; gap: 14px; }

.ep-card-block {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 26px;
}
.ep-card-block header {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}
.ep-card-block header span {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--brand);
	color: white;
	display: grid; place-items: center;
	font-weight: 800; font-size: .9rem;
	box-shadow: 0 6px 18px rgba(255,61,113,.4);
}
.ep-card-block header h3 { margin: 0; }

.ep-formgrid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 600px) { .ep-formgrid { grid-template-columns: 1fr; } }

.ep-formgrid label {
	display: flex; flex-direction: column; gap: 6px;
	font-size: .82rem; color: var(--text-mute); font-weight: 600;
}
.ep-formgrid input,
.ep-formgrid select {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px 14px;
	border-radius: 10px;
	font: inherit;
	outline: none;
	transition: all .2s;
}
.ep-formgrid input:focus,
.ep-formgrid select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(255,61,113,.15);
}
.ep-formgrid small { color: var(--text-dim); font-weight: 400; }

.ep-pay-methods {
	display: grid; gap: 10px;
}
.ep-pay-method {
	display: grid;
	grid-template-columns: auto 48px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	background: var(--bg-2);
	border: 2px solid var(--border);
	border-radius: 14px;
	cursor: pointer;
	transition: all .25s;
}
.ep-pay-method:hover { border-color: var(--border-hi); }
.ep-pay-method input { accent-color: var(--brand); }
.ep-pay-method__icon {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	background: var(--bg-3);
	border-radius: 10px;
	font-size: 1.5rem;
}
.ep-pay-method__label { display: flex; flex-direction: column; gap: 2px; }
.ep-pay-method__label small { color: var(--text-dim); font-size: .82rem; }
.ep-pay-method__check {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--bg-3);
	color: transparent;
	display: grid; place-items: center;
	font-size: .8rem; font-weight: 800;
	transition: all .2s;
}
.ep-pay-method.is-active,
.ep-pay-method:has(input:checked) {
	border-color: var(--brand);
	background: rgba(255,61,113,.10);
	box-shadow: 0 0 0 4px rgba(255,61,113,.10);
}
.ep-pay-method:has(input:checked) .ep-pay-method__check {
	background: var(--brand); color: white;
}

.ep-check {
	display: flex; gap: 10px; align-items: start;
	font-size: .9rem; color: var(--text-mute);
	margin-bottom: 18px;
}
.ep-check input { accent-color: var(--brand); margin-top: 4px; }
.ep-card-block .ep-btn { width: 100%; }

.ep-checkout__summary {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	position: sticky; top: 100px;
}
.ep-mini-cart { list-style: none; margin: 0 0 14px; padding: 0; }
.ep-mini-cart li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
	font-size: .9rem;
}
.ep-mini-cart__qty { color: var(--brand); font-weight: 700; }

.ep-trustbox {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}
.ep-trust {
	display: flex; align-items: center; gap: 6px;
	font-size: .8rem; color: var(--text-mute);
}

.ep-alert {
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(184,41,255,.10);
	border: 1px solid rgba(184,41,255,.3);
	color: var(--brand);
	margin-bottom: 18px;
}
.ep-alert--warn { background: rgba(255,176,0,.10); border-color: rgba(255,176,0,.3); color: var(--warn); }

/* --- Thank you / order detail --------------------------------------------- */
.ep-thank {
	max-width: 900px; margin: 0 auto;
}
.ep-thank__head {
	text-align: center;
	padding: 40px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: 24px;
}
.ep-thank__check {
	width: 84px; height: 84px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--success);
	color: white;
	display: grid; place-items: center;
	font-size: 2.6rem;
	box-shadow: 0 0 0 8px rgba(0,214,143,.18);
	animation: bounceIn .6s var(--ease-bounce);
}
.ep-thank__check--pending { background: var(--warn); box-shadow: 0 0 0 8px rgba(255,176,0,.18); }
@keyframes bounceIn {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
.ep-codes {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 26px;
	margin-bottom: 24px;
}
.ep-code-block { margin-bottom: 18px; }
.ep-code-block h4 { margin-bottom: 10px; color: var(--brand); }
.ep-code {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	background: var(--bg-0);
	border: 1px dashed var(--brand);
	border-radius: 10px;
	margin-bottom: 8px;
	font-family: 'JetBrains Mono', monospace;
}
.ep-code code {
	flex: 1; word-break: break-all;
	color: var(--success);
	font-size: 1.05rem; font-weight: 600;
	letter-spacing: .04em;
}
.ep-copy {
	background: var(--brand); color: white;
	padding: 8px 14px; border-radius: 8px;
	font-size: .82rem; font-weight: 700;
	transition: all .2s;
}
.ep-copy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,61,113,.4); }
.ep-copy.is-copied { background: var(--success); }

.ep-codes__note { font-size: .9rem; color: var(--text-dim); }

.ep-order-summary {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 26px;
	margin-bottom: 24px;
}
.ep-order-summary table { width: 100%; border-collapse: collapse; }
.ep-order-summary th,
.ep-order-summary td {
	padding: 10px 12px; text-align: left;
	border-bottom: 1px solid var(--border);
}
.ep-order-summary th { color: var(--text-dim); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.ep-order-summary tfoot th { color: var(--text); font-size: 1.05rem; }

.ep-thank__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* --- Account page --------------------------------------------------------- */
.ep-auth-wrap {
	max-width: 480px;
	margin: 30px auto 60px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.ep-auth-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--border);
}
.ep-auth-tabs a {
	padding: 16px 12px;
	text-align: center;
	color: var(--text-mute);
	font-weight: 600;
	font-size: .9rem;
	background: var(--bg-1);
	border-bottom: 2px solid transparent;
	transition: all .2s var(--ease);
}
.ep-auth-tabs a:hover { color: var(--text); }
.ep-auth-tabs a.is-active {
	background: var(--surface);
	color: var(--brand);
	border-bottom-color: var(--brand);
}
.ep-auth-form {
	padding: 30px;
	display: flex; flex-direction: column; gap: 14px;
}
.ep-auth-form h2 { margin: 0 0 4px; }
.ep-auth-form__lede { color: var(--text-mute); margin: 0 0 8px; font-size: .92rem; }
.ep-auth-form label {
	display: flex; flex-direction: column; gap: 6px;
	font-size: .85rem; color: var(--text-mute); font-weight: 600;
}
.ep-auth-form label small { color: var(--text-dim); font-weight: 400; font-size: .78rem; }
.ep-auth-form input[type=text],
.ep-auth-form input[type=email],
.ep-auth-form input[type=password] {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px 14px;
	border-radius: 10px;
	width: 100%;
	font: inherit;
	outline: none;
	transition: all .2s;
}
.ep-auth-form input:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(79,112,232,.15);
}
.ep-auth-foot {
	text-align: center;
	margin-top: 8px;
	color: var(--text-dim);
	font-size: .85rem;
	display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.ep-auth-foot a { color: var(--brand); }

.ep-account {
	display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start;
}
@media (max-width: 920px) { .ep-account { grid-template-columns: 1fr; } }

.ep-account__side {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px;
	position: sticky; top: 100px;
}
.ep-account__profile {
	text-align: center;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ep-account__avatar {
	width: 70px; height: 70px;
	border-radius: 50%;
	background: var(--brand);
	display: grid; place-items: center;
	color: white; font-size: 1.8rem; font-weight: 800;
	margin-bottom: 8px;
	box-shadow: 0 12px 30px rgba(255,61,113,.4);
}
.ep-account__profile small { color: var(--text-dim); font-size: .82rem; }
.ep-account__nav { display: flex; flex-direction: column; gap: 4px; }
.ep-account__nav a {
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--text-mute);
	font-weight: 500;
}
.ep-account__nav a:hover { background: rgba(255,61,113,.10); color: var(--text); }
.ep-account__nav a.is-active { background: rgba(255,61,113,.15); color: white; }

.ep-account__main { display: flex; flex-direction: column; gap: 30px; }
.ep-account__main section {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 26px;
}

.ep-orders { display: flex; flex-direction: column; gap: 10px; }
.ep-order {
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .2s;
}
.ep-order[open] { border-color: var(--border-hi); }
.ep-order summary {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 14px; align-items: center;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	font-size: .92rem;
}
.ep-order summary::-webkit-details-marker { display: none; }
.ep-order__num { font-weight: 700; color: var(--brand); }
.ep-order__date { color: var(--text-dim); font-size: .85rem; }
.ep-order__total { font-weight: 800; }

.ep-status {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 99px;
}
.ep-status--paid,
.ep-status--completed { background: rgba(0,214,143,.15); color: var(--success); }
.ep-status--pending   { background: rgba(255,176,0,.15); color: var(--warn); }
.ep-status--failed    { background: rgba(255,61,87,.15); color: var(--danger); }

.ep-order__body {
	padding: 0 18px 18px;
	border-top: 1px solid var(--border);
}
.ep-order__body table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ep-order__body th, .ep-order__body td {
	padding: 8px; border-bottom: 1px dashed var(--border);
	text-align: left; font-size: .9rem;
}

.ep-profile-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 14px; margin-bottom: 18px;
}
.ep-profile-grid label { color: var(--text-dim); font-size: .82rem; }
.ep-profile-grid strong { display: block; margin-top: 4px; font-weight: 600; }

.ep-profile-form { display: flex; flex-direction: column; gap: 14px; }
.ep-profile-form h3 { margin: 0 0 6px; }
.ep-profile-form input[readonly] {
	background: var(--bg-1) !important;
	color: var(--text-dim) !important;
	cursor: not-allowed;
}

/* --- Footer ---------------------------------------------------------------- */
.ep-footer {
	margin-top: 60px;
	background: var(--bg-1);
	border-top: 1px solid var(--border);
	padding: 50px 0 30px;
	position: relative; z-index: 1;
}
.ep-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 36px;
	margin-bottom: 30px;
}
@media (max-width: 800px) { .ep-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ep-footer__grid { grid-template-columns: 1fr; } }

.ep-footer__brand p { font-size: .9rem; max-width: 320px; }
.ep-pay-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ep-pay-icons span {
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: .68rem; font-weight: 700;
	letter-spacing: .04em;
	padding: 6px 10px;
	border-radius: 6px;
	color: var(--text-mute);
}

.ep-socials {
	display: flex; gap: 8px; flex-wrap: wrap;
	margin-top: 16px;
}
.ep-socials a {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	font-size: 16px;
	transition: all .2s var(--ease);
	text-decoration: none;
}
.ep-socials a:hover {
	border-color: var(--brand);
	background: var(--brand);
	color: #fff;
	transform: translateY(-2px);
}
.ep-footer h4 {
	font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
	color: var(--text-dim); margin-bottom: 14px;
}
.ep-footer ul { list-style: none; padding: 0; margin: 0; }
.ep-footer li { margin-bottom: 8px; }
.ep-footer a { color: var(--text-mute); font-size: .92rem; }
.ep-footer a:hover { color: var(--text); }
.ep-footer__bottom {
	border-top: 1px solid var(--border);
	padding-top: 20px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	color: var(--text-dim);
	font-size: .82rem;
}

/* Small post grid */
.ep-postcard {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.ep-postcard__media img { aspect-ratio: 16/9; object-fit: cover; }
.ep-postcard__body { padding: 16px; }

/* Toast notifier */
.ep-toast {
	position: fixed;
	bottom: 24px; right: 24px;
	background: var(--bg-2);
	border: 1px solid var(--border-hi);
	color: var(--text);
	padding: 14px 18px;
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	z-index: 999;
	font-size: .92rem;
	display: flex; align-items: center; gap: 10px;
	transform: translateY(80px);
	opacity: 0;
	transition: all .35s var(--ease-bounce);
}
.ep-toast.is-show { transform: translateY(0); opacity: 1; }
.ep-toast--success { border-color: var(--success); }
.ep-toast--error   { border-color: var(--danger); }
.ep-toast__icon {
	width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--brand);
	color: white; font-weight: 800;
}

/* --- Stars ----------------------------------------------------------------- */
.ep-stars {
	--star-size: 14px;
	position: relative;
	display: inline-block;
	font-size: var(--star-size);
	line-height: 1;
	letter-spacing: 1px;
}
.ep-stars__bg,
.ep-stars__fill {
	display: inline-block;
}
.ep-stars__bg   { color: rgba(255,255,255,.15); }
.ep-stars__fill {
	position: absolute; inset: 0;
	color: var(--accent);
	overflow: hidden;
	white-space: nowrap;
}

.ep-card__rating {
	display: flex; align-items: center; gap: 6px;
	font-size: .82rem;
	color: var(--text-mute);
}

.ep-product__rating {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 18px;
	color: var(--text-mute);
	font-weight: 500;
	text-decoration: none;
}
.ep-product__rating:hover { color: var(--brand); }

/* --- Reviews --------------------------------------------------------------- */
.ep-reviews {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 36px;
	align-items: start;
}
@media (max-width: 820px) { .ep-reviews { grid-template-columns: 1fr; } }

.ep-reviews__summary {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	position: sticky; top: 100px;
}
.ep-reviews__big {
	text-align: center;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 18px;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ep-reviews__big strong {
	font-size: 2.6rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
}
.ep-reviews__big span { color: var(--text-dim); font-size: .85rem; }
.ep-reviews__big--empty strong { font-size: 1rem; color: var(--text); }

.ep-reviews__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ep-reviews__bars li {
	display: grid;
	grid-template-columns: 30px 1fr 30px;
	gap: 10px; align-items: center;
	font-size: .82rem; color: var(--text-mute);
}
.ep-bar {
	display: block; height: 6px;
	background: var(--bg-2);
	border-radius: 99px; overflow: hidden;
}
.ep-bar > span { display: block; height: 100%; background: var(--accent); }
.ep-bar-num { text-align: right; color: var(--text-dim); font-size: .78rem; }

.ep-reviews__main { display: flex; flex-direction: column; gap: 16px; }

.ep-review-form {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	display: flex; flex-direction: column; gap: 12px;
}
.ep-review-form h3 { margin: 0; }
.ep-review-form__lede { color: var(--text-mute); margin: 0; font-size: .92rem; }
.ep-review-form textarea {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px 14px;
	border-radius: 10px;
	font: inherit;
	outline: none;
	resize: vertical;
	min-height: 100px;
}
.ep-review-form textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(79,112,232,.15);
}

.ep-rating-picker {
	display: flex; align-items: center; gap: 4px;
	flex-direction: row-reverse;
	justify-content: flex-end;
	padding: 6px 0;
}
.ep-rating-picker__star {
	font-size: 28px; line-height: 1;
	color: rgba(255,255,255,.18);
	transition: color .15s var(--ease), transform .15s;
	padding: 2px;
	cursor: pointer;
}
.ep-rating-picker__star:hover,
.ep-rating-picker__star:hover ~ .ep-rating-picker__star,
.ep-rating-picker__star.is-active,
.ep-rating-picker__star.is-active ~ .ep-rating-picker__star {
	color: var(--accent);
}
.ep-rating-picker__star:hover { transform: scale(1.15); }
.ep-rating-picker__hint {
	color: var(--text-dim);
	font-size: .82rem;
	margin-left: 14px;
	order: -1;
}

.ep-review-cta {
	background: var(--surface);
	border: 1px dashed var(--border-hi);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
}
.ep-review-cta strong { display: block; margin-bottom: 6px; font-size: 1.05rem; }
.ep-review-cta p      { color: var(--text-mute); font-size: .92rem; margin: 0 0 10px; }

.ep-reviews__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 14px;
}
.ep-review {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
}
.ep-review__avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--brand);
	color: white;
	display: grid; place-items: center;
	font-weight: 800;
	font-size: 1.2rem;
}
.ep-review__head {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-bottom: 6px;
}
.ep-review__head strong { font-size: .95rem; }
.ep-review__badge {
	background: rgba(46,204,113,.15);
	color: var(--success);
	font-size: .7rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 99px;
	border: 1px solid rgba(46,204,113,.3);
}
.ep-review__date { color: var(--text-dim); font-size: .8rem; margin-left: auto; }
.ep-review__body p {
	margin: 8px 0 0;
	color: var(--text);
	font-size: .92rem;
	line-height: 1.6;
}

.ep-review-pager {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
}
.ep-review-pager__info {
	color: var(--text-dim);
	font-size: .85rem;
}
.ep-review-pager__nav {
	display: flex; gap: 6px; flex-wrap: wrap;
}
.ep-pgbtn {
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 8px;
	font-size: .88rem;
	font-weight: 600;
	transition: all .2s var(--ease);
	text-decoration: none;
}
.ep-pgbtn:hover {
	background: var(--surface-2);
	border-color: var(--brand);
	color: var(--text);
}
.ep-pgbtn.is-active {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	cursor: default;
}
.ep-pgbtn--gap {
	border: 0;
	background: transparent;
	color: var(--text-dim);
	cursor: default;
}
@media (max-width: 540px) {
	.ep-review-pager { justify-content: center; }
	.ep-review-pager__info { width: 100%; text-align: center; }
}

/* --- Mobile fixes — prevent overlapping/nesting issues -------------------- */
@media (max-width: 768px) {
	.ep-section            { padding: 50px 0; }
	.ep-section__head      { margin-bottom: 22px; }
	.ep-hero               { padding: 50px 0 60px; }

	/* Sticky elements break layout on mobile — drop them */
	.ep-shop-aside,
	.ep-cart__summary,
	.ep-checkout__summary,
	.ep-account__side,
	.ep-reviews__summary {
		position: static !important;
		top: auto !important;
	}

	/* Container padding is enough on mobile */
	.ep-container { padding: 0 16px; }

	/* Hero card stack — reduce overlap on small screens */
	.ep-hero__art       { min-height: 280px; }
	.ep-card-stack,
	.ep-cardvis         { width: 260px; height: 165px; }
	.ep-cardvis         { padding: 18px; }
	.ep-cardvis__amount { font-size: 1.1rem; }
	.ep-cardvis__num    { font-size: .75rem; }

	/* Payment method rows can overflow the icon+text+check at narrow widths */
	.ep-pay-method {
		grid-template-columns: auto 40px 1fr auto;
		padding: 14px 14px;
		gap: 10px;
	}
	.ep-pay-method__icon  { width: 40px; height: 40px; font-size: 1.2rem; }
	.ep-pay-method__label { min-width: 0; }
	.ep-pay-method__label small { display: block; font-size: .75rem; line-height: 1.35; }
	.ep-pay-method__check { width: 22px; height: 22px; }

	/* Card blocks tighter padding */
	.ep-card-block { padding: 18px; }
	.ep-card-block header span { width: 28px; height: 28px; font-size: .82rem; }

	/* Order summary table on mobile */
	.ep-order-summary    { padding: 18px; }
	.ep-order-summary table th,
	.ep-order-summary table td { padding: 8px 6px; font-size: .82rem; }

	/* Account orders summary row — collapses better */
	.ep-order summary {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"num    status"
			"date   total";
		gap: 6px 10px;
	}
	.ep-order__num    { grid-area: num; }
	.ep-order__date   { grid-area: date; }
	.ep-status        { grid-area: status; justify-self: end; }
	.ep-order__total  { grid-area: total; justify-self: end; font-size: 1rem; }
	.ep-order__body   { padding: 0 14px 14px; overflow-x: auto; }
	.ep-order__body table { min-width: 360px; }

	/* Codes with copy button — stack on tiny screens */
	.ep-code {
		flex-wrap: wrap;
		padding: 10px 12px;
	}
	.ep-code code   { flex: 1 1 100%; word-break: break-all; font-size: .92rem; }
	.ep-code .ep-copy { width: auto; }

	/* Hero stats grid — keep 2 cols even on phone */
	.ep-hero__stats   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ep-hero__stats li { padding: 12px; }

	/* CTA inner padding */
	.ep-cta__inner   { padding: 26px; }
	.ep-cta__form    { flex-direction: column; padding: 8px; border-radius: 14px; }
	.ep-cta__form input  { padding: 12px 16px; }
	.ep-cta__form button { padding: 12px; border-radius: 8px; width: 100%; }

	/* Auth tabs — labels can overflow */
	.ep-auth-tabs a { padding: 12px 8px; font-size: .82rem; }

	/* Profile / account avatar block centering */
	.ep-account__profile { padding-bottom: 14px; margin-bottom: 12px; }

	/* Reviews — pager wraps cleanly */
	.ep-review {
		grid-template-columns: 40px 1fr;
		padding: 14px;
		gap: 12px;
	}
	.ep-review__avatar { width: 40px; height: 40px; font-size: 1rem; }
	.ep-review__head   { gap: 8px; }
	.ep-review__date   { margin-left: 0; flex-basis: 100%; order: 3; font-size: .76rem; }

	/* Single product info block */
	.ep-product__now { font-size: 1.6rem; }

	/* Product form: qty alone on top row, two buttons side-by-side below */
	.ep-product__form {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"qty qty"
			"add buy";
		gap: 10px;
	}
	.ep-product__form .ep-qty           { grid-area: qty; justify-self: start; }
	.ep-product__form [data-add-to-cart]{ grid-area: add; }
	.ep-product__form [data-buy-now]    { grid-area: buy; }
	.ep-product__form .ep-btn--xl       { padding: 12px 14px; font-size: .92rem; }

	/* Footer stacks tighter */
	.ep-footer__bottom { flex-direction: column; align-items: center; text-align: center; }

	/* Toolbar */
	.ep-shop-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
	.ep-sort         { display: flex; align-items: center; gap: 6px; }
	.ep-sort select  { flex: 1; }
}

/* Force 2-column product/category grids on mobile (≤ 640px) */
@media (max-width: 640px) {
	.ep-grid--products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}
	.ep-card__body  { padding: 12px; gap: 6px; }
	.ep-card__cat   { font-size: .62rem; letter-spacing: .08em; }
	.ep-card__title { font-size: .9rem; line-height: 1.25; }
	.ep-card__price { gap: 6px; flex-wrap: wrap; }
	.ep-card__now   { font-size: 1rem; }
	.ep-card__old   { font-size: .78rem; }
	.ep-card__stock { font-size: .68rem; }
	.ep-card__badge,
	.ep-card__discount {
		font-size: .58rem;
		padding: 3px 7px;
		top: 8px;
	}
	.ep-card__badge    { left: 8px; }
	.ep-card__discount { right: 8px; }
	.ep-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding-top: 8px;
	}
	.ep-card__rating { font-size: .72rem; }
	.ep-btn--add {
		padding: 7px 8px;
		font-size: .76rem;
		width: 100%;
		justify-content: center;
	}
	.ep-btn--add svg { width: 14px; height: 14px; }

	/* Categories grid — also 2 cols */
	.ep-cats {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.ep-cats__item    { padding: 16px; }
	.ep-cats__emoji   { font-size: 1.6rem; margin-bottom: 4px; }
	.ep-cats__name    { font-size: .95rem; }
	.ep-cats__meta    { font-size: .72rem; }
}

/* Very small screens (≤ 380px) — final tightening */
@media (max-width: 380px) {
	.ep-hero__title { font-size: 2rem; }
	.ep-cardvis,
	.ep-card-stack { width: 220px; height: 140px; }
	.ep-cart-row {
		grid-template-columns: 56px 1fr auto;
	}
	.ep-cart-row__media { width: 56px; height: 56px; }
	.ep-pay-method {
		grid-template-columns: 1fr auto;
		grid-template-areas: "icon check" "label label";
		row-gap: 8px;
	}
	.ep-pay-method input[type=radio] { display: none; }
	.ep-pay-method__icon  { grid-area: icon; }
	.ep-pay-method__check { grid-area: check; }
	.ep-pay-method__label { grid-area: label; }
}

/* Print/edge-case cleanup */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}