/* =========================================================================
 * S7 · Mobile redesign (RU · knigaotebe) — homepage, catalogue and product pages
 * -------------------------------------------------------------------------
 * Everything here is scoped to `.fbm-screen` (added to <body> by the PHP gate
 * on the redesigned screens only) AND to a max-width:767px media query, so
 * the desktop is untouched. Port of redesign/s7-mobile-gb.css on the GB
 * site: same design, this site's Elementor element ids.
 *
 * The blocks rendered by PHP are `.fbm`; they stay display:none outside the
 * media query so a desktop viewport never sees them.
 *
 * Elementor sections are addressed by their `data-id`, which is the stable
 * handle for an element inside a template. The ready-made template (13926)
 * and the builder templates (23137 · 23508, identical ids) differ, so the
 * product-page rules list both; <body> carries `fbm-tpl-book` or
 * `fbm-tpl-builder` where a rule must only hit one of them.
 * ====================================================================== */

.fbm { display: none; }

@media (max-width: 767px) {

/* --- 1 · tokens ------------------------------------------------------- */

.fbm-screen {
	--fbm-ink: #23231E;
	--fbm-body: #1B1B1B;
	--fbm-muted: #7B7B70;
	--fbm-accent: #E05F38;
	--fbm-accent-dark: #cf5531;
	--fbm-link: #3C5EEC;
	--fbm-star: #ED9F2D;
	--fbm-surface: #F7F7F4;
	--fbm-pages: #FDF3EF;
	--fbm-tint: #F4F8FE;
	--fbm-photo: #EFEDE6;
	--fbm-edge: rgba(123, 123, 112, .20);
	--fbm-hair: rgba(123, 123, 112, .10);
	--fbm-gut: 16px;
	--fbm-r: 8px;
}

.fbm-screen .fbm {
	display: block;
	box-sizing: border-box;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--fbm-body);
	background: #fff;
	text-align: left;
}

.fbm-screen .fbm *,
.fbm-screen .fbm *::before,
.fbm-screen .fbm *::after { box-sizing: border-box; }

/* `:where()` keeps the reset at zero specificity, so the spacing rules in the
   sections below win. Written as a plain descendant selector it would be
   0,2,1 and would silently beat every `.block .element { margin }` rule. */
.fbm :where(p, h1, h2, ul, ol, figure) { margin: 0; }
.fbm :where(ul, ol) { padding: 0; list-style: none; }

.fbm-screen .fbm img { display: block; max-width: 100%; }

/* --- 2 · primitives --------------------------------------------------- */

.fbm .fbm-h1 {
	font-size: 27px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--fbm-ink);
	text-wrap: pretty;
}

.fbm .fbm-h2 {
	font-size: 22px;
	line-height: 27px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--fbm-ink);
}

.fbm .fbm-lead {
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -.005em;
	color: var(--fbm-body);
	text-wrap: pretty;
}

.fbm .fbm-muted {
	font-size: 13px;
	line-height: 18px;
	color: var(--fbm-muted);
}

.fbm .fbm-eyebrow {
	font-size: 11px;
	line-height: 15px;
	font-weight: 600;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--fbm-muted);
}

.fbm .fbm-price {
	font-size: 17px;
	line-height: 22px;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--fbm-ink);
}

.fbm .fbm-price-lg { font-size: 20px; line-height: 26px; letter-spacing: -.02em; }

.fbm .fbm-stars {
	color: var(--fbm-star);
	letter-spacing: .5px;
	font-size: 14px;
	line-height: 18px;
}

.fbm .fbm-ctas { display: flex; flex-direction: column; gap: 10px; }

.fbm .fbm-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--fbm-r);
	background: var(--fbm-accent);
	color: #fff;
	font-size: 16px;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease, transform 120ms ease;
}

