/*
 * page-frontpage.css
 *
 * Rebuilt section-by-section from the captured Elementor inline CSS.
 * Source: migration/page-frontpage/extracted-css.md (which is itself
 * derived from <style id="elementor-frontend-inline-css"> in
 * migration/page-frontpage/rendered.html). Each .dbc-fp__section--XXX
 * block corresponds to one top-level Elementor container, with values
 * (display, flex-direction, gap, padding, content-width, background)
 * lifted directly from that container's inline CSS rule rather than
 * guessed. The .dbc-fp__inner wrapper mirrors Elementor's .e-con-inner
 * (the max-width:content-width centering layer).
 *
 * Convention used throughout:
 *   • Outer .dbc-fp__section--XXX  ← Elementor's outer container
 *     - background, padding, full-bleed
 *   • Inner .dbc-fp__inner          ← Elementor's .e-con-inner
 *     - max-width: content-width
 *     - display/gap/flex-direction/align-items/justify-content
 *
 * Em values are kept verbatim from the source (1em ≈ 16 px in the browser,
 * matching the Elementor render since neither sets an explicit base
 * font-size on these containers).
 */

/* ===== Page-level wrapper =====
 *
 * Intentionally NO background here. The wood texture is painted on BODY
 * by Elementor's .elementor-kit-6 rule (background-image + position 0 0 +
 * repeat-y + size 100% auto + color #D6CDCD). Painting it AGAIN on this
 * element produced two stacked copies with mismatched offsets — visible
 * tile seams and the apparent header/body discontinuity the user spotted.
 * Body covers full viewport (including behind the transparent header),
 * which is what pre-migration produced. When Elementor is eventually
 * removed, port the kit-6 background block onto `body.dbc-front-page`
 * here.
 */
.dbc-page--frontpage {
	font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #111827;
}

/* Release Neve's <main> wrapper width clamp on the frontpage so our
   sections can hit their own content widths. */
body.dbc-front-page .neve-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ===== Generic section + inner-content wrapper ===== */

.dbc-page--frontpage .dbc-fp__section {
	/* outer container: full-bleed by default */
	box-sizing: border-box;
}

.dbc-page--frontpage .dbc-fp__inner {
	/* mirrors Elementor's .e-con-inner: centered content-width box */
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
}

.dbc-page--frontpage .dbc-fp__inner--wide {
	max-width: 1300px;
}

/* ===== [0] 9b0fa3e — Mobile spread (full bleed, hide on desktop) ===== */
.dbc-page--frontpage .dbc-fp__section--mobile-spread {
	display: none;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--mobile-spread { display: block; }
}

/* ===== [1] a2a78a0 — Countdown + Lottie ===== */
/* outer: flex column, margin-top 20px, content-width 1200 */
.dbc-page--frontpage .dbc-fp__section--countdown {
	margin-top: 20px;
}
/* Mobile: hide — the mobile-spread hero above (section [0]) already
   surfaces the current Book-of-the-Day, so the countdown is redundant. */
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--countdown { display: none; }
}
.dbc-page--frontpage .dbc-fp__section--countdown .dbc-fp__inner {
	max-width: 1200px;
	display: flex;
	flex-direction: column;
}
.dbc-page--frontpage .dbc-fp__countdown-title {
	margin: 0;
	padding: 0 0 10px;
	text-align: center;
	font-family: Poppins, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1px;
	word-spacing: 1px;
	align-self: center;
}
.dbc-fp__section--countdown .dbc-fp__countdown-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
}
@media (max-width: 767px) {
	.dbc-fp__section--countdown .dbc-fp__countdown-row { flex-wrap: wrap; }
}
.dbc-fp__countdown {
	display: flex;
	gap: 16px;
	margin-left: 58px; /* matches the html widget's margin:0 0 0 58px (responsive) */
}
@media (min-width: 768px) {
	.dbc-fp__countdown { margin-left: 75px; } /* desktop var */
}
.dbc-fp__countdown > span {
	min-width: 64px;
	text-align: center;
}
.dbc-fp__countdown .number {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}
.dbc-fp__countdown .label {
	margin-top: 4px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
}

