/**
 * CouponBirds Theme — responsive overrides & UX polish.
 * Loaded after couponbirds-source.css.
 */

/* ---- Base ---- */
html {
	scroll-behavior: smooth;
}

body.home-page-body,
body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

.cb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Header: replace brittle inline width ---- */
.index_header {
	height: 76px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.index_header .header-center {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: nowrap;
	width: 100%;
	height: 76px;
	min-height: 76px;
	box-sizing: border-box;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.index_header .cb-header-tools {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 63%;
	gap: 10px;
	height: 40px;
}

.index_header .search-from-home-page {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: 0 !important;
	width: auto !important;
	display: flex;
	align-items: center;
	height: 40px;
}

/* Desktop: CB mobile header controls stay hidden */
.cb-hamburger,
.cb-mobile-menu,
.popular-store,
.popular-store-main,
.mask-layer,
.index_header .cb-search-icon {
	display: none;
}

.index_header .search-form,
.index_header .search-form .input-group {
	width: 100%;
	height: 40px;
	margin: 0;
}

.index_header #add-to-browser {
	flex: 0 0 auto;
}

.index_header #add-to-browser img {
	display: block;
	max-width: 180px;
	height: auto;
}

.index_header .logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	height: 52px;
}

.index_header .logo a,
.index_header .logo .js-common-log-click {
	display: flex;
	align-items: center;
	line-height: 0;
	height: 52px;
}

.index_header .logo img,
.index_header .logo img.cb-site-logo {
	display: block;
	max-width: 260px;
	width: auto;
	height: 52px;
	object-fit: contain;
	object-position: left center;
}

/* Footer — CB client dump: black bar, gray titles, light links */
footer {
	background: #000 !important;
	background-color: #171717 !important;
	font-size: 14px;
	padding: 0;
	border-top: none;
}

footer .container-footer {
	/* Phone: side padding, not margins — Bootstrap .row negative gutters would overflow */
	padding: 0 15px;
	margin: 0;
}

@media (min-width: 768px) {
	footer .container-footer {
		margin: 0 auto;
		padding: 0;
	}
}

footer p.title,
footer .copyright.title {
	font-weight: 700;
	color: #fff !important;
	margin: 2rem 0 1rem;
	white-space: nowrap;
	font-size: 18px;
}

/* The desktop footer keeps 5 fixed 20%-wide columns down to 768px, and the longest column
 * title ("Download the Extension", 228px at 18px) does not fit a 186px column below ~1230px —
 * with `nowrap` it pushed the whole document 15-42px wide (horizontal scrollbar on every page).
 * Below the width where the row really fits: let titles wrap and clip Bootstrap's -15px row
 * gutter (the columns' own 15px padding means no visible content is cut). */
@media (max-width: 1229px) {
	footer p.title,
	footer .copyright.title {
		white-space: normal;
	}

	footer .container-footer {
		overflow-x: clip;
	}
}

footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer ul li a {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

footer ul li a span {
	color: #ccc !important;
	font-size: 16px;
	font-weight: 600;
}

/* CB footer legal lines: 13px / 1.21, 15px left pad, right pad 0, width 70% (measured on the
 * capture — the ported couponbirds-source rule drops it to 10px with a 12px right pad). */
footer .copyright-desc {
	color: #999 !important;
	font-size: 13px !important;
	line-height: 1.21 !important;
	margin: 0 0 10px !important;
	padding: 0 0 0 15px !important;
	width: 70% !important;
}

footer .footer-link {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

footer .footer-link li img {
	width: 40px;
	height: 40px;
	display: block;
}

footer .install,
footer .android-install {
	display: block;
	margin-bottom: 12px;
	line-height: 0;
}

footer .install img,
footer .android-install img {
	display: block;
	height: 40px;
	width: auto;
}

/* Footer watermark — CB: block, 40px gutters on desktop; phone keeps 15px side padding */
footer .footer-img {
	display: block;
	padding: 0 15px;
	margin: 0;
	overflow: hidden;
}

@media (min-width: 768px) {
	footer .footer-img {
		margin: 0 auto;
		padding: 0;
	}
}

footer .footer-img .footer-logo-img,
footer .footer-img img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto !important;
	object-fit: contain;
	object-position: center;
	margin: 0 auto;
}

/* Search results */
.search-from-home-page .search-result:not(.d-none) {
	display: block;
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: 100%;
	margin: 4px 0 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	max-height: 320px;
	overflow-y: auto;
}

.search-from-home-page .search-result li {
	margin: 0;
}

.search-from-home-page .search-result a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: #212529;
	text-decoration: none;
}

