/**
 * VIANOČNÁ KAMPAŇ — the Christmas B2B landing page: hero, package picker with
 * a live order summary, the CF7 enquiry form the picker feeds, and the
 * four-step band.
 *
 * Mobile-first. The mockup's own thresholds are 620px (grids collapse) and
 * 1100px (hero and picker go two-column), so those are the breakpoints here.
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------
 * 0. Shared page vocabulary
 * ------------------------------------------------------------- */

/* The campaign's eyebrow is a larger, wider-tracked variant of the shared
   .section-label, with the hero's gradient pill in front of it. */
.kampan-eyebrow {
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12-5 );
	letter-spacing: var( --ls-widest );
	color: var( --color-heading );
	opacity: .85;
}

.kampan-eyebrow::before {
	width: var( --space-26 );
	height: var( --space-8 );
	background: var( --gradient-honey );
	box-shadow: var( --ring-focus );
}

.kampan-heading {
	font-size: var( --fs-heading-kampan );
	font-weight: var( --fw-580 );
	line-height: var( --lh-display );
}

.kampan-heading--sm {
	font-size: var( --fs-d5 );
}

/* ---------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------- */

.kampan-hero {
	position: relative;
	overflow: hidden;
	background: var( --surface-sand );
}

.kampan-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient( 760px 500px at 84% 20%, var( --c-honey3-a42 ), transparent 62% ),
		radial-gradient( 520px 400px at -6% 100%, var( --c-honey3-a24 ), transparent 60% );
	pointer-events: none;
}

.kampan-hero__snow {
	position: absolute;
	top: 0;
	z-index: 0;
	border-radius: var( --radius-circle );
	background: var( --c-white );
	animation: kampan-fall 11s linear infinite;
	pointer-events: none;
}

.kampan-hero__snow--1 {
	left: 12%;
	width: var( --space-7 );
	height: var( --space-7 );
}

.kampan-hero__snow--2 {
	left: 31%;
	width: var( --space-5 );
	height: var( --space-5 );
	animation-duration: 14s;
	animation-delay: 2s;
}

.kampan-hero__snow--3 {
	left: 56%;
	width: var( --space-8 );
	height: var( --space-8 );
	animation-duration: 13s;
	animation-delay: 4s;
}

.kampan-hero__snow--4 {
	left: 77%;
	width: var( --space-6 );
	height: var( --space-6 );
	animation-duration: 12s;
	animation-delay: 1s;
}

.kampan-hero__snow--5 {
	left: 91%;
	width: var( --space-5 );
	height: var( --space-5 );
	animation-duration: 15s;
	animation-delay: 6s;
}

.kampan-hero__confetti {
	position: absolute;
	z-index: 0;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
	pointer-events: none;
}

.kampan-hero__confetti--1 {
	top: 72%;
	left: 8%;
	background: var( --c-red-500 );
	opacity: .5;
	transform: rotate( -20deg );
}

.kampan-hero__confetti--2 {
	top: 30%;
	left: 44%;
	background: var( --c-green-500 );
	opacity: .55;
	transform: rotate( 70deg );
}

.kampan-hero__inner {
	position: relative;
	z-index: 1;
	padding-top: var( --space-26 );
}

.kampan-hero .breadcrumbs {
	margin-bottom: var( --space-22 );
}

.kampan-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-48 );
	align-items: center;
	padding-bottom: var( --space-58 );
}

.kampan-hero__lead {
	max-width: 640px;
}

.kampan-hero__title {
	margin: 0;
	font-size: var( --fs-hero-kampan );
	font-weight: var( --fw-590 );
	line-height: var( --lh-110 );
	letter-spacing: var( --ls-tight );
}

.kampan-hero__underline {
	position: relative;
	display: inline-block;
}

.kampan-hero__underline em {
	font-style: italic;
	font-weight: var( --fw-540 );
	color: var( --color-accent-deep );
}

