.bon-information-page--fuggler>.bon-container {
	width: 100%;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.bon-information-page--fuggler .bon-information-layout,
.bon-information-page--fuggler .bon-information-content,
.bon-information-page--fuggler .bon-information-article,
.bon-information-page--fuggler .bon-information-description {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.bon-information-page--fuggler .bon-information-article {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
}

.bon-information-page--fuggler .bon-information-description {
	display: contents;
}

#information-information.bon-information-page--fuggler {
	overflow-x: clip;
	font-family: 'Stratos LC Web', 'Open Sans', Arial, sans-serif;
}

#information-information.bon-information-page--fuggler * {
	box-sizing: border-box;
}

.bon-fuggler-page {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	background: #ffffff;
}

.bon-fuggler-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bon-fuggler-section {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

/* Hero */
.bon-fuggler-hero {
	--bon-fuggler-hero-top-gap: clamp(-138px, -5.22vw, -39px);
	position: relative;
	z-index: 2;
	overflow: hidden;
	min-height: calc(clamp(320px, 59.427vw, 1141px) + var(--bon-fuggler-hero-top-gap));
	background: #d9d9d9;
}

.bon-fuggler-hero__inner {
	position: relative;
	min-height: calc(clamp(320px, 59.427vw, 1141px) + var(--bon-fuggler-hero-top-gap));
}

.bon-fuggler-hero__scene {
	position: absolute;
	left: 50%;
	top: var(--bon-fuggler-hero-top-gap);
	width: min(100vw, 1920px);
	height: clamp(320px, 59.427vw, 1141px);
	transform: translateX(-50%);
	pointer-events: none;
}

.bon-fuggler-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

img.bon-fuggler-hero__deco {
	position: absolute;
	display: block;
	width: auto;
	max-width: none;
	z-index: 1;
}

img.bon-fuggler-hero__deco--percent {
	top: 32.077%;
	left: 4.5156%;
	width: 12.1565%;
	height: 15.6002%;
}

img.bon-fuggler-hero__deco--symbol-x {
	top: 73.883%;
	left: 6.7188%;
	width: 7.65625%;
	height: 14.3733%;
}

img.bon-fuggler-hero__deco--muzzle-x {
	top: 49.2551%;
	left: 22.3438%;
	width: 9.0106%;
	height: 17.2323%;
}

img.bon-fuggler-hero__deco--arrow {
	top: 79.140%;
	left: 22.3438%;
	width: 5.15625%;
	height: 10.0788%;
}

img.bon-fuggler-hero__deco--toy {
	top: 34.9694%;
	left: 30.7292%;
	width: 37.8646%;
	height: 63.7161%;
	z-index: 4;
}

img.bon-fuggler-hero__deco--muzzle-right {
	top: 26.3804%;
	left: 77.4479%;
	width: 11.0442%;
	height: 17.7132%;
}

img.bon-fuggler-hero__deco--crown {
	top: 58.0193%;
	left: 87.7083%;
	width: 6.4583%;
	height: 13.6722%;
}

img.bon-fuggler-hero__deco--spray {
	top: 72.9186%;
	left: 69.2188%;
	width: 12.0313%;
	height: 17.5285%;
}

img.bon-fuggler-hero__logo {
	position: absolute;
	display: block;
	top: 24.2769%;
	left: 23.5417%;
	width: 52.9167%;
	height: 23.1376%;
	z-index: 3;
}

.bon-fuggler-hero__tagline {
	position: absolute;
	top: 66.1701%;
	left: 17.8589%;
	width: 18.5417%;
	height: 9.4655%;
	margin: 0;
	font-weight: 700;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 0;
	text-align: center;
	color: #111111;
	transform: rotate(-5.12deg);
	z-index: 2;
}

.bon-fuggler-hero__copy {
	position: absolute;
	top: 58.0193%;
	left: 63.3333%;
	width: 20.7813%;
	z-index: 2;
	pointer-events: auto;
}

.bon-fuggler-hero__text {
	margin: 0 0 24px;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #111111;
}

.bon-fuggler-hero__button {
	display: inline-block;
	padding: 20px 30px;
	border: none;
	background: #111111;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;

	/* transition: opacity .25s ease, transform .15s ease; */
}

.bon-fuggler-hero__button:hover {
	background: #4c4b4b;
}

.bon-fuggler-hero__button:active {
	transform: scale(0.96);
	transition-duration: .08s;
}

/* Mobile hero layout: frame 390 x 887, percentages recomputed from that box.
   Figma angle -> CSS rotate() is sign-flipped, same convention as the desktop tagline. */
@media (max-width: 767px) {
	.bon-fuggler-hero {
		--bon-fuggler-hero-top-gap: -40px;
		min-height: clamp(700px, 227.4359vw, 1750px);
	}

	.bon-fuggler-hero__inner {
		min-height: clamp(700px, 227.4359vw, 1750px);
	}

	.bon-fuggler-hero__scene {
		height: clamp(700px, 227.4359vw, 1750px);
	}

	img.bon-fuggler-hero__deco--percent {
		top: 92.784%;
		left: 10.769%;
		width: 21.517%;
		height: 7.216%;
		transform: rotate(-24.92deg);
	}

	img.bon-fuggler-hero__deco--symbol-x {
		top: 55.019%;
		left: 83.333%;
		width: 9.487%;
		height: 4.622%;
	}

	img.bon-fuggler-hero__deco--muzzle-x {
		top: 35.923%;
		left: 3.590%;
		width: 16.122%;
		height: 8.058%;
	}

	img.bon-fuggler-hero__deco--arrow {
		top: 52.277%;
		left: 2.831%;
		width: 16.505%;
		height: 8.478%;
		transform: rotate(171deg) scaleX(-1);
	}

	img.bon-fuggler-hero__deco--toy {
		top: 21.759%;
		left: 6.154%;
		width: 87.949%;
		height: 38.671%;
	}

	img.bon-fuggler-hero__deco--muzzle-right {
		top: 37.209%;
		left: 77.179%;
		width: 18.670%;
		height: 7.825%;
	}

	img.bon-fuggler-hero__deco--crown {
		top: 12.966%;
		left: 34.103%;
		width: 8.205%;
		height: 4.622%;
	}

	img.bon-fuggler-hero__deco--spray {
		top: 87.937%;
		left: 72.821%;
		width: 21.221%;
		height: 8.084%;
		transform: rotate(66.57deg);
	}

	img.bon-fuggler-hero__logo {
		top: 17.587%;
		left: 4.103%;
		width: 91.795%;
		height: 10.485%;
	}

	.bon-fuggler-hero__tagline {
		top: 60.992%;
		left: 0;
		width: 100%;
		height: 7.441%;
		font-size: 28px;
		line-height: 33px;
		transform: none;
	}

	.bon-fuggler-hero__copy {
		top: 70.011%;
		left: 4.103%;
		width: 91.795%;
		text-align: center;
	}

	.bon-fuggler-hero__text {
		margin: 0 0 16px;
		font-size: 15px;
		line-height: 1.2;
	}
}

/* Section separator strip (torn cardboard edge), overlaid at the top and bottom
   edges of section 2. It's nested INSIDE the section and absolutely positioned
   straddling the seam, rather than sitting in normal flow between sections --
   that way it never affects section height/scroll, and there's never a gap of
   bare page background behind it: the section directly above/below the seam
   always fills the space, and the strip's transparent tear reveals that fill
   instead of the page's own background. */
.bon-fuggler-sec-margin {
	--bon-fuggler-seam-overlap: min(2.083vw, 40px);
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	line-height: 0;
	pointer-events: none;
}

.bon-fuggler-sec-margin--top {
	top: calc(-1 * var(--bon-fuggler-seam-overlap));
}

/* Below a section, the torn edge needs to face the section that follows, so the
   strip is flipped vertically and overlaps the section's bottom edge instead. */
.bon-fuggler-sec-margin--bottom {
	bottom: calc(-1 * var(--bon-fuggler-seam-overlap));
}

img.bon-fuggler-sec-margin__img {
	display: block;
	width: 100%;
	max-width: none;
	height: min(8.177vw, 157px);
	object-fit: cover;
}

.bon-fuggler-sec-margin--bottom img.bon-fuggler-sec-margin__img {
	transform: scaleY(-1);
}

/* Section 2: About the brand */
.bon-fuggler-sec2 {
	position: relative;
	background-color: #cbb89a;
	background-image: url('../image/fuggler/background-section-2.webp');
	background-repeat: repeat-y;
	/* background-size: 100% auto; */
	background-position: top center;
}

.bon-fuggler-sec2__scene {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.bon-fuggler-sec2__inner {
	position: relative;
	z-index: 2;
	padding: 80px 0;
}

.bon-fuggler-sec2__content {
	display: flex;
	align-items: flex-start;
	gap: min(6.25vw, 120px);
	padding: 40px 0 0;
}

.bon-fuggler-sec2__photo {
	flex: 0 0 585px;
	width: 100%;
	max-width: 585px;
}

.bon-fuggler-sec2__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.bon-fuggler-sec2__copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding-top: min(2.6vw, 80px);
}

.bon-fuggler-sec2__title {
	margin: 0 0 24px;
	font-weight: 700;
	font-size: 96px;
	line-height: 1;
	letter-spacing: 0;
	text-align: start;
	color: #111111;
}

.bon-fuggler-sec2__text {
	position: relative;
	color: #111111;
}

.bon-fuggler-sec2__text p {
	margin: 0 0 16px;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0;
}

.bon-fuggler-sec2__text p:last-child {
	margin-bottom: 0;
}

img.bon-fuggler-sec2__deco {
	position: absolute;
	display: block;
	width: auto;
	max-width: none;
	z-index: 1;
	pointer-events: none;
}

img.bon-fuggler-sec2__deco--star {
	top: min(14.474vw, 278px);
	left: 89.63%;
	width: 6.39%;
	height: min(7.357vw, 141.256px);
	z-index: 4;
}

img.bon-fuggler-sec2__deco--heart {
	top: min(28.229vw, 742px);
	left: 83.021%;
	width: 4.528%;
	height: min(3.307vw, 63.492px);
}

img.bon-fuggler-sec2__deco--now {
	top: min(51.175vw, 758.56px);
	left: 14.084%;
	width: 7.357%;
	height: min(5.917vw, 113.6px);
}

img.bon-fuggler-sec2__bottom-img {
	display: block;
	width: 648px;
	max-width: none;
	aspect-ratio: 648 / 416;
	height: auto;
	object-fit: cover;
	margin: 20px 0 0 calc(100% - 648px);
}


@media (max-width: 767px) {
	img.bon-fuggler-sec-margin__img {
		height: 22.133vw;
	}

	.bon-fuggler-sec-margin {
		--bon-fuggler-seam-overlap: 5.64vw;
	}

	.bon-fuggler-sec2__inner {
		padding: 0;
	}

	.bon-fuggler-sec2__content {
		position: relative;
		display: flow-root;
		padding: 0;
	}

	.bon-fuggler-sec2__photo {
		position: absolute;
		top: 48.608vw;
		left: 50%;
		transform: translateX(-50%);
		width: 81.88vw;
		max-width: none;
		flex: none;
	}

	.bon-fuggler-sec2__copy {
		display: contents;
	}

	.bon-fuggler-sec2__title {
		position: absolute;
		top: 28.51vw;
		left: 22.133%;
		width: 59.467%;
		margin: 0;
		font-size: 48px;
		text-align: center;
		white-space: nowrap;
	}

	/* 16px both sides, matching .bon-container's own fixed side padding,
	   instead of the design's slightly asymmetric 4.267%/0.533% split. */
	.bon-fuggler-sec2__text {
		margin: 144.688vw 16px 0;
		width: auto;
	}

	.bon-fuggler-sec2__text p {
		font-size: 15px;
	}

	/* Stays in normal flow (see the base rule above for why), so the gap
	   after the text stays correct at any width even though the paragraphs
	   wrap to more lines at narrower ones (fixed font-size). */
	img.bon-fuggler-sec2__bottom-img {
		width: 96.267vw;
		max-width: none;
		align-self: auto;
		margin: 24px 0 0 calc(100% - 96.267vw);
	}

	img.bon-fuggler-sec2__deco--heart {
		top: 42.933vw;
		left: 6.933%;
		width: 14.384vw;
		height: 10.504vw;
	}

	img.bon-fuggler-sec2__deco--now {
		display: none;
	}

	img.bon-fuggler-sec2__deco--star {
		top: 214.533vw;
		left: 78.4%;
		width: 16.509vw;
		height: 19.008vw;
	}
}


.bon-fuggler-sec3 {
	position: relative;
	padding: clamp(60px, 7vw, 140px) 0 clamp(90px, 9vw, 180px);
	background-image: url('../image/fuggler/section-3/background-section-3.webp');
	background-repeat: repeat-y;
	background-position: top center;
}

.bon-fuggler-sec3__title {
	margin: 0 0 clamp(24px, 3.125vw, 60px);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 96px);
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	color: #111111;
}

