/*
Theme Name: HS Memoria
Theme URI: https://example.com/hs-memoria
Author: Dawid Holewa
Author URI: https://example.com
Description: Block theme for Kamieniarstwo Memoria — premium memorial / stonemasonry brand. Palette of onyx, marble, antique gold, brushed silver and bottle green. Cormorant Garamond serif paired with Open Sans Variable.
Version: 0.1.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hs-memoria
Tags: block-theme, full-site-editing, custom-colors, custom-logo, editor-style, full-width-template, threaded-comments, translation-ready
*/

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Safety net — any block that overshoots its parent (negative margins on
 * full-bleed sections, oversized inline elements, etc.) gets clipped at
 * the viewport edge instead of producing a horizontal scrollbar.
 * `clip` (not `hidden`) is required to keep `position: sticky` working
 * on the header. */
html, body {
	overflow-x: clip;
	max-width: 100%;
}

/* Anchor-scroll offset for the sticky header. Both native browser
 * `:target` jumps and our smooth-scroll JS honor this so a `#section`
 * destination lands below the header bar instead of being hidden by it.
 *
 * `scroll-behavior: smooth` is the native equivalent of our JS scroll —
 * critical for cross-page navigation (e.g. header link `/#kontakt`),
 * where the browser does its own scroll-to-anchor BEFORE our JS wakes
 * up. With this rule, even that native scroll is smooth. The JS still
 * runs for same-page clicks and acts as a fallback for older browsers. */
html {
	scroll-padding-top: 110px;
	scroll-behavior: smooth;
}
@media (max-width: 540px) {
	html { scroll-padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Bullet-proof full-bleed for any block marked `align: "full"`. WP's
 * default rule uses `--wp--style--root--padding-*` to negate body
 * padding via negative margins — but with `useRootPaddingAwareAlignments`
 * the var/padding combination doesn't always line up (especially when
 * the alignfull lands inside a different layout context), leaving a
 * narrow gap on one side or pushing the element past the viewport edge.
 * Anchoring each margin to 50vw guarantees viewport-exact width. */
.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: none !important;
	width: auto !important;
}

/* Kill the theme.json blockGap (16px) between body-level wrappers —
 * the hero slider should butt up against the sticky header without a
 * marble-light sliver between them, and the dark-green footer should
 * meet the last section directly. Sections control their own vertical
 * rhythm via .hs-block padding. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Skip-link (a11y) — hidden until focused. */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--marble-light);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	left: 12px;
	top: 12px;
	padding: 12px 16px;
	width: auto;
	height: auto;
	z-index: 100000;
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Universal focus — gold outline at 2px offset (per design README). */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Eyebrow — uppercase tracked sans, gold rule before the text */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.is-style-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--gold);
}
/* Centered eyebrow gets a mirroring rule on the trailing side so
 * "── SŁOWO OD MEMORIA ──" flanks both sides of the label. Triggered
 * by Gutenberg's `align: "center"` (which writes `.has-text-align-center`
 * onto the paragraph). Left-aligned eyebrows (e.g. Wystawa's
 * "OTWARCIE NOWEGO PUNKTU") keep only the leading rule. */
.is-style-eyebrow.has-text-align-center::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--gold);
}

/* Memorial inscription — serif italic, centered */
.is-style-inscription {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-500);
	text-align: center;
	letter-spacing: 0.01em;
}

.wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

::selection {
	background: var(--wp--custom--color--gold--50);
	color: var(--wp--preset--color--onyx);
}

/* Reserve aspect for images to mitigate CLS (responsive defaults). */
img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   BUTTON STYLE — link (plain text + underline on hover)
   Use via `is-style-link` on a wp:button (e.g. the phone number in the
   header). No background, no border, inherits the surrounding font size.
   ========================================================================== */
.wp-block-button.is-style-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--stone-700);
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}
.wp-block-button.is-style-link .wp-block-button__link:hover,
.wp-block-button.is-style-link .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The built-in `is-style-outline` button uses a transparent background and
 * (in our context) a gold border with onyx text — match the design's
 * `.btn-outline` exactly. Compensate the 1px border by subtracting it
 * from the padding so the outline button's outer box is the same height
 * as the solid one beside it (theme.json's default = 16px 32px). */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 15px 31px;
	background: transparent;
	color: var(--wp--preset--color--onyx);
	border: 1px solid var(--wp--preset--color--gold);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--onyx);
}

/* ==========================================================================
   HEADER — sticky top bar
   Layout: brand (mark + brand-text) — primary nav — actions (phone + CTA).
   Breaks out of root padding via negative inline margins so the marble-tinted
   blurred backdrop spans edge-to-edge.
   ========================================================================== */
.hs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Bullet-proof full-bleed: anchor each margin to the viewport edge so
	 * the element is exactly 100vw wide regardless of whether the parent
	 * has body padding, root-aware padding vars, or alignfull context. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: rgba(250, 248, 244, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
}
.hs-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
}

/* Brand: mark + vertical brand-text divider. */
.hs-header__brand {
	display: flex !important;
	align-items: center;
	gap: 14px;
	flex-wrap: nowrap;
}
.hs-header__mark { margin: 0; }
.hs-header__mark img {
	height: 42px;
	width: auto;
	display: block;
}
.hs-header__mark a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.hs-header__brand-text {
	border-left: 1px solid var(--wp--preset--color--stone-200);
	padding-left: 14px;
	line-height: 1.1;
}
.hs-header__brand-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--onyx);
}
.hs-header__brand-sub {
	margin: 2px 0 0;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone-500);
}
/* Editor-only: Gutenberg wraps each child paragraph in a
 * `.block-editor-block-list__block` div that the theme.json blockGap (16px)
 * targets directly, so the inner <p> margins from above are masked. Frontend
 * doesn't render those wrappers, so this rule is a no-op there. */
.hs-header__brand-text .block-editor-block-list__block + .block-editor-block-list__block {
	margin-block-start: 2px;
}

/* Primary navigation — uppercase tracked links with a gold underline on hover. */
.hs-header__nav {
	gap: 32px;
}
.hs-header__nav .wp-block-navigation-item__content,
.hs-header__nav .wp-block-navigation-link__content {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--onyx);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}
.hs-header__nav .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.hs-header__nav .wp-block-navigation-item__content:focus-visible {
	border-bottom-color: var(--wp--preset--color--gold);
}

/* Actions: phone (text-as-button) + CTA. */
.hs-header__actions {
	gap: 18px;
	flex-wrap: nowrap;
}
.hs-header__buttons { gap: 18px; }

/* The header CTA tightens the outline button's padding to match the design. */
.hs-header__cta .wp-block-button__link {
	padding: 12px 22px;
	font-size: 11px;
}

/* ==========================================================================
   FOOTER — dark green slab, 4-column grid, bottom legal row
   ========================================================================== */
