/* Ranshtam Deals: styles for the [ranshtam_deals] page only. Loaded by that shortcode,
   so the rest of the site never pays for it. */

/* ---------- deals page ---------- */

.rd-deals,
.rd-deals * {
	box-sizing: border-box;
}

.rd-deals {
	--rd-cols: 4;
	color: var(--rd-ink);
	display: grid;
	font-family: inherit;
	gap: clamp(1.4rem, 2.4vw, 2.6rem);
}

html[dir="rtl"] .rd-deals,
body.rtl .rd-deals {
	direction: rtl;
	text-align: right;
}

.rd-deals__empty {
	color: var(--rd-muted);
	padding: 2vw 0;
	text-align: center;
}

.rd-deals__section--group {
	background: var(--rd-soft);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	display: grid;
	gap: clamp(0.8rem, 1.2vw, 1.4rem);
	padding: clamp(0.9rem, 1.6vw, 1.8rem);
}

.rd-deals__head {
	display: grid;
	gap: 0.5em;
	justify-items: start;
}

.rd-deals__flag {
	background: var(--rd-accent);
	border-radius: 999px;
	color: #fff;
	font-size: clamp(0.68rem, 0.75vw, 0.78rem);
	font-weight: 700;
	padding: 0.25em 0.8em;
}