.bon-fuggler-sec3__viewport {
	position: relative;
}

.bon-fuggler-sec3__track {
	max-width: calc(100% - clamp(80px, 6.25vw, 120px));
	margin: 0 auto;
	overflow: hidden;
}

.bon-fuggler-sec3__track .swiper-container,
.bon-fuggler-sec3__track .swiper-wrapper {
	height: 100%;
}

/* Every slide keeps the same real box size (the "active" size) so Swiper's
   layout math never reacts to a size change -- the smaller "inactive" look
   is pure visual scale, box model untouched (same technique as .pm-collect). */
.bon-fuggler-sec3__slide {
	width: clamp(220px, 18.75vw, 360px);
	transform: scale(.837);
	opacity: .75;
	transition: transform .3s ease, opacity .3s ease;
}

.swiper-slide-active.bon-fuggler-sec3__slide {
	transform: scale(1);
	opacity: 1;
}

.bon-fuggler-sec3__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 360 / 500;
	overflow: hidden;
	background-image: url('../image/fuggler/section-3/card-background.webp');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
	text-decoration: none;
}

.bon-fuggler-sec3__card:hover img {
	transform: scale(1.025);
}

/* Inactive cards get a translucent white wash + hairline border on top of
   the same card art, which is what mutes the whole card (frame AND photo)
   next to the active (vivid) centre card in the mockup. A ::after overlay
   (rather than the card's own background-color) is what reaches the photo
   too -- the <img> is a sibling painted after the card's own background,
   so a plain background-color underneath it would stay hidden behind it. */