/* Lottie trigger — width comes from Elementor: 5.2em desktop, 4.5em ≤1366,
   3.5em ≤1025, 4em ≤767 (with extra 5px bottom padding on mobile). */
.dbc-fp__lottie,
.dbc-fp__lottie:hover,
.dbc-fp__lottie:focus,
.dbc-fp__lottie:active {
	display: inline-block;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
	margin: -14px 5px;
	padding: 0 0 10px;
	align-self: center;
	cursor: pointer;
	line-height: 0;
	filter: brightness(118%);
}
.dbc-fp__lottie-mount {
	display: block;
	width: 5.2em;
	height: 5.2em;
}
@media (max-width: 1366px) { .dbc-fp__lottie-mount { width: 4.5em; height: 4.5em; } }
@media (max-width: 1025px) { .dbc-fp__lottie-mount { width: 3.5em; height: 3.5em; } }
@media (max-width: 767px) {
	.dbc-fp__lottie { padding-bottom: 5px; }
	.dbc-fp__lottie-mount { width: 4em; height: 4em; }
}

/* ===== [2] 52864e3 — Coffee + SEO intro (2-col row, 50/50) =====
 * Whole section is desktop-only — matches Elementor's
 * elementor-hidden-tablet + elementor-hidden-mobile classes on container
 * 52864e3 in the captured data. Hidden at ≤1024 px (everything
 * tablet-and-below).
 */
.dbc-page--frontpage .dbc-fp__section--coffee-seo .dbc-fp__inner {
	max-width: 1200px;
	display: flex;
	flex-direction: row;
	gap: 0;
}
.dbc-fp__section--coffee-seo .dbc-fp__col--coffee,
.dbc-fp__section--coffee-seo .dbc-fp__col--seo-intro {
	width: 50%;
}
@media (max-width: 1024px) {
	.dbc-page--frontpage .dbc-fp__section--coffee-seo { display: none !important; }
}

/*
 * Coffee cup — background-only element that sits ENTIRELY OUTSIDE the
 * 1200 px content box, in the margin to the LEFT of where the book spread
 * begins. The wrapper is positioned relative to .dbc-fp__inner (the
 * 1200 px box) with `right: 100%`, which pins the cup's right edge to the
 * box's left edge at every viewport: on a 1920 px screen the cup sits in
 * the 360 px left margin (some of it spills off-screen left, fine — it's
 * decorative); on a 2400 px+ screen the cup fits fully inside the 600 px
 * margin. The cup NEVER overlaps the content box itself.
 */
.dbc-fp__section--coffee-seo {
	position: relative;
	overflow: visible;
	z-index: 3;
}
.dbc-fp__section--coffee-seo .dbc-fp__inner {
	position: relative;        /* positioning parent for the coffee wrapper */
	overflow: visible;
}
.dbc-fp__section--coffee-seo .dbc-fp__coffee-wrapper {
	position: absolute;
	right: 100%;               /* cup right edge = inner box left edge */
	top: 102px;
	width: 525px;
	z-index: 3;
	pointer-events: none;
}
.dbc-fp__section--coffee-seo .dbc-fp__coffee-wrapper .dbc-coffee-cup {
	margin: 0;                 /* override the shortcode's margin:0 auto */
	transform: rotateZ(-11deg);
	/* Slide-right + rotate entrance, same two-phase shape as the book
	   slide-up: constant linear motion for the first half, smooth
	   deceleration with matched-velocity seam for the second half so
	   the ending eases gently to its rest pose. */
	animation: dbc-coffee-roll-in 1.5s both;
}
@keyframes dbc-coffee-roll-in {
	/* Phase 1 (0% → 50% = 0 → 0.75s): LINEAR. Covers 75% of the slide
	   and 75% of the rotate at constant speed — and the full fade-in.
	   translateX -100% → -25%, rotateZ -120deg → -38.25deg. */
	0%   { opacity: 0; transform: translateX(-100%) rotateZ(-120deg);   animation-timing-function: linear; }

	/* Phase 2 (50% → 100% = 0.75s → 1.5s): smooth deceleration to rest.
	   Bezier start slope 0.3/0.1 = 3 matches Phase 1's velocity scale
	   exactly (Phase 1 normalized speed = 1, Phase 2 avg = 1/3 of that,
	   so start slope 3 keeps the visual speed continuous at the seam).
	   End slope 0 → comes gently to a complete stop at the rest pose. */
	50%  { opacity: 1; transform: translateX(-25%)  rotateZ(-38.25deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.5, 1); }

	100% { opacity: 1; transform: translateX(0)     rotateZ(-11deg); }
}
/* Reserve the cup's natural aspect-ratio so the image doesn't trigger
   a layout shift while it loads (cup appeared higher then dropped). */