.hs-footer {
	/* Same bullet-proof full-bleed trick as .hs-header. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 72px clamp(20px, 4vw, 32px) 24px;
	background: var(--wp--custom--color--green--900);
	color: var(--wp--preset--color--marble-light);
}
.hs-footer .hs-footer__grid {
	max-width: 1240px;
	margin: 0 auto 56px;
	gap: 48px;
}
.hs-footer .wp-block-column.hs-footer__col {
	gap: 0;
}

/* Brand column: gold wordmark + muted description. */
.hs-footer__logo { margin: 0 0 18px; }
.hs-footer__logo img {
	height: 90px;
	width: auto;
	display: block;
}
.hs-footer__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: #b8b5ad;
	max-width: 320px;
}

/* Column headings — gold uppercase eyebrow. */
.hs-footer__heading {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* Lists: no markers, gold underline on hover. */
.hs-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hs-footer__list li {
	font-size: 14px;
	line-height: 1.9;
}
.hs-footer__list a,
.hs-footer__contact-line a {
	color: var(--wp--preset--color--marble-light);
	text-decoration: none;
	transition: color 180ms ease;
}
.hs-footer__list a:hover,
.hs-footer__list a:focus-visible,
.hs-footer__contact-line a:hover,
.hs-footer__contact-line a:focus-visible {
	color: var(--wp--preset--color--gold);
}

.hs-footer__contact-line {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--marble-light);
}
.hs-footer__legal-notice {
	max-width: 1240px;
	margin: 24px auto 0;
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid rgba(201, 168, 90, 0.2);
	font-size: 10px;
	line-height: 1.55;
	text-align: center;
	color: rgba(250, 248, 244, 0.5);
}

/* Bottom row — © + legal links, gold-tinted hairline on top. */
.hs-footer__bottom {
	max-width: 1240px;
	margin: 0 auto;
	padding-top: 24px;
	border-top: 1px solid rgba(201, 168, 90, 0.2);
}
.hs-footer__copyright,
.hs-footer__legal {
	margin: 0;
	font-size: 12px;
	color: #8a8780;
}
.hs-footer__legal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease, color 180ms ease;
}
.hs-footer__legal a:hover,
.hs-footer__legal a:focus-visible {
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   SECTION SCAFFOLD — shared chrome for every landing pattern
   Each pattern's outer block uses `align: "full"` + `.hs-block` so the
   background spans edge-to-edge while inner content is centered via the
   constrained inner group.
   ========================================================================== */
.hs-block {
	padding-block: clamp(80px, 10vw, 120px);
	padding-inline: clamp(24px, 5vw, 48px);
}

/* Common centered section header used by Pawilon, Visit, etc. */
.hs-section-head {
	margin-inline: auto;
	margin-bottom: clamp(48px, 6vw, 72px);
	text-align: center;
}
.hs-section-head .is-style-eyebrow {
	justify-content: center;
}
.hs-section-head__title {
	margin: 16px 0 16px;
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.12;
	letter-spacing: -0.005em;
}
.hs-section-head__title em {
	font-style: italic;
	background: var(--wp--preset--gradient--gold-foil);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hs-section-head__lead {
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-500);
}

/* ==========================================================================
   ANNOUNCE — green pill row between hero and main sections
   ========================================================================== */
.hs-announce {
	padding: 24px 32px;
	background: var(--wp--custom--color--green--700);
	color: var(--wp--preset--color--marble-light);
	border-top: 1px solid rgba(201, 168, 90, 0.3);
	border-bottom: 1px solid rgba(201, 168, 90, 0.3);
	text-align: center;
	gap: 32px;
}
.hs-announce__pill {
	display: inline-block;
	margin: 0;
	padding: 6px 12px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--onyx);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.hs-announce__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 19px;
	color: var(--wp--preset--color--marble-light);
}
.hs-announce__link {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.hs-announce__link a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold);
	padding-bottom: 2px;
}

/* ==========================================================================
   FEATURE — Wystawa: 2-col grid + 3 stats
   ========================================================================== */
.hs-block--feature {
	background: var(--wp--preset--color--marble-light);
}
.hs-feature__columns {
	gap: clamp(40px, 5vw, 80px) !important;
}
.hs-feature__visual {
	margin: 0;
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(ellipse at 30% 30%, rgba(201, 168, 90, 0.08), transparent 60%),
		linear-gradient(160deg, var(--wp--custom--color--green--700) 0%, var(--wp--custom--color--green--900) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.hs-feature__visual::after {
	content: "";
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(201, 168, 90, 0.2);
	pointer-events: none;
}
.hs-feature__visual img {
	max-width: 60%;
	max-height: 70%;
	width: auto;
	height: auto;
	opacity: 0.85;
	filter: drop-shadow(0 8px 24px rgba(201, 168, 90, 0.18));
}

.hs-feature__heading {
	margin: 24px 0 28px;
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.12;
}
.hs-feature__heading em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
/* Body copy in the content column — scoped to *direct* p children
 * so the rule doesn't reach the stat-num / stat-label paragraphs
 * deeply nested inside the wp:columns stats grid. Also excludes the
 * eyebrow (which has its own typography via .is-style-eyebrow). */
.hs-feature__content-col > p:not(.is-style-eyebrow) {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--preset--color--stone-700);
}
.hs-feature__content-col > p:not(.is-style-eyebrow) strong {
	color: var(--wp--preset--color--onyx);
	font-weight: 600;
}

.hs-feature__stats {
	margin-top: 40px !important;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--stone-200);
	gap: 32px;
}
.hs-feature__stat-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(40px, 3.5vw, 48px);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}
.hs-feature__stat-num em {
	font-style: italic;
	font-weight: 300;
}
.hs-feature__stat-label {
	margin: 8px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone-500);
}

/* ==========================================================================
   PRODUCT GRID — Pawilon: 4 cards on marble surface
   ========================================================================== */