.bon-fuggler-sec3__card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bon-fuggler-sec3__slide:not(.swiper-slide-active) .bon-fuggler-sec3__card {
	border: 0.84px solid #ffffff57;
}

.bon-fuggler-sec3__slide:not(.swiper-slide-active) .bon-fuggler-sec3__card::after {
	background-color: #ffffff57;
}

.bon-fuggler-sec3__card img {
	position: absolute;
	background: transparent;
	left: 6.11%;
	right: 6.11%;
	top: 4%;
	height: 83%;
	object-fit: cover;
	transition: transform .3s ease;
}

.bon-fuggler-sec3__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 25px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-align: left;
	color: #111111;
}

.bon-fuggler-sec3__arrow {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 4;
	width: clamp(32px, 2.7vw, 52px);
	height: auto;
	transform: translateY(-50%);
	cursor: pointer;
	transition: transform .15s ease;
}

.bon-fuggler-sec3__arrow--next {
	left: auto;
	right: 0;
}

.bon-fuggler-sec3__arrow:active {
	transform: translateY(-50%) scale(.85);
	transition-duration: .08s;
}

.bon-fuggler-sec3 .swiper-pagination {
	position: relative;
	bottom: auto;
	left: auto;
	z-index: 1;
	margin-top: 28px;
	text-align: center;
}

