/* EGA Kids — blog and home overrides (loaded after style.css). Bump style.css Version on change. */

/* ==== Fix round 1 — blog article (M6, m10) ==== */

/* TOC: the reference's 16px title and 16px items with an 8px step. */
.ega-toc__title {
	font-size: 16px;
	line-height: 20px;
}
.ega-toc__list li {
	padding: 0;
	font-size: 16px;
	line-height: 22.857px;
}
.ega-toc__list li + li {
	margin-top: 8px;
}

/* Sidebar box titles: the reference's 16px / 1.2 at every width (m8). */
.ega-blog .ega-aside__title {
	line-height: 1.2;
}

/* Share row: the reference's my-5 (20px, collapsing with the last paragraph). */
.ega-blog--single .ega-share {
	margin-top: 20px;
}

/*
 * Fix round 2: Flatsome's `.post { margin-bottom: 30px }` hits the article
 * (class "post"): at >=1024 it made the grid row 30px taller than the
 * article, at <=767 it added 30px between the share row and DANH MỤC
 * (the reference's grid has gap-0 there). 768-1023 already matches.
 */
@media (min-width: 1024px), (max-width: 767px) {
	.ega-blog--single .ega-blog__main.post {
		margin-bottom: 0;
	}
}

/*
 * In-post product slider ("Chọn nhanh cho bé"): the reference's embla
 * geometry — 12px above the cards, slides of 25% / 61.3% / 57% with a 16px
 * (8px on phones) left gutter, 60px (28px on phones) below the cards.
 */
.ega-article__content .row.ega-post-products:not(.row-collapse) {
	margin: 0 0 0 -16px;
	padding: 12px 0 40px;
	width: auto;
	max-width: none;
}
.ega-article__content .ega-post-products .flickity-page-dots {
	position: static;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4px;
	margin: 16px 0 0;
	padding: 0;
	line-height: 0;
}
.ega-article__content .ega-post-products .flickity-slider > .col,
.ega-article__content .ega-post-products > .col {
	flex-basis: 25%;
	max-width: 25%;
	padding: 0 0 0 16px;
}
@media (max-width: 1023px) {
	.ega-article__content .ega-post-products .flickity-slider > .col,
	.ega-article__content .ega-post-products > .col {
		flex-basis: 61.3%;
		max-width: 61.3%;
	}
	/* The reference's article column is 12px narrower on each side on tablets. */
	.ega-blog--single .ega-blog__grid {
		padding-left: 12px;
		padding-right: 12px;
	}
}
@media (max-width: 767px) {
	.ega-blog--single .ega-blog__grid {
		padding-left: 0;
		padding-right: 0;
	}
	.ega-article__content .row.ega-post-products:not(.row-collapse) {
		margin-left: -8px;
		padding-bottom: 12px;
	}
	.ega-article__content .ega-post-products .flickity-page-dots {
		margin-top: 12px;
	}
	.ega-article__content .ega-post-products .flickity-slider > .col,
	.ega-article__content .ega-post-products > .col {
		flex-basis: 57%;
		max-width: 57%;
		padding-left: 8px;
	}
	.ega-article__content .ega-post-products .product-title {
		font-size: 14px;
		line-height: 16.8px;
	}
	/* Breadcrumb: the post title sits on its own line on phones. */
	.ega-blog--single .ega-blog-crumbs .breadcrumb_last {
		display: block;
	}
}

/*
 * Fix round 2 — blog lists (tin-tuc, tag archives) at 768-1023: the
 * reference's grid is gap-4 md:gap-12 (48px between the posts and the
 * sidebar), its tags block ends the sidebar with no margin below, and its
 * tag rows are 1px further apart. Measured at 820: grid 2917.47 =
 * posts 2035.31 + 48 + sidebar 834.16.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.ega-blog--list .ega-blog__grid {
		row-gap: 48px;
	}
}
/*
 * From 768 up the tags block ends the sidebar with no margin below and the
 * reference's tags are 32.84px tall (ours 32px): a 9px row gap makes up for
 * it. Measured on be-gai at 1440: grid 1011.62 vs 997.53 = 20 (margin) - 6
 * (7 tag rows).
 */