.hs-block--pawilon {
	background: var(--wp--preset--color--marble);
}
.hs-product-grid {
	gap: 24px !important;
	flex-wrap: wrap !important;
}
.hs-product-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone-200);
	transition: border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow   280ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform    280ms cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.hs-product-card:hover {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 16px 40px rgba(20, 18, 12, 0.10);
	transform: translateY(-2px);
}
.hs-product-card__visual {
	margin: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hs-product-card__visual img {
	max-width: 60%;
	max-height: 60%;
	width: auto;
	height: auto;
}
.hs-product-card--znicz      .hs-product-card__visual { background: linear-gradient(160deg, #2a2620 0%, #0a0a0a 100%); }
.hs-product-card--lampion    .hs-product-card__visual { background: linear-gradient(160deg, var(--wp--custom--color--green--700) 0%, var(--wp--custom--color--green--900) 100%); }
.hs-product-card--wazon      .hs-product-card__visual { background: linear-gradient(160deg, #3a3a3a 0%, #0a0a0a 100%); }
.hs-product-card--galanteria .hs-product-card__visual { background: linear-gradient(160deg, #4a4438 0%, #1a1410 100%); }

.hs-product-card__info {
	padding: 24px 24px 28px;
}
.hs-product-card__cat {
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.hs-product-card__name {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--onyx);
}
.hs-product-card__desc {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--stone-700);
}
.hs-product-card__link {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.hs-product-card__link a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* ==========================================================================
   INVITATION — dark green centered CTA
   ========================================================================== */
.hs-block--invitation {
	background: var(--wp--custom--color--green--700);
	background-image:
		radial-gradient(ellipse at 80% 30%, rgba(201, 168, 90, 0.10), transparent 50%),
		radial-gradient(ellipse at 20% 70%, rgba(201, 168, 90, 0.06), transparent 50%);
	color: var(--wp--preset--color--marble-light);
	padding-block: clamp(96px, 10vw, 140px);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hs-invitation__eyebrow {
	color: var(--wp--preset--color--gold);
	justify-content: center;
}
.hs-invitation__title {
	margin: 32px 0;
	color: var(--wp--preset--color--marble-light);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.08;
	letter-spacing: -0.005em;
}
.hs-invitation__title em {
	font-style: italic;
	font-weight: 400;
	background: var(--wp--preset--gradient--gold-foil);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hs-invitation__quote {
	margin: 0 auto 48px;
	max-width: 640px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.5;
	color: #d8d2c4;
}
.hs-invitation__actions .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--marble-light);
	border-color: var(--wp--preset--color--marble-light);
}
.hs-invitation__actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--marble-light);
	color: var(--wp--preset--color--onyx);
}

/* ==========================================================================
   VISIT — info-rows + map column
   ========================================================================== */
.hs-block--visit {
	background: var(--wp--preset--color--marble-light);
}
.hs-visit__grid {
	gap: clamp(40px, 5vw, 64px) !important;
}
.hs-visit__row {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
}
.hs-visit__row:last-child {
	border-bottom: none;
}
.hs-visit__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	/* reset <figure> default margins — pattern now uses wp:image
	 * (renders as <figure><img></figure>) instead of an inline SVG. */
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hs-visit__icon svg,
.hs-visit__icon img {
	width: 18px;
	height: 18px;
	max-width: none;
}
.hs-visit__row-content {
	flex: 1 1 auto;
}
.hs-visit__row-content > * + * {
	margin-block-start: 4px;
}
.hs-visit__label {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.hs-visit__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 22px;
	line-height: 1.3;
	color: var(--wp--preset--color--onyx);
}
.hs-visit__note {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	color: var(--wp--preset--color--stone-700);
}

.hs-visit__map-col {
	min-height: 480px;
}
.hs-visit__map-col .hs-map {
	height: 100%;
}

/* Adaptive fallback — when the hs/map block isn't registered (the
 * companion plugin isn't installed/activated) or renders nothing,
 * the map column ends up empty. Detect that with :has() and collapse
 * the column so the info rows take the full width centred, instead
 * of looking lost next to a blank cream slab. */
.hs-visit__grid:not(:has(.hs-map)) .hs-visit__map-col {
	display: none;
}
.hs-visit__grid:not(:has(.hs-map)) .hs-visit__info {
	flex-basis: 100% !important;
	max-width: 100% !important;
}
.hs-visit__grid:not(:has(.hs-map)) .hs-visit__row {
	max-width: 760px;
	margin-inline: auto;
}

/* ==========================================================================
   HOURS — onyx slab with day-time rows
   ========================================================================== */
.hs-block--hours {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--marble-light);
	padding-block: 80px;
}
.hs-hours__title {
	margin: 0;
	color: var(--wp--preset--color--marble-light);
	font-size: clamp(32px, 3.6vw, 52px);
}
.hs-hours__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-hours__lead {
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 18px;
	color: #b8b5ad;
}
/* Per-day row — flex with day-name serif on the left and tracked
 * time on the right, separated by a gold-tinted hairline. Block-gap
 * between rows is zeroed via the column's inline style in hours.php
 * so the rows stack tight. */
.hs-hours__row {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid rgba(201, 168, 90, 0.15);
}
.hs-hours__row:last-child {
	border-bottom: none;
}
.hs-hours__day {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 24px;
	line-height: 1.3;
	color: var(--wp--preset--color--marble-light);
}
.hs-hours__time {
	margin: 0;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--gold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.hs-hours__row.is-closed .hs-hours__time {
	color: var(--wp--preset--color--stone-500);
}

/* ==========================================================================
   CTA-FINAL — marble centered closer
   ========================================================================== */
.hs-block--cta-final {
	background: var(--wp--preset--color--marble);
	text-align: center;
	padding-block: 100px;
}
.hs-cta-final__diamond {
	width: 9px;
	height: 9px;
	margin: 0 auto 24px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}
.hs-cta-final__title {
	margin: 16px 0 24px;
	font-size: clamp(32px, 3.6vw, 52px);
}
.hs-cta-final__lead {
	margin: 0 auto 36px;
	max-width: 640px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-700);
}

/* CTA button pairs (cta-final, invitation) — equalise the min-width
 * so the phone-number button doesn't dwarf the secondary CTA next to
 * it. Center the label inside the min-width box. */
.hs-cta-final__actions .wp-block-button__link,
.hs-invitation__actions .wp-block-button__link,
.hs-card-cta__actions .wp-block-button__link {
	min-width: 260px;
	justify-content: center;
}

/* ==========================================================================
   KARTA RABATOWA — page-head hero, card mockup (front + back) and the rest
   of the sub-page sections: intro lead, discount list, terms with asterisk,
   3-step "how to get the card", and the closing onyx CTA strip.
   ========================================================================== */

/* Hero — bottle-green page-head with a soft gold halo, gold hairline at the
 * bottom edge and the card stage extending downward (negative margin in
 * `__stage` so the cards overlap the next section). `overflow: visible` lets
 * the card stage spill below the section into card-intro. */
.hs-block--card-hero {
	position: relative;
	overflow: visible;
	padding: 64px 24px 0;
	color: var(--wp--preset--color--marble-light);
	/* Green backdrop ends 80px before the section's box bottom. Cards sit
	 * inside the section all the way down to its box bottom — so the last
	 * 80px of card height paints against the page background instead of
	 * the green hero, giving the "cards extending below the hero" effect
	 * without any negative-margin / margin-collapse fight. */
	background:
		radial-gradient(ellipse at 80% 30%, rgba(201, 168, 90, 0.10), transparent 50%),
		radial-gradient(ellipse at 20% 70%, rgba(201, 168, 90, 0.06), transparent 50%),
		linear-gradient(160deg, #1a3a28 0%, #061810 100%);
	background-size: 100% calc(100% - 80px);
	background-repeat: no-repeat;
	background-position: top;
}
.hs-block--card-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 80px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold) 50%, transparent);
	opacity: 0.5;
}
.hs-card-hero__head {
	text-align: center;
}
/* `display: flex` (block-level) instead of the base `inline-flex` — WP 7.0
 * applies `margin-left/right: auto !important` to constrained-layout direct
 * children, which combined with `inline-flex` collapses the pseudo-element
 * rules onto the left side of the text. Block-level flex keeps the gold
 * rules flanking the text horizontally on both sides. */
.hs-card-hero__head .is-style-eyebrow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--gold);
	margin-bottom: 26px;
}
.hs-card-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(54px, 7vw, 92px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--marble-light);
}
.hs-card-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-card-hero__lead {
	max-width: 720px;
	margin: 28px auto 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 24px;
	line-height: 1.5;
	color: rgba(250, 248, 244, 0.85);
}
/* Stage — flex row holding both cards. The cards naturally fill the bottom
 * of the section; the hero's background gradient only paints the top
 * `100% - 160px`, so the cards' last 160px of height shows over the page
 * background instead of the green — giving the "extends below" effect. */
