/**
 * eSalesPage Blocks — shared layer: block root, BD colour skins, box style,
 * hover + entrance animations, helper classes. Mobile-first. Every widget's
 * own stylesheet builds on these variables.
 */

.espt-block {
	--bd-primary: #16a34a;
	--bd-primary-dark: #15803d;
	--bd-deep: #052e16;
	--bd-danger: #dc2626;
	--bd-accent: #f59e0b;
	--bd-accent-ink: #451a03;
	--bd-soft: #f0fdf4;
	--bd-soft-line: #bbf7d0;
	--bd-ink: #0f172a;
	--bd-muted: #64748b;
	--bd-body: #334155;
	--bd-line: #e2e8f0;
	--bd-box-bg: #ffffff;
	--bd-box-line: var(--bd-line);
	--bd-radius: 16px;
	--bd-pad: 16px;
	--bd-font: inherit;
	box-sizing: border-box;
	color: var(--bd-body);
	font-family: var(--bd-font);
	line-height: 1.5;
	margin: 0 auto 24px;
	max-width: 100%;
	position: relative;
}

/* ---------------------------------------------------------------------------
 * The shared outer box — every widget has it (Spacing & background panel).
 * Each rule is gated on a class the renderer only adds when the shop actually
 * set that value, so a widget nobody has styled keeps its own spacing exactly.
 * ------------------------------------------------------------------------ */

.espt-block.has-espt-box-pad { padding: var(--espt-box-p); }
.espt-block.has-espt-box-margin { margin: var(--espt-box-m) auto; }
.espt-block.has-espt-box-bg { background-color: var(--espt-box-bg); }

/*
 * "Stretch this widget" — for a hero slider or a banner bar.
 *
 * Two different things, which is why it is a choice and not a switch:
 *
 *   container : out to the edge of the content area, cancelling the gap the
 *               page keeps down each side. On a boxed site that is the edge of
 *               the white card, which is what a hero usually wants.
 *   browser   : ignore the content area entirely and span the whole screen.
 *
 * The container pull uses the gutter variable rather than a fixed number, so it
 * stays right when the shop changes that setting and at every breakpoint.
 * max-width has to go in both cases — .espt-block is capped at 100% of its
 * parent, which would clamp the width straight back.
 *
 * Both sit AFTER the margin rule on purpose: that one is the `margin`
 * shorthand, so a widget with both set would otherwise lose its side pull. The
 * shorthand still supplies the vertical margin; only left and right are taken.
 */
.espt-block.has-espt-box-full-container {
	margin-left: calc(var(--espt-container-pad, 16px) * -1);
	margin-right: calc(var(--espt-container-pad, 16px) * -1);
	max-width: none;
}

/*
 * The whole screen. Same technique the Slider, Hero and Marquee already use for
 * their own "Full browser width", so a page mixing the two lines up exactly:
 * pull back to the viewport's centre line and take the full viewport width.
 *
 * Known and accepted: 100vw includes the vertical scrollbar, so on a desktop
 * with a classic (non-overlay) scrollbar this is a few pixels wider than the
 * page. Every full-bleed widget in the theme behaves this way; making one of
 * them differ would be worse than the few pixels.
 */
.espt-block.has-espt-box-full-browser {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}
/* No overflow:hidden — the background and border round on their own, and
   clipping would cut off the corner seal badges that deliberately overhang. */
.espt-block.has-espt-box-radius { border-radius: var(--espt-box-r); }

.espt-block.has-espt-box-border {
	border: var(--espt-box-bw) solid var(--espt-box-bc, currentColor);
}

.espt-block.has-espt-box-img {
	background-image: var(--espt-box-img);
	background-position: center;
	background-repeat: var(--espt-box-imgrep, no-repeat);
	background-size: var(--espt-box-imgsz, cover);
}

/* The overlay sits over the picture and under everything the widget draws, so
   text stays readable on a busy photograph. .espt-block is already
   position:relative, and the widget's own children are painted after it. */