.bon-fuggler-sec3 .swiper-pagination-bullet {
	background: #00000054;
	opacity: 1;
}

.bon-fuggler-sec3 .swiper-pagination-bullet-active {
	background: #000000;
	opacity: 1;
}

@media (max-width: 767px) {
	.bon-fuggler-sec3__title {
		padding: 0 16px;
		font-size: clamp(28px, 9vw, 40px);
	}

	.bon-fuggler-sec3__viewport .bon-fuggler-sec3__arrow {
		display: none;
	}

	.bon-fuggler-sec3__track {
		max-width: none;
	}

	.bon-fuggler-sec3__slide {
		width: 43.5vw;
		transform: scale(.8);
		opacity: .6;
	}

	.swiper-slide-active.bon-fuggler-sec3__slide {
		transform: scale(1);
		opacity: 1;
	}

	.bon-fuggler-sec3__caption {
		font-size: 13px;
	}
}


.bon-fuggler-sec4 {
	position: relative;
	padding: clamp(60px, 7vw, 140px) 0 90px;
	background-image: url('../image/fuggler/section-4/background-section-4.webp');
	background-repeat: repeat-y;
}

.bon-fuggler-sec4__scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

img.bon-fuggler-sec4__deco {
	position: absolute;
	display: block;
	max-width: none;
}