.dbc-fp__section--coffee-seo .dbc-coffee-cup__img {
	aspect-ratio: 868 / 917;
}
@media (max-width: 1024px) {
	.dbc-fp__section--coffee-seo .dbc-fp__coffee-wrapper { display: none; }
}

.dbc-fp__section--coffee-seo .seo-intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #374151;
}

/* Book-of-the-Day slide-up entrance — whole book starts OFF SCREEN at
   the bottom and slides up. Transform-only (no fade). Animation runs
   immediately on page load (no JS gate) so the entrance kicks off the
   moment CSS is parsed. JS still fills page 1 + page 2 in parallel; with
   a 2s duration the text is in place before the slide is more than ~5%
   complete, so the previous "page 2 appears late" symptom isn't visible.
   Keyframes split for true constant speed (Phase 1) → smooth decel to
   stop (Phase 2) with no velocity discontinuity at the seam. */
.dbc-page--frontpage .dbc-book-spread {
	animation: dbc-bs-slide-up 2s both;
}
@keyframes dbc-bs-slide-up {
	/* Phase 1 (0% → 50% time = 0 → 1s): LINEAR. Book moves at constant
	   speed from translateY(100vh) to translateY(25vh) — covers 75vh in
	   50% time, speed = 75/50 = 1.5 vh/% (constant, no acceleration). */
	0%   { transform: translateY(100vh); animation-timing-function: linear; }

	/* Phase 2 (50% → 100% time = 1s → 2s): smooth deceleration from
	   translateY(25vh) to translateY(0) — covers 25vh over a full second.
	   cubic-bezier(0.1, 0.3, 0.5, 1) has start slope = 0.3/0.1 = 3,
	   which scales to absolute speed 3 × (25/50) = 1.5 vh/% — EXACTLY
	   matching Phase 1's linear speed at the seam (no perceived jump).
	   End slope = 0 so the book comes gently to a complete stop over the
	   full second of Phase 2 — much slower ending than before. */
	50%  { transform: translateY(25vh);  animation-timing-function: cubic-bezier(0.1, 0.3, 0.5, 1); }

	100% { transform: translateY(0); }
}

/* [book_of_the_day] rail-card "View Book" CTA — strip the rail-specific
   padding/gap overrides so the button matches the global .dbc-button
   utility (style.css:82). Keeps the chevron ::before icon. */
.dbc-page--frontpage .dbc-bod-rail-card .dbc-bod-rail-cta {
	padding: 4px 11px !important;
	gap: 6px;
	margin-top: 12px;
}

/* ===== [3] 03f01c9 — Desktop book spread ===== */
/* padding: 2em / 10em desktop; 3em / 10em on ≤1025 and ≤767 */
.dbc-page--frontpage .dbc-fp__section--book-spread {
	padding: 3.5em 0 10em;
}
@media (max-width: 1025px) {
	.dbc-page--frontpage .dbc-fp__section--book-spread { padding: 3em 0 10em; }
}
/* Mobile: hide — the mobile-spread hero (section [0]) replaces the
   desktop book spread, otherwise we get an empty wood-textured padded
   box where the desktop spread used to be. */
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--book-spread { display: none; }
}

