/**
 * Vendor page — translated from the two designs (desktop and mobile,
 * 2026-10-01). Only the page body: the header and footer are Elementor's.
 *
 * Every rule is scoped under .hec-vendor so it outranks the Elementor kit's
 * (0,1,1) element rules. Logical properties throughout: the site is RTL.
 *
 * One HTML serves both layouts. The source order is the main column, then
 * the side column. From 1024px up, grid puts the supplier card and community
 * box in a sticky side column. Below that, .hec-vendor__text, __main, __side
 * and __side-inner become display: contents and `order` sets the phone
 * sequence: the main parts by their --hv-slot (the card's order), the side
 * boxes between them. The supplier card looks the same at every width.
 *
 * Colours are the designs', measured on white unless noted:
 *   #8E5E8D  white text on it 5.08:1. Filled buttons, tag, numbers.
 *   #7A4A79  accent text 6.81:1.
 *   #6E6B85  muted text 5.12:1.
 *   #A676A5  decoration only: 3.65:1 with white text fails AA.
 */

.hec-vendor {
	--hv-ink: #1F1B2D;
	--hv-text: #2C2940;
	--hv-body: #4A4761;
	--hv-muted: #6E6B85;
	--hv-faint: #B7B4C6;
	--hv-line: #E3E1EA;
	--hv-line-soft: #EFEDF3;
	--hv-field: #DCD9E5;
	--hv-btn-line: #D6D3E0;
	--hv-accent: #A676A5;
	--hv-accent-strong: #8E5E8D;
	--hv-accent-ink: #7A4A79;
	--hv-tint: #F2ECF2;
	--hv-tint-line: #E2D3E1;
	--hv-highlight: #F9F5F9;
	--hv-dark: #2A2337;
	--hv-dark-label: #C79FC6;
	--hv-placeholder: #E9E6F0;
	--hv-ground: #F6F5F8;
	--hv-card-ground: #FAFAFC;
	--hv-community-text: #5C4A5C;
	--hv-display: "Amatic SC", "Noto Sans Hebrew", sans-serif;

	background: var(--hv-ground);
	color: var(--hv-ink);
	font-family: "Noto Sans Hebrew", sans-serif;
}

.hec-vendor *,
.hec-vendor *::before,
.hec-vendor *::after {
	box-sizing: border-box;
}

.hec-vendor a {
	color: inherit;
	text-decoration: none;
}

.hec-vendor a:focus-visible,
.hec-vendor button:focus-visible {
	outline: 2px solid var(--hv-accent-ink);
	outline-offset: 2px;
}

.hec-vendor .hec-vendor__wrap {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 36px;
}

/* ---------- Top band ---------- */

.hec-vendor .hec-vendor__top {
	background: #FFFFFF;
	border-block-end: 1px solid var(--hv-line);
}

.hec-vendor .hec-vendor__top .hec-vendor__wrap {
	padding-block: 22px 56px;
}

.hec-vendor .hec-vendor__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block-end: 30px;
	font-size: 13px;
	color: var(--hv-muted);
}

.hec-vendor .hec-vendor__crumbs a {
	color: var(--hv-muted);
}

.hec-vendor .hec-vendor__crumbs a:hover {
	color: var(--hv-accent-ink);
}

.hec-vendor .hec-vendor__crumb-sep {
	color: var(--hv-faint);
}

.hec-vendor .hec-vendor__crumbs [aria-current] {
	color: var(--hv-ink);
	font-weight: 600;
}

.hec-vendor .hec-vendor__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: 56px;
	align-items: center;
}

.hec-vendor .hec-vendor__text,
.hec-vendor .hec-vendor__head {
	min-width: 0;
}

.hec-vendor .hec-vendor__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 22px;
	padding: 6px 12px;
	border: 1px solid var(--hv-tint-line);
	border-radius: 3px;
	background: var(--hv-tint);
	color: var(--hv-accent-ink);
	font-size: 13px;
	font-weight: 700;
}