.hs-block--card-hero .hs-card-hero__stage {
	gap: 40px;
	margin-top: 72px;
	margin-inline: auto;
	padding: 0;
	position: relative;
	z-index: 2;
	align-items: flex-start;
}

/* Card mockup — the print-ready render is the JPG itself, so the shell only
 * adds rounded corners, deep shadow and the tilt that fans the two cards on
 * stage. Each card is a `wp:image` figure; rotation lives on the figure so it
 * carries the shadow with the photo. */
.hs-card.wp-block-image {
	flex: 0 0 300px;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.55),
		0 12px 24px rgba(0, 0, 0, 0.35);
	transition: transform 400ms ease;
}
.hs-card.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 685 / 1051;
	object-fit: cover;
}
.hs-card--front { transform: rotate(-3deg); }
.hs-card--back  { transform: rotate(3deg); }
.hs-card--front:hover,
.hs-card--back:hover { transform: rotate(0) translateY(-4px); }

/* Entry animation — front slides from left, back from right, both fade in.
 * `both` fill mode locks the end transform so hover transitions stay clean. */
@media (prefers-reduced-motion: no-preference) {
	.hs-card--front {
		animation: hs-card-slide-in-left 800ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
	}
	.hs-card--back {
		animation: hs-card-slide-in-right 800ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
	}
}
@keyframes hs-card-slide-in-left {
	from { opacity: 0; transform: translateX(-80px) rotate(-3deg); }
	to   { opacity: 1; transform: translateX(0)    rotate(-3deg); }
}
@keyframes hs-card-slide-in-right {
	from { opacity: 0; transform: translateX(80px)  rotate(3deg); }
	to   { opacity: 1; transform: translateX(0)     rotate(3deg); }
}

/* Intro — centered serif lead under the hero. Cards no longer overlap (the
 * hero's bg ends 160px before its box bottom, cards live inside the
 * section), so we just want comfortable breathing room. */
.hs-block--card-intro {
	padding-block: 80px 60px;
	text-align: center;
}
.hs-card-intro__lead {
	margin: 28px auto 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 22px;
	line-height: 1.55;
	color: var(--wp--preset--color--stone-500);
}

/* Discount list — grid rows `140 / 1fr / auto`, separated by stone-200
 * hairlines on top and bottom of every row. */
.hs-block--card-discounts {
	padding-block: 30px 110px;
}
.hs-discounts__list {
	border-top: 1px solid var(--wp--preset--color--stone-200);
}
.hs-discounts__row {
	gap: 32px;
	padding-block: 32px;
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
}
.hs-discounts__row > * { margin: 0; }

/* Reveal-on-scroll baseline — any element marked with `data-hs-reveal` or
 * the `.hs-reveal` class starts hidden and shifted (down by default). The
 * accompanying `reveal.js` adds `.is-revealed` once the element crosses
 * the viewport threshold. Each sibling within the same parent gets a
 * staggered delay set inline. Direction variants: `right` slides in from
 * the right, `left` from the left.
 *
 * The class form exists so patterns can attach reveal to core blocks
 * (wp:column, wp:group, wp:columns) without tripping the block editor's
 * markup validator — raw HTML attributes get stripped on parse/save,
 * className survives.
 *
 * The `.wp-site-blocks` scoping keeps the hide-state out of the block
 * editor canvas (which wraps content in `.editor-styles-wrapper`, not
 * `.wp-site-blocks`). Without that scope, every reveal target would sit
 * at opacity:0 in the editor forever, since `reveal.js` doesn't run
 * inside the editor iframe. */
@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks [data-hs-reveal],
	.wp-site-blocks .hs-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}
	.wp-site-blocks [data-hs-reveal="right"],
	.wp-site-blocks .hs-reveal--right {
		transform: translateX(48px);
	}
	.wp-site-blocks [data-hs-reveal="left"],
	.wp-site-blocks .hs-reveal--left {
		transform: translateX(-48px);
	}
	.wp-site-blocks [data-hs-reveal].is-revealed,
	.wp-site-blocks .hs-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
}
.hs-discounts__pct {
	flex: 0 0 140px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(56px, 6vw, 76px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--gold);
}
.hs-discounts__pct sup {
	font-size: 0.42em;
	vertical-align: top;
	margin-left: 2px;
	font-style: italic;
}
.hs-discounts__body {
	flex: 1 1 auto;
	gap: 8px;
}
.hs-discounts__cat {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.hs-discounts__name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.2;
	color: var(--wp--preset--color--onyx);
}
.hs-discounts__meta {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone-500);
}

/* Terms — marble-tinted band with a big gold asterisk and italic copy. */
.hs-block--card-terms {
	background: var(--wp--preset--color--marble);
	border-top: 1px solid var(--wp--preset--color--stone-200);
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
	padding-block: 70px;
}
/* Inner — flex ROW with the asterisk on the left, copy on the right.
 * Override WP's default `is-layout-flex { flex-wrap: wrap }` so the items
 * never break into separate lines on desktop. `align-items: flex-start`
 * keeps the asterisk near the top of the body. */
.hs-card-terms__inner.is-layout-flex {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 24px;
	text-align: left;
}
.hs-card-terms__mark {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}
.hs-card-terms__body {
	flex: 1 1 auto;
	gap: 12px;
}
/* Force the label eyebrow to left-aligned and strip BOTH gold rules —
 * terms uses just the plain uppercase gold label, no flanking lines. */