.fbm .fbm-cta:hover,
.fbm .fbm-cta:focus { background: var(--fbm-accent-dark); color: #fff; }
.fbm .fbm-cta:active { transform: scale(.985); }

.fbm .fbm-cta-2 {
	min-height: 50px;
	background: #fff;
	color: var(--fbm-ink);
	border: 1px solid var(--fbm-edge);
}

.fbm .fbm-cta-2:hover,
.fbm .fbm-cta-2:focus { background: var(--fbm-surface); color: var(--fbm-ink); }

/* Horizontal rails: scroll-snap, no scrollbar, gutter-aligned. */
.fbm .fbm-rail {
	display: flex;
	gap: 14px;
	padding: 0 var(--fbm-gut) 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--fbm-gut);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fbm .fbm-rail::-webkit-scrollbar { height: 0; }
.fbm .fbm-rail > * { flex: none; scroll-snap-align: start; }

.fbm .fbm-raildots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 14px var(--fbm-gut) 0;
}

.fbm .fbm-raildots-dots { display: flex; align-items: center; gap: 7px; }

.fbm .fbm-raildots i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(123, 123, 112, .35);
	transition: width 200ms cubic-bezier(.2, .6, .2, 1), background 200ms;
}

.fbm .fbm-raildots i.is-on { width: 18px; background: var(--fbm-accent); }

.fbm .fbm-raildots span {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: -.005em;
	color: var(--fbm-muted);
}

/* The cloud between the hero photograph and the tinted fold. This is the
   site's own asset (`element-004-horizont.svg`, filled #F4F8FE) at the size
   and position the homepage has always used it at on mobile - not a
   look-alike drawn in CSS. */
.fbm .fbm-scallop {
	position: relative;
	z-index: 2;
	height: 50px;
	margin-top: -75px;
	background: url("../../../uploads/2025/06/element-004-horizont.svg") no-repeat bottom center / 120% auto;
}

/* --- 3 · header ------------------------------------------------------- */

/* Tapping a menu row painted a grey block over the whole button: these links
   carry `-webkit-tap-highlight-color: rgba(0,0,0,.18)`, which the browser
   overlays on the tapped element for the length of the press. Nothing in the
   DOM changes, so it cannot be styled away - the highlight itself has to go. */
.fbm-screen .ue-slide-menu a,
.fbm-screen header.elementor-location-header a,
.fbm-screen .elementor-location-popup a {
	-webkit-tap-highlight-color: transparent;
}

/* The row for the page you are already on was painted solid #646464, behind
   text that stays #23231E - unreadable, and it reads as a stuck button. The
   current item now looks like the others. */
.fbm-screen .ue-slide-menu .current-menu-item > a,
.fbm-screen .ue-slide-menu .current_page_item > a,
.fbm-screen .ue-slide-menu a[aria-current] {
	background-color: transparent !important;
}

/* The site header already carries the burger, wordmark and cart the redesign
   asks for; it only needs the hairline and the tighter row height. */
.fbm-screen header.elementor-location-header .e-con.e-parent:last-child > .e-con {
	border-bottom: 1px solid var(--fbm-hair);
}

/* --- 4 · homepage: hero ----------------------------------------------- */

/* Two classes: the base `.fbm-screen .fbm { background: #fff }` is 0,2,0
   and would otherwise win over a single-class section rule. */
.fbm-screen .fbm.fbm-home-hero { background: var(--fbm-tint); }

.fbm-home-hero .fbm-hero-photo { height: 300px; overflow: hidden; background: var(--fbm-photo); }

.fbm-home-hero .fbm-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
}

/* The cloud and the tinted fold both sit on top of the photograph, exactly as
   the original hero did: the wave band overlaps its last 75 px and the panel
   the last 25 px. Both need a stacking context, or their backgrounds would
   paint underneath the <img> and the wave would read as a strip behind it. */
.fbm-home-hero .fbm-hero-body {
	position: relative;
	z-index: 2;
	background: var(--fbm-tint);
	/* One px up under the wave's solid bottom edge: at fractional device
	   pixel ratios (2.625 / 2.75 on Pixels) the seam between the SVG and the
	   panel otherwise rounds to a hairline of photograph showing through. */
	margin-top: -1px;
	padding: 15px var(--fbm-gut) 26px;
}

.fbm .fbm-rating {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 20px;
}