.kampan-hero__underline-svg {
	position: absolute;
	right: 0;
	bottom: -9px;
	left: 0;
	width: 100%;
	height: var( --space-16 );
	overflow: visible;
}

.kampan-hero__underline-svg path {
	fill: none;
	stroke: var( --c-honey-500 );
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	animation: kampan-draw 1s .4s cubic-bezier( .6, 0, .3, 1 ) forwards;
}

.kampan-hero__intro {
	max-width: 600px;
	margin-top: var( --space-20 );
	font-size: var( --fs-18-5 );
}

.kampan-hero__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-26 );
	justify-content: start;
	margin-top: var( --space-30 );
}

.kampan-fact__value {
	display: block;
	font-family: var( --font-display );
	font-size: var( --fs-26 );
	font-weight: var( --fw-medium );
	line-height: var( --lh-110 );
	color: var( --color-heading );
}

.kampan-fact__label {
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-eyelet );
	text-transform: uppercase;
	color: var( --color-muted );
}

.kampan-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
	margin-top: var( --space-30 );
}

.kampan-hero__content {
	margin-top: var( --space-24 );
}

.kampan-hero__media {
	display: flex;
	justify-content: center;
}

.kampan-hero__frame {
	position: relative;
	width: min( 420px, 100% );
}

.kampan-hero__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border-radius: var( --radius-28 );
	box-shadow: var( --shadow-photo );
}

.kampan-hero__photo-inset {
	position: absolute;
	right: -6%;
	bottom: -12%;
	width: 47%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: var( --space-6 ) solid var( --c-sand-100 );
	border-radius: var( --radius-22 );
	box-shadow: var( --shadow-float-sm );
}

.kampan-hero__stamp {
	position: absolute;
	top: calc( var( --space-16 ) * -1 );
	left: calc( var( --space-16 ) * -1 );
	display: flex;
	align-items: center;
	gap: var( --space-10 );
	padding: var( --space-9 ) var( --space-17 ) var( --space-9 ) var( --space-11 );
	border-radius: var( --radius-pill );
	background: var( --surface-page );
	box-shadow: var( --shadow-lift-2 );
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

.kampan-hero__stamp-num {
	display: grid;
	flex: none;
	place-items: center;
	width: var( --space-34 );
	height: var( --space-34 );
	border-radius: var( --radius-circle );
	background: var( --gradient-honey );
	font-size: var( --fs-12 );
	font-weight: var( --fw-heavy );
	color: var( --c-cocoa-900 );
}

.kampan-hero__scallop {
	display: block;
	width: 100%;
	height: 34px;
	margin-bottom: -1px;
	fill: var( --surface-page );
}

/* ---------------------------------------------------------------
 * 2. Package picker
 * ------------------------------------------------------------- */

.kampan-pick {
	padding: var( --space-80 ) 0 var( --space-40 );
	background: var( --surface-page );
}

.kampan-pick__intro {
	max-width: 720px;
	margin-bottom: var( --space-44 );
}

.kampan-pick__lead {
	margin-top: var( --space-16 );
	font-size: var( --fs-18 );
}

.kampan-pick__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-36 );
	align-items: start;
}

.kampan-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-26 );
	align-items: stretch;
}

.kampan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-page );
	box-shadow: var( --shadow-card );
	transition: transform .28s, box-shadow .28s;
}

.kampan-card:hover {
	transform: translateY( -6px );
}

.kampan-card.is-picked {
	box-shadow: var( --shadow-float ), var( --ring-honey-2-5 );
}

.kampan-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3.05;
	background: var( --surface-raised );
}

/* The thumbnail comes from the shared geras_card_image() helper, so it carries
   .product-card__img — match on the position instead of the class, and let it
   fill the 4:3.05 box whatever the uploaded image's own ratio is. */