@media (min-width: 768px) {
	.ega-blog--list .ega-aside--tags {
		margin-bottom: 0;
	}
	.ega-blog--list .ega-tag-list {
		row-gap: 9px;
	}
}

/* ==== Fix round 1 (fix stage) — home / blog ==== */

/*
 * R9 tag archives (/tag/<slug>/ and the "Tin tức theo thẻ" page template):
 * the reference ends its blog section with a 40px (20px on phones) margin and
 * the footer follows; ours added .ega-blog's 40px/20px padding on top of the
 * footer's own 40px/32px margin-top. Gap tags box -> footer was 100/68 vs 60/48.
 */
.ega-blog.ega-blog--single,
body.tag .ega-blog--list,
body.blog .ega-blog--list,
body.page-template-template-blog-tag .ega-blog--list {
	padding-bottom: 0;
}

/*
 * R7 home §11 "Bé mặc đẹp mỗi ngày": the reference's heading row is
 * flex items-center + mb-6, so its cards start 9px (8px at 768-1023) higher
 * than below our 32px heading margin.
 */
/* The video row is centred like the reference's container (our -8px !important margins pinned it to the left edge). */
@media (min-width: 1024px) {
	html body .ega-home-videos .ega-video-row {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
@media (max-width: 767px) {
	/* Reference: 12px container, embla -8px, slides 57% with 8px gutter (card at x=12, 205px). */
	html body .ega-home-videos .ega-video-row {
		margin: 0 12px 0 4px !important;
	}
	.ega-home-videos .ega-video-row > .col {
		padding: 0 0 0 8px;
	}
}
@media (min-width: 768px) {
	.ega-home-videos .ega-section-head .ega-heading,
	.ega-home-videos .ega-section-head .ega-heading h2 {
		margin-bottom: 23px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.ega-home-videos .ega-section-head .ega-heading,
	.ega-home-videos .ega-section-head .ega-heading h2 {
		margin-bottom: 24px;
	}
	/* The reference's slides are 160px (pl-4 = 16px gutter, 144px card) from the 12px container inset. */
	html body .ega-home-videos .ega-video-row {
		margin-left: -4px !important;
		margin-right: 0 !important;
	}
	.ega-home-videos .ega-video-row > .col {
		flex: 0 0 160px;
		max-width: 160px;
		padding: 0 0 0 16px;
	}
}

/*
 * R8 home §14 "Cộng đồng EGA Kids" @<=767: the reference's panel sits 12px in
 * from both sides with 16px inner padding, its heading is 20px (our global
 * phone heading rule made it 28px) and the description wraps narrower.
 */
@media (max-width: 767px) {
	html body .ega-home-insta .ega-insta-panel {
		width: auto;
		margin-left: 12px;
		margin-right: 12px;
		padding: 20px 16px;
	}
	.ega-home-insta .ega-insta-heading,
	.ega-home-insta .ega-insta-heading h2 {
		font-size: 20px;
		line-height: 1.25;
	}
	.ega-home-insta .ega-insta-row > .col {
		padding-right: 4px;
	}
}

/*
 * R10 in-post product cards: left open. An 8px / 20px image inset made the
 * slider 21 / 27 / 48px shorter (check 01a18838-8006…), and min-heights on the
 * title (2.4em) and price block (48px) made it 23px taller at 820
 * (check 01a18841-5009…); both were reverted. It needs the card rebuilt on the
 * reference's geometry (image inset + gap to title together).
 */

/* m13: the reference's bottom tab bar is md:hidden (hidden from 768px up). */
@media (min-width: 768px) {
	.ega-mobile-bar {
		display: none !important;
	}
	body:not(.single-product) {
		padding-bottom: 0;
	}
}

/* R8 / m5: the reference's community description is narrower (wraps after "từ các" at 820 and 390). */
@media (max-width: 1023px) {
	.ega-home-insta .ega-insta-heading p {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Fixed TOC button: shown whenever the in-article TOC is out of view (content.js), like the reference's #fixed-toc. */
.ega-fixed-toc.is-shown {
	opacity: 1;
	visibility: visible;
}

/* m4: on phones the reference's coupons panel sits 12px in from both sides. */
@media (max-width: 767px) {
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel {
		width: auto;
		margin-left: 12px;
		margin-right: 12px;
	}
}

/* Fix round 1 turn 3 — home / blog */

/*
 * R10 in-post product card @768-1023: the reference draws a 384x480 photo
 * centred in the same 447x559 image box (ours fills the box). transform keeps
 * the box, so the card height and the price line stay where they are.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.ega-post-products .product-small .box-image {
		background: transparent;
	}
	.ega-post-products .product-small .box-image img {
		transform: scale(0.859);
		transform-origin: 50% 50%;
		border-radius: 14px;
	}
}

/* R10 @>=1024: the reference keeps two title lines, so a one-line title does not lift the price block. */
@media (min-width: 1024px) {
	.ega-post-products .product-small .name.product-title {
		min-height: 2lh;
	}
}

/*
 * Fix round 2 — R10: the tallest in-post card is the sold-out one, and the
 * reference's "Hết hàng" is `badge--soldout px-0 bg-transparent py-2 mt-2`
 * (8 + 8 + 18 + 8 = 42px; ours 10 + 6 + 18 + 6 = 40). Reads 01a1896b-ac71 /
 * -ac84: reference price rows 74 / 116 (card 1 / sold-out card 6), ours
 * 136.36 / 176.36 at 1440, the same +42 / +40 at 390.
 */
.ega-article__content .ega-post-products .product-small .ega-stock-out {
	margin-top: 8px;
	padding: 8px 0;
	background: transparent;
	line-height: 18px;
}

/* Home §6 banners @<=767: reference cards 205px wide from the 12px inset (pl-4 = 16px gutter), 2 dots 8px under them. */
@media (max-width: 767px) {
	html body .ega-home-banners .ega-banner-row {
		margin-left: 4px !important;
		margin-right: 0 !important;
	}
	.ega-home-banners .ega-banner-row > .col {
		flex: 0 0 221px;
		max-width: 221px;
		padding: 0 8px;
	}
	.ega-home-banners .section-content::after {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		margin: 8px auto 0;
		border-radius: 4px;
		background: linear-gradient(90deg, var(--ega-pink) 0 16px, transparent 16px 24px, #C9C2BD 24px 40px);
	}
	/* §8 banner image: 12px inset like the reference (ours was 15px, so it was 4px short). */
	html body .ega-home-banner .ega-banner-image > .col {
		padding-left: 12px;
		padding-right: 12px;
	}
	/* Hero: Flickity draws 2 dots, but the unselected one stayed white on white; the reference's is grey. */
	html body .ega-hero-slider .flickity-page-dots .dot:not(.is-selected) {
		border: 0;
		background: #B9B4BF;
		opacity: 1;
	}
}

/* Home §7 "Hàng mới về" @>=768: the reference button sits a few px lower (mt-4 wrapper + mt-6 inline-flex button). */
@media (min-width: 1024px) {
	.ega-home-new .button.ega-more {
		margin-top: 12px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.ega-home-new .button.ega-more {
		margin-top: 11px;
	}
}

/*
 * Fix round 1 turn 3b — home §3 collections @>=1024: the row was pinned to the
 * left edge by its -8px !important margins (cards at x=0, the reference's at
 * x=60 under the heading) and its cards sat 14px high; the section keeps its
 * height (margin-top +14, padding-bottom -14) and the dots follow the cards.
 */
@media (min-width: 1024px) {
	html body .ega-home-collections .ega-coll-row {
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 24px !important;
		padding-bottom: 20px;
	}
	html body .ega-home-collections .ega-coll-row.ega-dots-after::after {
		bottom: -1px;
	}
}

/* Fix round 1 turn 3b — home §7 "Xem tất cả" is full width at 768-1023 like the reference's (as it already is <=767). */
@media (min-width: 768px) and (max-width: 1023px) {
	.ega-home-new .button.ega-more {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}

/* Fix round 2 turn 2 — home §1 coupons @1440: the reference's tickets sit 16px lower in the panel
   (embla py-4 + dots under them), and its intro block 7px higher. Panel height unchanged. */
@media (min-width: 1280px) {
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel > .ega-coupons-list {
		padding-top: 16px !important;
		padding-bottom: 30px !important;
	}
	html body.page-id-662 .ega-home-coupons .ega-coupons-intro > .col-inner {
		position: relative;
		top: -7px;
	}
}

/* Home flash sale before 08:00 (main.js): the reference's programme "sẽ bắt đầu sau" shows no sold bars. */
.ega-home-flash.ega-flash-upcoming .ega-flash-stock {
	display: none;
}

/* Fix round 3 — home */

/*
 * §13 "Bản tin khuyến mãi" @<=767 (reads 01a18a29-4b21, reference / ours):
 * list mt-2 8 / 0, date 12px/16px mb 8 / 13px/18.6px mb 6, title box 48 (min-height 2 x 24,
 * line-height 1.2) / 44.8, excerpt 16px/22.857px #726760 / 14px/21px, button wrapper mt-4 + mt-6 = 40 / 46.
 */
@media (max-width: 767px) {
	html body .ega-home-blog .ega-blog-posts.row { margin-top: 8px; }
	.ega-home-blog .ega-blog-posts .post-meta { margin: 0 0 8px; font-size: 12px; line-height: 16px; }
	.ega-home-blog .ega-blog-posts .post-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		min-height: 48px;
		max-height: none;
		margin: 0;
		line-height: 1.2;
	}
	.ega-home-blog .ega-blog-posts .from_the_blog_excerpt { margin: 0; font-size: 16px; line-height: 22.857px; color: #726760; }
	.ega-home-blog .button.ega-btn.ega-more { margin-top: 40px; }
}

/*
 * §1 coupons @<=767 (same reads): panel pt 32 / 30 and 16px sides (tickets at x=36), embla py-4,
 * slide = viewport / 1.15 (290.4 / 243.2), ticket 274.4 x 132.8 with a 72px icon column,
 * body 87.6 + code row 45.1 (code 35.1, 12px) / one 134.5 column; the subtitle wraps balanced.
 */
@media (max-width: 767px) {
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel { padding-top: 32px; padding-left: 16px; padding-right: 16px; }
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel > .col { padding-left: 0 !important; padding-right: 0 !important; }
	.ega-home-coupons .ega-coupons-title p { text-wrap: balance; }
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel > .ega-coupons-list { padding-top: 11px !important; padding-bottom: 33px !important; }
	html body .ega-home-coupons .ega-coupons-row { margin: 0 !important; }
	.ega-home-coupons .ega-coupons-row > .col { flex: 0 0 86.9565%; max-width: 86.9565%; padding: 0 0 0 8px; }
	.ega-home-coupons .ega-coupon > .col-inner { grid-template-columns: 72px minmax(0, 1fr); }
	.ega-home-coupons .ega-coupon__body { padding: 12px 10px 10px 14px; gap: 2px; }
	.ega-home-coupons .ega-coupon__action { margin-top: 12px !important; }
	.ega-home-coupons .ega-coupon__action::before {
		content: "";
		position: absolute;
		top: -3px;
		left: -14px;
		right: -10px;
		height: 1px;
		background: #F1E7EA;
	}
	.ega-home-coupons .ega-coupon__code { padding: 6px 38px 6px 12px; font-size: 12px; line-height: 20.14px; }
}

/*
 * §10 policies (reads 01a18a2c-3f9d and the reference's .policy-card rule): the dashed ring is
 * 1.5px in accent 55 %, with an inset 4px bottom lip in accent 25 % and the icon shadow in accent 70 %;
 * accent = the card colour 0.22 darker. Ours: a 2px grey ring, no lip. @<=767 the grid is 366 wide,
 * gap 16, cards 175 (ours 183 from x=6) with 16px side padding.
 */
@media (max-width: 767px) {
	.ega-policy > .col-inner {
		--accent: oklch(from var(--bg) calc(l - .22) calc(c + .08) h);
		outline: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
		box-shadow: inset 0 -4px color-mix(in srgb, var(--accent) 25%, transparent);
	}
	.ega-policy__icon { box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
	html body .ega-home-policies .ega-policies-row { margin-left: -2px !important; margin-right: -2px !important; }
	html body .ega-home-policies .ega-policies-row > .col { padding-left: 8px; padding-right: 8px; }
	html body .ega-home-policies .ega-policy > .col-inner { padding-left: 16px; padding-right: 16px; }
}

/*
 * §9 bundle @<=767 (same reads): cards 205.2 + gap 8 (ours 201 + 8), title 14px / 1.2 on one line
 * (ours 16px, two lines), price 16px (13.6), select 46px (40).
 */
@media (max-width: 767px) {
	html body .ega-products--bundle .product-small.col { flex: 0 0 213.17px; max-width: 213.17px; }
	html body .ega-products--bundle .name.product-title,
	html body .ega-products--bundle .name.product-title a { font-size: 14px; line-height: 1.2; }
	html body .ega-products--bundle .price-wrapper .price { font-size: 16px; }
	html body .ega-products--bundle .ega-variant-select { height: 46px; }
}

/*
 * Fix round 3 — home, pass 2 (reads 01a18a31-9851 / -9892 / -98ea, reference / ours).
 * §13 blog @>=768: h2 mb 32 (1440) / 24 (820) vs 41 / 32, list mt 8 / 0, date 16px lh mb 8 / 18.57 mb 6,
 * title 48 (lh 1.2) / 44.8, excerpt 16/22.857 / 14/21 + 8.7 margin, button 24 + wrapper 16 = 40 / 37 (1440), 61 (820).
 */
@media (min-width: 768px) {
	html body .ega-home-blog .ega-blog-posts.row { margin-top: 8px; }
	.ega-home-blog .ega-blog-posts .post-meta { margin: 0 0 8px; font-size: 12px; line-height: 16px; }
	.ega-home-blog .ega-blog-posts .post-title {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
		min-height: 48px; max-height: none; margin: 0; line-height: 1.2;
	}
	.ega-home-blog .ega-blog-posts .from_the_blog_excerpt { margin: 0; font-size: 16px; line-height: 22.857px; color: #726760; }
	.ega-home-blog .button.ega-btn.ega-more { margin-top: 40px; }
}
@media (min-width: 1024px) {
	html body .ega-home-blog .ega-heading h2 { margin-bottom: 32px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	html body .ega-home-blog .ega-heading h2 { margin-bottom: 24px; }
}

/*
 * §1 coupons @>=1280: reference intro 254.39 = 20% of the panel (ours 20% + 15 = 269.39), subtitle 240 wide
 * (ours 249.39), slides 249.39 (ours 247.14); ticket 132.78 high (ours 134.53): body pb 8 (ours 10) and an
 * action of code + 10px with a divider (ours mt 6, no divider).
 */
@media (min-width: 1280px) {
	html body.page-id-662 .ega-home-coupons .ega-coupons-intro { flex: 0 0 20% !important; max-width: 20% !important; padding-left: 0 !important; padding-right: 0 !important; }
	.ega-home-coupons .ega-coupons-title p { max-width: 240px; margin-left: auto; margin-right: auto; }
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel > .ega-coupons-list { padding-left: 21px !important; padding-right: 15px !important; }
}
/* (pass 4: the ticket internals tried here at >=768 scored worse, 6.48 -> 7.43 % @1440 and 8.39 -> 8.51 % @820, and were taken out.) */

/*
 * §6 banners (reads -9851 / -b398): the reference embla row is 1344 wide at -24px inside a 1320 viewport at x = 60
 * (overflow hidden), slides 448 with pl 16: images 432 x 179 at 52 / 500 / 948, the first clipped to x >= 60.
 * At 820: row 820 at -24 inside the 12px container, slides 273.33: images 257.33 at 4 / 277.33 / 550.67, clipped to x >= 12.
 * Ours were 429.33 / 254.66 wide at 60 and 12 with 8/8 gutters.
 */
@media (min-width: 1400px) {
	html body .ega-home-banners .ega-banner-row { width: 1344px; max-width: 1344px !important; margin-left: calc(50% - 684px) !important; margin-right: 0 !important; clip-path: inset(-20px -20px -20px 24px); }
	html body .ega-home-banners .ega-banner-row > .col { flex: 0 0 448px; max-width: 448px; padding: 0 0 0 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	html body .ega-home-banners .ega-banner-row { width: 820px; max-width: 820px !important; margin-left: calc(50% - 422px) !important; margin-right: 0 !important; clip-path: inset(-20px -20px -20px 24px); }
	html body .ega-home-banners .ega-banner-row > .col { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 0 0 16px; }
}

/*
 * §9 bundle @<=767 (reads -98ea): reference image mb 12 / body pt 0 (ours 0 / 10), title link mb 8 (0),
 * price 22.84 high (19.59), row at x 0 with the card at 12 (ours row margin -10).
 */
@media (max-width: 767px) {
	html body .ega-products--bundle .box-image { margin-bottom: 12px; }
	html body .ega-products--bundle .box-text { padding-top: 0; }
	html body .ega-products--bundle .title-wrapper { margin-bottom: 8px; }
	html body .ega-products--bundle .price-wrapper { min-height: 22.84px; }
	html body .ega-products--bundle .ega-variant-select { margin-top: 10px; }
	html body .ega-bundle-products .ega-products--bundle.row { margin-left: -4px !important; }
}

/*
 * Fix round 3 — home, pass 3 (check 01a18a38-a4e6 / -a538 / -a5a8).
 * §13: the h2 rule above lost to `.ega-home-blog .ega-section-head .ega-heading h2` (images stayed 9px low);
 * the reference title is font-semibold, clamped to 2 lines (ours bold, 3 lines at 820): a 2-line box
 * (2.4em) + 9.6px keeps the reference's 48px title slot without a clipped third line.
 */
@media (min-width: 1024px) {
	html body .ega-home-blog .ega-section-head .ega-heading h2 { margin-bottom: 32px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	html body .ega-home-blog .ega-section-head .ega-heading h2 { margin-bottom: 24px; }
}
html body .ega-home-blog .ega-blog-posts .post-title {
	min-height: 0;
	max-height: 2.4em;
	margin-bottom: 9.6px;
	overflow: hidden;
	font-weight: 600;
}

/* §1 coupons @>=1280: the reference subtitle breaks balanced ("…, mua / sắm tiết kiệm…") and its tickets start
   14px further right (row width unchanged). */
@media (min-width: 1280px) {
	.ega-home-coupons .ega-coupons-title p { text-wrap: balance; }
	html body.page-id-662 .ega-home-coupons .ega-coupons-panel > .ega-coupons-list { padding-left: 35px !important; padding-right: 1px !important; }
}

/* §13 @768-1023 (check -b3e1): the h2 still gives 32px there (images 8px low with the list's mt 8), and the
   reference keeps a 24px gap between its two rows of cards (ours 0); the 2-line title box gets its line-height. */
@media (min-width: 768px) and (max-width: 1023px) {
	html body .ega-home-blog .ega-blog-posts.row { margin-top: 0; }
	html body .ega-home-blog .ega-blog-posts > .col:nth-child(-n+3) { padding-bottom: 24px; }
}
html body .ega-home-blog .ega-blog-posts .post-title { line-height: 1.2; }

/* §9 bundle: the reference "Thêm tất cả vào giỏ hàng" is 263px wide and 22px higher at 1440 (section height kept),
   5px higher at 390 with 24px under it (ours 9). */
@media (min-width: 1024px) {
	html body .button.ega-btn.ega-bundle-add { width: max-content; min-width: 263px; white-space: nowrap; margin-top: 26px; margin-bottom: 24px; }
}
@media (max-width: 767px) {
	html body .button.ega-btn.ega-bundle-add { margin-top: 35px; }
	html body .ega-bundle-products { padding-bottom: 23px !important; }
}