.fbm .fbm-rating-score { font-weight: 600; color: var(--fbm-ink); }
.fbm .fbm-rating .fbm-stars { font-size: 15px; line-height: 20px; letter-spacing: 1px; }
.fbm .fbm-rating-on { font-size: 14px; color: var(--fbm-muted); }

.fbm a.fbm-rating { text-decoration: none; color: var(--fbm-body); }
.fbm .fbm-yandex { font-weight: 600; letter-spacing: -.01em; font-style: normal; color: var(--fbm-ink); }
.fbm .fbm-yandex i { font-style: normal; color: #FC3F1D; }

.fbm-home-hero .fbm-h1 { font-size: 30px; line-height: 34px; margin-bottom: 12px; }
.fbm-home-hero .fbm-lead { margin-bottom: 20px; }

.fbm .fbm-trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: -.005em;
	color: var(--fbm-muted);
}

.fbm .fbm-trust .fbm-i { flex: none; color: var(--fbm-muted); }

/* --- 5 · homepage: the four-archetype fork ---------------------------- */

.fbm-fork { padding: 28px 0 6px; scroll-margin-top: 72px; }

.fbm-fork .fbm-fork-lead {
	margin: 0 var(--fbm-gut) 18px;
	font-size: 17px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -.015em;
	color: var(--fbm-ink);
	text-wrap: pretty;
}