.hec-vendor .hec-vendor__name {
	margin: 0 0 20px;
	font-family: var(--hv-display);
	font-size: 96px;
	font-weight: 700;
	line-height: .92;
	letter-spacing: 0;
	color: var(--hv-ink);
	text-wrap: pretty;
}

.hec-vendor .hec-vendor__lede {
	max-width: 32em;
	margin: 0 0 32px;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--hv-body);
	text-wrap: pretty;
}

.hec-vendor .hec-vendor__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* ---------- Buttons ---------- */

.hec-vendor .hec-vendor__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 26px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	/* Elementor's old single-post template and each vendor's own stylesheet
	   still load here with a global ".whatsapp-button" rule: a green glow and
	   a pulse. The class stays on these links for the analytics beacon. */
	box-shadow: none;
	animation: none;
}

.hec-vendor .hec-vendor__btn--primary {
	background: var(--hv-accent-strong);
	color: #FFFFFF;
}

.hec-vendor .hec-vendor__btn--primary:hover,
.hec-vendor .hec-vendor__btn--primary:focus-visible {
	background: var(--hv-accent-ink);
	color: #FFFFFF;
}

.hec-vendor .hec-vendor__btn--outline {
	padding-inline: 22px;
	border-color: var(--hv-btn-line);
	background: #FFFFFF;
	color: var(--hv-ink);
	font-weight: 600;
}

.hec-vendor .hec-vendor__btn--outline:hover {
	border-color: var(--hv-accent);
	color: var(--hv-accent-ink);
}

.hec-vendor .hec-vendor__btn--block {
	display: flex;
	width: 100%;
}

.hec-vendor .hec-vendor__textlink {
	font-size: 15px;
	color: var(--hv-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hec-vendor .hec-vendor__textlink:hover {
	color: var(--hv-accent-ink);
}

/* A web address written inside a text (hec_vendor_text()). */
.hec-vendor .hec-vendor__why-intro a,
.hec-vendor .hec-vendor__benefit-heading a {
	color: var(--hv-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.hec-vendor .hec-vendor__lede a,
.hec-vendor .hec-vendor__card-note a,
.hec-vendor .hec-vendor__quote a,
.hec-vendor .hec-vendor__benefit-text a {
	color: var(--hv-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

/* ---------- Discount card ---------- */

.hec-vendor .hec-vendor__card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--hv-line);
	border-radius: 6px;
	background: var(--hv-card-ground);
}

.hec-vendor .hec-vendor__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 28px;
	border-block-end: 1px solid var(--hv-line);
	background: #FFFFFF;
}

.hec-vendor .hec-vendor__card-logo {
	display: block;
	width: auto;
	max-width: 50%;
	height: 58px;
	object-fit: contain;
}

.hec-vendor .hec-vendor__card-offer {
	margin-inline-start: auto;
	text-align: start;
}

.hec-vendor .hec-vendor__card-label {
	display: block;
	margin-block-end: 2px;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--hv-muted);
}

.hec-vendor .hec-vendor__card-figure {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.hec-vendor .hec-vendor__card-value {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--hv-accent-ink);
	white-space: nowrap;
}

.hec-vendor .hec-vendor__card-qualifier {
	font-size: 15px;
	font-weight: 600;
	color: var(--hv-body);
}

.hec-vendor .hec-vendor__card-banner {
	position: relative;
	height: 260px;
	background: var(--hv-placeholder);
}

.hec-vendor .hec-vendor__card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hec-vendor .hec-vendor__ribbon {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--hv-accent-strong);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
}

.hec-vendor .hec-vendor__coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 28px;
	border-block-start: 1px solid var(--hv-line);
	background: #FFFFFF;
	font-size: 14px;
	color: var(--hv-body);
}

.hec-vendor .hec-vendor__coupon-label {
	color: var(--hv-muted);
}

.hec-vendor .hec-vendor__coupon-code {
	padding: 3px 10px;
	border: 1px dashed var(--hv-accent);
	border-radius: 3px;
	background: var(--hv-tint);
	color: var(--hv-ink);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 700;
	user-select: all;
}