/* ===== [4] 4f97b6d — Ranked-list + Gallery (flex row, 7em gap, 43/60 cols, nvsitebg) ===== */
.dbc-page--frontpage .dbc-fp__section--ranked-and-gallery {
	background-color: var(--e-global-color-nvsitebg, transparent);
	padding: 6em 0 3em;
}
.dbc-page--frontpage .dbc-fp__section--ranked-and-gallery .dbc-fp__inner {
	max-width: 1200px;
	display: flex;
	flex-direction: row;
	gap: 7em;
	overflow: visible; /* allow the rank-medal to extend outside via -6em margin */
}
.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked  { width: 43%; }
.dbc-fp__section--ranked-and-gallery .dbc-fp__col--gallery { width: 60%; }

/* Mobile: column-stacked, 5em gap, padding 8em / 4em / 2em sides */
@media (max-width: 1366px) {
	.dbc-page--frontpage .dbc-fp__section--ranked-and-gallery .dbc-fp__inner {
		flex-direction: column;
		gap: 5em;
	}
	.dbc-page--frontpage .dbc-fp__section--ranked-and-gallery {
		padding: 8em 2em 4em;
	}
	.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked,
	.dbc-fp__section--ranked-and-gallery .dbc-fp__col--gallery { width: 100%; }
}
@media (max-width: 1025px) {
	.dbc-page--frontpage .dbc-fp__section--ranked-and-gallery {
		padding: 6em 2em 6em;
	}
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--ranked-and-gallery {
		padding: 6em 1em 3em;
	}
}

/*
 * Highest Rated Books — responsive medal positioning:
 *
 *   >1366 px (TWO-col layout: ranked list beside gallery) — COVER aligns
 *     with the 1200 px box's left edge, MEDAL sticks OUT of the box to
 *     the left (force beside-mode + shift root -68 to escape the scroll's
 *     overflow:hidden clip).
 *
 *   ≤1366 px (ONE-col layout: ranked list stacked above gallery) — let
 *     the shortcode's natural overlay-mode fire: medal at top-right of
 *     cover, cover sits flush at the column's left edge.
 *
 * Hurdles handled by the >1366 block:
 *   a) Shortcode at ≤1355 px viewport defaults to overlay; we have to
 *      force beside back on at our >1366 breakpoint.
 *   b) The .dbc-ranked-book-list-scroll has overflow:hidden, so the
 *      negative shift goes on the ROOT (so the scroll moves with it) —
 *      that keeps the badge inside the shifted scroll's clip bounds.
 *   c) Shortcode has `margin:0 !important` on root, so our margin-left
 *      shift needs !important too.
 */
.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked .dbc-ranked-book-list-root {
	--dbc-ranked-pad-inline-start: 0px;
}
@media (min-width: 1367px) {
	.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked .dbc-ranked-book-list-root {
		margin-left: -68px !important;
	}
	.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked .dbc-ranked-book-list .dbc-ranked-cover-group {
		display: flex !important;
		align-items: center;
		gap: 12px !important;
		overflow: visible;
		transition: none;
	}
	.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked .dbc-ranked-book-list .dbc-ranked-cover-group > .dbc-ranked-badge {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		object-fit: contain;
	}
	.dbc-fp__section--ranked-and-gallery .dbc-fp__col--ranked .dbc-ranked-book-list .dbc-ranked-badge-spacer {
		display: block !important;
		width: 56px;
		height: 56px;
		flex-shrink: 0;
	}
}

/* ===== [5] f7d1907 — Trio carousels (column-stacked, 7em gap, nvsitebg) ===== */
.dbc-page--frontpage .dbc-fp__section--trio {
	background-color: var(--e-global-color-nvsitebg, transparent);
	padding: 3em 0 9em;
}
.dbc-page--frontpage .dbc-fp__section--trio .dbc-fp__inner {
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	gap: 7em;
}
@media (max-width: 1025px) {
	.dbc-page--frontpage .dbc-fp__section--trio {
		padding: 3em 2em 6em;
	}
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--trio {
		padding: 3em 1em 6em;
	}
}
.dbc-fp__section--trio .dbc-fp__col {
	padding-top: 1em; /* matches 6b9675f, 4ddb23e, ebd6ffa */
}