.kampan-card__media > img,
.kampan-card__media > .product-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.kampan-card__badge {
	position: absolute;
	top: var( --space-14 );
	left: var( --space-14 );
	padding: var( --space-6 ) var( --space-13 );
	border-radius: var( --radius-pill );
	background: var( --c-paper-a94 );
	box-shadow: var( --shadow-card );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-badge );
	text-transform: uppercase;
}

.kampan-card__badge--green {
	color: var( --color-success );
}

.kampan-card__badge--red {
	color: var( --color-brand-red );
}

.kampan-card__badge--cocoa {
	color: var( --color-heading );
}

.kampan-card__check {
	position: absolute;
	top: var( --space-12 );
	right: var( --space-12 );
	display: grid;
	place-items: center;
	width: var( --space-32 );
	height: var( --space-32 );
	border-radius: var( --radius-circle );
	background: var( --c-paper-a94 );
	color: var( --color-muted );
	box-shadow: var( --shadow-card-12 );
	transition: background .2s, color .2s;
}

.kampan-card__check svg {
	opacity: .35;
	transition: opacity .2s;
}

.kampan-card.is-picked .kampan-card__check {
	background: var( --c-honey-500 );
	color: var( --c-cocoa-900 );
}

.kampan-card.is-picked .kampan-card__check svg {
	opacity: 1;
}

.kampan-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --space-12 );
	padding: var( --space-22 ) var( --space-24 ) var( --space-24 );
}

.kampan-card__title {
	font-size: var( --fs-20 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
}

.kampan-card__text {
	margin: 0;
	font-size: var( --fs-14-5 );
}

.kampan-card__specs {
	display: flex;
	flex-direction: column;
	gap: var( --space-6 );
	font-size: var( --fs-13-5 );
	font-weight: var( --fw-bold );
	color: var( --color-muted );
}

/* Unit price — only rendered when the campaign has prices switched on. */
.kampan-card__price {
	display: flex;
	align-items: baseline;
	gap: var( --space-6 );
	margin: 0;
}

.kampan-card__price strong {
	font-family: var( --font-display );
	font-size: var( --fs-22 );
	font-weight: var( --fw-medium );
	color: var( --color-accent-deep );
}

.kampan-card__price span {
	font-size: var( --fs-13 );
	font-weight: var( --fw-bold );
	color: var( --color-muted );
}

.kampan-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-10 );
	margin-top: auto;
	padding: var( --space-8 );
	border-radius: var( --radius-pill );
	background: var( --c-cocoa-a07 );
}

.kampan-qty[hidden] {
	display: none;
}

.kampan-qty__btn {
	width: var( --space-36 );
	height: var( --space-36 );
	border-radius: var( --radius-circle );
	background: var( --surface-page );
	box-shadow: var( --shadow-qty );
	font-size: var( --fs-19 );
	font-weight: var( --fw-heavy );
	line-height: 1;
	color: var( --color-heading );
}

.kampan-qty__value {
	font-size: var( --fs-15 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

.kampan-card__pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-9 );
	margin-top: auto;
	padding: var( --space-12 ) var( --space-20 );
	border-radius: var( --radius-pill );
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft-2 );
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-black );
	color: var( --c-cocoa-900 );
	transition: background .2s, box-shadow .2s;
}

.kampan-card__pick:hover {
	background: var( --c-honey-300 );
}

.kampan-card.is-picked .kampan-card__pick {
	background: transparent;
	box-shadow: var( --ring-cocoa-soft );
}

/* The campaign has no products tagged yet, or they are all drafts. */
.kampan-pick__empty {
	margin: 0;
	padding: var( --space-40 ) var( --space-28 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-sand );
	font-size: var( --fs-18 );
	text-align: center;
}

/* ---------------------------------------------------------------
 * 3. Order summary panel
 * ------------------------------------------------------------- */

.kampan-summary {
	position: relative;
	overflow: hidden;
	padding: var( --space-32 ) var( --space-30 ) var( --space-34 );
	border-radius: var( --radius-28 );
	background: var( --c-cocoa-700 );
	box-shadow: var( --shadow-float );
	color: var( --c-sand-100 );
}

