/*
 * Quarree B2B Parity styles.
 *
 * Values are taken verbatim from the live site CSS (b2b.css + theme bundle.css,
 * captured 2026-06-10) and verified against live computed styles.
 * Selector adaptations for the staging atomic markup:
 *   .wp-block-group.content-container.b2b-*  ->  .b2b-*           (box chrome recreated below)
 *   .wp-block-gallery                        ->  .b2b-gallery
 *   figure.wp-block-image img                ->  img              (atomic e-image renders a bare <img>)
 *
 * The !important flags are required: the slider boxes and gallery hosts are
 * atomic e-div-blocks, so Elementor's base styles (.elementor .e-div-block-base
 * { padding: 10px; ... }, specificity 0,2,0) and the .e-con CSS-var pipeline
 * (frontend.min.css, loaded after this sheet) win the cascade otherwise.
 */

/* ---------------------------------------------------------------- */
/* Slider box chrome (live: .wp-block-group.content-container base   */
/* with padding-left/right zeroed for the slider boxes)              */
/* ---------------------------------------------------------------- */

.b2b-big-slider,
.b2b-pdf-slider,
.b2b-carousel-slider {
	max-width: 1130px !important;
	position: relative !important;
	border-radius: 30px !important;
	overflow: hidden !important;
	margin: 16px auto !important;
	padding: 16px !important;
}

/* Live: carousel box keeps the white card background; big slider and
   PDF box carry .b2b-bg-transparent on live (default-transparent here). */
.b2b-carousel-slider {
	background-color: #fff;
}

