/* Featured appliances band (home page). Five styles; loaded only when the band is shown. */
.kmw-band { overflow: hidden; }
.kmw-band--ring h2, .kmw-band--video h2 { color: #fff; }
.kmw-band__cta { text-align: center; margin-top: 2.2rem; }
.kmw-band__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kmw-band figure { margin: 0; }
.kmw-band figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem .8rem;
	background: linear-gradient(180deg, transparent, rgb(20 13 9 / 78%));
	color: #fff; font: 500 .9rem/1.2 var(--kmw-sans);
}

/* ---- 1. Scrolling ribbon ------------------------------------------------------------------- */
.kmw-marq {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.kmw-marq + .kmw-marq { margin-top: 14px; }
.kmw-marq__track { display: flex; gap: 14px; width: max-content; animation: kmw-marq 70s linear infinite; }
.kmw-marq--rev .kmw-marq__track { animation-direction: reverse; animation-duration: 85s; }
.kmw-marq:hover .kmw-marq__track { animation-play-state: paused; }
@keyframes kmw-marq { to { transform: translateX(calc(-50% - 7px)); } }
.kmw-marq__item {
	position: relative; flex: none; width: clamp(200px, 26vw, 340px); aspect-ratio: 4 / 3;
	border-radius: 18px; overflow: hidden; background: #e9dfd3; box-shadow: var(--kmw-shadow);
}
.kmw-marq__item figcaption { opacity: 0; transition: opacity .3s ease; }
.kmw-marq__item:hover figcaption { opacity: 1; }
@media (hover: none) { .kmw-marq__item figcaption { opacity: 1; } }

/* ---- 2. 3D ring ---------------------------------------------------------------------------- */
.kmw-ring {
	--w: clamp(120px, 18vw, 230px);
	position: relative; height: calc(var(--w) * 1.85); margin-top: .5rem;
	perspective: 2400px; perspective-origin: 50% 38%;
}
.kmw-ring__spin {
	position: absolute; left: 50%; top: 50%;
	width: var(--w); height: calc(var(--w) * .75);
	margin: calc(var(--w) * -.375) 0 0 calc(var(--w) * -.5);
	transform-style: preserve-3d; transform: rotateX(-7deg);
	animation: kmw-ring 48s linear infinite;
}
.kmw-ring:hover .kmw-ring__spin { animation-play-state: paused; }
@keyframes kmw-ring {
	from { transform: rotateX(-7deg) rotateY(0deg); }
	to { transform: rotateX(-7deg) rotateY(-360deg); }
}
.kmw-ring__card {
	position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: #2b1f1a;
	transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--w) * var(--k)));
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

/* ---- 3. Expanding panels ------------------------------------------------------------------- */
.kmw-acc { display: flex; gap: 10px; height: clamp(340px, 46vw, 500px); }
.kmw-acc__panel {
	position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; overflow: hidden; cursor: pointer;
	border-radius: 20px; background: #2b1f1a; color: #fff; text-align: left;
	transition: flex-grow .6s cubic-bezier(.2, .8, .2, 1);
}
.kmw-acc__panel.is-active { flex-grow: 6; cursor: default; }
.kmw-acc__panel .kmw-band__img { position: absolute; inset: 0; transition: transform .8s ease, filter .4s ease; filter: brightness(.7); }
.kmw-acc__panel.is-active .kmw-band__img { filter: none; }
.kmw-acc__panel:hover .kmw-band__img { transform: scale(1.04); }
.kmw-acc__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(20 13 9 / 75%)); pointer-events: none; }
.kmw-acc__label {
	position: absolute; z-index: 1; left: 1.1rem; bottom: 1rem; font: 400 clamp(1.2rem, 2.4vw, 1.8rem)/1.1 var(--kmw-serif);
	white-space: nowrap; transition: opacity .3s ease;
}
.kmw-acc__panel:not(.is-active) .kmw-acc__label {
	left: 50%; bottom: 1rem; transform: translateX(-50%); writing-mode: vertical-rl; transform-origin: center;
	font-size: .95rem; letter-spacing: .06em; opacity: .9;
}
.kmw-acc__panel:focus-visible { outline: 3px solid var(--kmw-accent); outline-offset: 3px; }
@media (max-width: 700px) {
	.kmw-acc { flex-direction: column; height: auto; }
	.kmw-acc__panel { flex: none; height: 70px; transition: height .5s cubic-bezier(.2, .8, .2, 1); }
	.kmw-acc__panel.is-active { height: 280px; }
	.kmw-acc__panel:not(.is-active) .kmw-acc__label { writing-mode: horizontal-tb; left: 1rem; bottom: 50%; transform: translateY(50%); }
}

/* ---- 4. Photo mosaic ----------------------------------------------------------------------- */
.kmw-mos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 17vw, 230px); gap: 12px; }
.kmw-mos__item { position: relative; overflow: hidden; border-radius: 18px; background: #e9dfd3; box-shadow: var(--kmw-shadow); }
.kmw-mos__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.kmw-mos__item:nth-child(4) { grid-column: span 2; }
.kmw-mos__item:nth-child(5), .kmw-mos__item:nth-child(6) { grid-column: span 2; }
.kmw-mos__item:nth-child(5):last-child { grid-column: span 4; }
.kmw-mos__item .kmw-band__img { transition: transform .7s ease; }
.kmw-mos__item:hover .kmw-band__img { transform: scale(1.06); }
.kmw-mos__item figcaption { transform: translateY(100%); transition: transform .35s ease; }
.kmw-mos__item:hover figcaption, .kmw-mos__item:focus-within figcaption { transform: none; }
@media (hover: none) { .kmw-mos__item figcaption { transform: none; } }
@media (max-width: 700px) {
	.kmw-mos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; }
	.kmw-mos__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.kmw-mos__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* ---- 5. Video loop ------------------------------------------------------------------------- */
.kmw-vid {
	position: relative; width: min(100% - 2.5rem, 1100px); margin: 0 auto; aspect-ratio: 16 / 9;
	border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / 50%);
}
.kmw-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.kmw-vid__btn {
	position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgb(0 0 0 / 55%); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
}
.kmw-vid__btn:hover { background: var(--kmw-accent); }
.kmw-vid__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- Motion preferences -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kmw-marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.kmw-marq__track, .kmw-ring__spin { animation: none; }
	.kmw-acc__panel, .kmw-acc__panel .kmw-band__img, .kmw-mos__item .kmw-band__img { transition: none; }
}