/* ===== [6] d08e01d — Genre heading + spacer (1200, 8em top, has overlay) ===== */
.dbc-page--frontpage .dbc-fp__section--genre-heading {
	padding: 8em 0 0;
	position: relative;
	z-index: 4;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--genre-heading {
		padding: 2em 1em 0;
	}
}
.dbc-page--frontpage .dbc-fp__section--genre-heading .dbc-fp__inner {
	max-width: 1200px;
	/* No flex — h2 needs to fill 1200 px so its text-align:center actually
	   centers across the box (pre-migration's Elementor heading widget did
	   the same; flex row was auto-shrinking the h2 to text-width). */
}

/* ===== [7] 2125990 — Genre flipboxes (outer 1200, inner 1300) ===== */
.dbc-page--frontpage .dbc-fp__section--genre {
	padding: 0 0 8em;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--genre {
		padding: 0 1em 4em;
	}
}
.dbc-page--frontpage .dbc-fp__section--genre .dbc-fp__inner {
	max-width: 1300px;
	padding: 0 1em;
	box-sizing: border-box;
	/* No flex — single shortcode child handles its own grid layout. */
}

/* Tiered grid, fixed track widths, fixed gaps. Each tier's range is
   bounded by where its layout actually fits (no overflow, no clipped
   cards). Both ends use auto-fit so column count reflows gracefully.
     ≥870 px     → large auto-fit (4, 5, or 6+ cards as viewport widens).
                   Threshold = where 4 large cards fit COMFORTABLY
                   (4×185 + 3×16 = 788 ≤ vp-32 at 820+, bumped to 870
                   for ~50 px of safety margin so the 4th card never
                   clips at subpixel boundaries). So tiers go cleanly
                   6 → 5 → 4 → never 3 with this rule.
     651-869     → 3 large 185 FIXED   (3×185 + 2×16 = 587 ≤ vp-64 at 651+)
     ≤650 px     → small auto-fit at 130 with FORCED 7px gap.
                   Gap forced because shortcode's 626-767 band sets gap
                   to 1rem (16 px), which made 4×130+3×16 = 568 overflow
                   content 562-586 at vp 626-650 — the 4th card clipped.
                   With 7 px gap: 4×130+3×7 = 541 fits vp 605+. Below 605
                   auto-fit drops to 3 small (404), then 2 small (267). */
.dbc-page--frontpage .dbc-fp__section--genre .dbc-genre-flipboxes__grid {
	grid-template-columns: repeat(3, 185px) !important;
	justify-content: center !important;
}
@media (min-width: 870px) {
	.dbc-page--frontpage .dbc-fp__section--genre .dbc-genre-flipboxes__grid {
		grid-template-columns: repeat(auto-fit, 185px) !important;
	}
}
@media (max-width: 650px) {
	.dbc-page--frontpage .dbc-fp__section--genre .dbc-genre-flipboxes__grid {
		grid-template-columns: repeat(auto-fit, 130px) !important;
		gap: 7px !important;
	}
	/* The shortcode's 626-767 band restores LARGE tokens AND a fixed
	   185×270 card box for the "mobile-large" tier — which on our 130 px
	   tracks made cards overflow tracks (4th card clipped at vp 626-650).
	   Force the small-tier card box and small tokens here so the visible
	   card matches the track exactly. */
	.dbc-page--frontpage .dbc-fp__section--genre .dbc-flipbox {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		aspect-ratio: 185 / 270 !important;
	}
	.dbc-page--frontpage .dbc-fp__section--genre .dbc-genre-flipboxes {
		--dbc-flipbox-title-size: 12px;
		--dbc-flipbox-title-lh: 14px;
		--dbc-flipbox-desc-size: 12px;
		--dbc-flipbox-btn-size: 12px;
		--dbc-flipbox-btn-lh: 14px;
		--dbc-flipbox-btn-pad-y: 6px;
		--dbc-flipbox-btn-pad-x: 12px;
		--dbc-flipbox-icon-wrap: 40px;
		--dbc-flipbox-icon-wrap-mb: 10px;
		--dbc-flipbox-icon-fa: 22px;
		--dbc-flipbox-icon-img: 26px;
		--dbc-flipbox-overlay-pad: 0.75rem;
		--dbc-flipbox-title-sub-gap: 10px;
	}
}
/* Phone tier (≤526): 3 cards FILL the screen width. Tracks are 1fr so
   they divide the available space equally; gap stays fixed at 7 px so
   the spacing between cards never shifts — only the card width flexes
   with viewport. Section + inner padding trimmed to 0.5em each side
   (32 px total) for a tighter mobile frame.
   Card widths at common phone widths (content = vp − 32, track =
   (content − 14 gap) / 3):
     320 (SE)    → 91 px | 360 (Android) → 104 px |
     375 (mini)  → 109 px | 414 (iPhone 14) → 122 px */