.kampan-summary__glow {
	position: absolute;
	top: calc( var( --space-80 ) * -1 );
	right: calc( var( --space-70 ) * -1 );
	width: var( --space-220 );
	height: var( --space-220 );
	border-radius: var( --radius-circle );
	background: radial-gradient( circle, var( --c-honey3-a32 ), transparent 70% );
	pointer-events: none;
}

.kampan-summary__title {
	position: relative;
	margin-bottom: var( --space-6 );
	font-size: var( --fs-24 );
	font-weight: var( --fw-560 );
	color: var( --c-paper );
}

.kampan-summary__note {
	position: relative;
	margin-bottom: var( --space-22 );
	font-size: var( --fs-14 );
	opacity: .75;
}

.kampan-summary__lines {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
}

.kampan-summary__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --space-14 );
	padding: var( --space-12 ) 0;
	border-top: 1px solid var( --c-sand-a16 );
}

.kampan-summary__line-name {
	font-size: var( --fs-15 );
	font-weight: var( --fw-bold );
	line-height: var( --lh-135 );
	color: var( --c-paper );
}

.kampan-summary__line-qty {
	font-size: var( --fs-14 );
	font-weight: var( --fw-black );
	white-space: nowrap;
	color: var( --c-honey-300 );
}

.kampan-summary__empty {
	position: relative;
	margin: 0;
	padding: var( --space-16 ) 0;
	border-top: 1px solid var( --c-sand-a16 );
	font-size: var( --fs-15 );
	opacity: .7;
}

.kampan-summary__empty[hidden] {
	display: none;
}

.kampan-summary__total {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --space-14 );
	margin-top: var( --space-18 );
	padding-top: var( --space-18 );
	border-top: 1px solid var( --c-sand-a16 );
}

.kampan-summary__total-label {
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	opacity: .6;
}

.kampan-summary__count {
	font-family: var( --font-display );
	font-size: var( --fs-30 );
	font-weight: var( --fw-medium );
	line-height: 1;
	color: var( --c-honey-300 );
}

/* Grand total, directly under the item count. */
.kampan-summary__total--sum {
	margin-top: 0;
	padding-top: var( --space-12 );
}

.kampan-summary__sum {
	font-family: var( --font-display );
	font-size: var( --fs-24 );
	font-weight: var( --fw-medium );
	line-height: 1;
	color: var( --c-honey-300 );
}

.kampan-summary__cta {
	position: relative;
	margin-top: var( --space-24 );
	padding: var( --space-12 ) var( --space-22 );
	font-size: var( --fs-14 );
}

/* ---------------------------------------------------------------
 * 4. Order form
 * ------------------------------------------------------------- */

.kampan-order {
	padding: var( --space-60 ) 0 var( --space-96 );
	background: var( --surface-page );
}

.kampan-order__head {
	max-width: 900px;
}

.kampan-order__head .kampan-heading {
	margin-bottom: var( --space-30 );
}

.kampan-form {
	max-width: 900px;
}

.kampan-form__panel {
	padding: var( --space-30 ) var( --space-24 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-sand );
}

.kampan-form.is-sent .kampan-form__panel {
	display: none;
}

/* The panel is sand, so the mockup flips the fields to paper and tightens the
   label tracking — the shared .form vocabulary otherwise stays untouched. */
.kampan-form__panel .form__label {
	letter-spacing: var( --ls-caps-sm );
}

.kampan-form__panel .form__consent label {
	align-items: flex-start;
}

.kampan-form__panel .form__consent input {
	margin-top: var( --space-3 );
}

/* The read-only order field the picker writes into. Selector weight has to
   beat .form--on-sand's paper fill, hence the doubled class. */
.form__textarea.kampan-form__summary {
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft-2 );
	font-weight: var( --fw-bold );
}