img.bon-fuggler-sec4__deco--muzzle-x {
	top: 120px;
	left: clamp(55px, 10.05vw, 193px);
	width: clamp(95px, 9.01vw, 173px);
	height: clamp(108px, 10.24vw, 197px);
	transform: rotate(6.03deg);
}

img.bon-fuggler-sec4__deco--percent {
	top: clamp(270px, 25.57vw, 691px);
	left: clamp(54px, 5.16vw, 99px);
	width: clamp(128px, 12.15vw, 233px);
	height: clamp(98px, 9.27vw, 178px);
}

img.bon-fuggler-sec4__deco--symbol-x {
	top: clamp(499px, 57.24vw, 1007px);
	left: clamp(253px, 23.96vw, 460px);
	width: clamp(81px, 7.66vw, 147px);
	height: clamp(90px, 8.54vw, 164px);
}

img.bon-fuggler-sec4__deco--spray {
	top: clamp(413px, 39.11vw, 951px);
	left: clamp(376px, 75.39vw, 1313px);
	width: clamp(127px, 12.03vw, 231px);
	height: clamp(110px, 10.42vw, 200px);
	transform: rotate(-66.57deg);
}

img.bon-fuggler-sec4__deco--muzzle-right {
	top: clamp(118px, 11.15vw, 214px);
	left: clamp(401px, 78.86vw, 1499px);
	width: clamp(117px, 11.04vw, 212px);
	height: clamp(111px, 10.53vw, 202px);
	transform: rotate(-57.62deg);
}

.bon-fuggler-sec4__inner {
	position: relative;
	z-index: 2;
}

.bon-fuggler-sec4__title {
	margin: 0 0 clamp(28px, 3.5vw, 64px);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 96px);
	line-height: 1.04;
	letter-spacing: 0;
	text-align: center;
	color: #111111;
}

.bon-fuggler-sec4__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4.5vw, 64px) clamp(12px, 1.25vw, 24px);
	max-width: min(1000px, 100%);
	margin: 0 auto;
}

.bon-fuggler-sec4__card {
	position: relative;
	display: block;
	aspect-ratio: 302 / 257;
	border-radius: 8px;
	text-decoration: none;
}

.bon-fuggler-sec4__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.bon-fuggler-sec4__card:hover img {
	transform: scale(1.025);
}


