/* [aob_products] — Figma "services" (6007:10755). Dark photo section, slider of product cards: 1.12 cards on phones, 2.2 on tablets, 3, then 4 from 1240 px. */
:not(#_) .aob-products {
	--aob-per-view: 1.12;
	--aob-slide-gap: 16px;
	position: relative;
	overflow: hidden;
	padding-top: 120px;
	background: var(--aob-black-3);
	color: var(--aob-light-1);
	font-family: var(--aob-font-body);
}
@media (min-width: 640px) { :not(#_) .aob-products { --aob-per-view: 2.2; --aob-slide-gap: 20px; } }
@media (min-width: 960px) { :not(#_) .aob-products { --aob-per-view: 3; } }
@media (min-width: 1240px) { :not(#_) .aob-products { --aob-per-view: 4; padding-top: 142px; } }

/* Background: blurred photo under a dark gradient, gold arc on top (same arc as [aob_why_us]). */
:not(#_) .aob-products__bg { position: absolute; inset: 0; pointer-events: none; }
:not(#_) .aob-products__photo { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: blur(6.5px); }
:not(#_) .aob-products__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 16, 14, 0.84) 3.6%, rgba(17, 16, 14, 0.95) 23.1%, rgba(17, 16, 14, 0.95) 80.7%, rgba(17, 16, 14, 0.84) 100%); }
:not(#_) .aob-products__curve { position: absolute; left: 0; top: -1px; width: 100%; height: auto; }
:not(#_) .aob-products__inner { position: relative; display: flex; flex-direction: column; gap: var(--aob-section-gap); }

/* Header: title left, arrows + button right (Figma), stacked on phones. */
:not(#_) .aob-products__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
:not(#_) .aob-products__title { flex: 1 1 100%; max-width: 760px; margin: 0; font-family: var(--aob-font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--aob-white); }
:not(#_) .aob-products__accent { color: var(--aob-brand); }
:not(#_) .aob-products__title-line { display: block; }
@media (min-width: 1100px) { :not(#_) .aob-products__title { flex: 1 1 0; } }
:not(#_) .aob-products__controls { display: flex; gap: 10px; }
:not(#_) .aob-products__more { height: 58px; font-size: 18px; white-space: nowrap; }
@media (min-width: 1100px) { :not(#_) .aob-products__head { flex-wrap: nowrap; } }
/* No JS or everything fits: the arrows have nothing to do. */
:not(#_) .aob-products:not(.aob-is-ready) .aob-products__controls,
:not(#_) .aob-products.aob-is-static .aob-products__controls { display: none; }
:not(#_) .aob-products__controls { margin-left: 0; }
@media (min-width: 1100px) { :not(#_) .aob-products__controls { margin-left: auto; margin-right: 24px; } }

/* The arrow SVG is 68×68 (48 px ring + glow); negative offsets keep the layout box at 48×48. */
:not(#_) .aob-products__arrow { position: relative; display: block; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity 0.2s, filter 0.2s; }
:not(#_) .aob-products__arrow img { position: absolute; left: -10px; top: -8px; width: 68px; height: 68px; max-width: none; pointer-events: none; }
:not(#_) .aob-products__arrow:hover:not(:disabled) { filter: brightness(1.25); }
:not(#_) .aob-products__arrow:disabled { opacity: 0.35; cursor: default; }
:not(#_) .aob-products__arrow:focus-visible, :not(#_) .aob-products__track:focus-visible { outline: 2px solid var(--aob-white); outline-offset: 4px; border-radius: 16px; }

/* Track: native scroll + snap, so touch swipes and trackpads are smooth; arrows and mouse drag only drive scrollLeft. */
:not(#_) .aob-products__track {
	display: flex;
	gap: var(--aob-slide-gap);
	padding-block: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
:not(#_) .aob-products__track::-webkit-scrollbar { display: none; }
:not(#_) .aob-products__track.aob-is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
@media (prefers-reduced-motion: no-preference) { :not(#_) .aob-products__track { scroll-behavior: smooth; } }
:not(#_) .aob-products__slide { flex: 0 0 calc((100% - (var(--aob-per-view) - 1) * var(--aob-slide-gap)) / var(--aob-per-view)); min-width: 0; scroll-snap-align: start; display: flex; }

/* Card */
:not(#_) .aob-products__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--aob-light-2);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--aob-light-1), var(--aob-light-2));
	color: var(--aob-black-3);
	transition: transform 0.35s var(--aob-btn-ease), box-shadow 0.35s var(--aob-btn-ease);
}
@media (hover: hover) { :not(#_) .aob-products__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); } }
/* Product photos have a white background; multiply lets the card gradient show through. */
:not(#_) .aob-products__media { display: flex; align-items: center; justify-content: center; height: 229px; padding: 20px 24px 8px; box-sizing: border-box; }
:not(#_) .aob-products__media img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.5s var(--aob-btn-ease); -webkit-user-drag: none; }
@media (hover: hover) { :not(#_) .aob-products__card:hover .aob-products__media img { transform: scale(1.05); } }

:not(#_) .aob-products__body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 24px; padding: 16px; }
:not(#_) .aob-products__info { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; }
:not(#_) .aob-products__cat { margin: 0; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aob-brand-2); }
:not(#_) .aob-products__name { margin: 0; font-family: var(--aob-font-display); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--aob-black-3); }
:not(#_) .aob-products__dims { margin: 0; font-size: 16px; line-height: 22.4px; color: var(--aob-black-1); }
:not(#_) .aob-products__colors { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
:not(#_) .aob-products__dot { width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--aob-light-3); border-radius: 50%; }
:not(#_) .aob-products__price { margin: auto 0 0; padding-top: 0; font-size: 24px; line-height: 31.2px; letter-spacing: -0.02em; color: var(--aob-black-3); }

/* "Ansehen": the link is stretched over the whole card (::after), so the card is one tap target. */
:not(#_) .aob-products__link { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 6px; background: var(--aob-black-3); font-size: 18px; font-weight: 500; line-height: 23.4px; color: var(--aob-white); text-decoration: none; transition: background-color 0.3s; }
:not(#_) .aob-products__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
:not(#_) .aob-products__link img { display: block; width: 16px; height: 14px; transition: transform 0.3s var(--aob-btn-ease); -webkit-user-drag: none; }
@media (hover: hover) {
	:not(#_) .aob-products__card:hover .aob-products__link { background: var(--aob-black-2); }
	:not(#_) .aob-products__card:hover .aob-products__link img { transform: translateX(4px); }
}
:not(#_) .aob-products__link:focus-visible { outline: 2px solid var(--aob-brand); outline-offset: 2px; }
:not(#_) .aob-products__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
	:not(#_) .aob-products__card, :not(#_) .aob-products__media img, :not(#_) .aob-products__link img { transition: none !important; transform: none !important; }
}