.fbm-fork .fbm-fork-card {
	width: min(300px, 82vw);
	border: 1px solid var(--fbm-edge);
	border-radius: var(--fbm-r);
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

/* Square, like the product galleries: three of the four card images are
   600x600 and a 170 px band was cutting the tops and bottoms off them.
   `contain` keeps the odd 4:5 one whole as well. */
.fbm-fork .fbm-fork-img { aspect-ratio: 1 / 1; background: var(--fbm-photo); overflow: hidden; }
.fbm-fork .fbm-fork-img img { width: 100%; height: 100%; object-fit: contain; }

.fbm-fork .fbm-fork-body {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fbm-fork .fbm-eyebrow { letter-spacing: .09em; font-size: 12px; line-height: 16px; color: var(--fbm-ink); }

.fbm-fork .fbm-fork-line {
	margin-top: 7px;
	min-height: 40px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.008em;
	color: var(--fbm-body);
	text-wrap: pretty;
}

.fbm-fork .fbm-muted { margin-top: 6px; }
/* Orange, matching the price on the book cards and the catalogue. */
.fbm-fork .fbm-price { margin: 12px 0; color: var(--fbm-accent); }
.fbm-fork .fbm-cta { margin-top: auto; min-height: 48px; font-size: 15px; }

/* --- 5b · homepage: the recipient and bestseller shelves --------------- */

/* Same rail, same dots, same counter as the fork - the cards are lifted out
   of the Swiper and the Owl carousel by the script, which are then hidden. */
.fbm-screen-home [data-id="cf0a538"],
.fbm-screen-home [data-id="cdcf7e6"],
.fbm-screen-pdp [data-id="1b994cf3"] { display: none !important; }

/* The section that follows a shelf usually opens with its own wavy divider,
   and 6 px left the dot row sitting right on it. */
.fbm-shelf { padding: 0 0 32px; }

.fbm-shelf .fbm-shelf-item { display: flex; }

.fbm-shelf .fbm-shelf-item > * {
	width: 100%;
	max-width: 100%;
	margin: 0;
	--margin-top: 0;
	--margin-bottom: 0;
	--margin-left: 0;
	--margin-right: 0;
}

/* The recipient tile nests three containers that each carried a few px of
   side padding for the carousel; in the rail the card edge is the gutter. */
#fbm-shelf-who .fbm-shelf-item { width: min(210px, 58vw); }
#fbm-shelf-who .fbm-shelf-item .e-con { --padding-left: 0; --padding-right: 0; }

#fbm-shelf-best .fbm-shelf-item,
#fbm-shelf-similar .fbm-shelf-item { width: min(250px, 72vw); }

/* The "Personalized Gift" section paints its wavy divider along its own top
   edge, so the air around that wave comes from the shelf above it and the
   section's own top padding. */
#fbm-shelf-best { padding-bottom: 56px; }

/* --- 5c · catalogue: the "Build a Story" tab --------------------------- */

/* The panel stacks bottom-up by default, which puts the video first. The
   order the tab should read in is comic, then book, then the how-to video. */
.fbm-screen-shop [data-id="8333c14"] { flex-direction: column; }
.fbm-screen-shop [data-id="e92c448"] { order: 1; }
.fbm-screen-shop [data-id="87c622a"] { order: 2; }
.fbm-screen-shop [data-id="566173c"] { order: 3; }

/* Same card as the fork and the book cards: white, hairline border, 8 px. */
.fbm-screen-shop [data-id="e92c448"],
.fbm-screen-shop [data-id="87c622a"],
.fbm-screen-shop [data-id="9bd33c6"] {
	background-color: #fff !important;
	border: 1px solid rgba(123, 123, 112, .20);
	border-radius: 8px;
	--padding-top: 14px !important;
	--padding-bottom: 16px !important;
	--padding-left: 14px !important;
	--padding-right: 14px !important;
	--gap: 0px !important;
	--row-gap: 0px !important;
}

/* The Designer tab, same panel shape: the card, then the video. */
.fbm-screen-shop [data-id="a612b77"] { flex-direction: column; }
.fbm-screen-shop [data-id="9bd33c6"] { order: 1; }
.fbm-screen-shop [data-id="f4a8b85"] { order: 2; margin-top: 8px; }

/* The unbound placeholder rows - they name two strangers on the site's
   most expensive product. */
.fbm-screen-shop [data-id="e9834b2"],
.fbm-screen-shop [data-id="81cad13"],
.fbm-screen-shop [data-id="6c991b1"] { display: none !important; }

/* The container's 24 px gap is replaced by the fork card's own rhythm:
   14 above the name, then 7 / 6 / 12 down to the button. */
.fbm-screen-shop [data-id="4656a8c"],
.fbm-screen-shop [data-id="525091e"],
.fbm-screen-shop [data-id="3d08d05"] { margin-bottom: 7px !important; }

.fbm-screen-shop [data-id="9ae1d6f"],
.fbm-screen-shop [data-id="3401bee"] { margin-bottom: 6px !important; }

.fbm-screen-shop [data-id="e92c448"] h2.elementor-heading-title,
.fbm-screen-shop [data-id="87c622a"] h2.elementor-heading-title,
.fbm-screen-shop [data-id="9bd33c6"] h2.elementor-heading-title {
	font-size: 17px;
	line-height: 22px;
	font-weight: 600;
	letter-spacing: -.015em;
	color: #23231E;
}

/* The blue mark added nothing and squeezed the copy into a narrow strip; the
   illustration does that job now and the text gets the full card width. */
.fbm-screen-shop [data-id="b60f9b7"],
.fbm-screen-shop [data-id="e6511ab"] { display: none !important; }

.fbm-screen-shop .fbm-card-illus {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 14px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--fbm-photo);
}

.fbm-screen-shop .fbm-card-facts { margin: 0 0 12px; }

.fbm-screen-shop .fbm-card-facts p.fbm-card-line {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.008em;
	color: var(--fbm-body);
	text-wrap: pretty;
}

/* Scoped past the card's generic `p` rule, which is 0,2,1 and would
   otherwise set these two back to body copy. */
.fbm-screen-shop .fbm-card-facts p.fbm-card-meta {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: normal;
	color: var(--fbm-muted);
}

/* Orange, like the price on the book cards (#E05F38 in the loop template). */
.fbm-screen-shop .fbm-card-facts p.fbm-card-price {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--fbm-accent);
}

.fbm-screen-shop .fbm-card-illus img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fbm-screen-shop [data-id="e92c448"] p,
.fbm-screen-shop [data-id="87c622a"] p {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.008em;
	color: #1B1B1B;
	text-wrap: pretty;
}

.fbm-screen-shop [data-id="e92c448"] .elementor-button,
.fbm-screen-shop [data-id="87c622a"] .elementor-button,
.fbm-screen-shop [data-id="9bd33c6"] .elementor-button {
	border-radius: 8px;
	min-height: 48px;
	font-size: 15px;
	font-weight: 600;
}