.rd-deals__heading {
	font-size: clamp(1.1rem, 1.5vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.rd-deals__note {
	font-size: clamp(0.8rem, 0.92vw, 0.95rem);
	line-height: 1.5;
	margin: 0;
	opacity: 0.85;
}

.rd-deals__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.rd-chip {
	background: #fff;
	border: 1px solid var(--rd-accent);
	border-radius: 999px;
	font-size: clamp(0.74rem, 0.85vw, 0.85rem);
	font-weight: 700;
	padding: 0.3em 0.9em;
}

.rd-deals__grid {
	align-content: start;
	display: grid;
	gap: clamp(0.6rem, 0.8vw, 1rem);
	grid-template-columns: repeat(var(--rd-cols, 4), minmax(0, 1fr));
	justify-content: start;
}

/* belt and braces: an empty paragraph injected between the cards would occupy a whole column */

.rd-deals__grid > p:empty,
.rd-deals__grid > br,
.rd-deals__section > p:empty {
	display: none;
}

.rd-item {
	align-content: start;
	background: #fff !important;
	border: 1px solid var(--rd-line) !important;
	border-radius: var(--rd-radius-sm) !important;
	color: var(--rd-ink) !important;
	display: grid;
	gap: 0.4em;
	padding: 0.8em !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.rd-item--link:hover {
	border-color: var(--rd-accent) !important;
	transform: translateY(-2px);
}

.rd-item.is-picked {
	border-color: var(--rd-accent) !important;
	box-shadow: 0 0 0 1px var(--rd-accent);
}

.rd-item__media {
	display: block;
	overflow: hidden;
}

.rd-item__image {
	border-radius: var(--rd-radius-sm);
	display: block;
	height: auto;
	width: 100%;
}

.rd-item__name {
	color: var(--rd-ink) !important;
	display: -webkit-box;
	font-size: clamp(0.78rem, 0.9vw, 0.92rem);
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	text-decoration: none !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.rd-item__deal {
	color: var(--rd-muted);
	font-size: clamp(0.72rem, 0.82vw, 0.82rem);
}

.rd-item__price {
	font-size: clamp(0.8rem, 0.92vw, 0.95rem);
	font-weight: 700;
}

.rd-item__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
}

.rd-item__save {
	background: var(--rd-accent);
	border-radius: 999px;
	color: #fff;
	font-size: clamp(0.68rem, 0.76vw, 0.78rem);
	font-weight: 700;
	padding: 0.2em 0.7em;
}

.rd-item__stepper {
	justify-self: stretch;
}

/* the pill spans the card, so the buttons split the slack instead of leaving a gap at the end */

.rd-item__stepper .rd-stepper__btn {
	flex: 1 1 auto;
	min-width: 1.7em;
	padding-inline: 0;
}

.rd-item__stepper .rd-stepper__input {
	flex: 0 1 auto;
	min-width: 0;
	width: 2.6em !important;
}

.rd-item--quick {
	align-content: space-between;
}

.rd-item--quick:hover {
	border-color: var(--rd-accent) !important;
}

.rd-item__add {
	background: var(--rd-accent) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--rd-ink) !important;
	cursor: pointer;
	font-size: clamp(0.75rem, 0.86vw, 0.9rem) !important;
	font-weight: 700;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	padding: 0.6em 1em !important;
	text-transform: none !important;
	width: 100% !important;
}

.rd-item__add:hover,
.rd-item__add:focus {
	filter: brightness(0.95);
}

.rd-item__add.is-busy,
.rd-item__add:disabled {
	cursor: default;
	opacity: 0.6;
}

.rd-builder {
	align-items: center;
	background: #fff;
	border: 1px solid var(--rd-accent);
	border-radius: var(--rd-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	justify-content: space-between;
	padding: 0.9em 1em;
	position: sticky;
	inset-block-end: clamp(0.4rem, 0.6vw, 0.8rem);
	z-index: 5;
}

.rd-builder__info {
	display: grid;
	flex: 1 1 12em;
	gap: 0.15em;
	min-width: 0;
}

.rd-builder__count {
	font-size: clamp(0.8rem, 0.92vw, 0.95rem);
	font-weight: 700;
}

.rd-builder__message {
	color: var(--rd-muted);
	font-size: clamp(0.74rem, 0.85vw, 0.85rem);
}

.rd-builder__totals {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.rd-builder__totals b {
	font-size: clamp(1rem, 1.25vw, 1.3rem);
	font-weight: 700;
}

.rd-builder__regular {
	color: var(--rd-muted);
	font-size: clamp(0.78rem, 0.88vw, 0.9rem);
	text-decoration: line-through;
}

/* inside a flex row the hidden attribute needs saying out loud */

.rd-builder__regular[hidden] {
	display: none;
}

.rd-builder__saved {
	background: var(--rd-soft);
	border-radius: 999px;
	font-size: clamp(0.72rem, 0.82vw, 0.82rem);
	font-weight: 700;
	padding: 0.2em 0.7em;
}

.rd-builder__cta {
	background: var(--rd-accent) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--rd-ink) !important;
	cursor: pointer;
	font-size: clamp(0.8rem, 0.92vw, 0.95rem) !important;
	font-weight: 700;
	letter-spacing: normal !important;
	min-height: 0 !important;
	padding: 0.7em 1.6em !important;
	text-transform: none !important;
	width: auto !important;
}

.rd-builder__cta:disabled {
	cursor: default;
	opacity: 0.45;
}

.rd-builder__cta.is-busy {
	opacity: 0.6;
}

@media (max-width: 1024px) {
	.rd-deals--wide .rd-deals__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.rd-deals {
		gap: 6vw;
	}

	.rd-deals__section--group {
		gap: 3.5vw;
		padding: 4vw;
	}

	.rd-deals .rd-deals__grid {
		gap: 3vw;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* two rows instead of three: the numbers on one line, a full width button under them */

	.rd-builder {
		display: grid;
		gap: 2.5vw;
		grid-template-columns: minmax(0, 1fr) auto;
		inset-block-end: calc(2vw + env(safe-area-inset-bottom, 0px));
		padding: 3.5vw;
	}

	.rd-builder__info {
		grid-column: 1;
	}

	.rd-builder__totals {
		align-items: flex-end;
		align-self: start;
		flex-direction: column;
		gap: 0.15em;
		grid-column: 2;
	}

	.rd-builder__message {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.rd-builder__cta {
		grid-column: 1 / -1;
		padding: 0.9em 1.2em !important;
		width: 100% !important;
	}

	/* thumb sized controls */

	.rd-item__stepper .rd-stepper__btn {
		padding: 0.65em 0.2em;
	}

	.rd-mix__picks,
	.rd-cart-upsell__picks {
		margin-inline: -1vw;
		padding-inline: 1vw;
		scroll-padding-inline: 1vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-item {
		transition: none;
	}
}

/* landscape phones and small tablets fit a third card without crowding */

@media (min-width: 560px) and (max-width: 767px) {
	.rd-deals .rd-deals__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 400px) {
	.rd-item {
		padding: 0.6em !important;
	}

	.rd-item__stepper .rd-stepper__btn {
		min-width: 1.5em;
	}

	.rd-item__stepper .rd-stepper__input {
		width: 2.2em !important;
	}

	.rd-builder__totals {
		gap: 0.35em;
	}
}

.ranshtam-deal-cart-note .rd-note-link {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 0.25em;
	transition: text-decoration-style 0.15s ease;
}

.ranshtam-deal-cart-note .rd-note-link:hover {
	color: inherit !important;
	text-decoration-style: solid;
}

/* the anchor target sits under a sticky header on most themes */

.rd-deals__section--group {
	scroll-margin-block-start: 8vw;
}

/* ---------- campaign view: one deal, reached by its own link ---------- */

.rd-deals--focus {
	gap: clamp(1rem, 1.8vw, 2rem);
}

.rd-deals__back {
	margin: 0;
	text-align: center;
}

/* styled on the anchor, so an unwrapped link keeps its look */
.rd-deals__back-link {
	color: var(--rd-muted) !important;
	display: block;
	font-size: clamp(0.82rem, 0.95vw, 0.95rem);
	text-align: center;
	text-decoration: underline !important;
	text-underline-offset: 0.25em;
}

.rd-deals__back-link:hover,
.rd-deals__back-link:focus {
	color: var(--rd-accent) !important;
}

.rd-deals__empty .rd-deals__back-link {
	display: inline;
}

/* A group with no tiers is a plain shelf of products, so it drops the deal colouring. */
.rd-deals__section--plain {
	background: none;
	border: 0;
	padding-inline: 0;
}