@media (min-width: 1024px) {
	.b2b-big-slider,
	.b2b-pdf-slider,
	.b2b-carousel-slider {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
}

@media (min-width: 1130px) {
	.b2b-big-slider,
	.b2b-pdf-slider,
	.b2b-carousel-slider {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 1129px) {
	.b2b-big-slider {
		margin-bottom: 40px !important;
	}
}

/* ---------------------------------------------------------------- */
/* Big slider (live b2b.css verbatim)                                */
/* ---------------------------------------------------------------- */

.b2b-big-slider .swiper {
	padding: 0 10% !important;
	overflow: visible !important;
}

/* Drag support (request 14b): images must not start a native browser
   drag, or mouse swiping fights the ghost image.
   NOTE (request 14c): wrapper/slide TIMING is live-exact on purpose;
   the 300ms wrapper vs 0.4s slide-scale mismatch creates the live
   "slides over, then pops in" effect. No custom easing overrides. */
.b2b-big-slider .swiper-slide img,
.b2b-carousel-slider .swiper-slide img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

.b2b-big-slider .swiper-wrapper {
	display: flex;
	align-items: center;
}

.b2b-big-slider .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform: scale(0.85);
	opacity: 0.5;
	z-index: 1;
}

.b2b-big-slider .swiper-slide-active {
	transform: scale(1);
	opacity: 1;
}

/* Live: the WP core gallery CSS makes the image FILL the slide
   (figure.wp-block-image img { width/height 100%; object-fit: cover }).
   Verified live computed: img 880x500 = slide box, cover, radius 0.
   The atomic markup has no figure and no gallery CSS, so the fill
   rules live here. !important beats .e-image-base (height: auto)
   and the late-loading atomic base sheet. */
.b2b-big-slider .swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.swiper-button-next,
.swiper-button-prev {
	color: #ffffff !important;
}

.b2b-big-slider .swiper-slide.swiper-slide-next {
	transform: scale(0.85) translateX(-100px);
	z-index: -1;
}

.b2b-big-slider .swiper-slide.swiper-slide-prev {
	transform: scale(0.85) translateX(100px);
	z-index: -1;
}

@media screen and (max-width: 1023px) {
	.b2b-big-slider .swiper-slide {
		height: 300px;
	}
}

/* ---------------------------------------------------------------- */
/* PDF / flipbook section (live b2b.css verbatim)                    */
/* ---------------------------------------------------------------- */

.b2b-pdf-slider {
	text-align: center;
}

/* Cover images act as lightbox openers (real3d-flipbook lightboxCssClass). */
.b2b-flip-de,
.b2b-flip-en {
	cursor: pointer;
}

.b2b-pdf-slider .flipbook-menuBottom,
.b2b-pdf-slider .flipbook-nav,
.b2b-pdf-slider .flipbook-menuTop {
	display: none !important;
}

/* ---------------------------------------------------------------- */
/* Carousel strip (live b2b.css, selectors adapted)                  */
/* ---------------------------------------------------------------- */

/* The gallery host is an atomic e-div-block: zero its base padding so
   the swiper math matches live (live gallery had no padding). */
.b2b-carousel-slider .swiper {
	padding: 0 !important;
	margin-bottom: 0 !important;
}

.b2b-carousel-slider .swiper-slide {
	width: auto;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.b2b-carousel-slider .swiper-slide img {
	height: 240px;
	width: 100% !important;
	object-fit: cover;
	display: block;
}

.b2b-carousel-slider .swiper-notification {
	display: none !important;
}

/* Full-bleed breakout >= 1130. Live used the block-layout trick
   (left: 50% + margin-left: -50vw); here the box is a flex item inside
   an atomic e-flexbox section, where that trick double-shifts (flex
   alignment positions the item before left/margin offsets apply) and
   align-self centering start-aligns overflowing items (browser safe-
   alignment fallback). The CSS only sets the width; the exact edge-to-
   edge position is measured and set as relative `left` in parity.js. */
@media screen and (min-width: 1130px) {
	.b2b-carousel-slider {
		width: 100vw;
		width: calc(100vw - 30px);
		max-width: unset !important;
		border-radius: 0 !important;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1129px) {
	.b2b-carousel-slider .swiper-slide img {
		max-width: unset !important;
	}
}

/* ---------------------------------------------------------------- */
/* Reviews slider (request 19; live b2b.css verbatim, plus atomic    */
/* base overrides)                                                   */
/* ---------------------------------------------------------------- */

/* The swiper/swiper-wrapper/swiper-pagination hosts are atomic
   e-div-blocks, so the late-loading .e-div-block-base rules (padding
   10px, display via --display var) win the cascade against the Swiper
   bundle CSS without !important. */
.b2b-reviews-slider .swiper {
	padding: 0 !important;
	width: 100%;
}

.b2b-reviews-slider .swiper-wrapper {
	display: flex !important;
	padding: 0 !important;
	min-width: 0;
}

.b2b-reviews-slider .swiper-slide {
	flex-shrink: 0 !important;
}

.b2b-reviews-slider .swiper-slide img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Live: dots sit in flow below the slides, not absolutely positioned. */
.b2b-reviews-slider .swiper-pagination {
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	margin-top: 30px;
	padding: 0 !important;
}

.b2b-reviews-slider .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	opacity: 1;
	margin: 0 6px;
	background-color: #000000;
}

.b2b-reviews-slider .swiper-pagination-bullet-active {
	background-color: #ffe07e;
}

/* ---------------------------------------------------------------- */
/* Homepage Magazin-Band spacing (request 19)                        */
/* ---------------------------------------------------------------- */

/* The generic .b2b-pdf-slider box chrome above (margin 16/24 + padding
   16/48) belongs to the /pdfview showcase look wrappers. The homepage
   band section (d184*) spaces itself on the page-wide 24px card rhythm;
   only the marker-class margin survives, the padding goes. Scoped to
   the homepage section class so /pdfview stays as is. */
.e-d184s01-a18c0de .b2b-pdf-slider {
	margin: 24px auto !important;
	padding: 0 !important;
}

@media (max-width: 1023px) {
	.e-d184s01-a18c0de .b2b-pdf-slider {
		margin: 16px auto !important;
	}
}

/* ---------------------------------------------------------------- */
/* Flipbook lightbox hosts (request 19)                              */
/* ---------------------------------------------------------------- */

/* The real3d-flipbook-lite shortcode embeds are pure lightbox openers
   (the visible click targets are the cover images), but their host divs
   render as 20px inline-blocks in wp_footer flow and painted a yellow
   strip below the footer. QBP_Flipbooks now wraps them; the wrapper
   takes them out of flow without display:none so the engine still
   initializes. */
.qbp-flipbook-hosts {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}