/* The how-to video reads as the last step, not as the panel's headline. */
.fbm-screen-shop [data-id="566173c"] { margin-top: 8px; }

/* --- 6 · product page: decision block ---------------------------------- */

.fbm-pdp .fbm-crumbs {
	padding: 11px var(--fbm-gut);
	border-bottom: 1px solid var(--fbm-hair);
	font-size: 13px;
	line-height: 17px;
	color: var(--fbm-muted);
}

.fbm-pdp .fbm-crumbs a { color: var(--fbm-muted); text-decoration: none; }
.fbm-pdp .fbm-crumbs span { margin: 0 2px; }
.fbm-pdp .fbm-crumb-here { color: var(--fbm-ink); }

/* The gallery the product page has always carried above the title: the
   photographs of the printed book, then the cover renders, one per swipe with
   the same dot indicator as every other rail on the site.

   A full-bleed band rather than a true square: capping a square with
   max-height makes the browser shrink the width to keep the ratio, and this
   height is what keeps the whole decision block (photo → CTA) inside the
   390x844 fold the brief measures against. */
.fbm-pdp .fbm-hero-gallery { position: relative; }

.fbm-pdp .fbm-rail-full {
	gap: 0;
	padding: 0;
	scroll-padding-left: 0;
}

/* Square, because the slider artwork is square (600x600 up to 1000x1000) and
   a letterbox band cropped the top and bottom off every cover. `contain`
   rather than `cover` so the handful of 4:3 images on the calendar are shown
   whole too. No max-height here: capping the height of an aspect-ratio box
   makes the browser shrink its width to keep the ratio. */
.fbm-pdp .fbm-hero-square {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--fbm-photo);
	overflow: hidden;
}

.fbm-pdp .fbm-hero-gallery .fbm-raildots { padding-top: 10px; }
.fbm-pdp .fbm-hero-square img { width: 100%; height: 100%; object-fit: contain; }

.fbm-pdp .fbm-decide { padding: 16px var(--fbm-gut) 20px; }
.fbm-pdp .fbm-h1 { margin: 6px 0 8px; }

.fbm-pdp .fbm-reviews { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.fbm-pdp .fbm-reviews-count { font-size: 14px; line-height: 18px; color: var(--fbm-muted); }
.fbm-pdp .fbm-price-lg { margin-bottom: 10px; }
.fbm-pdp .fbm-lead { margin-bottom: 16px; }

.fbm .fbm-proofs {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 14px 0;
	margin-bottom: 16px;
	border-top: 1px solid var(--fbm-hair);
	border-bottom: 1px solid var(--fbm-hair);
}

.fbm .fbm-proofs li { display: flex; gap: 10px; align-items: flex-start; }

.fbm .fbm-proofs .fbm-i { flex: none; margin-top: 1px; color: var(--fbm-muted); }
.fbm .fbm-proofs .fbm-i-star { color: var(--fbm-star); }

.fbm .fbm-proofs span {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.005em;
	color: var(--fbm-body);
	text-wrap: pretty;
}

/* The Designer Book's format picker, between the proof stack and the CTA.
   Same control as the site's own picker (design-a-story-ru.css), on the
   redesign's grid. */
.fbm-pdp .fbm-format { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 14px; }
.fbm-pdp .fbm-format[hidden] { display: none; }

.fbm-pdp .fbm-format-label {
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--fbm-ink);
}

.fbm-pdp .fbm-format-control { position: relative; }

.fbm-pdp .fbm-format-control::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.5px solid var(--fbm-ink);
	border-bottom: 1.5px solid var(--fbm-ink);
	transform: rotate(45deg);
	pointer-events: none;
}

.fbm-pdp .fbm-format-select {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 44px 11px 14px;
	border: 1px solid var(--fbm-edge);
	border-radius: var(--fbm-r);
	background: #fff;
	font: inherit;
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	color: var(--fbm-ink);
}

.fbm-pdp .fbm-format-select:focus { outline: none; border-color: var(--fbm-accent); }

/* --- 7 · product page: every page, how it works, sticky ---------------- */

/* The blush the "See all the pages from this book" band has always used -
   the rail reads far better on it than on white. */