/* The theme reset paints every button:hover and :focus #c36, and the
   Elementor kit adds button rules at (0,2,1). Each real button here names
   the element and restates its look for those states, so it keeps it. */
.hec-vendor button.hec-vendor__coupon-copy,
.hec-vendor button.hec-vendor__coupon-copy:hover,
.hec-vendor button.hec-vendor__coupon-copy:focus {
	padding: 4px 10px;
	border: 1px solid var(--hv-field);
	border-radius: 3px;
	background: #FFFFFF;
	color: var(--hv-accent-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.hec-vendor button.hec-vendor__coupon-copy:hover {
	border-color: var(--hv-accent);
}

.hec-vendor .hec-vendor__card-note {
	margin: 0;
	padding: 14px 28px;
	border-block-start: 1px solid var(--hv-line);
	background: #FFFFFF;
	font-size: 13px;
	color: var(--hv-muted);
}

.hec-vendor .hec-vendor__card > :first-child {
	border-block-start: 0;
}

/* ---------- Body and side column ---------- */

.hec-vendor .hec-vendor__body .hec-vendor__wrap {
	padding-block: 56px 64px;
}

.hec-vendor .hec-vendor__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 344px;
	gap: 48px;
	align-items: start;
}

.hec-vendor .hec-vendor__main {
	display: flex;
	flex-direction: column;
	gap: 48px;
	min-width: 0;
}

.hec-vendor .hec-vendor__side {
	position: sticky;
	top: var(--hec-vendor-sticky-top, 24px);
	min-width: 0;
}

body.admin-bar .hec-vendor .hec-vendor__side {
	top: calc(var(--hec-vendor-sticky-top, 24px) + 32px);
}

.hec-vendor .hec-vendor__side-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---------- Recommendation ---------- */

.hec-vendor .hec-vendor__recommend {
	margin: 0;
	padding: 34px 38px;
	border: 1px solid var(--hv-line);
	border-inline-start: 3px solid var(--hv-accent);
	border-radius: 4px;
	background: #FFFFFF;
}

.hec-vendor .hec-vendor__kicker {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--hv-accent-ink);
}

.hec-vendor .hec-vendor__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 26px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -.015em;
	color: var(--hv-ink);
	quotes: none;
	text-wrap: pretty;
}

.hec-vendor .hec-vendor__byline {
	margin-block-start: 18px;
	font-size: 14px;
	color: var(--hv-muted);
}

/* ---------- Section heads ---------- */

.hec-vendor .hec-vendor__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 20px;
	margin-block-end: 18px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--hv-line);
}

.hec-vendor .hec-vendor__heading {
	margin: 0;
	font-family: var(--hv-display);
	font-size: 50px;
	font-weight: 700;
	line-height: .95;
	letter-spacing: 0;
	color: var(--hv-ink);
}

.hec-vendor .hec-vendor__heading--small {
	margin-block-end: 4px;
	font-size: 40px;
	line-height: .98;
}

.hec-vendor .hec-vendor__section-sub {
	margin: 0;
	font-size: 14px;
	color: var(--hv-muted);
}

/* ---------- למה כדאי ---------- */

.hec-vendor .hec-vendor__why .hec-vendor__section-head {
	margin-block-end: 0;
}

.hec-vendor .hec-vendor__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hv-line);
	border-block-start: 0;
	border-radius: 0 0 4px 4px;
	background: #FFFFFF;
}

.hec-vendor .hec-vendor__benefit {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 0 20px;
	align-items: baseline;
	margin: 0;
	padding: 20px 24px;
	border-block-end: 1px solid var(--hv-line-soft);
}

.hec-vendor .hec-vendor__benefit:last-child {
	border-block-end: 0;
}

.hec-vendor .hec-vendor__benefit--tagged {
	background: var(--hv-highlight);
}