.search-from-home-page .search-result a:hover {
	background: #f3fbf9;
	color: #11b196;
}

.search-from-home-page .search-result img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 4px;
}

.search-from-home-page .one-click-clear {
	cursor: pointer;
}

/* Exclusive copy feedback */
.copy-code-exclusive.is-copied button {
	background: #11b196 !important;
}

/* Back to top */
.back-to-top {
	display: none;
	position: fixed;
	right: 18px;
	bottom: 24px;
	z-index: 999;
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top:hover,
.back-to-top:focus {
	opacity: 1;
	transform: translateY(-2px);
	outline: none;
}

.back-to-top.is-visible {
	display: block;
}

/* Deal cards: keyboard / touch */
.deal-information.index-top-item {
	cursor: pointer;
}

.deal-information.index-top-item:focus-visible {
	outline: 2px solid #2bc4ab;
	outline-offset: 2px;
}

/* Reviews: pause on hover */
.seamless-rolling:hover .seamless-rolling-inside {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.seamless-rolling-inside {
		animation: none !important;
		margin-left: 0 !important;
	}

	html {
		scroll-behavior: auto;
	}
}

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
	/* Tablet keeps the desktop single row + side gutters. The earlier two-row variant let
	 * .cb-header-tools grow to 100% and wrap, which stacked the search under the logo with no side
	 * padding — content flush to the screen edge and ~1/3 of the bar empty (see the 860px capture).
	 * The ≤767px phone header below still overrides this with its own 56px single row. */
	.index_header .header-center {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.hot-deals .index-top-show {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.container.exclusive ul,
	.exclusive ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ---- Mobile / small tablet (≤ 820px) ---- */
@media (max-width: 820px) {
	.index_header .logo img,
	.index_header .logo img.cb-site-logo {
		max-width: 200px;
		height: 40px;
	}

	.index_header #add-to-browser {
		display: none;
	}

	.index_header .search-form .btn {
		min-width: 72px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.hot-deals h2,
	.exclusive h2,
	.review h2,
	.our-partners-center h2,
	.featured h2,
	.shop-stores h2 {
		font-size: 1.35rem;
		line-height: 1.3;
		text-align: center;
	}

	.hot-deals .index-top-show {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.top-sector-header {
		flex-wrap: wrap;
		gap: 8px;
	}

	.container.exclusive ul,
	.exclusive ul {
		grid-template-columns: 1fr;
	}

	.exclusive li {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
	}

	.carousel.popular-stores-pc .carousel-inner ul,
	#carouselExampleIndicators2 .carousel-inner ul {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		justify-items: center;
	}

	.shop-stores .popular-stores-pc,
	.shop-stores .popular-stores-ipad {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.shop-stores .popular-stores-pc li,
	.shop-stores .popular-stores-ipad li {
		text-align: center;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
	}

	.shop-stores .popular-stores-pc li a,
	.shop-stores .popular-stores-ipad li a {
		height: auto !important;
		justify-content: flex-start !important;
		gap: 10px;
		padding: 14px 10px;
	}

	.shop-stores .popular-stores-pc li a span,
	.shop-stores .popular-stores-ipad li a span {
		margin-bottom: 0 !important;
		font-size: 15px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Mobile footer — CB phone capture: 2 columns per row (50% each, no gutter), container
	 * keeps 15px side padding, titles 18px/27px with 32/16 margins, links 14px on a 32px
	 * line with no gap, and the watermark image is not rendered on phones. */
	footer .container-footer {
		padding: 0 15px !important;
		color: #8c9da0 !important;
		letter-spacing: normal !important;
	}

	/* The store page and the research archive keep their phone footer full-bleed (rows at x=0);
	 * the 15px container gutter belongs to the company/static pages only. */
	body.single-cb_store footer .container-footer,
	body.post-type-archive-cb_research footer .container-footer {
		padding: 0 !important;
	}

	.footer .container-footer .row.footer-link-row,
	.container-footer .row.footer-link-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100%;
		padding-top: 0;
	}

	.container-footer .footer-link-row .footer-cl,
	.container-footer .footer-link-row .footer-cl--apps {
		width: 100% !important;
		max-width: none !important;
		flex: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* CB pairs each row as [indented column | flush column] */
	.container-footer .footer-link-row .footer-cl:nth-child(odd) {
		padding-left: 20px !important;
	}

	.container-footer .footer-link-row .footer-cl p.title {
		margin: 32px 0 16px !important;
		font-size: 18px !important;
		line-height: 27px !important;
		color: #fff !important;
	}

	.container-footer .footer-link-row .footer-cl ul li {
		margin: 0 !important;
		line-height: 32px !important;
	}

	/* Apps column stays a half-width column: CB renders it as .col-6 in its own row */
	.container-footer .footer-link-row .footer-cl--apps {
		grid-column: auto;
	}

	/* CB phones drop the "Download the Extension" block — the capture's footer-link-box only
	 * carries the APP title + the two store badges. */
	.container-footer .footer-link-row .footer-cl--apps p.title:first-of-type,
	.container-footer .footer-link-row .footer-cl--apps ul.footer-link {
		display: none !important;
	}

	.container-footer .footer-link-row .footer-cl--apps .install {
		margin-bottom: 12px !important;
	}

	/* Watermark image is desktop-only in the capture (no .footer-img node on phones) */
	footer .footer-img {
		display: none !important;
	}

	/* Legal lines: 12px / 18px, full width, 15px gutters inside a 100% cell */
	footer .container-footer .copyright-desc {
		font-size: 12px !important;
		line-height: 18px !important;
		width: 100% !important;
		margin: 0 0 10px !important;
	}

	/* CB phone legal rows carry 30px breathing room above the first line and below the last */
	.container-footer .row.footer-legal-row {
		margin-top: 0 !important;
	}

	.container-footer .row.footer-legal-row .copyright-desc:first-child {
		margin: 30px 0 10px !important;
	}

	.container-footer .row.footer-legal-row .copyright-desc:last-child {
		margin: 0 0 30px !important;
	}

	/* Nested Bootstrap row inside the apps column keeps -15px gutters → 15px page overflow */
	.container-footer .footer-link-row .footer-cl--apps .row,
	.container-footer .row.footer-link-box {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100%;
	}

	/* Long brand labels must wrap on phones instead of pushing the page wide */
	footer ul li a,
	footer ul li a span {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.container-footer .row.footer-legal-row {
		display: block !important;
		grid-template-columns: 1fr !important;
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	footer ul li a span {
		font-size: 14px !important;
	}

	.back-to-top {
		display: none;
	}

	.back-to-top.is-visible {
		display: block !important;
	}

	.back-to-top svg {
		width: 64px;
		height: 64px;
	}
}

/* ---- Phone (≤ 576px) ---- */
@media (max-width: 576px) {
	.index_header .logo img,
	.index_header .logo img.cb-site-logo {
		max-width: 170px;
		height: 36px;
	}

	footer .footer-img {
		padding: 4px 12px 16px;
	}

	footer .footer-img .footer-logo-img,
	footer .footer-img img {
		max-height: 72px;
	}

	.hot-deals .index-top-show {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.deal-information.index-top-item .description p {
		font-size: 12px;
		line-height: 1.35;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.carousel.popular-stores-pc .carousel-inner ul,
	#carouselExampleIndicators2 .carousel-inner ul,
	.shop-stores .popular-stores-pc,
	.shop-stores .popular-stores-ipad {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.container-footer .row.footer-link-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 22px 16px;
	}

	.container-footer .row.footer-legal-row {
		display: block !important;
		grid-template-columns: 1fr !important;
	}

	.review .left-bg,
	.review .right-bg {
		display: none;
	}

	.happy-users-title {
		font-size: 14px;
		padding: 0 8px;
	}

	#carouselBannerIndicators .carousel-item img {
		width: 100%;
		height: auto;
	}

	.back-to-top {
		right: 8px;
		bottom: 12px;
	}

	.back-to-top svg {
		width: 56px;
		height: 56px;
	}
}

/* ---- Static pages (About Us, Contact, legal) ---- */
.cb-static-page {
	padding: 40px 0 60px;
	background: #fff;
	min-height: 50vh;
}

.cb-static-page .container {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 20px;
}

.cb-static-page__header {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e9ecef;
}

.cb-static-page__header h1 {
	font-size: 2rem;
	font-weight: 700;
	color: #212529;
	margin: 0 0 10px;
	line-height: 1.25;
}

.cb-static-page__subtitle {
	font-size: 1.125rem;
	color: #6f757b;
	margin: 0 0 8px;
	line-height: 1.5;
}

.cb-static-page__updated {
	font-size: 0.875rem;
	color: #adb5bd;
	margin: 0;
}

.cb-static-page__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #495057;
	margin-bottom: 28px;
}

.cb-static-section {
	margin-bottom: 36px;
}

.cb-static-section h2 {
	font-size: 1.375rem;
	font-weight: 600;
	color: #212529;
	margin: 0 0 14px;
}

.cb-static-content {
	font-size: 1rem;
	line-height: 1.75;
	color: #495057;
}

.cb-static-content h2 {
	font-size: 1.25rem;
	margin: 28px 0 12px;
	color: #212529;
}

.cb-static-content h3 {
	font-size: 1.0625rem;
	margin: 20px 0 10px;
}

.cb-static-content p {
	margin: 0 0 16px;
}

.cb-static-content ul,
.cb-static-content ol {
	margin: 0 0 16px 1.25rem;
	padding: 0;
}

.cb-static-content li {
	margin-bottom: 8px;
}

.cb-static-content a {
	color: #2bc4ab;
	text-decoration: underline;
}

.cb-static-content a:hover {
	color: #11b196;
}

.cb-contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.cb-contact-card {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 10px;
	padding: 20px;
}

.cb-contact-card h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	color: #212529;
}

.cb-contact-card p {
	margin: 0;
	color: #495057;
	line-height: 1.6;
}

.cb-contact-card a {
	color: #2bc4ab;
	font-weight: 500;
}

@media (max-width: 576px) {
	.cb-static-page {
		padding: 28px 0 40px;
	}

	.cb-static-page__header h1 {
		font-size: 1.625rem;
	}

	.cb-static-page__subtitle {
		font-size: 1rem;
	}
}

/* Empty state for admin-managed sections */
.cb-empty-section {
	padding: 28px 16px;
	text-align: center;
	color: #6f757b;
	border: 1px dashed #d0d5dd;
	border-radius: 10px;
	background: #fafbfc;
	margin: 12px 0 24px;
}

.cb-empty-section a {
	color: #11b196;
}

/* Store FAQ — match CouponBirds frequently-question layout */
.frequently-question {
	margin: 0;
}
.frequently-question h2 {
	font-size: 24px;
	line-height: normal;
	letter-spacing: -.5px;
	color: #404040;
	font-weight: 600;
	margin: 15px 0;
}
.frequently-question .faq-list {
	background-color: #fff;
	border-radius: 5px;
	padding: 25px 25px 15px 25px;
}
.frequently-question .faq-item {
	margin-bottom: 0;
}
.frequently-question .faq-list .faq-title {
	display: flex;
	align-items: center;
}
.frequently-question .faq-list .faq-title .point {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #404040;
	margin-right: 18px;
	margin-top: -3px;
	flex: 0 0 7px;
}
.frequently-question .faq-list .faq-title h3 {
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #404040;
	margin: 0 0 6px;
}
.frequently-question .faq-list .faq-answer,
.frequently-question .faq-list .faq-answer p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #595959;
	margin: 0 0 10px 25px;
}

/* ---- Card parity (1280×850 vs CouponBirds ref) ---- */
/*
 * Meta row (Verified / avatars / See verifications) and its label sizes:
 * CB renders 14px/21px; the clone inherited 16px/24px from .deal-desc.
 */
.container-codes .cl .deal-desc .last-click-time-wrap-box,
.container-codes .cl .deal-desc .see-verification {
	font-size: 14px;
	line-height: 21px;
}

/* store-codes.css sets #8a8a8a at equal specificity → qualify one more level */
.container-codes .cl .coupon-code-list .deal-desc .last-click-time-wrap {
	color: #666;
}

.container-codes .cl .deal-desc .see-verification {
	position: static;
}

/* Staff Pick badge — CB sizes it inline; keep both viewport variants in CSS */
.container-codes .first-panel {
	display: flex;
	align-items: center;
	position: absolute;
	background: #f75f5e;
	color: #fff;
	border-radius: 5px;
	z-index: 998;
	white-space: nowrap;
	height: 18px;
	margin-left: 10px;
	top: -9px;
	padding: 0 3px;
}

.container-codes .first-panel svg {
	width: 12px;
	height: 12px;
	margin-right: 2px;
	flex-shrink: 0;
}

.container-codes .first-panel span {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.86;
	letter-spacing: normal;
	padding: 0 1px;
}

@media (min-width: 768px) {
	.container-codes .first-panel {
		height: 26px;
		margin-left: 7px;
		top: -13px;
		padding: 0 5px;
		margin-bottom: -18px;
	}

	.container-codes .first-panel svg {
		width: 14px;
		height: 14px;
	}

	.container-codes .first-panel span {
		font-size: 14px;
		padding: 0 2px;
	}
}

/*
 * "Isn't working" block: the white panel is .redeem_coupon_code.
 * .redeem_coupon is only a transparent shell (CB: padding 0, no background).
 */
.container-codes .redeem_coupon {
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* Verification block spacing (ref: 0; ugc-panel.css shipped 24px) */
.container-codes .store-verifications-block {
	margin-bottom: 0;
}

/* Store sidebar: About / Return Policy body text → black (was green via about-the-brand p) */
.bi section.rich-content.about-the-brand p,
.bi section.rich-content.about-the-brand span,
.bi section.rich-content.about-the-brand .website-intro,
.bi section.rich-content.about-the-brand .website-intro p,
.container-codes .about-the-brand .content,
.container-codes .about-the-brand .content p,
.container-codes .about-the-brand .content span {
	color: #404040 !important;
}

.bi section.rich-content.about-the-brand a,
.container-codes .about-the-brand .content a {
	color: #2fc2a9 !important;
}

/* Hide chrome “Add to browser” header banner if cached markup remains */
#add-to-browser {
	display: none !important;
}

/* ---- Store page mobile layout ---- */
@media (max-width: 767px) {
	/*
	 * CB mobile header: [ logo ] [ teal search ] [ hamburger ]
	 * Desktop layout above is untouched.
	 */
	.index_header {
		height: 56px !important;
		min-height: 56px !important;
		background: #000 !important;
		position: relative !important;
	}

	.index_header .header-center {
		position: relative !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		height: 56px !important;
		min-height: 56px !important;
		padding: 0 10px !important;
		box-sizing: border-box;
		position: relative !important;
	}

	.index_header .logo {
		flex: 0 0 auto !important;
		height: 28px !important;
		width: auto !important;
		order: 1;
	}

	.index_header .logo a,
	.index_header .logo .js-common-log-click {
		height: 28px !important;
		display: block;
	}

	.index_header .logo img,
	.index_header .logo img.cb-site-logo {
		display: block;
		width: auto !important;
		max-width: 118px !important;
		height: 28px !important;
		object-fit: contain;
		object-position: left center;
	}

	.index_header .cb-header-tools {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 35px !important;
		order: 2;
		margin: 0 !important;
	}

	.index_header .search-from-home-page,
	.index_header .search {
		width: 100% !important;
		height: 35px !important;
		margin: 0 !important;
	}

	.index_header .search-form,
	.index_header .search-form .input-group {
		height: 35px !important;
	}

	.index_header .search-form .input-group {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		width: 100%;
		height: 35px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1.5px solid #2fc2a9 !important;
		border-radius: 4px !important;
		overflow: visible !important;
		background: #fff !important;
		box-sizing: border-box !important;
		position: relative !important;
	}

	.index_header .search-form .input-group::before {
		content: "" !important;
		position: absolute !important;
		left: 10px !important;
		top: 50% !important;
		width: 14px !important;
		height: 14px !important;
		margin-top: -7px !important;
		z-index: 5 !important;
		pointer-events: none !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16'%3E%3Cpath fill='%23757575' d='M6.976 0c3.737 0 6.766 3.064 6.766 6.845a6.87 6.87 0 0 1-1.625 4.449l4.093 4.002-.67.704-4.102-4.01a6.7 6.7 0 0 1-4.462 1.699C3.24 13.689.21 10.625.21 6.845S3.24 0 6.976 0m0 .98c-3.203 0-5.799 2.625-5.799 5.865 0 3.239 2.596 5.865 5.8 5.865 3.202 0 5.798-2.626 5.798-5.865S10.18.979 6.976.979'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-size: 14px 14px !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.index_header .search-form .fire {
		display: none !important;
	}

	.index_header .cb-search-icon {
		display: none !important; /* ::before is the visible icon */
	}

	.index_header .search-form .form-control,
	.index_header .search-form .search-input-home-page {
		flex: 1 1 auto;
		min-width: 0;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 10px 0 32px !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		line-height: 31px !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		color: #404040 !important;
		background: transparent !important;
		box-sizing: border-box !important;
		position: relative !important;
		z-index: 1 !important;
	}

	.index_header .search-form .form-control::placeholder,
	.index_header .search-form .search-input-home-page::placeholder {
		color: #757575 !important;
		opacity: 1;
	}

	/* CB mobile Search button (teal) — shown when searching (matches client dump + sheet) */
	.index_header .search-form {
		position: relative !important;
	}

	.index_header .search-form .input-group {
		position: relative !important;
		overflow: visible !important;
	}

	.index_header .search-form .btn,
	.index_header .search-form button.btn,
	.index_header .search-form .search-submit-btn,
	.index_header .search-form .input-group > .btn {
		display: none !important;
		width: 91px !important;
		min-width: 91px !important;
		max-width: 91px !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 4px !important;
		background-color: #2fc2a9 !important;
		color: #fff !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 33px !important;
		text-align: center !important;
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 100 !important;
		outline: 0 !important;
		box-shadow: none !important;
		visibility: visible !important;
		overflow: visible !important;
		pointer-events: auto !important;
		cursor: pointer;
	}

	.index_header .search-form.is-search-active .search-submit-btn,
	.index_header .search-from-home-page.is-search-active .search-submit-btn,
	.index_header .search-form.is-search-active .btn,
	.index_header .search-from-home-page.is-search-active .btn {
		display: block !important;
	}

	.index_header .search-form.is-search-active .form-control,
	.index_header .search-form.is-search-active .search-input-home-page,
	.index_header .search-from-home-page.is-search-active .form-control,
	.index_header .search-from-home-page.is-search-active .search-input-home-page {
		padding-right: 100px !important;
	}

	.index_header .one-click-clear {
		position: absolute !important;
		right: 95px !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translateY(-50%) !important;
		display: none;
		align-items: center !important;
		justify-content: center !important;
		width: 30px !important;
		height: 30px !important;
		z-index: 1010 !important; /* above the input's 1008, else the field swallows the tap */
		cursor: pointer;
	}

	.index_header .search-from-home-page.is-search-active .one-click-clear {
		/* JS also toggles display:flex when value present */
	}

	/* Autocomplete dropdown — CB dump shadow/spacing */
	.index_header .search-result,
	.index_header .search-from-home-page .search-result:not(.d-none) {
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 38px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 4px 0 6px !important;
		list-style: none !important;
		background: #fff !important;
		border: none !important;
		border-radius: 5px !important;
		box-shadow: 0 0 4px 0 #afd0ca !important;
		z-index: 3015 !important;
		max-height: 280px;
		overflow-y: auto;
	}

	.index_header .search-result.d-none {
		display: none !important;
	}

	.index_header .search-result li {
		line-height: 26px !important;
		color: #6e6e6e !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.index_header .search-result li a {
		display: block !important;
		padding: 4px 1rem 4px 2rem !important;
		color: #6e6e6e !important;
		font-size: 14px !important;
		text-decoration: none !important;
		gap: 0 !important;
	}

	.index_header .search-result li a img {
		display: none !important;
	}

	.index_header .search-result li a:hover,
	.index_header .search-result li a:focus {
		background: rgba(43, 196, 171, 0.08);
		color: #404040 !important;
	}

	/* Dim overlay under open hamburger menu */
	.index_header .mask-layer {
		display: none;
		z-index: 3001;
		background-color: rgba(34, 34, 34, 0.55);
		position: absolute;
		top: 100%;
		left: 0;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		height: 100vh;
		outline: 0;
	}

	.index_header .mask-layer:not([hidden]) {
		display: block !important;
	}

	body.cb-mobile-menu-open .index_header .mask-layer {
		display: block !important;
	}

	/* CB mobile hamburger = .popular-store + dropdown .popular-store-main */
	.popular-store,
	.index_header .popular-store {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 34px !important;
		order: 3 !important;
		width: 34px !important;
		height: 34px !important;
		margin: 0 0 0 6px !important;
		padding: 0 !important;
		cursor: pointer;
		position: relative;
		z-index: 3010;
	}

	.index_header .popular-store .icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.index_header .popular-store .icon img {
		width: 24px !important;
		height: auto !important;
		display: block;
	}

	.index_header .popular-store-main {
		display: none;
		z-index: 3002;
		left: 0;
		right: 0;
		top: 100%;
		position: absolute;
		width: 100%;
		height: 191px;
		min-height: 191px;
		box-shadow: 0 0 20px 0 rgba(138, 138, 138, 0.5);
		background-color: #fff;
		padding: 12px 13px 28px 10px;
		box-sizing: border-box;
	}

	.index_header .popular-store-main:not([hidden]) {
		display: block !important;
	}

	.index_header .popular-store-main a {
		display: block;
		text-decoration: none !important;
		color: inherit;
	}

	.index_header .popular-store-main a .popular-store-link {
		display: flex;
		align-items: center;
		height: 40px;
		border-left: 3px solid transparent;
		padding-left: 2px;
	}

	.index_header .popular-store-main a .popular-store-link span {
		margin-left: 15px;
		font-size: 16px;
		font-weight: 600;
		color: #404040;
	}

	.index_header .popular-store-main a:hover .popular-store-link,
	.index_header .popular-store-main a:focus .popular-store-link {
		background-color: rgba(43, 196, 171, 0.1);
		border-left-color: #2bc4ab;
	}

	.index_header .popular-store-main a:hover .popular-store-link span,
	.index_header .popular-store-main a:focus .popular-store-link span {
		color: #2bc4ab;
	}

	body.cb-mobile-menu-open {
		overflow: hidden;
	}

	/* Legacy slide panel unused — keep display none if leftover markup */
	.cb-hamburger,
	.cb-mobile-menu__backdrop,
	.cb-mobile-menu__panel,
	.cb-mobile-menu__head,
	.cb-mobile-menu__list {
		display: none !important;
	}

	/* Page gutters — keep coupon cards + dashed peek inside the viewport */
	.container.container-codes {
		padding-left: 12px !important;
		padding-right: 12px !important;
		overflow-x: hidden;
	}

	.container-codes .col-md-9,
	.container-codes .col-md-3,
	.container-codes .bp-title .col-md-9 {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}

	/* Store H1 must wrap (desktop uses nowrap + ellipsis) */
	.container-codes .bp-title h1,
	.container-codes h1 {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: unset !important;
		font-size: 17px !important;
		line-height: 1.35 !important;
		letter-spacing: -0.2px;
		margin-bottom: 6px !important;
	}

	.container-codes .bp-title .bp-h1-box {
		margin-left: 12px !important;
		min-width: 0;
		flex: 1 1 auto;
	}

	.container-codes .bp-title .logo {
		width: 64px !important;
		height: 64px !important;
		flex-shrink: 0;
	}

	.container-codes .bp-title .logo img {
		max-width: 64px !important;
		max-height: 64px !important;
	}

	/* Staff Pick sits above the card — don't clip it */
	.container-codes .cp.coupon-code-list,
	.container-codes .shadow-sm.cp,
	.container-codes .shadow-sm.first-coupon {
		overflow: visible !important;
	}

	.container-codes .first-coupon .first-panel {
		top: -9px !important;
		z-index: 2;
	}

	.container-codes .deal {
		display: flex !important;
		align-items: center !important;
		min-height: 100px !important;
		padding: 12px 10px !important;
		overflow: visible;
		box-sizing: border-box;
		width: 100%;
	}

	.container-codes .deal-info {
		width: 68px !important;
		min-width: 68px !important;
		max-width: 68px !important;
		height: 84px !important;
		padding: 4px 2px !important;
		box-sizing: border-box !important;
		overflow: hidden;
		flex-shrink: 0 !important;
	}

	.container-codes .deal-info .discount {
		font-size: 16px !important;
		line-height: 1.1 !important;
		letter-spacing: 0 !important;
		max-width: 100%;
		overflow: hidden;
		word-break: break-word;
	}

	.container-codes .deal-info .suffix {
		font-size: 12px !important;
		line-height: 1.15 !important;
		letter-spacing: 0 !important;
	}

	.container-codes .deal-desc {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding: 0 8px 0 6px !important;
		overflow: visible;
	}

	.container-codes .deal-desc .title,
	.container-codes .deal-desc .large-title,
	.container-codes .deal-desc .large-title a {
		font-size: 16px !important;
		line-height: 1.25 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.container-codes .deal-desc .type-code span {
		font-size: 12px !important;
	}

	/*
	 * Get Code peek: span = full dashed box, a covers left→(right-14px).
	 * Shrink width + scale background so the dashed tip stays attached
	 * (desktop uses 160px width + background-size:160px which breaks on phone).
	 */
	.container-codes .get-code,
	.container-codes .get-deal,
	.container-codes .get-deal-new-style {
		width: 112px !important;
		min-width: 112px !important;
		max-width: 112px !important;
		height: 40px !important;
		margin-right: 4px !important;
		margin-left: 0 !important;
		flex-shrink: 0 !important;
		overflow: visible;
		position: relative;
		z-index: 2;
	}

	.container-codes .get-code a,
	.container-codes .get-code .first-coupon-test,
	.container-codes .get-deal-new-style a {
		left: 0 !important;
		right: 14px !important;
		top: 0 !important;
		bottom: 0 !important;
		background-size: 100% 100% !important;
		background-position: center !important;
		font-size: 13px !important;
		line-height: 40px !important;
		padding-right: 6px !important;
	}

	.container-codes .get-code > span,
	.container-codes .get-deal-new-style > span {
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		font-size: 11px !important;
		line-height: 36px !important;
		padding-right: 2px !important;
		box-sizing: border-box;
	}

	/* Get Discount has no dashed peek — fill the whole control */
	.container-codes .get-deal a {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		padding: 0 6px !important;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.container-codes .get-code a:hover,
	.container-codes .get-deal-new-style a:hover,
	.container-codes .get-code .first-coupon-test:hover,
	.container-codes .get-deal .first-coupon-test:hover {
		left: 0 !important;
		right: 14px !important;
	}

	/* Verified + avatars + “See verifications” — keep on one row inside card */
	.container-codes .cl .deal-desc .last-click-time-wrap-box {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 5px !important;
		top: 0 !important;
		margin-top: auto !important;
		width: 100%;
		max-width: 100%;
	}

	.container-codes .cl .deal-desc .last-click-time-wrap {
		flex: 0 0 auto;
	}

	.container-codes .cl .deal-desc .see-verification {
		margin: 0 0 0 auto !important;
		flex: 0 1 auto;
		min-width: 0;
		gap: 5px !important;
		display: flex !important;
		align-items: center !important;
	}

	.container-codes .cl .deal-desc .see-verification .see-text {
		font-size: 12px !important;
		font-weight: 400 !important;
		letter-spacing: -0.5px !important;
		white-space: nowrap;
		color: #666 !important;
		text-decoration: underline !important;
	}

	.container-codes .cl .deal-desc .see-verification .see-pointer {
		display: block !important;
		margin-top: 3px !important;
	}

	/* Expanded UGC stats inside a coupon */
	.container-codes .ugc {
		padding: 10px 12px !important;
	}

	.container-codes .ugc-info .ugc-info-item {
		flex: 1 1 46% !important;
		min-width: 0;
	}

	.container-codes .ugc .ugc-prompt-bar {
		left: 12px !important;
		right: 12px;
		width: auto;
	}

	/* ---- Below-the-fold store sections ---- */
	.container-codes .recommend-exclusive h2,
	.container-codes .frequently-question h2,
	.container-codes .review-title h2,
	.container-codes .redeem_title h2,
	.container-codes .saving_title h2,
	.container-codes .tips_title {
		font-size: 18px !important;
		line-height: normal !important;
		letter-spacing: 0;
		font-weight: 700;
	}

	.container-codes .recommend-exclusive > p {
		font-size: 13px !important;
		line-height: 1.45;
	}

	.container-codes .recommend-exclusive ul {
		padding: 0 !important;
		margin: 0 !important;
		list-style: none;
	}

	.container-codes .recommend-exclusive ul li .exclusive-panel {
		padding: 16px 12px 16px 14px !important;
		margin-top: 12px !important;
	}

	.container-codes .copy-code-exclusive {
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px;
	}

	.container-codes .copy-code-exclusive span {
		max-width: 100% !important;
	}

	.container-codes .recent-ugc-box {
		padding: 16px 12px 10px !important;
	}

	.container-codes .recent-ugc-box .recent-ugc {
		flex-wrap: wrap;
		gap: 8px;
	}

	.container-codes .frequently-question .faq-list .faq-title h3 {
		font-size: 15px !important;
		line-height: 1.35;
	}

	.container-codes .coupon-review .reviews-write {
		flex-wrap: wrap;
		gap: 12px;
	}

	.container-codes .redeem_pict,
	.container-codes .redeem_pict img {
		max-width: 100% !important;
		width: 100%;
		height: auto !important;
	}

	.container-codes .bi,
	.container-codes .side-logo,
	.container-codes .col-md-3 > div,
	.container-codes .col-md-3 > section {
		max-width: 100% !important;
	}

	.container-codes .col-md-3 {
		margin-top: 8px;
	}
}

@media (max-width: 420px) {
	.container-codes .get-code,
	.container-codes .get-deal,
	.container-codes .get-deal-new-style {
		width: 100px !important;
		min-width: 100px !important;
		max-width: 100px !important;
	}

	.container-codes .get-code a,
	.container-codes .get-code .first-coupon-test,
	.container-codes .get-deal-new-style a {
		right: 12px !important;
		font-size: 12px !important;
	}

	.container-codes .get-deal a {
		font-size: 11px !important;
	}

	.container-codes .bp-title h1,
	.container-codes h1 {
		font-size: 16px !important;
	}
}