/* The blush block is what separates this band from the white either side, so
   the padding lives here rather than around it: the wave sits flush on each
   edge and the colour carries the air. */
.fbm-pages { padding: 48px 0 36px; scroll-margin-top: 72px; }
.fbm-screen .fbm.fbm-pages { position: relative; background: var(--fbm-pages); }

/* The two 10 px dividers that have always bracketed this band - the site's own
   `element-divider-004` pair, filled in the same #FDF3EF, so the blush block
   ends in a scalloped edge top and bottom instead of a straight line. */
.fbm-pages::before,
.fbm-pages::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* 11 px for a 10 px wave: the extra pixel overlaps the band itself, so
	   fractional device pixel ratios cannot open a hairline at the seam. */
	height: 11px;
	background-repeat: repeat-x;
	background-size: 40px auto;
}

.fbm-pages::before {
	top: -10px;
	background-image: url("../../../uploads/2025/06/element-divider-004-2.svg");
	background-position: bottom center;
}

.fbm-pages::after {
	bottom: -10px;
	background-image: url("../../../uploads/2025/06/element-divider-004-1-1.svg");
	background-position: top center;
}
.fbm-pages .fbm-h2 { margin: 0 var(--fbm-gut) 14px; }

.fbm-pages .fbm-page {
	width: min(300px, 82vw);
	border-radius: var(--fbm-r);
	overflow: hidden;
	background: var(--fbm-photo);
	aspect-ratio: 2 / 1;
}

.fbm-pages .fbm-page img { width: 100%; height: 100%; object-fit: cover; }

/* "How it works" is the one block between two coloured bands, so it needs real
   air on both sides. The top figure absorbs the 10 px wave that hangs off the
   bottom of the "Every page" band; the bottom one adds to the 30 px the
   reviews section brings with it. */
.fbm-how { padding: 64px var(--fbm-gut) 34px; scroll-margin-top: 72px; }

/* The popup gallery. Jet renders the ready-made books as two rows - one page
   across the full width, the rest as thumbnails under it - so the injected
   gallery on the builders is built the same way rather than as a plain rail:
   full-bleed stage, no gap, no rounding, thumbnails instead of dots. */
.fbm-screen .fbm.fbm-modal-pages { background: transparent; }

.fbm-modal-pages .fbm-rail {
	gap: 0;
	padding: 0;
	scroll-padding-left: 0;
}

.fbm-modal-pages .fbm-page {
	width: 100%;
	border-radius: 0;
	overflow: hidden;
	background: var(--fbm-photo);
	aspect-ratio: 2 / 1;
}

.fbm-modal-pages .fbm-page img { width: 100%; height: 100%; object-fit: cover; }

.fbm-modal-thumbs {
	display: flex;
	gap: 10px;
	padding: 10px 16px 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fbm-modal-thumbs::-webkit-scrollbar { height: 0; }

.fbm-modal-thumbs .fbm-modal-thumb {
	flex: none;
	width: 119px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: var(--fbm-photo);
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fbm-modal-thumbs .fbm-modal-thumb.is-on { border-color: var(--fbm-accent); }

.fbm-modal-thumbs .fbm-modal-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.fbm-how .fbm-h2 { margin-bottom: 18px; }
.fbm-how .fbm-steps { display: flex; flex-direction: column; gap: 18px; }
.fbm-how .fbm-steps li { display: flex; gap: 12px; }

.fbm-how .fbm-step-n {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgba(224, 95, 56, .08);
	color: var(--fbm-accent);
	font-size: 13px;
	line-height: 26px;
	font-weight: 600;
	text-align: center;
}

.fbm-how .fbm-step-t {
	margin: 2px 0 3px;
	font-size: 15px;
	line-height: 21px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--fbm-ink);
}

.fbm-how .fbm-step-d { font-size: 14px; line-height: 20px; color: var(--fbm-muted); text-wrap: pretty; }

.fbm-screen .fbm-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px calc(13px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--fbm-edge);
	box-shadow: 0 -6px 20px rgba(35, 35, 30, .06);
}