.bon-fuggler-sec4__badge {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	width: 88%;
	aspect-ratio: 508 / 124;
	background-image: url('../image/fuggler/section-4/button-card.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: #ffffff;
}

.bon-fuggler-sec4__head {
	display: block;
	width: clamp(280px, 28.28vw, 543px);
	max-width: none;
	height: auto;
	margin: clamp(32px, 4vw, 72px) auto 0;
}

@media (max-width: 767px) {
	.bon-fuggler-sec4 {
		padding-top: 48px;
		padding: clamp(60px, 7vw, 140px) 0 50px;
	}

	.bon-fuggler-sec4__title {
		padding: 0 16px;
		font-size: clamp(28px, 9vw, 40px);
		margin-bottom: 32px;
	}

	.bon-fuggler-sec4__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 12px;
		padding: 0 16px;
	}

	img.bon-fuggler-sec4__deco--muzzle-x {
		top: 10.5%;
		left: 84.2%;
		width: clamp(55px, 25.68vw, 96px);
		height: clamp(62px, 29.19vw, 109px);
	}

	img.bon-fuggler-sec4__deco--symbol-x {
		top: 5.4%;
		left: 12.2%;
		width: clamp(25px, 11.73vw, 44px);
		height: clamp(28px, 13.07vw, 49px);
		transform: none;
	}

	img.bon-fuggler-sec4__deco--muzzle-right {
		top: 5%;
		left: -10%;
		width: clamp(57px, 26.69vw, 100px);
		height: clamp(54px, 25.44vw, 95px);
		transform: rotate(-57.62deg);
	}

	img.bon-fuggler-sec4__deco--percent {
		top: 78.3%;
		left: 6.6%;
		width: clamp(46px, 21.65vw, 81px);
		height: clamp(35px, 16.51vw, 62px);
		transform: rotate(24.92deg);
	}

	img.bon-fuggler-sec4__deco--spray {
		top: 78.3%;
		left: 73.4%;
		width: clamp(40px, 18.89vw, 71px);
		height: clamp(35px, 16.37vw, 61px);
		transform: rotate(8deg);
	}

	.bon-fuggler-sec4__head {
		width: 55vw;
		margin-top: 40px;
	}
}

.bon-fuggler-sec5 {
	position: relative;
	padding: clamp(60px, 7vw, 140px) 0 0;
	background-image: url('../image/fuggler/section-5/background-section-5.webp');
	background-repeat: repeat-y;
	background-position: top center;
	overflow: hidden;
}

.bon-fuggler-sec5__scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

img.bon-fuggler-sec5__deco {
	position: absolute;
	display: block;
	max-width: none;
}

img.bon-fuggler-sec5__deco--pic1 {
	top: 10%;
	left: clamp(45px, 8.13vw, 156px);
	width: clamp(72px, 6.82vw, 131px);
	height: clamp(80px, 7.6vw, 146px);
}

img.bon-fuggler-sec5__deco--pic2 {
	top: 10%;
	left: clamp(401px, 71.85vw, 1380px);
	width: clamp(109px, 10.31vw, 198px);
	height: clamp(97px, 9.17vw, 176px);
}

img.bon-fuggler-sec5__deco--pic3 {
	top: clamp(280px, 26.51vw, 709px);
	left: clamp(38px, 6.88vw, 132px);
	width: clamp(115px, 10.89vw, 209px);
	height: clamp(118px, 11.2vw, 215px);
}

img.bon-fuggler-sec5__deco--pic4 {
	top: clamp(434px, 41.09vw, 989px);
	left: clamp(401px, 72.86vw, 1399px);
	width: clamp(80px, 7.6vw, 146px);
	height: clamp(79px, 7.5vw, 144px);
}

img.bon-fuggler-sec5__deco--pic5 {
	top: clamp(485px, 45.89vw, 1081px);
	left: clamp(101px, 18.39vw, 353px);
	width: clamp(72px, 6.82vw, 131px);
	height: clamp(44px, 4.17vw, 80px);
}

.bon-fuggler-sec5__inner {
	position: relative;
	z-index: 2;
}

.bon-fuggler-sec5__title {
	margin: 0 0 clamp(28px, 3.5vw, 64px);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 96px);
	line-height: 1.04;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	color: #111111;
}

.bon-fuggler-sec5__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.875vw, 36px);
	max-width: min(1310px, 100%);
	margin: 0 auto clamp(32px, 4.5vw, 88px);
}