.espt-block.has-espt-box-overlay::before {
	background: var(--espt-box-ov);
	border-radius: inherit; /* else the tint squares off a rounded box */
	content: "";
	inset: 0;
	opacity: calc(var(--espt-box-ovo, 50%) / 100%);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.espt-block.has-espt-box-overlay > * {
	position: relative;
	z-index: 1;
}

.espt-block *,
.espt-block *::before,
.espt-block *::after {
	box-sizing: border-box;
}

.espt-block img,
.espt-block svg {
	max-width: 100%;
}

.espt-block img {
	height: auto;
}

.espt-block.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.espt-block.alignwide {
	max-width: min(100%, 1200px);
}

.espt-block-error {
	background: #fef2f2;
	border: 1px dashed #fca5a5;
	border-radius: 10px;
	color: #991b1b;
	font-size: 13px;
	padding: 12px 16px;
}

/* --- colour skins --- */
.bd-skin-royal { --bd-primary: #1d4ed8; --bd-primary-dark: #1e40af; --bd-deep: #172554; --bd-danger: #dc2626; --bd-accent: #f59e0b; --bd-accent-ink: #451a03; --bd-soft: #eff6ff; --bd-soft-line: #bfdbfe; }
.bd-skin-crimson { --bd-primary: #dc2626; --bd-primary-dark: #991b1b; --bd-deep: #450a0a; --bd-danger: #b91c1c; --bd-accent: #fbbf24; --bd-accent-ink: #451a03; --bd-soft: #fef2f2; --bd-soft-line: #fecaca; }
.bd-skin-noir { --bd-primary: #111827; --bd-primary-dark: #030712; --bd-deep: #111827; --bd-danger: #dc2626; --bd-accent: #d1a954; --bd-accent-ink: #2a2005; --bd-soft: #f3f4f6; --bd-soft-line: #d1d5db; --bd-ink: #111827; --bd-muted: #6b7280; --bd-body: #374151; --bd-line: #e5e7eb; }
.bd-skin-sunset { --bd-primary: #ea580c; --bd-primary-dark: #c2410c; --bd-deep: #431407; --bd-danger: #dc2626; --bd-accent: #facc15; --bd-accent-ink: #422006; --bd-soft: #fff7ed; --bd-soft-line: #fed7aa; }
.bd-skin-ocean { --bd-primary: #0d9488; --bd-primary-dark: #0f766e; --bd-deep: #134e4a; --bd-danger: #e11d48; --bd-accent: #f59e0b; --bd-accent-ink: #451a03; --bd-soft: #f0fdfa; --bd-soft-line: #99f6e4; }
.bd-skin-violet { --bd-primary: #7c3aed; --bd-primary-dark: #6d28d9; --bd-deep: #2e1065; --bd-danger: #e11d48; --bd-accent: #f59e0b; --bd-accent-ink: #451a03; --bd-soft: #f5f3ff; --bd-soft-line: #ddd6fe; }
.bd-skin-rose { --bd-primary: #e11d48; --bd-primary-dark: #be123c; --bd-deep: #4c0519; --bd-danger: #c6402a; --bd-accent: #fbbf24; --bd-accent-ink: #451a03; --bd-soft: #fff1f2; --bd-soft-line: #fecdd3; }

/* --- the box: widgets put .espt-bd-box on their outer card --- */
.espt-bd-box {
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-box-line);
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bd-shadow-soft .espt-bd-box { box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.18); }
.bd-shadow-strong .espt-bd-box { box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.35); }

.bd-hover-lift .espt-bd-box:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.3); }
.bd-hover-glow .espt-bd-box:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 30%, transparent), 0 14px 30px -12px rgba(15, 23, 42, 0.25); }
.bd-hover-scale .espt-bd-box:hover { transform: scale(1.015); }

/* --- entrance animation (assets/js/blocks/_shared.js adds .is-in when visible) --- */
[data-bd-anim] {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-bd-anim="up"] { transform: translateY(28px); }
[data-bd-anim="down"] { transform: translateY(-28px); }
[data-bd-anim="left"] { transform: translateX(-32px); }
[data-bd-anim="right"] { transform: translateX(32px); }
[data-bd-anim="zoom"] { transform: scale(0.92); }

[data-bd-anim].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-bd-anim] { opacity: 1; transform: none; transition: none; }
	.espt-bd-box { transition: none; }
}

/* --- helpers --- */
.espt-ic {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.espt-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block .espt-btn {
	align-items: center;
	background: var(--espt-btn-bg, var(--bd-primary));
	border: 0;
	border-radius: var(--espt-btn-radius, 12px);
	color: var(--espt-btn-text, #fff);
	cursor: pointer;
	display: inline-flex;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	padding: 14px 24px;
	text-decoration: none;
	transition: filter 0.15s, transform 0.15s;
}

.espt-block .espt-btn:hover {
	color: #fff;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.espt-block .espt-btn-ghost {
	background: transparent;
	border: 2px solid var(--bd-primary);
	color: var(--bd-primary);
}

.espt-block .espt-btn-ghost:hover {
	background: var(--bd-soft);
	color: var(--bd-primary-dark);
}

.espt-block .espt-btn-accent {
	background: var(--bd-accent);
	color: var(--bd-accent-ink);
}

.espt-block .espt-title {
	color: var(--bd-ink);
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 8px;
}

.espt-block .espt-sub {
	color: var(--bd-muted);
	font-size: 15px;
	margin: 0 0 18px;
}

.espt-block.is-text-align-center .espt-title,
.espt-block.is-text-align-center .espt-sub { text-align: center; }
.espt-block.is-text-align-right .espt-title,
.espt-block.is-text-align-right .espt-sub { text-align: right; }

.espt-sr {
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}