.fbm-screen .fbm-sticky[hidden] { display: none !important; }
.fbm-sticky .fbm-sticky-txt { min-width: 0; display: flex; flex-direction: column; }
.fbm-sticky .fbm-eyebrow { font-size: 10px; line-height: 13px; letter-spacing: .09em; white-space: nowrap; }
.fbm-sticky .fbm-price { font-size: 15px; line-height: 20px; }
.fbm-sticky .fbm-cta { flex: 1; width: auto; min-height: 46px; font-size: 15px; }

/* Nothing floating may cover a control on this template: the Chaty
   "Поддержка" bubble (z-index 10001) and the cookie banner both clear the
   sticky bar while it is shown. */
.fbm-screen-pdp.fbm-sticky-on .chaty-widget { bottom: 92px !important; }
.fbm-screen-pdp.fbm-sticky-on .fb-cookie { bottom: 96px !important; }

.fbm .fbm-contact {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 18px 0;
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: var(--fbm-link);
	text-decoration: none;
}

/* --- 8 · the Elementor sections the redesign replaces ------------------ */

/* Homepage: the old fold and the old four-card carousel. */
.fbm-screen-home [data-id="4d678e2d"],
.fbm-screen-home [data-id="2cb25aac"] { display: none !important; }

/* Product page: breadcrumbs, the whole two-column decision block, the page
   gallery band and the mis-titled "How Build a Story works" section. */
.fbm-screen-pdp [data-id="37c6ad57"],
.fbm-screen-pdp [data-id="4db75c33"],
.fbm-screen-pdp [data-id="53d03d0a"],
.fbm-screen-pdp [data-id="52cf51c6"],
.fbm-screen-pdp [data-id="2997a3b2"],
.fbm-screen-pdp [data-id="60f75a88"],
.fbm-screen-pdp [data-id="40e83317"] { display: none !important; }

/* --- 9 · the kept Elementor sections ---------------------------------- */

/* The scroll-reveal gate leaves whole sections at opacity 0 until they are
   scrolled to, which on a phone reads as a broken page. Everything on these
   two screens renders at first paint instead. */
.fbm-screen .elementor-invisible {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
}

/* Reading order on the product page: reviews before the FAQ, per the brief. */
.fbm-screen-pdp .elementor-location-single { display: flex; flex-direction: column; }
.fbm-screen-pdp .elementor-location-single > * { order: 8; width: 100%; max-width: 100%; }
.fbm-screen-pdp .elementor-location-single > [data-id="74ecdfa8"],
.fbm-screen-pdp .elementor-location-single > [data-id="366bfc8d"] { order: 4; }
.fbm-screen-pdp .elementor-location-single > [data-id="55f6f4bc"] { order: 5; }
.fbm-screen-pdp .elementor-location-single > [data-id="fa142e7"] { order: 5; }
.fbm-screen-pdp .elementor-location-single > [data-id="43605f95"],
.fbm-screen-pdp .elementor-location-single > #fbm-shelf-similar { order: 6; }
.fbm-screen-pdp .elementor-location-single > [data-id="2fa357fb"] { order: 7; }
.fbm-screen-pdp .elementor-location-single > [data-id="2e0f5bfc"] { order: 7; }

/* Kept sections keep their own design, but take the redesign's gutter,
   section rhythm and heading scale so they read as one page.

   A boxed Elementor container takes its padding from the `--padding-*`
   custom properties on the outer `.e-con`, never from `padding` and never
   from the inner wrapper - setting it anywhere else silently does nothing. */
/* The page gutter: every kept container that carries one. */
.fbm-screen [data-id="5f5f53e2"],
.fbm-screen [data-id="4b65128"],
.fbm-screen [data-id="73a9c094"],
.fbm-screen [data-id="4d2cfaae"],
.fbm-screen [data-id="6c844fa1"],
.fbm-screen [data-id="55f6f4bc"],
.fbm-screen [data-id="fa142e7"],
.fbm-screen [data-id="74ecdfa8"],
.fbm-screen [data-id="43605f95"],
.fbm-screen [data-id="40e83317"],
.fbm-screen [data-id="752aeb8e"],
.fbm-screen [data-id="47b1f51e"] {
	--padding-left: var(--fbm-gut) !important;
	--padding-right: var(--fbm-gut) !important;
}