.hs-card-terms__body .hs-card-terms__label.is-style-eyebrow {
	margin: 0 0 4px;
	justify-content: flex-start;
	gap: 0;
}
.hs-card-terms__body .hs-card-terms__label.is-style-eyebrow::before,
.hs-card-terms__body .hs-card-terms__label.is-style-eyebrow::after {
	content: none;
}
.hs-card-terms__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-700);
	text-align: left;
}

/* How-to — section head + 3-column grid with gold hairline above each step. */
.hs-block--card-howto {
	padding-block: 100px;
	text-align: center;
}
.hs-block--card-howto .hs-section-head {
	margin-bottom: 60px;
}
.hs-card-howto__steps {
	gap: 48px;
	text-align: left;
}
.hs-card-howto__step {
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--gold);
}
.hs-card-howto__num {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 36px;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}
.hs-card-howto__title {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: 26px;
	color: var(--wp--preset--color--onyx);
}
.hs-card-howto__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--stone-700);
}

/* Closing CTA — onyx strip with gold em + button pair. */
.hs-block--card-cta {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--marble-light);
	padding-block: 80px;
	text-align: center;
}
.hs-block--card-cta .is-style-eyebrow {
	color: var(--wp--preset--color--gold);
}
.hs-card-cta__title {
	margin: 16px 0 32px;
	color: var(--wp--preset--color--marble-light);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.1;
}
.hs-card-cta__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-card-cta__actions .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--marble-light);
	border-color: var(--wp--preset--color--marble-light);
	background: transparent;
}
.hs-card-cta__actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--marble-light);
	color: var(--wp--preset--color--onyx);
}

/* ==========================================================================
   OFERTA — page-head, sticky table-of-contents, 5 product/service sections,
   features strip, closing CTA.
   ========================================================================== */

/* Hero — marble page-head with bottom hairline */
.hs-block--oferta-hero {
	background: var(--wp--preset--color--marble);
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
	padding-block: 96px 72px;
	text-align: center;
}
.hs-oferta-hero__title {
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(48px, 6.5vw, 88px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--onyx);
}
.hs-oferta-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-oferta-hero__lead {
	max-width: 700px;
	margin: 28px auto 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-500);
}

/* TOC — onyx strip with anchor links */
.hs-block--oferta-toc {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--marble-light);
	padding: 18px 24px;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.hs-oferta-toc__link {
	margin: 0;
}
.hs-oferta-toc__link a {
	color: var(--wp--preset--color--marble-light);
	text-decoration: none;
	padding: 4px 12px;
	transition: color 200ms ease;
}
.hs-oferta-toc__link a:hover,
.hs-oferta-toc__link a:focus-visible {
	color: var(--wp--preset--color--gold);
}
.hs-oferta-toc__sep {
	margin: 0;
	color: var(--wp--preset--color--gold);
	opacity: 0.6;
}

/* Offer section shell — 2-column grid, alternating bg via `--oferta-alt` */
.hs-block--oferta-section {
	padding-block: 96px;
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
}
.hs-block--oferta-section.hs-block--oferta-alt {
	background: var(--wp--preset--color--marble);
}
.hs-oferta__grid {
	gap: 72px;
}
/* `--reverse` swaps visual/content order at the column level. Wider
 * media query (760px) re-orders to put visual on top on mobile. */
@media (min-width: 901px) {
	.hs-oferta__grid--reverse > .hs-oferta__content-col { order: 1; }
	.hs-oferta__grid--reverse > .hs-oferta__visual-col  { order: 2; }
}