.hec-vendor .hec-vendor__benefit-n {
	font-size: 13px;
	font-weight: 700;
	color: var(--hv-accent-strong);
}

.hec-vendor .hec-vendor__benefit--tagged .hec-vendor__benefit-n {
	color: var(--hv-accent-ink);
}

.hec-vendor .hec-vendor__benefit-body {
	min-width: 0;
}

.hec-vendor .hec-vendor__tag {
	display: inline-block;
	margin-block-end: 8px;
	padding: 3px 9px;
	border-radius: 3px;
	background: var(--hv-accent-strong);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}

.hec-vendor .hec-vendor__benefit-text {
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--hv-text);
}

/* The free text above the list: the first row of the same box. */
.hec-vendor .hec-vendor__why-intro {
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--hv-line);
	border-block-start: 0;
	border-block-end-color: var(--hv-line-soft);
	background: #FFFFFF;
	font-size: 18px;
	line-height: 1.6;
	color: var(--hv-body);
}

/* With no list under it, it closes the box itself. */
.hec-vendor .hec-vendor__why-intro:last-child {
	border-block-end-color: var(--hv-line);
	border-radius: 0 0 4px 4px;
}

/* A point's bold title, with the text under it explaining it. */
.hec-vendor .hec-vendor__benefit-title {
	display: block;
	margin-block-end: 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hv-ink);
}

.hec-vendor .hec-vendor__benefit-title + .hec-vendor__benefit-text {
	font-size: 16px;
	color: var(--hv-body);
}

/* A point of a plain list: a dot where an item has its number, and less air. */
.hec-vendor .hec-vendor__benefit--bullet {
	padding-block: 12px;
}

.hec-vendor .hec-vendor__benefit-dot {
	justify-self: center;
	align-self: start;
	width: 6px;
	height: 6px;
	margin-block-start: .65em;
	border-radius: 50%;
	background: var(--hv-accent-strong);
}

.hec-vendor .hec-vendor__benefit--bullet .hec-vendor__benefit-text {
	font-size: 17px;
}

/* A paragraph and a footnote take the full width of the box. */
.hec-vendor .hec-vendor__benefit--text,
.hec-vendor .hec-vendor__benefit--note {
	display: block;
}

.hec-vendor .hec-vendor__benefit--text .hec-vendor__benefit-text {
	line-height: 1.65;
	color: var(--hv-body);
}

.hec-vendor .hec-vendor__benefit--note {
	padding-block: 12px;
	background: var(--hv-card-ground);
}

.hec-vendor .hec-vendor__benefit--note .hec-vendor__benefit-text {
	font-size: 14px;
	color: var(--hv-muted);
}

/* A heading line inside the list: no number, and the count goes on past it. */
.hec-vendor .hec-vendor__benefit--heading {
	display: block;
	padding-block: 16px 12px;
	background: var(--hv-card-ground);
}

.hec-vendor .hec-vendor__benefit-heading {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hv-accent-ink);
}

/* ---------- Gallery ---------- */

.hec-vendor .hec-vendor__shots {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hec-vendor .hec-vendor__shot {
	margin: 0;
}

.hec-vendor .hec-vendor__shot--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.hec-vendor .hec-vendor__shot-link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hv-placeholder);
}

.hec-vendor .hec-vendor__shot-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.hec-vendor .hec-vendor__shot-link:hover .hec-vendor__shot-image {
	transform: scale(1.03);
}

.hec-vendor .hec-vendor__swipe-hint {
	display: none;
}

/* ---------- Videos ---------- */

.hec-vendor .hec-vendor__video-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hec-vendor .hec-vendor__video {
	margin: 0;
}

.hec-vendor .hec-vendor__video-play {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hv-dark);
	color: #FFFFFF;
}

.hec-vendor .hec-vendor__video-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
	transition: opacity .15s ease;
}

.hec-vendor .hec-vendor__video-play:hover .hec-vendor__video-thumb {
	opacity: 1;
}