/* The reviews and newsletter panels come from nested template documents that
   add a 5 px inset of their own on top of the inner container's gutter. */
.fbm-screen [data-id="65fa7ce9"],
.fbm-screen [data-id="366bfc8d"],
.fbm-screen [data-id="25f48124"],
.fbm-screen [data-id="2fa357fb"],
.fbm-screen [data-id="2e0f5bfc"] {
	--padding-left: 0 !important;
	--padding-right: 0 !important;
}

/* Section rhythm: top-level sections only, not the rows inside them. */
.fbm-screen [data-id="5f5f53e2"],
.fbm-screen [data-id="4b65128"],
.fbm-screen [data-id="6c844fa1"],
.fbm-screen [data-id="55f6f4bc"],
.fbm-screen [data-id="fa142e7"],
.fbm-screen [data-id="43605f95"] {
	--padding-top: 30px !important;
	--padding-bottom: 8px !important;
}

/* Carries the wave, so its heading needs clearing it the way Reviews does. */
.fbm-screen [data-id="73a9c094"] {
	--padding-top: 56px !important;
	--padding-bottom: 8px !important;
}

/* Reviews carries a repeating divider on its own `::before`, so like
   "How it works" it needs the heading pushed well clear of that edge, and an
   explicit gap underneath in place of the template's 60 px margin. */
.fbm-screen [data-id="74ecdfa8"],
.fbm-screen [data-id="366bfc8d"] {
	--padding-top: 64px !important;
	--padding-bottom: 40px !important;
	--margin-bottom: 0 !important;
}

/* The heading now sits in the section and the cards in the block after it, so
   the section keeps only the gap the rail needs. */
.fbm-screen [data-id="5f5f53e2"],
.fbm-screen [data-id="4b65128"],
.fbm-screen [data-id="43605f95"] {
	--padding-bottom: 16px !important;
	--margin-bottom: 0 !important;
}

.fbm-screen [data-id="5f5f53e2"] h2.elementor-heading-title,
.fbm-screen [data-id="4b65128"] h2.elementor-heading-title,
.fbm-screen [data-id="55f6f4bc"] h2.elementor-heading-title,
.fbm-screen [data-id="fa142e7"] h2.elementor-heading-title,
.fbm-screen [data-id="74ecdfa8"] h2.elementor-heading-title,
.fbm-screen [data-id="43605f95"] h2.elementor-heading-title {
	font-size: 22px;
	line-height: 27px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--fbm-ink);
}

/* "Создайте бестселлер" / "Смотреть все" share one row: the heading takes
   the width it needs and the link keeps to one line, so neither wraps. */
.fbm-screen [data-id="31f1bf7"] { flex-wrap: nowrap !important; align-items: baseline; }
.fbm-screen [data-id="31f1bf7"] > [data-id="76b8ba1"] { width: auto !important; flex: 1 1 auto; }
.fbm-screen [data-id="31f1bf7"] > [data-id="8e00499"] { width: auto !important; flex: 0 0 auto; white-space: nowrap; }

/* "Show all" reads as the one link in the row. */
.fbm-screen [data-id="8e00499"] .elementor-heading-title {
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: var(--fbm-link);
}

/* Bestseller and similar-product cards: one accent button, one price scale. */
.fbm-screen [data-id="4b65128"] .elementor-button,
.fbm-screen [data-id="43605f95"] .elementor-button {
	border-radius: var(--fbm-r);
	min-height: 46px;
	font-size: 15px;
	font-weight: 600;
}

/* --- 10 · footer ------------------------------------------------------ */

/* The footer is already blue by design: the wave strip carries
   `element-circle-bg-002-1.svg` with *no* background colour of its own, and
   the block underneath it paints #3C5EEC. Painting the footer root blue fills
   the gaps between the wave's circles and the scallops disappear - so nothing
   here touches its colours.

   Room for the sticky CTA above the last footer row. */
.fbm-screen-pdp.fbm-sticky-on footer.elementor-location-footer { padding-bottom: 84px; }

} /* end @media (max-width: 767px) */