/* Visual — square-ish frame, can hold a wp:image or CSS art */
.hs-oferta__visual {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--marble);
	border: 1px solid var(--wp--preset--color--stone-200);
	overflow: hidden;
}
.hs-oferta__visual--dark {
	background: var(--wp--preset--color--onyx);
	border: none;
}
.hs-oferta__visual--green {
	background: linear-gradient(160deg, #0d2818 0%, #061810 100%);
	border: none;
}
.hs-oferta__visual--znicze,
.hs-oferta__visual--galanteria,
.hs-oferta__visual--opieka {
	background: var(--wp--preset--color--marble);
}
.hs-oferta__visual--znicze    { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); border: none; }
.hs-oferta__visual--galanteria{ background: linear-gradient(160deg, #4a4438 0%, #1a1410 100%); border: none; }
.hs-oferta__visual--opieka    { background: linear-gradient(180deg, #2a3528 0%, #0a1810 100%); border: none; }

.hs-oferta__tag {
	position: absolute;
	top: 24px;
	left: 24px;
	margin: 0;
	z-index: 2;
	padding: 8px 14px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--onyx);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.hs-oferta__tag--light {
	background: rgba(250, 248, 244, 0.95);
}
.hs-oferta__photo {
	margin: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hs-oferta__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Content — number, eyebrow, title, lead, list, actions */
.hs-oferta__num {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 300;
	font-size: 72px;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	opacity: 0.35;
}
.hs-oferta__title {
	margin: 16px 0 22px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(32px, 4vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--onyx);
}
.hs-oferta__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-oferta__lead {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--stone-700);
}
.hs-oferta__note {
	margin: 20px 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-500);
}

/* List — each row is a flex group with name (left) + price (right) */
.hs-oferta__list {
	margin: 0 0 32px;
	border-top: 1px solid var(--wp--preset--color--stone-200);
}
.hs-oferta__list-row {
	gap: 16px;
	padding-block: 14px;
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
	position: relative;
	padding-left: 22px;
}
.hs-oferta__list-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}
.hs-oferta__list-name {
	margin: 0;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--onyx);
}
.hs-oferta__list-price {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 17px;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.hs-oferta__actions {
	margin-top: 8px;
}

/* CSS-art visuals — znicze (candles row) */
.hs-art {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hs-art--znicze {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background:
		radial-gradient(ellipse at 50% 60%, rgba(201, 168, 90, 0.18), transparent 70%),
		linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}
.hs-art__znicz {
	position: relative;
	width: 52px;
	height: 96px;
	background: linear-gradient(180deg, #3a2818 0%, #2a1810 100%);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(201, 168, 90, 0.25);
}
.hs-art__znicz--tall  { height: 124px; }
.hs-art__znicz--short { height: 76px; }
.hs-art__znicz--gold  { background: linear-gradient(180deg, var(--wp--preset--color--gold) 0%, #5a4828 100%); }
.hs-art__znicz--green { background: linear-gradient(180deg, #0d2818 0%, #061810 100%); box-shadow: inset 0 0 0 1px rgba(201, 168, 90, 0.4); }
.hs-art__znicz::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 16px;
	background: radial-gradient(ellipse at 50% 60%, #d8b878 0%, var(--wp--preset--color--gold) 40%, transparent 70%);
	border-radius: 50%;
	filter: blur(0.4px);
	animation: hs-flicker 2.4s ease-in-out infinite;
}
@keyframes hs-flicker {
	0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
	50%      { opacity: 1;    transform: translateX(-50%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.hs-art__znicz::before { animation: none; }
}

/* CSS-art — galanteria (cross + rosary ring) */
.hs-art--galanteria {
	background:
		radial-gradient(ellipse at 30% 30%, rgba(201, 168, 90, 0.10), transparent 60%),
		linear-gradient(160deg, #4a4438 0%, #1a1410 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hs-art__cross {
	position: relative;
	width: 96px;
	height: 156px;
}
.hs-art__cross::before,
.hs-art__cross::after {
	content: "";
	position: absolute;
	background: linear-gradient(135deg, #d8b878 0%, var(--wp--preset--color--gold) 50%, #a8893f 100%);
	box-shadow: 0 4px 18px rgba(201, 168, 90, 0.30);
}
.hs-art__cross::before {
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 18px;
	height: 100%;
	border-radius: 4px;
}
.hs-art__cross::after {
	top: 30%;
	left: 0;
	width: 100%;
	height: 18px;
	border-radius: 4px;
}
.hs-art__rosary {
	position: absolute;
	bottom: 14%;
	right: 16%;
	width: 76px;
	height: 76px;
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	opacity: 0.5;
}

/* CSS-art — uslugi (granite block with engraved letters + chisel) */
.hs-art--uslugi {
	background:
		radial-gradient(ellipse at 70% 40%, rgba(201, 168, 90, 0.08), transparent 60%),
		linear-gradient(180deg, #0d2818 0%, #061810 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hs-art__block {
	width: 60%;
	height: 55%;
	background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
	box-shadow:
		inset 0 0 0 1px rgba(201, 168, 90, 0.2),
		0 20px 60px rgba(0, 0, 0, 0.55);
	position: relative;
	transform: perspective(800px) rotateY(-15deg) rotateX(8deg);
}
.hs-art__block-letters {
	position: absolute;
	inset: 18% 16%;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.3;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hs-art__chisel {
	position: absolute;
	bottom: 12%;
	right: 12%;
	width: 90px;
	height: 6px;
	background: linear-gradient(90deg, #6a5a3a 0%, #a8893f 60%, var(--wp--preset--color--gold) 100%);
	border-radius: 2px;
	transform: rotate(-30deg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.hs-art__chisel::after {
	content: "";
	position: absolute;
	right: -10px;
	top: -2px;
	width: 14px;
	height: 10px;
	background: var(--wp--preset--color--stone-200);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* CSS-art — opieka (grave + flowers + candles) */
.hs-art--opieka {
	background:
		radial-gradient(ellipse at 50% 80%, rgba(26, 58, 40, 0.4), transparent 70%),
		linear-gradient(180deg, #2a3528 0%, #1a2820 60%, #0a1810 100%);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.hs-art__grave {
	width: 60%;
	height: 56%;
	background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
	border-top-left-radius: 50% 24px;
	border-top-right-radius: 50% 24px;
	margin-bottom: 14%;
	position: relative;
	box-shadow: inset 0 0 0 1px rgba(201, 168, 90, 0.22);
}
.hs-art__grave::before {
	content: "";
	position: absolute;
	top: 14%;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 30px;
	background: linear-gradient(135deg, #d8b878 0%, var(--wp--preset--color--gold) 100%);
	clip-path: polygon(50% 0, 50% 100%, 0 50%, 50% 50%, 50% 50%, 100% 50%);
}
.hs-art__candles-row {
	position: absolute;
	bottom: 26%;
	left: 22%;
	right: 22%;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	height: 28px;
}
.hs-art__candle {
	width: 12px;
	height: 22px;
	background: linear-gradient(180deg, #a8893f 0%, #5a4828 100%);
	border-radius: 2px 2px 0 0;
	position: relative;
}
.hs-art__candle::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 8px;
	background: radial-gradient(ellipse at 50% 60%, #d8b878, var(--wp--preset--color--gold) 60%, transparent);
	border-radius: 50%;
	animation: hs-flicker 2.6s ease-in-out infinite;
}
.hs-art__flowers {
	position: absolute;
	bottom: 8%;
	left: 22%;
	width: 56%;
	height: 12%;
	background:
		radial-gradient(circle at 15% 40%, #d8b878 0 6px, transparent 7px),
		radial-gradient(circle at 35% 30%, #c84a4a 0 5px, transparent 6px),
		radial-gradient(circle at 55% 50%, var(--wp--preset--color--gold) 0 7px, transparent 8px),
		radial-gradient(circle at 75% 35%, #c84a4a 0 5px, transparent 6px),
		radial-gradient(circle at 90% 45%, #d8b878 0 5px, transparent 6px),
		linear-gradient(180deg, #2a4a30 0%, #1a3a28 100%);
	border-radius: 12px 12px 0 0;
}

/* Features strip — bottle green, 4 stats */
.hs-block--oferta-features {
	background: #0d2818;
	background-image:
		radial-gradient(ellipse at 80% 30%, rgba(201, 168, 90, 0.10), transparent 50%),
		radial-gradient(ellipse at 20% 70%, rgba(201, 168, 90, 0.06), transparent 50%);
	color: var(--wp--preset--color--marble-light);
	padding-block: 90px;
	text-align: center;
}
.hs-block--oferta-features .hs-section-head {
	margin-bottom: 60px;
}
.hs-block--oferta-features .hs-section-head__title {
	color: var(--wp--preset--color--marble-light);
}
.hs-block--oferta-features .hs-section-head__title em {
	color: var(--wp--preset--color--gold);
	-webkit-text-fill-color: var(--wp--preset--color--gold);
	background: none;
}
.hs-oferta-features__grid {
	gap: 40px;
}
.hs-oferta-features__col {
	text-align: left;
}
.hs-oferta-features__num {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 52px;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}
.hs-oferta-features__label {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marble-light);
}
.hs-oferta-features__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(250, 248, 244, 0.75);
}

/* Closing CTA — onyx strip mirroring card-cta exactly */
.hs-block--oferta-cta {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--marble-light);
	padding-block: 80px;
	text-align: center;
}
.hs-block--oferta-cta .is-style-eyebrow {
	color: var(--wp--preset--color--gold);
}
.hs-oferta-cta__title {
	margin: 16px 0 32px;
	color: var(--wp--preset--color--marble-light);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.1;
}
.hs-oferta-cta__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-oferta-cta__actions .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--marble-light);
	border-color: var(--wp--preset--color--marble-light);
	background: transparent;
}
.hs-oferta-cta__actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--marble-light);
	color: var(--wp--preset--color--onyx);
}
.hs-oferta-cta__actions .wp-block-button__link {
	min-width: 220px;
	justify-content: center;
}

/* Responsive — stack columns, smaller hero, single-col features */
@media (max-width: 900px) {
	.hs-block--oferta-hero { padding-block: 64px 48px; }
	.hs-block--oferta-section { padding-block: 64px; }
	.hs-oferta__grid { gap: 40px; }
	.hs-oferta__num { font-size: 56px; }
	.hs-oferta-features__grid { gap: 32px; }
	.hs-block--oferta-toc { font-size: 10px; gap: 4px; padding: 16px; }
}

/* ==========================================================================
   KONTAKT — page-head hero, company-info cards, contact form
   ========================================================================== */

/* Hero — bottle-green page-head mirroring `.hs-block--card-hero` from the
 * karta-rabatowa page (radial gold halos + bottom-left → top-right green
 * gradient + gold hairline at the bottom edge). No `background-size` trick
 * here because no cards overhang from this section. */
.hs-block--contact-hero {
	position: relative;
	padding-block: 96px 80px;
	text-align: center;
	color: var(--wp--preset--color--marble-light);
	background:
		radial-gradient(ellipse at 80% 30%, rgba(201, 168, 90, 0.10), transparent 50%),
		radial-gradient(ellipse at 20% 70%, rgba(201, 168, 90, 0.06), transparent 50%),
		linear-gradient(160deg, #1a3a28 0%, #061810 100%);
}
.hs-block--contact-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold) 50%, transparent);
	opacity: 0.5;
}
.hs-block--contact-hero .is-style-eyebrow {
	color: var(--wp--preset--color--gold);
}
.hs-contact-hero__title {
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(40px, 5.2vw, 64px);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--marble-light);
}
.hs-contact-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.hs-contact-hero__lead {
	max-width: 640px;
	margin: 24px auto 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: rgba(250, 248, 244, 0.78);
}

/* Company info — two cards side by side with marble background */
.hs-block--contact-company {
	background: var(--wp--preset--color--marble-light);
	border-bottom: 1px solid var(--wp--preset--color--stone-200);
	padding-block: 72px 88px;
}
.hs-block--contact-company .hs-section-head {
	margin-bottom: 48px;
}
/* Two cards stacked vertically (one above the other). WP's
 * `.wp-block-columns` defaults to a flex row — we override to column
 * direction so the cards take full content width. */
.hs-block--contact-company .hs-company__grid.wp-block-columns {
	flex-direction: column;
	max-width: 760px;
	margin-inline: auto;
	gap: 28px;
}
.hs-block--contact-company .hs-company__grid > .wp-block-column {
	flex-basis: auto;
	width: 100%;
}

/* Each card: 2-column grid with the logo on the left and the text body
 * (an inner group) on the right. Keeping the text content in a single
 * grid child means the paragraphs flow naturally inside it — no fight
 * with grid row stretching, just normal vertical rhythm. */
.hs-company__card {
	display: grid;
	grid-template-columns: 220px 1fr;
	column-gap: 48px;
	align-items: center;
	background: var(--wp--preset--color--marble);
	padding: 36px 32px;
	border-top: 2px solid var(--wp--preset--color--gold);
}
.hs-company__logo {
	margin: 0;
	max-width: 100%;
}
.hs-company__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 180px;
}
.hs-company__body {
	min-width: 0;
}
/* Tighten the eyebrow → name gap. The card is `.is-layout-flow`, which
 * gets WP's `margin-block-start: 1rem` on every child; combined with the
 * eyebrow's own bottom margin we ended up with ~28px between the gold
 * label and the brand name. Reset both and replace with a small explicit
 * gap (the rest of the rhythm — name → street, line → line — keeps WP's
 * default 1rem). */
.hs-company__label.is-style-eyebrow {
	margin: 0;
}
.hs-company__name {
	margin-block-start: 6px;
}
.hs-company__name {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
	color: var(--wp--preset--color--onyx);
}
.hs-company__line {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--stone-700);
}
.hs-company__line--strong {
	font-weight: 600;
	color: var(--wp--preset--color--onyx);
	margin-top: 14px;
}
.hs-company__line--meta {
	font-size: 14px;
	color: var(--wp--preset--color--stone-700);
}
.hs-company__line--meta strong {
	font-weight: 600;
	color: var(--wp--preset--color--onyx);
}
.hs-company__note {
	margin: 12px 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--stone-500);
}

/* Contact form. Marble background + hairline top match the contact-company
 * panel below, so form + company read as one continuous "data" zone that
 * sits visually distinct from the lighter visit-info section above. */
.hs-block--contact-form {
	background: var(--wp--preset--color--marble);
	border-top: 1px solid var(--wp--preset--color--stone-200);
	padding-block: 88px 96px;
}
.hs-block--contact-form .hs-section-head {
	margin-bottom: 48px;
}
.hs-form {
	max-width: 640px;
	margin: 0 auto;
}
.hs-form__field {
	display: block;
	margin-bottom: 22px;
}
.hs-form__label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone-700);
}
.hs-form__hint {
	display: inline-block;
	margin-left: 6px;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--stone-500);
}
.hs-form__input,
.hs-form__textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--onyx);
	background: var(--wp--preset--color--marble-light);
	border: 1px solid var(--wp--preset--color--stone-200);
	border-radius: 4px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.hs-form__input:focus,
.hs-form__textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 90, 0.18);
}
.hs-form__input[aria-invalid="true"],
.hs-form__textarea[aria-invalid="true"] {
	border-color: #8a3a3a;
	box-shadow: 0 0 0 3px rgba(138, 58, 58, 0.12);
}
.hs-form__textarea {
	resize: vertical;
	min-height: 160px;
}
.hs-form__file {
	display: block;
	width: 100%;
	font-size: 14px;
	color: var(--wp--preset--color--stone-700);
	padding: 12px 0;
}
.hs-form__file::-webkit-file-upload-button,
.hs-form__file::file-selector-button {
	margin-right: 12px;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--onyx);
	background: var(--wp--preset--color--marble);
	border: 1px solid var(--wp--preset--color--stone-200);
	border-radius: 4px;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease;
}
.hs-form__file:hover::-webkit-file-upload-button,
.hs-form__file:hover::file-selector-button {
	background: var(--wp--preset--color--gold-soft);
	border-color: var(--wp--preset--color--gold);
}
.hs-form__field-error {
	margin: 6px 0 0;
	min-height: 18px;
	font-size: 13px;
	color: #8a3a3a;
}
.hs-form__field-error:empty { display: none; }

/* Honeypot — visually hide, keep accessible to bots but not screen readers */
.hs-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hs-form__actions {
	margin-top: 32px;
}
.hs-form__submit {
	min-width: 220px;
}
.hs-form.is-submitting .hs-form__submit {
	opacity: 0.6;
	cursor: progress;
}
.hs-form__rgpd {
	margin: 16px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-500);
}
.hs-form__rgpd a {
	color: inherit;
}
.hs-form__status {
	margin: 24px 0 0;
	padding: 14px 18px;
	font-size: 14px;
	border-radius: 4px;
	min-height: 0;
}
.hs-form__status:empty { display: none; }
.hs-form__status.is-ok {
	background: #e6ede8;
	color: #1a3a28;
	border: 1px solid #b6c9bb;
}
.hs-form__status.is-error {
	background: #fbe9e9;
	color: #8a3a3a;
	border: 1px solid #e3b8b8;
}

/* ==========================================================================
   SECTION-QUOTE — bottle-green panel used as a visual divider between
   two marble-toned sections. Mirrors the gold-halo treatment from
   .hs-block--card-hero so the green tone reads as part of the same
   brand vocabulary, not a one-off.
   ========================================================================== */
.hs-block--section-quote {
	position: relative;
	padding-block: 88px 96px;
	color: var(--wp--preset--color--marble-light);
	background:
		radial-gradient(ellipse at 80% 30%, rgba(201, 168, 90, 0.10), transparent 50%),
		radial-gradient(ellipse at 20% 70%, rgba(201, 168, 90, 0.06), transparent 50%),
		linear-gradient(160deg, #1a3a28 0%, #061810 100%);
}
.hs-block--section-quote::before,
.hs-block--section-quote::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold) 50%, transparent);
	opacity: 0.45;
}
.hs-block--section-quote::before { top: 0; }
.hs-block--section-quote::after  { bottom: 0; }

/* Large decorative opening quote mark, set in the display serif. Pulled
 * down with negative margin so the quote text feels nested under it. */
.hs-section-quote__mark {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: 96px;
	line-height: 0.7;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
}
.hs-section-quote__text {
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.4;
	color: var(--wp--preset--color--marble-light);
}
.hs-section-quote__author {
	margin: 28px 0 0;
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

@media (max-width: 760px) {
	.hs-block--contact-hero { padding-block: 64px 40px; }
	.hs-block--section-quote { padding-block: 64px 72px; }
	.hs-block--contact-company { padding-block: 56px 72px; }
	.hs-block--contact-company .hs-company__grid.wp-block-columns { gap: 20px; }
	.hs-company__card {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 16px;
		padding: 28px 24px;
	}
	.hs-company__logo {
		max-width: 240px;
		margin-inline: auto;
	}
	.hs-company__logo img { max-height: 120px; }
	.hs-block--contact-form { padding-block: 64px 72px; }
}

/* ==========================================================================
   Responsive — header collapses nav, footer columns stack
   ========================================================================== */
@media (max-width: 960px) {
	.hs-header__brand-text { display: none; }
	.hs-header__phone .wp-block-button__link { font-size: 11px; }
	.hs-footer .hs-footer__grid { gap: 32px; }

	.hs-announce { flex-direction: column; gap: 16px; }
	.hs-product-grid .hs-product-card { flex-basis: calc(50% - 12px); }
	.hs-feature__visual { aspect-ratio: 1 / 1; }

	.hs-card-howto__steps { gap: 32px; }
}
@media (max-width: 760px) {
	/* Card stage: cards shrink and overlap less so the next section's
	 * padding-top doesn't leave a giant void on small screens. */
	.hs-block--card-hero { padding-top: 48px; }
	.hs-block--card-hero { background-size: 100% calc(100% - 64px); }
	.hs-block--card-hero::after { bottom: 64px; }
	.hs-block--card-hero .hs-card-hero__stage { gap: 24px; }
	.hs-card.wp-block-image { flex-basis: min(260px, 44vw); }

	.hs-block--card-intro { padding-block: 60px 40px; }
	.hs-card-intro__lead { font-size: 19px; }

	.hs-discounts__row {
		flex-wrap: wrap;
		gap: 12px 20px;
		padding-block: 24px;
	}
	.hs-discounts__pct { flex-basis: 100px; }
	.hs-discounts__meta { flex-basis: 100%; padding-left: 120px; }

	.hs-card-terms__inner { flex-direction: column; gap: 12px; }

	.hs-card-howto__steps { gap: 28px; }
}
@media (max-width: 540px) {
	.hs-header__inner { padding: 14px 20px; gap: 12px; }
	.hs-header__cta .wp-block-button__link { padding: 10px 16px; }
	.hs-footer { padding-top: 56px; }
	.hs-footer__bottom { flex-direction: column; gap: 8px; }

	.hs-block { padding-block: 64px; }
	.hs-product-grid .hs-product-card { flex-basis: 100%; }
	.hs-visit__row { flex-wrap: wrap; }
	.hs-feature__stats { gap: 24px; }
	.hs-cta-final__lead { font-size: 19px; }

	/* Stack the two cards instead of fanning them side by side. */
	.hs-block--card-hero { background-size: 100% calc(100% - 48px); }
	.hs-block--card-hero::after { bottom: 48px; }
	.hs-block--card-hero .hs-card-hero__stage { flex-direction: column; align-items: center; gap: 24px; }
	.hs-card.wp-block-image { flex-basis: 240px; max-width: 240px; }
	.hs-card--front, .hs-card--back { transform: none; }

	.hs-discounts__pct { font-size: 56px; flex-basis: 80px; }
	.hs-discounts__meta { padding-left: 100px; }

	.hs-block--card-howto { padding-block: 72px; }
	.hs-block--card-cta { padding-block: 64px; }
}

/* -------------------------------------------------------------------------- */
/*  Back-to-top floating button                                               */
/* -------------------------------------------------------------------------- */
/* Hidden on mobile by design — the accessibility widget already occupies the */
/* corner there and we don't want stacked floating UI on small screens.       */
.hs-back-to-top { display: none; }

@media (min-width: 769px) {
	.hs-back-to-top {
		align-items: center;
		background: var(--wp--preset--color--gold, #c9a85a);
		border: 0;
		border-radius: 50%;
		bottom: 16px;
		color: var(--wp--preset--color--onyx, #1a1a1a);
		cursor: pointer;
		display: inline-flex;
		height: 56px;
		justify-content: center;
		opacity: 0;
		padding: 0;
		pointer-events: none;
		position: fixed;
		right: 80px;
		transform: translateY(8px);
		transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
		            transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
		            background 240ms ease, color 240ms ease;
		width: 56px;
		z-index: 999;
	}
	.hs-back-to-top.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	.hs-back-to-top:hover,
	.hs-back-to-top:focus-visible {
		background: var(--wp--custom--color--gold--600, #a8893f);
		color: #fff;
		outline: none;
		transform: translateY(0) scale(1.06);
	}
	.hs-back-to-top:focus-visible {
		outline: 2px solid var(--wp--preset--color--gold, #c9a85a);
		outline-offset: 4px;
	}
	.hs-back-to-top__icon {
		display: block;
		height: 24px;
		pointer-events: none;
		width: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-back-to-top { transition: opacity 80ms linear; transform: none !important; }
}