.form__textarea.kampan-form__summary:focus {
	box-shadow: var( --ring-honey-2 );
}

.kampan-form__sent {
	padding: var( --space-52 ) var( --space-46 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-sand );
	text-align: center;
	animation: kampan-fade-up .4s ease both;
}

.kampan-form__sent[hidden] {
	display: none;
}

.kampan-form__sent-icon {
	display: grid;
	place-items: center;
	width: var( --space-64 );
	height: var( --space-64 );
	margin: 0 auto var( --space-22 );
	border-radius: var( --radius-circle );
	background: var( --gradient-honey );
	box-shadow: var( --shadow-check );
	color: var( --c-cocoa-900 );
}

.kampan-form__sent-title {
	margin-bottom: var( --space-12 );
	font-size: var( --fs-28 );
	font-weight: var( --fw-580 );
}

.kampan-form__sent-text {
	max-width: var( --measure-kampan-sent );
	margin: 0 auto;
	font-size: var( --fs-17 );
}

/* ---------------------------------------------------------------
 * 5. How it works
 * ------------------------------------------------------------- */

.kampan-steps {
	position: relative;
	overflow: hidden;
	padding: var( --space-88 ) 0;
	background: var( --surface-sand );
}

.kampan-steps__confetti {
	position: absolute;
	z-index: 0;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
	pointer-events: none;
}

.kampan-steps__confetti--1 {
	top: 12%;
	left: 5%;
	background: var( --c-honey-500 );
	opacity: .85;
	transform: rotate( 40deg );
}

.kampan-steps__confetti--2 {
	right: 8%;
	bottom: 14%;
	background: var( --c-red-500 );
	opacity: .5;
	transform: rotate( -25deg );
}

.kampan-steps .container {
	position: relative;
	z-index: 1;
}

.kampan-steps__head {
	max-width: 720px;
	margin-bottom: var( --space-44 );
}

.kampan-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-26 );
}

.kampan-step {
	padding: var( --space-30 ) var( --space-28 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-page );
	box-shadow: var( --shadow-card );
}

.kampan-step__num {
	display: grid;
	place-items: center;
	width: var( --space-44 );
	height: var( --space-44 );
	margin-bottom: var( --space-18 );
	border-radius: var( --radius-14 );
	background: var( --surface-cream );
	font-family: var( --font-display );
	font-size: var( --fs-20 );
	font-weight: var( --fw-620 );
	color: var( --color-heading );
}

.kampan-step__title {
	margin-bottom: var( --space-8 );
	font-size: var( --fs-20 );
	font-weight: var( --fw-560 );
}

.kampan-step__text {
	margin: 0;
	font-size: var( --fs-14-5 );
}

/* ---------------------------------------------------------------
 * 6. Motion
 * ------------------------------------------------------------- */

@keyframes kampan-fall {

	0% {
		transform: translateY( -10px );
		opacity: 0;
	}

	12% {
		opacity: .75;
	}

	100% {
		transform: translateY( 78vh );
		opacity: 0;
	}
}

@keyframes kampan-draw {

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes kampan-fade-up {

	from {
		transform: translateY( 14px );
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

/* ---------------------------------------------------------------
 * 7. Breakpoints — the mockup's own 620 / 1100
 * ------------------------------------------------------------- */

@media ( min-width: 621px ) {

	.kampan-hero__facts {
		grid-template-columns: repeat( 3, auto );
	}

	.kampan-cards {
		grid-template-columns: repeat( 2, 1fr );
	}

	.kampan-steps__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.kampan-form__panel {
		padding: var( --space-40 ) var( --space-42 );
	}
}

@media ( min-width: 1101px ) {

	.kampan-hero__grid {
		grid-template-columns: 1.1fr .9fr;
	}

	.kampan-pick__grid {
		grid-template-columns: 1fr var( --measure-kampan-sum );
	}

	.kampan-summary {
		position: sticky;
		top: var( --space-108 );
	}

	.kampan-steps__grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}