.bon-fuggler-sec5__card {
	position: relative;
	aspect-ratio: 423 / 251;
	transition: transform .3s ease;
	background-image: url('../image/fuggler/section-5/background-card.svg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15% 13% 8%;
}

.bon-fuggler-sec5__card:hover {
	transform: scale(1.02);
}

.bon-fuggler-sec5__card-title {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	color: #111111;
}

.bon-fuggler-sec5__card-text {
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: center;
	color: #111111;
}

/* Lives as the 2nd DOM child of .bon-fuggler-sec5__cards (between card 1
   and card 2) so mobile -- a single-column grid -- naturally renders it
   right there with no extra markup. On desktop (3-column grid) `order`
   pushes it after all 3 cards despite its DOM position, and `grid-column:
   1 / -1` spans it full width in its own row below them. */
.bon-fuggler-sec5__big-image {
	display: block;
	order: 4;
	grid-column: 1 / -1;
	width: clamp(360px, 40vw, 768px);
	max-width: none;
	height: auto;
	margin: 0 auto;
}

/* ---------- "BEST LOVED" marquee ---------- */

.bon-fuggler-marquee {
	position: relative;
	height: clamp(65px, 5.47vw, 105px);
	overflow: hidden;
}

.bon-fuggler-marquee__bg-track {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: flex;
	height: 100%;
	width: max-content;
	animation: bon-fuggler-marquee 22s linear infinite;
}

.bon-fuggler-marquee__bg-img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

.bon-fuggler-marquee__track {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	height: 100%;
	width: max-content;
	animation: bon-fuggler-marquee 22s linear infinite;
}

.bon-fuggler-marquee__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 20px;
	font-weight: 700;
	font-size: clamp(16px, 2vw, 32px);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: #111111;
	white-space: nowrap;
}

.bon-fuggler-marquee__icon {
	width: clamp(24px, 2.5vw, 44px);
	height: auto;
	flex: 0 0 auto;
}

@keyframes bon-fuggler-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	.bon-fuggler-sec5 {
		padding-bottom: clamp(120px, 6vw, 80px);
	}

	.bon-fuggler-sec5__title {
		padding: 0 16px;
		font-size: clamp(28px, 9vw, 40px);
		margin-bottom: 32px;
	}

	.bon-fuggler-sec5__cards {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 16px;
		margin-bottom: 32px;
	}

	.bon-fuggler-sec5__card {
		aspect-ratio: auto;
		padding: 34px 16% 24px;
	}

	.bon-fuggler-sec5__big-image {
		order: 0;
		grid-column: auto;
		width: clamp(280px, 95.47vw, 358px);
	}

	/* Mobile sizes are the desktop viewBox scaled by the same ratio as the
	   pasted (pre-rotation) width, since each pic's rotation is baked into
	   its file and the pasted numbers are consistently the UNROTATED rect
	   -- confirmed by cross-checking e.g. pic3's own <rect> (141.502 x
	   162.917, matching the desktop chat value exactly) against its mobile
	   value (37.449 x 43.116): both dimensions shrink by the same ~0.2647
	   factor, which is what's applied to the desktop viewBox (209x215) to
	   get the mobile render size here. Positions cross-validate against
	   the mobile mockup (left/right side and top ordering both match), so
	   are used directly, pic3's own top (3810.2px, the smallest) as y=0. */
	img.bon-fuggler-sec5__deco--pic1 {
		top: clamp(200px, 140.48vw, 357px);
		left: clamp(15px, 7.2vw, 27px);
		width: clamp(35px, 16.93vw, 64px);
		height: clamp(39px, 18.88vw, 71px);
	}

	img.bon-fuggler-sec5__deco--pic2 {
		top: clamp(400px, 286.88vw, 1176px);
		left: clamp(46px, 34.93vw, 131px);
		width: clamp(70px, 33.9vw, 127px);
		height: clamp(62px, 30.13vw, 113px);
	}

	img.bon-fuggler-sec5__deco--pic3 {
		top: 100px;
		left: clamp(12px, 8.8vw, 33px);
		width: clamp(30px, 14.67vw, 55px);
		height: clamp(31px, 15.2vw, 57px);
	}

	img.bon-fuggler-sec5__deco--pic4 {
		top: clamp(200px, 139.68vw, 374px);
		left: clamp(114px, 82.4vw, 359px);
		width: clamp(29px, 14.13vw, 53px);
		height: clamp(29px, 14.03vw, 53px);
	}

	img.bon-fuggler-sec5__deco--pic5 {
		top: clamp(6px, 3.95vw, 15px);
		left: clamp(109px, 79.2vw, 397px);
		width: clamp(40px, 19.2vw, 72px);
		height: clamp(24px, 11.73vw, 44px);
	}

	.bon-fuggler-marquee__item {
		font-size: 18px;
	}
}