@media (max-width: 526px) {
	.dbc-page--frontpage .dbc-fp__section--genre {
		padding: 0 0.5em 4em;
	}
	.dbc-page--frontpage .dbc-fp__section--genre .dbc-fp__inner {
		padding: 0 0.5em;
	}
	.dbc-page--frontpage .dbc-fp__section--genre .dbc-genre-flipboxes__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ===== [8] 8883fb6 — Occupation heading (1200, 4em/3em padding, nvsitebg) ===== */
.dbc-page--frontpage .dbc-fp__section--occupation-heading {
	background-color: var(--e-global-color-nvsitebg, transparent);
	padding: 4em 0 3em;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--occupation-heading {
		padding: 3em 1em 0;
	}
}
.dbc-page--frontpage .dbc-fp__section--occupation-heading .dbc-fp__inner {
	max-width: 1200px;
}

/* ===== [9] 0fd2795 — Occupation recs (1200, white bg, 8em bottom) ===== */
.dbc-page--frontpage .dbc-fp__section--occupation {
	background-color: #ffffff;
	padding: 0 1em 8em;
	position: relative;
	z-index: 4;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--occupation {
		padding: 0 1em 5em;
	}
}
.dbc-page--frontpage .dbc-fp__section--occupation .dbc-fp__inner {
	max-width: 1200px;
	/* No flex — single shortcode child renders its own .occupation-list grid. */
}

/* Make the occupation list grid responsive 1 / 2 / 3 columns by viewport.
   The shortcode's own CSS hard-codes `grid-template-columns: repeat(3, 1fr)`
   with no media queries, so on narrow screens the 3 cards were getting
   squashed instead of wrapping to fewer columns. */
.dbc-page--frontpage .dbc-fp__section--occupation .occupation-list {
	grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
	.dbc-page--frontpage .dbc-fp__section--occupation .occupation-list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (min-width: 1025px) {
	.dbc-page--frontpage .dbc-fp__section--occupation .occupation-list {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* ===== [10] f64a9e8 — Celebrity hero (full bleed) ===== */
.dbc-page--frontpage .dbc-fp__section--celebrity-hero {
	padding: 0;
}

/* ===== [11] ab42766 — Country heading (1200, 4em top, nvsitebg) ===== */
.dbc-page--frontpage .dbc-fp__section--country-heading {
	background-color: var(--e-global-color-nvsitebg, transparent);
	padding: 4em 0 0;
}
.dbc-page--frontpage .dbc-fp__section--country-heading .dbc-fp__inner {
	max-width: 1200px;
}
.dbc-fp__country-title {
	margin: 0;
	text-align: center;
	font-family: "Noto Serif Vithkuqi", "Noto Serif", serif;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.4px;
}
.dbc-fp__country-title i {
	font-style: italic;
}

/* ===== [12] b54fc26 — Country grid (outer 1200, inner 1300, white) ===== */
.dbc-page--frontpage .dbc-fp__section--country {
	background-color: #ffffff;
	padding: 0 1em 3em;
	position: relative;
	z-index: 4;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__section--country {
		padding: 0 1em 0;
	}
}
.dbc-page--frontpage .dbc-fp__section--country .dbc-fp__inner {
	max-width: 1300px;
	/* No flex — the shortcode (dbc-country-grid.css) has its own responsive
	   3 / 4 / 7 column grid at the 0 / 768 / 1024 px breakpoints. The flex
	   wrapper was preventing it from filling its container width. */
}

/* ===== [13] 1ffba42 — Liked today's book (1200, white) ===== */
.dbc-page--frontpage .dbc-fp__section--liked-today {
	background-color: #ffffff;
	padding: 130px 0 50px; /* 130px top spacer + content + 50px bottom spacer */
	position: relative;
	z-index: 4;
}
.dbc-page--frontpage .dbc-fp__section--liked-today .dbc-fp__inner {
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.dbc-fp__liked-title {
	margin: 0;
	padding: 5px 0 0;
	width: auto;
	text-align: center;
	font-family: "Send Flowers", cursive;
	font-size: 42px;
	font-weight: 500;
	line-height: 48px;
	letter-spacing: -0.4px;
}

/* ===== [14] de351db — Footer logo + divider + site review (1200, white) ===== */
.dbc-page--frontpage .dbc-fp__section--site-review {
	background-color: #ffffff;
	padding: 0 0 180px; /* 180px bottom spacer */
	position: relative;
	z-index: 4;
	text-align: center;
}
/* Review form: align labels and form contents LEFT (override the section's
   text-align:center inheritance). */
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr,
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__form,
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__field,
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__label {
	text-align: left;
}
/* Submit button: match the global .dbc-button utility (style.css:82). */
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 4px 11px;
	background-color: #232A35;
	border: none;
	border-radius: 3px;
	font-family: Poppins, Georgia, serif !important;
	font-style: normal;
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: 20px !important;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__submit:hover,
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__submit:focus {
	background-color: #151a22;
	outline: none;
}
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-sr__submit:focus-visible {
	box-shadow: 0 0 0 2px rgba(35, 42, 53, 0.35);
}
.dbc-page--frontpage .dbc-fp__section--site-review .dbc-fp__inner {
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.dbc-fp__footer-logo {
	display: block;
	margin: 0 auto -15px;
	width: 25%; /* default desktop */
	height: auto;
}
@media (max-width: 1366px) { .dbc-fp__footer-logo { width: 30%; } }
@media (max-width: 1025px) { .dbc-fp__footer-logo { width: 35%; } }
@media (max-width: 767px)  { .dbc-fp__footer-logo { width: 66%; } }

.dbc-fp__divider {
	border: 0;
	border-top: 1px solid #000;
	width: 75%; /* default desktop */
	margin: 0 auto;
	padding: 15px 0;
}
@media (max-width: 1366px) { .dbc-fp__divider { width: 85%; } }
@media (max-width: 1025px) { .dbc-fp__divider { width: 90%; } }
@media (max-width: 767px)  { .dbc-fp__divider { width: 95%; } }

/* ===== CTA buttons (Browse All Books / Browse All Authors) =====
   Match Elementor element rule on 933d851 + e55a71f:
   background:#232A35, font:text-globals, padding:8px 11px. Identical to
   the global .dbc-button class — we use that directly in the template. */
.dbc-page--frontpage .dbc-fp__cta-wrap {
	margin: 5px 5px 5px 0;
	padding: 15px 0 5px;
	text-align: left;
}
@media (max-width: 1366px) { .dbc-page--frontpage .dbc-fp__cta-wrap { padding: 10px 0 0; } }
@media (max-width: 1025px) { .dbc-page--frontpage .dbc-fp__cta-wrap { padding: 10px 0 0; } }
@media (max-width: 767px)  { .dbc-page--frontpage .dbc-fp__cta-wrap { padding: 20px 0 0; } }

/* ===== Shared heading style for Best Books in Every Genre / Must-Read…
   Original Elementor rule references typography globals cc8311b:
       font-family: Noto Serif Vithkuqi
       font-size:   28px
       font-weight: 500
       line-height: 33px
       letter-spacing: -0.4px
*/
.dbc-page--frontpage .dbc-fp__h2 {
	margin: 0;
	text-align: center;
	font-family: "Noto Serif Vithkuqi", "Noto Serif", serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 33px;
	letter-spacing: -0.4px;
}
.dbc-page--frontpage .dbc-fp__h2 i {
	font-style: italic;
}
@media (max-width: 767px) {
	.dbc-page--frontpage .dbc-fp__h2,
	.dbc-fp__country-title {
		font-size: 22px;
		line-height: 34px;
	}
}

/* ============================================================
 * Bookmark-banner newsletter drawer — visual styling comes from
 * the .bookmark-section global class in style.css:3085 (yellow base,
 * filter:drop-shadow, ribbon-tail clip-path, ::after edge shadow).
 *
 * Drawer positioning + slide-down entrance derived from Elementor's
 * off-canvas widget (02e23d7): width 380/350/320/300 responsive,
 * fadeInDown 0.5s, overlay #0000005C.
 * ============================================================ */

.dbc-drawer--bookmark[hidden] { display: none !important; }

.dbc-drawer--bookmark {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dbc-drawer--bookmark.is-open { pointer-events: auto; }

.dbc-drawer--bookmark .dbc-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.36);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.dbc-drawer--bookmark.is-open .dbc-drawer__overlay { opacity: 1; }

.dbc-drawer--bookmark .dbc-drawer__panel {
	position: absolute;
	top: 0;
	left: 50%;
	width: 380px;
	max-width: 92vw;
	transform: translate(-50%, -100%);
	transition: transform 0.5s ease;
}

.dbc-drawer--bookmark .dbc-drawer__panel.bookmark-section {
	min-height: 75vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 18%;
}

.dbc-drawer--bookmark.is-open .dbc-drawer__panel {
	transform: translate(-50%, 0);
}

.dbc-drawer--bookmark .dbc-drawer__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../../../uploads/2025/01/Purple-Watercolor-Flower-Bookmark.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.8;
	pointer-events: none;
	z-index: 0;
}


.dbc-drawer--bookmark .dbc-drawer__body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 0 24px 32px;
}

.dbc-drawer--bookmark .dbc-drawer__logo {
	display: block;
	width: 230px;
	margin: 0 auto 16px;
}

.dbc-drawer--bookmark .dbc-drawer__heading {
	margin: 0 0 12px;
	font-family: var(--dbc-title-serif-family, "Noto Serif Vithkuqi", "Noto Serif", Georgia, serif);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	color: #1f2937;
	text-align: center;
	text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.7);
}

.dbc-drawer--bookmark .dbc-drawer__lead {
	margin: 0 0 20px;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	color: #1f2937;
	text-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.7);
}

/* Notify me button — match global .dbc-button utility (style.css:82). */
.dbc-drawer--bookmark .dbc-newsletter-button-popup {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	gap: 8px !important;
	padding: 4px 11px !important;
	background-color: #232A35 !important;
	border: none !important;
	border-radius: 3px !important;
	font-family: Poppins, Georgia, serif !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: 20px !important;
	color: #fff !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}
.dbc-drawer--bookmark .dbc-newsletter-button-popup:hover,
.dbc-drawer--bookmark .dbc-newsletter-button-popup:focus {
	background-color: #151a22 !important;
	outline: none !important;
}

/* Bookmark width responsive (Elementor: 380/350/320/300). */
@media (max-width: 1366px) { .dbc-drawer--bookmark .dbc-drawer__panel { width: 350px; } }
@media (max-width: 1025px) { .dbc-drawer--bookmark .dbc-drawer__panel { width: 320px; } }
@media (max-width: 767px)  { .dbc-drawer--bookmark .dbc-drawer__panel { width: 300px; } }