/* BuyScout Deals — front-end styles.
 *
 * Everything is scoped to .bsd-* so the theme is never touched. The rules that
 * carry !important are only the ones themes routinely break: control sizing in
 * the toolbar, and the card image box. Layout numbers come from CSS variables
 * printed by the plugin, so they stay editable in Deals → Settings.
 */

.bsd-wrap,
.bsd-wa,
.bsd-float {
	--bsd-accent: #E07A3F;
	--bsd-accent-dark: #B4541F;
	--bsd-ink: #1F1B18;
	--bsd-muted: #6B625C;
	--bsd-line: #E8E1D8;
	--bsd-card: #FFFFFF;
	--bsd-soft: #FAF6F0;
	--bsd-whatsapp: #25D366;

	--bsd-max: 1240px;      /* centred container width */
	--bsd-gap: 22px;
	--bsd-radius: 14px;
	--bsd-control: 40px;    /* shared height for chips, search and sort */
}

.bsd-wrap { color: var(--bsd-ink); }

.bsd-wrap *,
.bsd-wa * { box-sizing: border-box; }

/* Theme resets — only inside our own blocks. */
.bsd-wrap input,
.bsd-wrap select,
.bsd-wrap button,
.bsd-wa a {
	font-family: inherit;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}
.bsd-wrap a,
.bsd-wa a { box-shadow: none; }
.bsd-wrap a:focus-visible,
.bsd-wa a:focus-visible,
.bsd-wrap button:focus-visible { outline: 2px solid var(--bsd-accent); outline-offset: 2px; }

/* ============================================================ container ==
 * Both blocks are their own centred container. Whatever the theme wraps them
 * in, they cap at --bsd-max and sit in the middle of the space available, so
 * the banner, the toolbar and the grid always share one width and one margin.
 */
.bsd-wa,
.bsd-wrap {
	width: 100%;
	max-width: var(--bsd-max);
	margin-left: auto;
	margin-right: auto;
}

/* When the theme's own column is narrower than --bsd-max, or padded unevenly,
 * deals.js measures the result and sizes these two blocks directly. It never
 * edits a theme element, so nothing outside the deals page can be affected. */

/* Fixed-header compensation. deals.js measures the real header and writes
 * --bsd-header-offset; nothing happens when there is no overlap. */
.bsd-offset-applied { padding-top: var(--bsd-header-offset, 0px); }

.bsd-heading {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.2;
}

/* ============================================================== toolbar ==
 * Chips on the left, search and sort on the right, all on one baseline.
 */
.bsd-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0 0 20px;
}