.hec-vendor .hec-vendor__video-icon {
	position: absolute;
	inset: 0;
	width: 64px;
	height: 64px;
	margin: auto;
	border-radius: 50%;
	background: rgba(42, 35, 55, .82);
}

/* The play triangle points right in every language, so it is placed physically. */
.hec-vendor .hec-vendor__video-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #FFFFFF;
}

.hec-vendor .hec-vendor__video-title {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 28px 14px 12px;
	background: linear-gradient(to top, rgba(31, 27, 45, .85), rgba(31, 27, 45, 0));
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	text-align: start;
}

.hec-vendor .hec-vendor__video-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 4px;
	background: var(--hv-dark);
}

/* ---------- Reviews ---------- */

.hec-vendor .hec-vendor__reviews {
	padding: 32px 36px;
	border: 1px solid var(--hv-line);
	border-radius: 4px;
	background: #FFFFFF;
}

.hec-vendor .hec-vendor__reviews > .hec-vendor__section-sub {
	margin-block-end: 24px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--hv-line-soft);
	font-size: 15px;
}

/* ---------- Supplier card ---------- */

.hec-vendor .hec-vendor__supplier {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hv-line);
	border-radius: 4px;
	background: #FFFFFF;
}

.hec-vendor .hec-vendor__band {
	padding: 20px 24px;
	background: var(--hv-dark);
	color: #FFFFFF;
}

.hec-vendor .hec-vendor__band-label {
	display: block;
	margin-block-end: 6px;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--hv-dark-label);
}

.hec-vendor .hec-vendor__band-figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.hec-vendor .hec-vendor__band-value {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: #FFFFFF;
	white-space: nowrap;
}

.hec-vendor .hec-vendor__band-text {
	font-size: 15px;
	font-weight: 600;
}

.hec-vendor .hec-vendor__supplier-cta {
	padding: 22px 24px 0;
}

.hec-vendor .hec-vendor__supplier-note {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hv-body);
}

.hec-vendor .hec-vendor__supplier-cta .hec-vendor__btn {
	padding: 14px;
	font-size: 15px;
}

.hec-vendor .hec-vendor__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 10px 24px 22px;
}

.hec-vendor .hec-vendor__band + .hec-vendor__grid,
.hec-vendor .hec-vendor__grid:first-child {
	padding-block-start: 22px;
}

.hec-vendor .hec-vendor__grid .hec-vendor__btn {
	padding: 12px 8px;
	border-color: var(--hv-field);
	font-size: 14px;
}

.hec-vendor .hec-vendor__grid .hec-vendor__btn:nth-child(3) {
	grid-column: 1 / -1;
}

.hec-vendor .hec-vendor__rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 18px 24px;
	border-block-start: 1px solid var(--hv-line-soft);
	font-size: 14px;
}

.hec-vendor .hec-vendor__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.hec-vendor .hec-vendor__row dt {
	margin: 0;
	font-weight: 400;
	color: var(--hv-muted);
}

.hec-vendor .hec-vendor__row dd {
	margin: 0;
	font-weight: 600;
	text-align: end;
}

/* ---------- Community box ---------- */

.hec-vendor .hec-vendor__community {
	padding: 20px 22px;
	border: 1px solid var(--hv-tint-line);
	border-radius: 4px;
	background: var(--hv-tint);
}

.hec-vendor .hec-vendor__community-title {
	margin: 0 0 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hv-ink);
}

.hec-vendor .hec-vendor__community-text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--hv-community-text);
}

.hec-vendor .hec-vendor__community-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--hv-accent-ink);
}

.hec-vendor .hec-vendor__community-link:hover {
	color: var(--hv-ink);
}

/* ---------- Phone bar (shown below 768px) ---------- */

.hec-vendor .hec-vendor__bar {
	display: none;
}

/* ---------- Below 1024px: one column, the phone order ---------- */