.bon-fuggler-sec6 {
	position: relative;
	padding: clamp(60px, 7vw, 140px) 0 clamp(60px, 25vw, 420px);
	background-image: url('../image/fuggler/section-6/background-section-6.webp');
	background-repeat: repeat-y;
	background-position: top center;
}

.bon-fuggler-sec6__inner {
	position: relative;
}

.bon-fuggler-sec6__title {
	margin: 0 0 clamp(28px, 3.5vw, 64px);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 96px);
	line-height: 1.04;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	color: #111111;
}

.bon-fuggler-sec6__card--5 .bon-fuggler-sec6__card-caption {
	font-size: 20px;
}

.bon-fuggler-sec6__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 2.0556fr repeat(2, 1fr);
	gap: clamp(6px, .625vw, 12px);
	grid-template-areas:
		"c1 c2 c5 c6 c7"
		"c3 c4 c5 c8 c9";
	width: 100%;
}

.bon-fuggler-sec6__card {
	position: relative;
	display: block;
	aspect-ratio: 210 / 293;
	overflow: hidden;
	background-image: url('../image/fuggler/section-6/sec-6-background-card.webp');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
	text-decoration: none;
}

.bon-fuggler-sec6__card--1 { grid-area: c1; }
.bon-fuggler-sec6__card--2 { grid-area: c2; }
.bon-fuggler-sec6__card--3 { grid-area: c3; }
.bon-fuggler-sec6__card--4 { grid-area: c4; }
.bon-fuggler-sec6__card--5 { grid-area: c5; }
.bon-fuggler-sec6__card--6 { grid-area: c6; }
.bon-fuggler-sec6__card--7 { grid-area: c7; }
.bon-fuggler-sec6__card--8 { grid-area: c8; }
.bon-fuggler-sec6__card--9 { grid-area: c9; }

.bon-fuggler-sec6__card img {
	position: absolute;
	left: 7.14%;
	right: 7.14%;
	top: 4%;
	height: 78%;
	object-fit: cover;
	transition: transform .3s ease;
}

.bon-fuggler-sec6__card:hover img {
	transform: scale(1.025);
}

.bon-fuggler-sec6__card-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 0 8%;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	color: #111111;
}

@media (max-width: 767px) {
	.bon-fuggler-sec6 {
		padding: 48px 0;
	}

	.bon-fuggler-sec6__title {
		padding: 0 16px;
		font-size: clamp(28px, 9vw, 40px);
		margin-bottom: 32px;
	}

	.bon-fuggler-sec6__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto) auto;
		gap: 12px;
		padding: 0 16px;
		grid-template-areas:
			"c5 c5"
			"c1 c2"
			"c3 c4"
			"c6 c7"
			"c8 c9";
	}

}

body:has(.bon-fuggler-page) .bon-header__logo-img:not(.bon-header__logo-img--about):not(.bon-header__logo-img--alt) {
	display: block;
}

body:has(.bon-fuggler-page) .bon-header__logo-img--about {
	display: none;
}

body:has(.bon-fuggler-page) .bon-header__catalog {
	background: #A54BD9;
}

body:has(.bon-fuggler-page) .bon-header-search__control {
	background: #FFFFFF;
}