.bsd-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsd-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.bsd-chip {
	height: var(--bsd-control) !important;
	display: inline-flex !important;
	align-items: center;
	border: 1px solid var(--bsd-line);
	background: var(--bsd-soft);
	color: var(--bsd-ink);
	border-radius: 999px !important;
	padding: 0 16px !important;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1 !important;
	width: auto !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bsd-chip:hover { border-color: var(--bsd-accent); color: var(--bsd-accent); }
.bsd-chip.is-active {
	background: var(--bsd-accent);
	border-color: var(--bsd-accent);
	color: #fff;
}

.bsd-search,
.bsd-sort {
	height: var(--bsd-control) !important;
	min-height: 0 !important;
	border: 1px solid var(--bsd-line) !important;
	border-radius: 999px !important;
	background-color: #fff;
	color: var(--bsd-ink);
	font-size: 14px !important;
	line-height: 1.2 !important;
	max-width: none;
}

.bsd-search {
	width: 220px !important;
	padding: 0 16px !important;
	-webkit-appearance: none;
	appearance: none;
}
.bsd-search::-webkit-search-cancel-button { cursor: pointer; }

.bsd-sort {
	width: auto !important;
	min-width: 170px;
	padding: 0 38px 0 16px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B625C' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.bsd-search:focus,
.bsd-sort:focus {
	outline: 2px solid var(--bsd-accent);
	outline-offset: 1px;
	border-color: var(--bsd-accent) !important;
}

/* ================================================================= grid ==
 * Equal columns that fill the container: 4 across on desktop, 2 on tablet,
 * 1 on phones. minmax(0, 1fr) is what lets a card actually expand to its
 * column instead of shrinking to its content.
 *
 * The breakpoints below are keyed to the viewport as a baseline. The
 * @container block further down repeats them against the container's own
 * width, which is the measurement that matters when the theme wraps the page
 * in a narrow column — a wide screen with an 800px container must not try to
 * fit four cards. Browsers without container query support keep the baseline.
 */
.bsd-wrap { container-type: inline-size; container-name: bsddeals; }

.bsd-grid {
	display: grid;
	grid-template-columns: repeat(var(--bsd-columns, 4), minmax(0, 1fr));
	gap: var(--bsd-gap);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsd-cols-1 { --bsd-columns: 1; }
.bsd-cols-2 { --bsd-columns: 2; }
.bsd-cols-3 { --bsd-columns: 3; }
.bsd-cols-4 { --bsd-columns: 4; }
.bsd-cols-5 { --bsd-columns: 5; }

/* Baseline, by viewport. */
@media (max-width: 1024px) {
	.bsd-cols-3, .bsd-cols-4, .bsd-cols-5 { --bsd-columns: 2; }
}
@media (max-width: 767px) {
	.bsd-cols-2, .bsd-cols-3, .bsd-cols-4, .bsd-cols-5 { --bsd-columns: 1; }
}

/* Preferred, by container width. */
@container bsddeals (max-width: 1000px) {
	.bsd-cols-3, .bsd-cols-4, .bsd-cols-5 { --bsd-columns: 2; }
}
@container bsddeals (max-width: 620px) {
	.bsd-cols-2, .bsd-cols-3, .bsd-cols-4, .bsd-cols-5 { --bsd-columns: 1; }
}
@container bsddeals (min-width: 1001px) {
	.bsd-cols-3 { --bsd-columns: 3; }
	.bsd-cols-4 { --bsd-columns: 4; }
	.bsd-cols-5 { --bsd-columns: 5; }
}

/* ================================================================= card == */
.bsd-card {
	background: var(--bsd-card);
	border: 1px solid var(--bsd-line);
	border-radius: var(--bsd-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: transform .18s ease, box-shadow .18s ease;
}
.bsd-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(31, 27, 24, .10);
}
.bsd-card.is-featured { border-color: var(--bsd-accent); }

.bsd-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--bsd-soft);
	overflow: hidden;
	text-decoration: none;
	border: 0;
}

/* The image fills the top of the card. Themes love to cap image widths and
   add their own borders, so this one is locked down. */
.bsd-card__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	object-position: center;
	padding: 8px;
	margin: 0 !important;
	display: block;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: transform .3s ease;
}
.bsd-card:hover .bsd-card__media img { transform: scale(1.04); }

.bsd-card__noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bsd-muted);
	font-weight: 700;
	letter-spacing: .08em;
	font-size: 12px;
}

.bsd-badge {
	position: absolute;
	top: 10px;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	line-height: 1;
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 2;
}
.bsd-badge--pct { left: 10px; background: var(--bsd-accent); color: #fff; }
.bsd-badge--tag { right: 10px; background: var(--bsd-ink); color: #fff; font-weight: 600; }

.bsd-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
	min-width: 0;
}

.bsd-card__cat {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--bsd-muted);
	font-weight: 600;
	line-height: 1.2;
}

.bsd-card__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.bsd-card__title a { color: inherit; text-decoration: none; }
.bsd-card__title a:hover { color: var(--bsd-accent); }

