.shpe-universal-widget {
	--shpe-title-color: #111827;
	--shpe-text-color: #475569;
	--shpe-accent-color: #6d28d9;
	--shpe-accent-strong: #5b21b6;
	--shpe-card-background: #ffffff;
	--shpe-surface: #ffffff;
	--shpe-border: #e2e8f0;
	--shpe-radius: 16px;
	--shpe-columns: 3;
	background: var(--shpe-surface);
	border: 1px solid var(--shpe-border);
	border-radius: calc(var(--shpe-radius) + 4px);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
	box-sizing: border-box;
	color: var(--shpe-text-color);
	font-size: 15px;
	line-height: 1.6;
	margin: 1rem 0;
	overflow: hidden;
	padding: clamp(20px, 3vw, 36px);
	position: relative;
}

/* Shared Shop Peru identity for every universal widget. */
.shpe-brand-mark {
	background:var(--shpe-accent-color,#6d28d9);
	border-radius:999px;
	color:#fff;
	display:inline-block;
	font-size:10px;
	font-weight:800;
	letter-spacing:.12em;
	line-height:1;
	margin-bottom:14px;
	padding:6px 9px;
	text-transform:uppercase;
}

.shpe-universal-widget *,
.shpe-universal-widget *::before,
.shpe-universal-widget *::after {
	box-sizing: border-box;
}

.shpe-universal-widget::before {
	background: linear-gradient(90deg, var(--shpe-accent-color), #22c55e);
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.shpe-widget__title {
	color: var(--shpe-title-color);
	font-size: clamp(1.35rem, 2vw, 2rem);
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0 0 12px;
}

.shpe-widget__intro {
	margin: 0 0 22px;
	max-width: 70ch;
}

.shpe-widget__intro > :first-child,
.shpe-payment-method__description > :first-child { margin-top: 0; }
.shpe-widget__intro > :last-child,
.shpe-payment-method__description > :last-child { margin-bottom: 0; }

.shpe-payment-methods {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(var(--shpe-columns), minmax(0, 1fr));
}

.shpe-payment-method {
	background: var(--shpe-card-background);
	border: 1px solid var(--shpe-border);
	border-radius: var(--shpe-radius);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
	min-width: 0;
	padding: 22px;
	position: relative;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.shpe-payment-method::after {
	background: var(--shpe-accent-color);
	border-radius: 999px;
	content: "";
	height: 7px;
	position: absolute;
	right: 18px;
	top: 18px;
	width: 7px;
}

.shpe-payment-method:hover {
	border-color: color-mix(in srgb, var(--shpe-accent-color) 48%, var(--shpe-border));
	box-shadow: 0 16px 30px rgba(15, 23, 42, 0.11);
	transform: translateY(-3px);
}

.shpe-payment-method h4 {
	color: var(--shpe-accent-strong);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 22px 8px 0;
}

.shpe-payment-method__description { color: var(--shpe-text-color); font-size: 0.94em; }

.shpe-payment-method__media {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	margin: 0 0 18px;
}
.shpe-payment-method__logo { height: 42px; max-width: 130px; object-fit: contain; width: auto; }
.shpe-payment-method__qr { background: #fff; border: 1px solid var(--shpe-border); border-radius: 10px; height: 84px; object-fit: contain; padding: 5px; width: 84px; }
.shpe-payment-method__details { border-top: 1px solid var(--shpe-border); display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; }
.shpe-payment-method__details > div { display: grid; gap: 2px; grid-template-columns: minmax(70px, 0.35fr) 1fr; }
.shpe-payment-method__details dt { color: var(--shpe-text-color); font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.shpe-payment-method__details dd { align-items: center; color: var(--shpe-title-color); display: flex; flex-wrap: wrap; font-weight: 650; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.shpe-universal-widget .shpe-copy-button { background: transparent; border-color: var(--shpe-border); color: var(--shpe-accent-strong); font-size: 0.76em; min-height: 28px; padding: 5px 9px; }
.shpe-universal-widget .shpe-copy-button:hover,
.shpe-universal-widget .shpe-copy-button.is-copied { background: color-mix(in srgb, var(--shpe-accent-color) 10%, transparent); border-color: var(--shpe-accent-color); box-shadow: none; color: var(--shpe-accent-strong); transform: none; }

.shpe-layout-list .shpe-payment-methods { grid-template-columns: 1fr; }
.shpe-layout-list .shpe-payment-method { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(140px, 0.35fr) 1fr; }
.shpe-layout-compact .shpe-payment-methods { display: flex; flex-wrap: wrap; }
.shpe-layout-compact .shpe-payment-method { flex: 1 1 180px; padding: 14px 18px; }
.shpe-layout-compact .shpe-payment-method__description { font-size: 0.86em; }

.shpe-preset-soft {
	--shpe-surface: #f8fafc;
	--shpe-card-background: #ffffff;
	--shpe-border: #dbeafe;
	--shpe-accent-color: #2563eb;
	--shpe-accent-strong: #1d4ed8;
}
.shpe-preset-soft::before { background: linear-gradient(90deg, #2563eb, #06b6d4); }
.shpe-preset-outline { box-shadow: none; }
.shpe-preset-outline::before { display: none; }
.shpe-preset-outline .shpe-payment-method { box-shadow: none; }
.shpe-preset-dark {
	--shpe-surface: #0f172a;
	--shpe-card-background: #1e293b;
	--shpe-border: #334155;
	--shpe-title-color: #f8fafc;
	--shpe-text-color: #cbd5e1;
	--shpe-accent-color: #a78bfa;
	--shpe-accent-strong: #c4b5fd;
}

.shpe-shipping-methods,
.shpe-shipping-information__content,
.shpe-payment-instructions__content,
.shpe-thank-you__message {
	background: var(--shpe-card-background);
	border: 1px solid var(--shpe-border);
	border-radius: var(--shpe-radius);
	padding: 22px;
}

.shpe-order-summary__items { list-style: none; margin: 0; padding: 0; }
.shpe-order-summary__items li {
	align-items: center;
	border-bottom: 1px solid var(--shpe-border);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 14px 4px;
}
.shpe-order-summary__items li:last-child { border-bottom: 0; }
.shpe-order-summary__items strong { color: var(--shpe-title-color); }
.shpe-order-summary__total {
	background: color-mix(in srgb, var(--shpe-accent-color) 7%, var(--shpe-card-background));
	border: 1px solid color-mix(in srgb, var(--shpe-accent-color) 24%, var(--shpe-border));
	border-radius: var(--shpe-radius);
	color: var(--shpe-title-color);
	display: flex;
	font-size: 1.08em;
	gap: 1rem;
	justify-content: space-between;
	margin: 18px 0 0;
	padding: 18px 22px;
}

.shpe-universal-widget .button,
.shpe-universal-widget button {
	align-items: center;
	background: var(--shpe-accent-color);
	border: 1px solid transparent;
	border-radius: 10px;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 12px 20px;
	text-decoration: none;
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.shpe-universal-widget .button:hover,
.shpe-universal-widget button:hover { background: var(--shpe-accent-strong); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15); transform: translateY(-1px); }
.shpe-universal-widget .button:focus-visible,
.shpe-universal-widget button:focus-visible { outline: 3px solid color-mix(in srgb, var(--shpe-accent-color) 32%, transparent); outline-offset: 3px; }
.shpe-payment-method:focus-within,.shpe-order-summary__total:focus-within{box-shadow:0 10px 24px rgba(15,23,42,.12);transform:translateY(-2px)}.shpe-payment-method:focus-within{border-color:var(--shpe-accent-color)}

.shpe-widget__empty {
	background: color-mix(in srgb, var(--shpe-accent-color) 6%, transparent);
	border: 1px dashed var(--shpe-border);
	border-radius: var(--shpe-radius);
	margin: 0;
	padding: 18px;
	text-align: center;
}

@media (max-width: 1024px) {
	.shpe-payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.shpe-universal-widget { border-radius: 14px; padding: 20px; }
	.shpe-payment-methods { grid-template-columns: 1fr; }
	.shpe-layout-list .shpe-payment-method { display: block; }
	.shpe-payment-method__details > div { grid-template-columns: 1fr; }
	.shpe-order-summary__items li { align-items: flex-start; flex-direction: column; gap: 4px; }
	.shpe-order-summary__total { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.shpe-payment-method,
	.shpe-universal-widget .button,
	.shpe-universal-widget button { transition: none; }
}