/* ============================================================================
   ePower Shop — Apple-inspired design system
   Single source of truth for all customer storefront pages.
   Palette, type scale, spacing and components follow Apple's public design
   conventions (system San Francisco font, #1d1d1f ink, #f5f5f7 surfaces,
   tight negative letter-spacing on display type, 980px content width,
   980px-radius pill buttons). Original CSS — no Apple assets are used.
   ========================================================================== */

.shopx{
	--ink:#1d1d1f;          /* primary text */
	--ink-2:#6e6e73;        /* secondary text */
	--ink-3:#86868b;        /* tertiary / hints */
	--hair:#d2d2d7;         /* hairline borders */
	--surface:#fff;         /* base page */
	--surface-2:#f5f5f7;    /* section / card surface */
	--surface-3:#fbfbfd;    /* hero wash */
	--blue:var(--pri,#0071e3);
	--blue-600:var(--pri-600,#0077ed);
	--green:#1d9d63;
	--red:#e0245e;
	--radius:18px;
	--radius-sm:12px;
	font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	margin:-12px -4px 0;
	padding-bottom:80px;
}
.shopx *{box-sizing:border-box}

/* ── Scroll reveal ──────────────────────────────────────── */
.shopx .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.shopx .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.shopx .reveal{opacity:1;transform:none;transition:none}}
.shopx-nojs .shopx .reveal{opacity:1;transform:none}

/* ── Layout primitives ──────────────────────────────────── */
.shopx .wrap{max-width:980px;margin:0 auto;padding:0 16px}
.shopx .wrap-wide{max-width:1180px;margin:0 auto;padding:0 16px}
.shopx .section{padding:48px 0 0}
.shopx .center{text-align:center}

/* ── Type scale ─────────────────────────────────────────── */
.shopx .eyebrow{font-size:21px;line-height:1.19;font-weight:600;color:var(--blue);letter-spacing:.011em;margin:0 0 6px}
.shopx h1.x{font-size:clamp(34px,5.5vw,56px);line-height:1.07;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
.shopx h2.x{font-size:clamp(28px,3.6vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.shopx h3.x{font-size:clamp(22px,2.6vw,32px);line-height:1.125;font-weight:600;letter-spacing:-.012em;margin:0 0 6px}
.shopx .lead{font-size:clamp(19px,2vw,21px);line-height:1.19;font-weight:400;color:var(--ink-2);margin:0 0 24px}
.shopx .muted{color:var(--ink-2)}
.shopx .tiny{font-size:12px;color:var(--ink-3)}

/* ── Buttons & links ────────────────────────────────────── */
.shopx .btn{display:inline-block;border:none;font:inherit;font-size:17px;line-height:1.18;font-weight:400;
	padding:12px 28px;border-radius:980px;cursor:pointer;text-decoration:none;text-align:center;transition:background .25s ease,opacity .25s ease}
.shopx .btn-primary{background:var(--blue);color:#fff}
.shopx .btn-primary:hover{background:var(--blue-600);color:#fff}
.shopx .btn-primary:disabled{background:#aeaeb2;cursor:not-allowed}
.shopx .btn-secondary{background:var(--surface-2);color:var(--ink)}
.shopx .btn-secondary:hover{background:#e8e8ed;color:var(--ink)}
.shopx .btn-sm{font-size:15px;padding:8px 22px}
.shopx .btn-block{display:block;width:100%}
.shopx .link{font-size:17px;font-weight:400;color:var(--blue);text-decoration:none}
.shopx .link:hover{text-decoration:underline}
.shopx .link .chev{font-size:13px}

/* ── Cards & surfaces ───────────────────────────────────── */
.shopx .panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:26px}
.shopx .soft{background:var(--surface-2);border-radius:var(--radius);padding:26px}

/* ── Pills / chips (filters, status) ────────────────────── */
.shopx .pill{font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 16px;border-radius:980px;background:var(--surface-2);transition:all .2s;border:none;cursor:pointer}
.shopx .pill:hover{color:var(--ink)}
.shopx .pill.active{background:var(--ink);color:#fff}
.shopx .badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;padding:4px 12px;border-radius:980px}
.shopx .badge.b-green{background:#e3f7ec;color:#1d6b42}
.shopx .badge.b-blue{background:#e6f1fb;color:#0c447c}
.shopx .badge.b-amber{background:#fdf0d9;color:#7a5206}
.shopx .badge.b-gray{background:var(--surface-2);color:var(--ink-2)}
.shopx .badge.b-red{background:#fdecef;color:#a32340}

/* ── Forms ──────────────────────────────────────────────── */
.shopx .field{margin-bottom:16px}
.shopx .field label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.shopx .input{width:100%;font:inherit;font-size:15px;padding:12px 16px;border:1px solid var(--hair);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.shopx .input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.15)}
textarea.shopx-input,.shopx textarea.input{resize:vertical;min-height:84px}

/* ── Summary rows (cart/checkout/order totals) ──────────── */
.shopx .srow{display:flex;justify-content:space-between;padding:8px 0;font-size:15px;color:var(--ink-2)}
.shopx .srow.discount{color:var(--green)}
.shopx .srow.refund{color:var(--red)}
.shopx .stotal{display:flex;justify-content:space-between;padding:14px 0;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink);border-top:1px solid var(--hair);margin-top:8px}

/* ── Empty states ───────────────────────────────────────── */
.shopx .empty{text-align:center;padding:80px 20px;color:var(--ink-2)}
.shopx .empty .ic{font-size:46px;opacity:.3;margin-bottom:8px}

/* ── Pagination (Laravel default links, restyled) ───────── */
.shopx .pager{display:flex;justify-content:center;padding:34px 0 6px}
.shopx .pager nav>div:first-child{display:none} /* hide "showing x of y" text on mobile-ish */
.shopx .pager svg{width:18px;height:18px}
.shopx .pager .pagination{display:inline-flex;gap:6px;list-style:none;padding:0;margin:0}
.shopx .pager .pagination li{list-style:none}
.shopx .pager .pagination a,.shopx .pager .pagination span{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:980px;background:var(--surface-2);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.shopx .pager .pagination .active span{background:var(--ink);color:#fff}
.shopx .pager .pagination .disabled span{opacity:.4}

/* ── Sticky buy bar (product page) ──────────────────────── */
.shopx .buybar{position:sticky;bottom:0;z-index:5;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);
	border-top:1px solid var(--hair);margin:32px -4px 0;padding:14px 16px}
.shopx .buybar-inner{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}