.bsd-card__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--bsd-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Price hierarchy: struck-through original, then the deal price loud. */
.bsd-card__prices {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.bsd-price-old {
	color: var(--bsd-muted);
	font-size: 13px;
	text-decoration: line-through;
}
.bsd-price-new {
	color: var(--bsd-accent-dark);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.bsd-coupon {
	font-size: 12px;
	color: var(--bsd-ink);
	background: var(--bsd-soft);
	border: 1px dashed var(--bsd-accent);
	border-radius: 8px;
	padding: 5px 8px;
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bsd-coupon code { background: none; font-weight: 700; padding: 0; font-size: 12px; }

.bsd-card__foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bsd-card__time { font-size: 12px; color: var(--bsd-muted); white-space: nowrap; }

.bsd-btn {
	background: var(--bsd-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.2;
	display: inline-block;
	transition: background .15s ease;
}
.bsd-btn:hover { background: var(--bsd-accent-dark); color: #fff !important; }

/* ==================================================== load more / empty == */
.bsd-more-wrap { text-align: center; margin-top: 26px; }

.bsd-more {
	background: transparent;
	border: 2px solid var(--bsd-accent);
	color: var(--bsd-accent);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 30px;
	border-radius: 999px;
	cursor: pointer;
	width: auto !important;
	transition: background .15s ease, color .15s ease;
}
.bsd-more:hover { background: var(--bsd-accent); color: #fff; }
.bsd-more[disabled] { opacity: .55; cursor: default; }

.bsd-empty {
	text-align: center;
	color: var(--bsd-muted);
	padding: 36px 0;
	margin: 0;
}

.bsd-hidden { display: none !important; }

.bsd-note {
	margin: 22px 0 0;
	font-size: 12px;
	color: var(--bsd-muted);
	line-height: 1.6;
}
.bsd-note--standalone { margin: 0; }

/* ====================================================== WhatsApp block ==
 * Compact: a banner above the grid, not a hero section.
 */
.bsd-wa {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--bsd-accent-dark), var(--bsd-accent));
	color: #fff;
	border-radius: 16px;
	padding: 20px 24px;
	margin: 0 0 26px;
}

.bsd-wa__icon {
	background: rgba(255, 255, 255, .16);
	border-radius: 12px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	color: #fff;
}
.bsd-wa__icon svg { width: 24px; height: 24px; }

.bsd-wa__content { flex: 1 1 300px; min-width: 0; }
.bsd-wa__title {
	margin: 0 0 3px;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
}
.bsd-wa__text {
	margin: 0;
	opacity: .93;
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
}

.bsd-wa__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: none;
}

.bsd-wa__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--bsd-whatsapp);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 22px;
	border-radius: 999px;
	line-height: 1.2;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
	transition: transform .15s ease, background .15s ease;
}
.bsd-wa__btn:hover { transform: translateY(-2px); background: #1EBE5A; color: #fff !important; }
.bsd-wa__btn svg { width: 19px; height: 19px; flex: none; }
.bsd-wa__note { font-size: 11px; opacity: .85; }

/* ====================================================== floating button == */
.bsd-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--bsd-whatsapp);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 20px;
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
	transition: transform .15s ease;
}
.bsd-float:hover { transform: translateY(-2px); color: #fff !important; }

/* ========================================================== responsive ==
 * Column counts live with the grid rules above. These only handle spacing
 * and the pieces that need to stack.
 */
@media (max-width: 1024px) {
	.bsd-wa { padding: 18px 20px; }
}

@media (max-width: 820px) {
	.bsd-toolbar { flex-direction: column; align-items: stretch; }
	.bsd-tools { width: 100%; }
	.bsd-search { flex: 1 1 auto; width: auto !important; }
	.bsd-sort { flex: 0 0 auto; }
}

@media (max-width: 600px) {
	.bsd-grid { --bsd-gap: 16px; }

	.bsd-card__body { padding: 12px 12px 14px; }
	.bsd-price-new { font-size: 19px; }

	/* Stack the footer so the timestamp never squeezes the button. */
	.bsd-card__foot { flex-direction: column; align-items: stretch; gap: 8px; }
	.bsd-card__time { order: 2; text-align: center; }
	.bsd-btn { order: 1; text-align: center; }

	.bsd-wa { padding: 18px 16px; text-align: center; justify-content: center; gap: 14px; }
	.bsd-wa__action { width: 100%; }
	.bsd-wa__btn { width: 100%; justify-content: center; }
	.bsd-tools { flex-direction: column; align-items: stretch; }
	.bsd-search, .bsd-sort { width: 100% !important; }

	.bsd-float span { display: none; }
	.bsd-float { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.bsd-card,
	.bsd-card__media img,
	.bsd-wa__btn,
	.bsd-float { transition: none; }
	.bsd-card:hover { transform: none; }
	.bsd-card:hover .bsd-card__media img { transform: none; }
}