@media (max-width: 1023px) {
	.hec-vendor .hec-vendor__wrap {
		padding-inline: 16px;
	}

	.hec-vendor .hec-vendor__top .hec-vendor__wrap {
		padding-block: 16px 24px;
	}

	.hec-vendor .hec-vendor__crumbs {
		gap: 6px;
		padding-block-end: 16px;
		font-size: 12px;
	}

	/* Stretch: the wide layout's centring would shrink each part to its content. */
	.hec-vendor .hec-vendor__intro {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hec-vendor .hec-vendor__text {
		display: contents;
	}

	.hec-vendor .hec-vendor__head {
		order: 1;
	}

	.hec-vendor .hec-vendor__card {
		order: 2;
		margin-block-end: 18px;
		border-radius: 4px;
	}

	.hec-vendor .hec-vendor__lede-wrap {
		order: 3;
	}

	.hec-vendor .hec-vendor__eyebrow {
		margin-block-end: 12px;
		padding: 5px 10px;
		font-size: 12px;
	}

	.hec-vendor .hec-vendor__name {
		margin-block-end: 14px;
		font-size: 62px;
		line-height: .9;
	}

	.hec-vendor .hec-vendor__lede {
		margin-block-end: 20px;
		font-size: 16px;
	}

	.hec-vendor .hec-vendor__card-head {
		gap: 14px;
		padding: 14px 16px;
	}

	.hec-vendor .hec-vendor__card-logo {
		height: 42px;
	}

	.hec-vendor .hec-vendor__card-label {
		margin: 0;
		font-size: 11px;
	}

	.hec-vendor .hec-vendor__card-figure {
		gap: 6px;
	}

	.hec-vendor .hec-vendor__card-value {
		font-size: 34px;
	}

	.hec-vendor .hec-vendor__card-qualifier {
		font-size: 13px;
	}

	.hec-vendor .hec-vendor__card-banner {
		height: 180px;
	}

	.hec-vendor .hec-vendor__coupon {
		padding: 10px 16px;
	}

	.hec-vendor .hec-vendor__card-note {
		padding: 10px 16px;
		font-size: 12px;
	}

	.hec-vendor .hec-vendor__body .hec-vendor__wrap {
		padding-block: 20px 24px;
	}

	.hec-vendor .hec-vendor__layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.hec-vendor .hec-vendor__main,
	.hec-vendor .hec-vendor__side,
	.hec-vendor .hec-vendor__side-inner {
		display: contents;
	}

	/* The parts keep the card's order: each carries its slot (1, 2, 4, 5, 7;
	   inc/vendor/render.php, hec_vendor_main()), and the side boxes take 3
	   and 6, so the supplier card follows the second part. */
	.hec-vendor .hec-vendor__recommend,
	.hec-vendor .hec-vendor__why,
	.hec-vendor .hec-vendor__gallery,
	.hec-vendor .hec-vendor__videos,
	.hec-vendor .hec-vendor__reviews {
		order: var(--hv-slot, 0);
	}

	.hec-vendor .hec-vendor__recommend {
		padding: 20px 18px;
	}

	.hec-vendor .hec-vendor__supplier {
		order: 3;
	}

	/* min-width: the swipe strip must scroll inside the section, not widen it. */
	.hec-vendor .hec-vendor__gallery {
		min-width: 0;
	}

	.hec-vendor .hec-vendor__community {
		order: 6;
		padding: 18px;
	}

	.hec-vendor .hec-vendor__reviews {
		padding: 20px 18px;
	}

	.hec-vendor .hec-vendor__kicker {
		margin-block-end: 10px;
		font-size: 11px;
	}

	.hec-vendor .hec-vendor__quote {
		font-size: 19px;
		line-height: 1.5;
	}

	.hec-vendor .hec-vendor__byline {
		margin-block-start: 12px;
		font-size: 13px;
	}

	.hec-vendor .hec-vendor__section-head {
		flex-direction: column;
		align-items: flex-start;
		padding-block-end: 12px;
	}

	.hec-vendor .hec-vendor__heading {
		font-size: 40px;
	}

	.hec-vendor .hec-vendor__heading--small {
		font-size: 34px;
	}

	.hec-vendor .hec-vendor__section-sub {
		font-size: 13px;
	}

	.hec-vendor .hec-vendor__benefit {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 0 12px;
		padding: 15px 16px;
	}

	.hec-vendor .hec-vendor__benefit-n {
		font-size: 12px;
	}

	.hec-vendor .hec-vendor__tag {
		margin-block-end: 7px;
		padding: 3px 8px;
		font-size: 11px;
	}

	.hec-vendor .hec-vendor__benefit-text {
		font-size: 16px;
	}

	.hec-vendor .hec-vendor__why-intro {
		padding: 15px 16px;
		font-size: 16px;
	}

	.hec-vendor .hec-vendor__benefit--heading {
		padding-block: 13px 10px;
	}

	.hec-vendor .hec-vendor__benefit-title {
		font-size: 16px;
	}

	.hec-vendor .hec-vendor__benefit-title + .hec-vendor__benefit-text,
	.hec-vendor .hec-vendor__benefit--bullet .hec-vendor__benefit-text {
		font-size: 15px;
	}

	.hec-vendor .hec-vendor__benefit--bullet,
	.hec-vendor .hec-vendor__benefit--note {
		padding-block: 10px;
	}

	.hec-vendor .hec-vendor__benefit--note .hec-vendor__benefit-text {
		font-size: 13px;
	}

	.hec-vendor .hec-vendor__benefit-heading {
		font-size: 15px;
	}

	/* The supplier card keeps its wide-screen look on phones: the band with
	   its label, the note and WhatsApp button, the buttons, then the rows. */

	.hec-vendor .hec-vendor__shots {
		display: flex;
		gap: 8px;
		margin-inline: -16px;
		padding: 0 16px 6px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	.hec-vendor .hec-vendor__shot,
	.hec-vendor .hec-vendor__shot--lead {
		flex: 0 0 210px;
		scroll-snap-align: start;
	}

	.hec-vendor .hec-vendor__swipe-hint {
		display: block;
		margin: 0;
		padding-block-start: 10px;
		font-size: 12px;
		color: var(--hv-muted);
	}

	.hec-vendor .hec-vendor__video-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hec-vendor .hec-vendor__reviews > .hec-vendor__section-sub {
		margin-block-end: 16px;
		padding-block-end: 14px;
		font-size: 14px;
	}
}

/* ---------- Phones: the bar replaces the hero and side buttons ---------- */

@media (max-width: 767px) {
	.hec-vendor .hec-vendor__actions {
		display: none;
	}

	.hec-vendor .hec-vendor__lede {
		margin: 0;
	}

	.hec-vendor .hec-vendor__bar {
		display: grid;
		position: sticky;
		bottom: 0;
		z-index: 20;
		grid-template-columns: minmax(0, 1fr) 58px;
		gap: 10px;
		padding: 12px 16px;
		border-block-start: 1px solid var(--hv-line);
		background: #FFFFFF;
		box-shadow: 0 -6px 18px rgba(31, 27, 45, .08);
	}

	.hec-vendor .hec-vendor__bar-quote {
		min-height: 48px;
		padding: 14px;
		font-size: 16px;
	}

	.hec-vendor .hec-vendor__bar-quote:only-child {
		grid-column: 1 / -1;
	}

	.hec-vendor .hec-vendor__bar-call {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		border: 1px solid var(--hv-field);
		border-radius: 4px;
		background: #FFFFFF;
		color: var(--hv-dark);
	}

	.hec-vendor .hec-vendor__bar-call:hover {
		border-color: var(--hv-accent);
		color: var(--hv-accent-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hec-vendor .hec-vendor__btn,
	.hec-vendor .hec-vendor__shot-image,
	.hec-vendor .hec-vendor__video-thumb {
		transition: none;
	}

	.hec-vendor .hec-vendor__shot-link:hover .hec-vendor__shot-image {
		transform: none;
	}
}