/* ==========================================================================
   KK Offers — archive, product cards, single product page.
   Relies on shared archive chrome from kk-recipes.css and tokens from kk-base.css.
   ========================================================================== */

.kk-offer-archive,
.kk-offer-single {
	font-family: var(--kk-font);
	color: var(--kk-text);
	background: var(--kk-bg);
	min-height: 60vh;
}

/* Toolbar layout specifics on the offer archive */
.kk-offer-archive .kk-archive-head__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kk-offer-archive .kk-mfilters { flex: 1 1 auto; min-width: 0; }

/* Wine archive accent */
.kk-offer-archive--wine .kk-archive-tab--active { border-bottom-color: var(--kk-wine); }

/* ==========================================================================
   Product card
   ========================================================================== */

.kk-ogrid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(var(--kk-cols, 3), minmax(0, 1fr));
	align-items: stretch;
}

.kk-ogrid--3col { --kk-cols: 3; }

/* Tile style: the photo sits on a soft grey rounded tile, text below, no card box */
.kk-ocard {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.kk-ocard:hover { border-color: transparent; box-shadow: none; transform: none; }

.kk-ocard--sold-out .kk-ocard__img-wrap img { filter: grayscale(1); opacity: 0.55; }
.kk-ocard--sold-out .kk-ocard__title,
.kk-ocard--sold-out .kk-ocard__pricing { color: var(--kk-text-3); }

.kk-ocard__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

/* Image: square, product centred, never cropped */
.kk-ocard__img-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
	/* White tile + hairline border: photo backgrounds (white or light studio
	   grey) blend in via multiply instead of showing as a darker box, and the
	   % padding keeps the same white margin round the product at every size. */
	background: #fff;
	border: none;   /* the grid already draws lines between cards — no box-in-a-box */
	border-radius: var(--kk-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.kk-ocard__img-wrap img,
.kk-ocard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	padding: 11%;
	box-sizing: border-box;
	mix-blend-mode: multiply;
	transition: transform var(--kk-duration-md) var(--kk-ease);
}

.kk-ocard:hover .kk-ocard__img-wrap img { transform: scale(1.03); }
.kk-ocard:hover .kk-ocard__img-wrap--gallery img { transform: none; }

.kk-ocard__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	color: var(--kk-text-3);
	background: var(--kk-surface);
}

.kk-ocard__placeholder svg { opacity: 0.5; }
.kk-ocard__placeholder-text { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 1; }

/* "Image coming soon" artwork (kk_image_placeholder_svg): fills its box, keeps 1:1. */
.kk-imgsoon { display: block; width: 100%; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.kk-ocard__placeholder .kk-imgsoon { opacity: 1; padding: 10%; box-sizing: border-box; border: 0; outline: 0; box-shadow: none; }
/* Same white as the picture boxes on the other cards — no grey tile behind the artwork. */
.kk-ocard__placeholder:has(.kk-imgsoon), .kk-view-list .kk-ocard__placeholder:has(.kk-imgsoon) { background: #fff; }
.kk-pgallery__main--empty { display: flex; align-items: center; justify-content: center; background: #fff; }
.kk-pgallery__main--empty .kk-imgsoon { max-width: 420px; height: auto; }
.kk-oincluded__noimg--svg { padding: 0; font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; }
.kk-oincluded__noimg--svg .kk-imgsoon { width: 90%; height: 90%; }

/* Card gallery controls (hover cycling) */
.kk-ocard__gallery-dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	z-index: 3;
	opacity: 0;
	transition: opacity var(--kk-duration) var(--kk-ease);
}

.kk-ocard:hover .kk-ocard__gallery-dots { opacity: 1; }

.kk-ocard__gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(31, 26, 20, 0.2); transition: background var(--kk-duration) var(--kk-ease); }
.kk-ocard__gallery-dot.is-active { background: var(--kk-gold-deep); }

.kk-ocard__gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--kk-line);
	color: var(--kk-ink);
	opacity: 0;
	transition: opacity var(--kk-duration) var(--kk-ease);
	pointer-events: none;
}

.kk-ocard__gallery-arrow--prev { left: 8px; }
.kk-ocard__gallery-arrow--next { right: 8px; }
.kk-ocard:hover .kk-ocard__gallery-arrow { opacity: 0.85; }
.kk-ocard:hover .kk-ocard__gallery-arrow:hover { opacity: 1; }

/* Badges — small white pill, gold text */
.kk-ocard__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 11px;
	font-family: var(--kk-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--kk-gold-deep);
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-full);
}

.kk-ocard__badge--featured { font-size: 12px; padding: 5px 12px; }

.kk-ocard__sold-out {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	transform: none;
	z-index: 2;
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #fff;
	background: var(--kk-ink);
	border-radius: var(--kk-radius-full);
}

.kk-ocard__group-count {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(31, 26, 20, 0.75);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: var(--kk-radius-xs);
	pointer-events: none;
}

/* Body */
.kk-ocard__body { padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 3px; flex: 1; }

.kk-ocard__brand {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kk-text-3);
	margin-bottom: 0;
}

.kk-ocard__title {
	font-family: var(--kk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kk-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kk-ocard:hover .kk-ocard__title { color: var(--kk-brown); }

.kk-ocard__size { font-size: 13px; color: var(--kk-text-2); }

/* Wines: Mevushal / Non-Mevushal beside the size (hidden when not known).
   Mevushal is the norm, so it is only a quiet watermark; NON-mevushal is the
   one shoppers must notice, so it gets the highlighted pill. */
.kk-ocard__mev {
	display: inline-block;
	align-self: flex-start;
	width: max-content;
	margin-left: 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.6;
	vertical-align: 1px;
	color: var(--kk-text-3);
	opacity: 0.55;
}

/* Branch availability line in the card info ("Only in Golders Green"). */
.kk-ocard__branch-note {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kk-gold-deep);
}
.kk-ocard__branch-note svg { flex: none; opacity: 0.8; }

/* Wine series ("Also in ● White ● Rosé"): a dot per type, each a link. */
.kk-wine-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-radius: 50%;
	background: var(--dot, #C9C4BC);
	box-shadow: inset 0 0 0 1px rgba(31, 26, 20, 0.18);
	vertical-align: 0;
}
.kk-ocard__series { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 11.5px; color: var(--kk-text-2); }
.kk-ocard__series-label { color: var(--kk-text-3); }
.kk-ocard__series-item { display: inline-flex; align-items: center; cursor: pointer; font-weight: 500; }
.kk-ocard__series-item:hover { color: var(--kk-brown); text-decoration: underline; text-underline-offset: 2px; }
.kk-pdetails__series { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 13px; }
.kk-pdetails__series-label { color: var(--kk-text-3); }
.kk-pdetails__series-item { display: inline-flex; align-items: center; padding: 4px 11px 4px 8px; border: 1px solid var(--kk-line-strong); border-radius: 999px; color: var(--kk-ink); text-decoration: none; font-weight: 500; }
.kk-pdetails__series-item:hover { border-color: var(--kk-brown); color: var(--kk-brown); }
.kk-pdetails__series-item .kk-wine-dot { width: 11px; height: 11px; margin-right: 6px; }

.kk-ocard__mev--non_mevushal {
	padding: 1px 8px;
	border-radius: 999px;
	color: var(--kk-wine, #7A2E3A);
	background: var(--kk-wine-light, #F7ECEE);
	border: 1px solid #E9D3D6;
	opacity: 1;
}

.kk-ocard__variants {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--kk-gold-deep);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	padding: 2px 10px;
	border-radius: 999px;
	align-self: flex-start;
	margin-top: 8px;
	position: relative;
	cursor: default;
}

.kk-ocard__var-tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	background: var(--kk-ink);
	color: #fff;
	padding: 8px 12px;
	border-radius: var(--kk-radius-sm);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	z-index: 20;
	box-shadow: var(--kk-shadow-md);
	pointer-events: none;
}

.kk-ocard__var-tooltip-item { display: block; padding: 1px 0; line-height: 1.4; }
.kk-ocard__variants:hover .kk-ocard__var-tooltip { display: block; }

/* Top line: "BRAND · Category" */
.kk-ocard__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--kk-text-3);
}
.kk-ocard__eyebrow .kk-ocard__brand { display: inline; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.kk-ocard__eyebrow .kk-ocard__brand + .kk-ocard__cat::before { content: "·"; margin-right: 6px; color: var(--kk-line-strong); }
.kk-ocard__cat { font-weight: 400; }
.kk-ocard__cat:hover,
.kk-ocard__eyebrow .kk-ocard__brand.kk-ocard__tag--filter:hover { color: var(--kk-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Options: a small heading, then rounded choice pills (tags stay square) */
.kk-ocard__var-head {
	margin-top: 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
}
.kk-ocard__var-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; max-height: none; overflow: visible; }

.kk-ocard__var-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	color: var(--kk-text);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	padding: 2px 10px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.5;
	cursor: pointer;
	transition: background var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease), border-color var(--kk-duration) var(--kk-ease);
}

.kk-ocard__var-pill:hover,
.kk-ocard__var-pill.is-active { background: var(--kk-gold-soft); border-color: var(--kk-gold); color: var(--kk-ink); }

/* Group cards (families) */
.kk-ocard--group { cursor: pointer; }
.kk-ocard--group .kk-ocard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.kk-ocard__group-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.kk-ocard__group-pill {
	display: inline-block;
	padding: 3px 10px;
	background: #fff;
	color: var(--kk-text);
	border: 1px solid var(--kk-line-strong);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	position: relative;
	z-index: 1;
	transition: background var(--kk-duration) var(--kk-ease), border-color var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease);
}

.kk-ocard__group-pill:hover { background: var(--kk-ink); border-color: var(--kk-ink); color: #fff; }
.kk-ocard__group-pill--sold { opacity: 0.45; text-decoration: line-through; pointer-events: none; }

/* Tags (category / kashrus) */
.kk-ocard__body .kk-ocard__tags { margin-top: auto; padding-top: 8px; }
.kk-ocard__tags { display: flex; flex-wrap: wrap; gap: 4px; }

.kk-ocard__tag {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kk-text-2);
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-xs);
}

.kk-ocard__tag--kashrus { color: var(--kk-wine); border-color: #E9D3D6; background: var(--kk-wine-light); }
.kk-ocard__tag--filter { cursor: pointer; transition: border-color var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease), background var(--kk-duration) var(--kk-ease); }
.kk-ocard__tag--filter:hover { border-color: var(--kk-gold); background: var(--kk-gold-pale); color: var(--kk-ink); }
.kk-ocard__tag--kashrus.kk-ocard__tag--filter:hover { background: var(--kk-wine); border-color: var(--kk-wine); color: #fff; }

/* Clickable brand eyebrow — text link, not a chip */
.kk-ocard__brand.kk-ocard__tag--filter { display: inline-block; align-self: flex-start; }
.kk-ocard__brand.kk-ocard__tag--filter:hover { background: none; color: var(--kk-gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Footer: price */
.kk-ocard__footer { margin-top: auto; }

.kk-ocard__pricing {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 2px 6px;
	border-top: none;
	background: transparent;
	min-height: 0;
	text-align: left;
}

.kk-ocard__price,
.kk-ocard__offer-text {
	font-size: 23px;
	font-weight: 700;
	color: var(--kk-ink);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.kk-ocard__offer-text { font-size: 20px; }
.kk-ocard__price-from { font-size: 0.65em; font-weight: 500; color: var(--kk-text-2); margin-right: 2px; }
.kk-ocard__rrp { font-size: 12.5px; color: var(--kk-text-3); text-decoration: line-through; }

/* Deal-type chip (Mix & Match / Multibuy / N varieties) — sits at the end of the price row */
.kk-ocard__deal {
	align-self: center;
	margin-left: auto;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: var(--kk-radius-full);
	color: var(--kk-text-2);
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
}

.kk-ocard__deal--mix { color: #7a4a00; background: #fff1d6; border-color: #f0cf8a; }
.kk-ocard__deal--multi { color: #1f4e8c; background: #e7f0fb; border-color: #b9d1ef; }
.kk-ocard__deal--variety { color: var(--kk-gold-deep); background: var(--kk-gold-soft); border-color: var(--kk-gold); }

@media (max-width: 600px) {
	.kk-ocard__price { font-size: 20px; }
	.kk-ocard__offer-text { font-size: 17px; }
	.kk-ocard__deal { margin-left: 0; font-size: 10px; padding: 2px 7px; }
}

@media (hover: none) {
	.kk-ocard__gallery-arrow,
	.kk-ocard__gallery-dots { display: none !important; }
}

/* ==========================================================================
   Featured offer slider
   ========================================================================== */

.kk-ofeatured-slider {
	position: relative;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	margin-bottom: 28px;
	background: #fff;
}

.kk-ofeatured-slider__track { position: relative; }
.kk-ofeatured-slide { display: none; }
.kk-ofeatured-slide.is-active { display: block; }

.kk-ofeatured-slide__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	text-decoration: none;
	color: inherit;
	min-height: 320px;
	height: auto;
}

.kk-ofeatured-slide__img-wrap {
	position: relative;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	border-right: 1px solid var(--kk-border-light);
}

.kk-ofeatured-slide__img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	padding: 28px;
	box-sizing: border-box;
	transition: transform 0.4s var(--kk-ease);
}

.kk-ofeatured-slide:hover .kk-ofeatured-slide__img-wrap img { transform: scale(1.02); }
.kk-ofeatured-slide__overlay { display: none; }

.kk-ofeatured-slide__body { display: flex; flex-direction: column; justify-content: center; padding: 36px 40px 40px; background: #fff; }

.kk-ofeatured-slide__cat {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
	margin-bottom: 10px;
}

.kk-ofeatured-slide__title {
	font-family: var(--kk-font);
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--kk-ink);
	margin: 0 0 6px;
	letter-spacing: -0.015em;
}

.kk-ofeatured-slide__size { font-size: 14px; color: var(--kk-text-3); margin-bottom: 14px; }

.kk-ofeatured-slide__pricing { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.kk-ofeatured-slide__price { font-size: 34px; font-weight: 600; color: var(--kk-ink); letter-spacing: -0.02em; }
.kk-ofeatured-slide__offer-text { font-size: 26px; font-weight: 600; color: var(--kk-ink); }
.kk-ofeatured-slide__rrp { font-size: 15px; color: var(--kk-text-3); text-decoration: line-through; }

.kk-ofeatured-slide__cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--kk-gold);
	border-radius: var(--kk-radius-sm);
	transition: background var(--kk-duration) var(--kk-ease);
}

.kk-ofeatured-slide:hover .kk-ofeatured-slide__cta { background: var(--kk-gold-deep); color: #fff; }

.kk-ofeatured-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--kk-ink);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color var(--kk-duration) var(--kk-ease), background var(--kk-duration) var(--kk-ease);
}

.kk-ofeatured-slider__arrow:hover { border-color: var(--kk-ink); background: #fff; color: var(--kk-ink); box-shadow: none; }
.kk-ofeatured-slider__arrow--prev { left: 14px; }
.kk-ofeatured-slider__arrow--next { right: 14px; }

.kk-ofeatured-slider__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 6px; }

.kk-ofeatured-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(31, 26, 20, 0.2);
	cursor: pointer;
	padding: 0;
	transition: background var(--kk-duration) var(--kk-ease);
}

.kk-ofeatured-slider__dot.is-active,
.kk-ofeatured-slider__dot:hover { background: var(--kk-gold-deep); transform: none; }

@media (max-width: 768px) {
	.kk-ofeatured-slide__link { grid-template-columns: 1fr; min-height: 0; }
	.kk-ofeatured-slide__img-wrap { min-height: 0; aspect-ratio: 16 / 10; border-right: none; border-bottom: 1px solid var(--kk-border-light); }
	.kk-ofeatured-slide__body { padding: 22px 22px 26px; }
	.kk-ofeatured-slider__arrow { display: none; }
	.kk-ofeatured-slide__price { font-size: 28px; }
	.kk-ofeatured-slide__offer-text { font-size: 22px; }
}

/* ==========================================================================
   List view (offers)
   ========================================================================== */

.kk-view-list .kk-ogrid { grid-template-columns: 1fr; gap: 12px; }

.kk-view-list .kk-ocard__link {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"img body"
		"img footer";
}

.kk-view-list .kk-ocard { background: var(--kk-surface); border-radius: var(--kk-radius-lg); overflow: hidden; }
/* Image sits straight on the card surface (no white box) — multiply blends white product shots in */
.kk-view-list .kk-ocard__img-wrap,
.kk-view-list .kk-ocard:hover .kk-ocard__img-wrap,
.kk-view-list .kk-ocard__placeholder { background: transparent; }
.kk-view-list .kk-ocard__img-wrap { grid-area: img; aspect-ratio: auto; height: 100%; min-height: 140px; border-radius: 0; margin: 0; }
.kk-view-list .kk-ocard__img-wrap img { padding: 14px; }
.kk-view-list .kk-ocard__body { grid-area: body; padding: 16px 18px 4px 4px; }
.kk-view-list .kk-ocard__title { font-size: 16px; }
.kk-view-list .kk-ocard__footer { grid-area: footer; }
.kk-view-list .kk-ocard__pricing { padding: 6px 18px 14px 4px; border-top: none; }

/* Two list columns on desktop when there's room */
@media (min-width: 1024px) {
	.kk-view-list .kk-ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-view-list .kk-ocard__link { grid-template-columns: 150px minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.kk-view-list .kk-ocard__link { grid-template-columns: 1fr; grid-template-areas: "img" "body" "footer"; }
	.kk-view-list .kk-ocard__img-wrap { aspect-ratio: 16 / 10; min-height: 0; border-right: none; border-bottom: none; }
	.kk-view-list .kk-ocard__body { padding: 4px 16px 4px; }
	.kk-view-list .kk-ocard__pricing { padding: 6px 16px 14px; }
}

/* ==========================================================================
   Single product
   ========================================================================== */

.kk-section--product { padding: 28px 0 48px; background: var(--kk-bg); }

.kk-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* Gallery */
.kk-pgallery { position: relative; display: flex; flex-direction: column; gap: var(--kk-thumbs-gap, 8px); }

.kk-pgallery--vertical_left { flex-direction: row-reverse; }
.kk-pgallery--vertical_right { flex-direction: row; }
.kk-pgallery--vertical_left .kk-pgallery__thumbs,
.kk-pgallery--vertical_right .kk-pgallery__thumbs { flex-direction: column; width: 80px; flex-shrink: 0; }
.kk-pgallery--vertical_left .kk-pgallery__thumbs-track,
.kk-pgallery--vertical_right .kk-pgallery__thumbs-track { flex-direction: column; }
.kk-pgallery--horizontal_top { flex-direction: column-reverse; }

.kk-pgallery__main {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
}

.kk-pgallery__main--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--kk-text-3); background: #fff; }
.kk-pgallery__placeholder-text { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 1; }

.kk-pgallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 32px;
	box-sizing: border-box;
	cursor: zoom-in;
	transition: transform 0.3s ease;
	display: block;
}

.kk-pgallery__img.kk-zoomed { transform: scale(2); cursor: pointer; }

.kk-pgallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: var(--kk-ink);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color var(--kk-duration) var(--kk-ease);
}

.kk-pgallery__nav:hover { border-color: var(--kk-ink); background: #fff; color: var(--kk-ink); box-shadow: none; }
.kk-pgallery__nav--prev { left: 12px; }
.kk-pgallery__nav--next { right: 12px; }

/* "Click to zoom" pill over the main picture: opens the lightbox. */
.kk-pgallery button.kk-pgallery__zoom-cta,
.kk-pgallery button.kk-pgallery__zoom-cta:hover,
.kk-pgallery button.kk-pgallery__zoom-cta:focus {
	/* beat the parent theme's pink button reset ([type=button], button).
	   Watermark style: centred under the picture, no box, quiet grey text
	   that darkens when the pointer is over the picture. */
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	font-family: var(--kk-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kk-text-3);
	background: transparent;
	border: 0;
	border-radius: var(--kk-radius-full, 999px);
	box-shadow: none;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease);
}
.kk-pgallery button.kk-pgallery__zoom-cta:hover,
.kk-pgallery__main:hover button.kk-pgallery__zoom-cta { opacity: 1; color: var(--kk-brown); background: transparent; }
.kk-pgallery button.kk-pgallery__zoom-cta:focus-visible { outline: 2px solid var(--kk-gold-deep); outline-offset: 2px; }
.kk-pgallery__zoom-cta svg { flex: none; width: 14px; height: 14px; }
.kk-pgallery__zoom-cta-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
	.kk-pgallery__zoom-cta-click { display: none; }
	.kk-pgallery__zoom-cta-tap { display: inline; }
}
.kk-pgallery__main--empty .kk-pgallery__zoom-cta { display: none; }

.kk-pgallery__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--kk-gold-deep);
	border-radius: var(--kk-radius-xs);
}

.kk-pgallery__sold-out {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	transform: none;
	z-index: 4;
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--kk-ink);
	border-radius: var(--kk-radius-xs);
}

.kk-pgallery__thumbs { display: flex; overflow-x: auto; scrollbar-width: thin; }
.kk-pgallery__thumbs-track { display: flex; gap: var(--kk-thumbs-gap, 8px); }

.kk-pgallery__thumb {
	flex-shrink: 0;
	width: 76px;
	height: 76px;
	padding: 6px;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-thumbs-radius, 6px);
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	transition: border-color var(--kk-duration) var(--kk-ease), box-shadow var(--kk-duration) var(--kk-ease);
}

/* Thumbs are <button>s — stop the theme's pink button:hover/focus fill showing through */
.kk-pgallery__thumb:hover,
.kk-pgallery__thumb:focus,
.kk-pgallery__thumb:active { background: #fff !important; color: inherit !important; }
.kk-pgallery__thumb:hover { border-color: var(--kk-ink); }
.kk-pgallery__thumb--active { border-color: var(--kk-gold-deep); box-shadow: 0 0 0 1px var(--kk-gold-deep); }
.kk-pgallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.kk-pgallery--vertical_left .kk-pgallery__thumb,
.kk-pgallery--vertical_right .kk-pgallery__thumb { width: 100%; height: auto; aspect-ratio: 1; }

/* Details */
.kk-pdetails { display: flex; flex-direction: column; gap: 14px; }

/* Header: brand → title → meta line (size · category) */
.kk-pdetails__brand {
	align-self: flex-start;
	margin: 0 0 -6px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--kk-gold-deep);
	text-decoration: none;
}
a.kk-pdetails__brand:hover { color: var(--kk-ink); text-decoration: underline; text-underline-offset: 3px; }

.kk-pdetails__title {
	font-family: var(--kk-font);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--kk-ink);
	margin: 0;
	letter-spacing: -0.02em;
}

.kk-pdetails__meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: -4px; font-size: 15px; color: var(--kk-text-2); }
.kk-pdetails__meta-line > * + *::before { content: "·"; margin: 0 10px; color: var(--kk-text-3); }
.kk-pdetails__size { font-size: 15px; color: var(--kk-text-2); }
.kk-pdetails__cat { color: var(--kk-text-2); text-decoration: none; }
a.kk-pdetails__cat:hover { color: var(--kk-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.kk-pdetails__meta-line > a.kk-pdetails__cat + a.kk-pdetails__cat::before { content: ","; margin: 0 6px 0 0; }

.kk-pdetails__sold-out-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--kk-ink);
	border-radius: var(--kk-radius-xs);
}

.kk-pdetails__pricing-block { padding: 18px 0; border-top: 1px solid var(--kk-line); border-bottom: 1px solid var(--kk-line); margin-top: 2px; }

.kk-pdetails__offer-text { display: block; font-size: 28px; font-weight: 600; color: var(--kk-ink); letter-spacing: -0.02em; margin-bottom: 4px; }
.kk-pdetails__price { display: block; font-size: 36px; font-weight: 600; color: var(--kk-ink); letter-spacing: -0.03em; line-height: 1.1; }

.kk-pdetails__rrp-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.kk-pdetails__rrp { font-size: 14px; color: var(--kk-text-3); text-decoration: line-through; }

.kk-pdetails__savings {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kk-green-dark);
	background: var(--kk-green-light);
	padding: 3px 9px;
	border-radius: var(--kk-radius-xs);
}

.kk-pdetails__variations-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }

.kk-pdetails__var-pill {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--kk-text);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-sm);
	transition: background var(--kk-duration) var(--kk-ease), border-color var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease);
}

.kk-pdetails__var-pill--has-image { cursor: pointer; }
.kk-pdetails__var-pill--has-image:hover { border-color: var(--kk-ink); color: var(--kk-ink); background: #fff; }
.kk-pdetails__var-pill--active { border-color: var(--kk-ink); color: #fff; background: var(--kk-ink); font-weight: 600; }

.kk-pdetails__desc { font-size: 15.5px; line-height: 1.65; color: var(--kk-text-2); margin: 0; }

.kk-pdetails__info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--kk-line);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-sm);
	overflow: hidden;
	margin-top: 2px;
}

.kk-pdetails__info-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: #fff; }
/* Odd count: let the last cell span the row instead of leaving a grey gap. */
.kk-pdetails__info-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kk-pdetails__info-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kk-text-3); }
.kk-pdetails__info-value { font-size: 14.5px; font-weight: 600; color: var(--kk-ink); }
.kk-pdetails__validity { margin: 8px 2px 0; font-size: 12px; color: var(--kk-text-3); }
/* Mevushal row: "No" is what shoppers must notice; "Not stated" stays quiet. */
.kk-pdetails__info-item--mev-non_mevushal { background: var(--kk-wine-light, #F7ECEE); }
.kk-pdetails__info-item--mev-non_mevushal .kk-pdetails__info-value { color: var(--kk-wine, #7A2E3A); }
.kk-pdetails__info-item--mev-unknown .kk-pdetails__info-value { color: var(--kk-text-3); font-weight: 500; }

.kk-pdetails__meta { width: 100%; border-collapse: collapse; font-size: 14px; }
.kk-pdetails__meta tr { border-bottom: 1px solid var(--kk-line); }
.kk-pdetails__meta th { text-align: left; padding: 10px 16px 10px 0; font-weight: 500; color: var(--kk-text-3); width: 120px; }
.kk-pdetails__meta td { padding: 10px 0; font-weight: 500; color: var(--kk-ink); }

.kk-pdetails__actions { padding-top: 16px; border-top: 1px solid var(--kk-line); }
.kk-pdetails__actions .kk-actions__share { position: relative; }

.kk-pdetails__share-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 16px;
	font-family: var(--kk-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--kk-text);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-sm);
	cursor: pointer;
	transition: border-color var(--kk-duration) var(--kk-ease);
}

.kk-pdetails__share-btn:hover { border-color: var(--kk-ink); color: var(--kk-ink); background: #fff; }

/* Share popup inherits the recipe one; align left under the button */
.kk-offer-single .kk-share-popup { top: calc(100% + 8px); left: 0; bottom: auto; transform: translateY(-4px); width: 300px; }
.kk-offer-single .kk-share-popup--open { transform: translateY(0); }

/* Lightbox */
.kk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 26, 20, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.kk-lightbox--open { opacity: 1; visibility: visible; }
.kk-lightbox__img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--kk-radius-sm); background: #fff; }

.kk-lightbox__close,
.kk-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s;
}

.kk-lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 28px; }
.kk-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 28px; }
.kk-lightbox__close:hover,
.kk-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.kk-lightbox__nav--prev { left: 20px; }
.kk-lightbox__nav--next { right: 20px; }

/* Details section (description / notes) */
#kk-offer-details.kk-section { padding-top: 0; }

.kk-odetails { max-width: 760px; }

.kk-odetails__heading { font-family: var(--kk-font); font-size: 24px; font-weight: 600; color: var(--kk-ink); margin: 0 0 12px; }
.kk-odetails__description { margin-bottom: 28px; }
.kk-odetails__description p,
.kk-odetails__content { font-size: 15.5px; line-height: 1.7; color: var(--kk-text-2); margin: 0; }
.kk-odetails__content { margin-bottom: 28px; }

.kk-odetails__notes {
	margin-bottom: 28px;
	padding: 18px 22px;
	background: var(--kk-gold-pale);
	border-left: 3px solid var(--kk-gold);
	border-radius: 0 var(--kk-radius-sm) var(--kk-radius-sm) 0;
}

.kk-odetails__notes p { font-size: 14.5px; line-height: 1.6; color: var(--kk-text); margin: 0; }

.kk-odetails__var-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kk-odetails__var-table thead th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kk-text-3); padding: 8px 12px; border-bottom: 1px solid var(--kk-line-strong); }
.kk-odetails__var-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--kk-line); color: var(--kk-text); }

/* Legacy hero / info bar (unused by current sections, kept for parity) */
.kk-ohero { position: relative; min-height: 280px; display: flex; align-items: flex-end; overflow: hidden; background: var(--kk-surface); }
.kk-ohero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kk-ohero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,26,20,0.6) 0%, transparent 70%); }
.kk-ohero__content { position: relative; z-index: 2; padding: 40px; max-width: 700px; }
.kk-ohero__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; color: #fff; margin: 0 0 8px; }
.kk-obar { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--kk-line); border-radius: var(--kk-radius); overflow: hidden; }
.kk-obar__item { display: flex; align-items: center; gap: 10px; padding: 14px 20px; flex: 1 1 auto; min-width: 140px; }
.kk-obar__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kk-text-3); display: block; }
.kk-obar__value { font-size: 14px; font-weight: 600; color: var(--kk-ink); display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.kk-product-layout { grid-template-columns: 1fr; gap: 28px; }
	.kk-ogrid { grid-template-columns: repeat(var(--kk-cols-tablet, 2), minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.kk-ogrid { grid-template-columns: repeat(var(--kk-cols-mobile, 1), minmax(0, 1fr)); gap: 12px; }
	.kk-ocard__img-wrap img, .kk-ocard__img { padding: 9%; }
	.kk-ocard__body { padding: 10px 12px 8px; }
	.kk-ocard__title { font-size: 13.5px; }
	.kk-ocard__pricing { padding: 8px 12px 12px; }
	.kk-ocard__price { font-size: 17px; }
	.kk-ocard__offer-text { font-size: 15px; }
	.kk-section--product { padding: 20px 0 32px; }
	.kk-pgallery--vertical_left,
	.kk-pgallery--vertical_right { flex-direction: column !important; }
	.kk-pgallery--vertical_left .kk-pgallery__thumbs,
	.kk-pgallery--vertical_right .kk-pgallery__thumbs { width: 100% !important; flex-direction: row !important; }
	.kk-pgallery--vertical_left .kk-pgallery__thumbs-track,
	.kk-pgallery--vertical_right .kk-pgallery__thumbs-track { flex-direction: row !important; }
	.kk-pgallery--vertical_left .kk-pgallery__thumb,
	.kk-pgallery--vertical_right .kk-pgallery__thumb { width: 64px; height: 64px; aspect-ratio: auto; }
	.kk-pdetails__info-grid { grid-template-columns: 1fr; }
	.kk-offer-single .kk-share-popup { width: min(300px, calc(100vw - 32px)); }
	.kk-lightbox__close { top: 12px; right: 12px; }
	.kk-lightbox__nav--prev { left: 8px; }
	.kk-lightbox__nav--next { right: 8px; }
}

/* ==========================================================================
   Loyalty Offers — green accent (synced from Vector POS loyalty promotion)
   ========================================================================== */

:root {
	--kk-loyalty-accent: #2e7d32;
	--kk-loyalty-accent-dark: #1b5e20;
	--kk-loyalty-accent-light: #e8f5e9;
}

/* Archive: active tab + filter chrome in green */
.kk-offer-archive.kk-offer-archive--loyalty .kk-archive-tab--active {
	border-bottom-color: var(--kk-loyalty-accent);
}

.kk-offer-archive.kk-offer-archive--loyalty .kk-archive-filter__btn:hover,
.kk-offer-archive.kk-offer-archive--loyalty .kk-archive-filter.open .kk-archive-filter__btn,
.kk-offer-archive.kk-offer-archive--loyalty .kk-mfilter__btn[aria-expanded="true"],
.kk-offer-archive.kk-offer-archive--loyalty .kk-mfilter__btn:hover {
	border-color: var(--kk-loyalty-accent);
	background: var(--kk-loyalty-accent-light);
	color: var(--kk-loyalty-accent);
}

/* Title itself in loyalty green, to match the member badge + green pricing */
.kk-offer-archive.kk-offer-archive--loyalty .kk-archive-head__title {
	color: var(--kk-loyalty-accent);
}

.kk-offer-archive.kk-offer-archive--loyalty .kk-archive-head__title::after {
	content: "Loyalty card members";
	display: inline-block;
	margin-left: 12px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
	color: #fff;
	background: var(--kk-loyalty-accent);
	border-radius: var(--kk-radius-full);
}

/* Cards: green price + "Loyalty price" eyebrow, shelf price struck through */
.kk-ocard--loyalty .kk-ocard__member-label,
.kk-pdetails__member-label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-loyalty-accent);
	margin-bottom: 2px;
}

.kk-pdetails__member-label {
	font-size: 12px;
	margin-bottom: 6px;
}

.kk-ocard--loyalty .kk-ocard__price,
.kk-ocard--loyalty .kk-ocard__offer-text,
.kk-offer-single--loyalty .kk-pdetails__price,
.kk-offer-single--loyalty .kk-pdetails__offer-text {
	color: var(--kk-loyalty-accent-dark);
}

.kk-ocard--loyalty .kk-ocard__rrp,
.kk-offer-single--loyalty .kk-pdetails__rrp {
	text-decoration: line-through;
	color: var(--kk-text-muted);
}

.kk-ocard--loyalty .kk-ocard__footer {
	border-top: 2px solid var(--kk-loyalty-accent-light);
}

.kk-ocard--loyalty:hover {
	box-shadow: 0 8px 30px rgba(46, 125, 50, 0.14);
}

.kk-offer-single--loyalty .kk-pdetails__pricing-block--loyalty {
	padding: 14px 16px;
	background: var(--kk-loyalty-accent-light);
	border-left: 4px solid var(--kk-loyalty-accent);
	border-radius: var(--kk-radius-sm);
}

.kk-offer-single--loyalty .kk-pdetails__savings {
	background: var(--kk-loyalty-accent);
	color: #fff;
}

/* Per-type accent: a thin coloured line along the top of archive + single
   pages and a faint fade under it that is white again within --kk-oaccent-fade-h.
   Colours/sizes come from Kosher Kingdom → Offers → "Page accent" (printed as
   CSS variables by kk_offer_accent_inline_css); the values here are fallbacks.
   general = red, wine = maroon, loyalty = green. */
.kk-offer-archive,
.kk-offer-single {
	--kk-bg: #fff;
	--kk-oaccent: var(--kk-offer-accent, #B4382E);
	--kk-oaccent-fade: #FBF0EE;
	--kk-oaccent-line: 3px;
	--kk-oaccent-fade-h: 90px;
	border-top: var(--kk-oaccent-line) solid var(--kk-oaccent);
	background: linear-gradient(180deg, var(--kk-oaccent-fade) 0, #fff var(--kk-oaccent-fade-h), #fff 100%);
}
.kk-offer-archive--wine,
.kk-offer-single--wine { --kk-oaccent: var(--kk-wine-accent, #722F37); --kk-oaccent-fade: #F7EEEF; }
.kk-offer-archive--loyalty,
.kk-offer-single--loyalty { --kk-oaccent: var(--kk-loyalty-accent, #2E7D32); --kk-oaccent-fade: #EEF7EF; }
.kk-offer-archive .kk-archive-head { background: transparent; }
.kk-offer-archive.kk-oaccent-off,
.kk-offer-single.kk-oaccent-off { border-top: 0; background: #fff; }

/* ==========================================================================
   Hairline grid — 1px dividers between offer tiles (rows and columns),
   no outer frame. Cards stay borderless; the grid clips the outer outlines.
   ========================================================================== */

.kk-ogrid { gap: 1px; overflow: hidden; }
.kk-ogrid > .kk-ocard { outline: 1px solid var(--kk-line); padding: 16px 16px 18px; }

/* List view keeps its own tiles */
.kk-view-list .kk-ogrid { gap: 12px; overflow: visible; }
.kk-view-list .kk-ogrid > .kk-ocard { outline: none; padding: 0; }

@media (max-width: 600px) {
	.kk-ogrid { gap: 1px; }
	.kk-ogrid > .kk-ocard { padding: 10px 10px 12px; }
}

/* ==========================================================================
   Branch availability badge ("Only in Golders Green")
   ========================================================================== */

.kk-ocard__branch,
.kk-pgallery__branch {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	padding: 4px 10px;
	font-family: var(--kk-font);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5a4630;
	background: #fff6dc;
	border: 1px solid #e3c979;
	border-radius: var(--kk-radius-full);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	pointer-events: none;
}

.kk-pgallery__branch {
	font-size: 12px;
	padding: 6px 14px;
}

/* Count pill beside the archive title ("659 offers") */
.kk-archive-head__title-row .kk-archive-head__count {
	display: inline-flex;
	align-items: center;
	align-self: center;
	margin-left: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kk-text-light);
	background: var(--kk-bg);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius-full);
	white-space: nowrap;
}

/* ==========================================================================
   Included products grid (mix & match members / general offer variants)
   ========================================================================== */

.kk-oincluded { margin-bottom: 32px; }

.kk-oincluded__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 16px;
}

.kk-oincluded__head .kk-odetails__heading { margin: 0; }

.kk-oincluded__count {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--kk-text-light);
	background: var(--kk-bg);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius-full);
}

.kk-oincluded__deal {
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var(--kk-loyalty-accent, #2e7d32);
	border-radius: var(--kk-radius-full);
}

.kk-oincluded__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.kk-oincluded__item {
	display: flex;
	flex-direction: column;
	background: var(--kk-white);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius-sm);
	overflow: hidden;
	transition: box-shadow var(--kk-transition), transform var(--kk-transition);
}

.kk-oincluded__item:hover {
	box-shadow: var(--kk-shadow-hover);
	transform: translateY(-2px);
}

.kk-oincluded__img {
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	padding: 10px;
}

.kk-oincluded__img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.kk-oincluded__noimg {
	font-size: 11px;
	color: var(--kk-text-muted);
}

.kk-oincluded__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--kk-border);
}

.kk-oincluded__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kk-text);
}

.kk-oincluded__size {
	font-size: 12px;
	color: var(--kk-text-light);
}

.kk-oincluded__price {
	margin-top: 2px;
	font-size: 12px;
	color: var(--kk-text-muted);
}

/* Mix & match group — other offers in the same multibuy band, as links */
.kk-omix { padding-top: 28px; border-top: 1px solid var(--kk-border); }
.kk-omix__lead { margin: -6px 0 16px; font-size: 14px; color: var(--kk-text-light); max-width: 65ch; }
.kk-omix__item { text-decoration: none; color: inherit; }
.kk-omix__item:focus-visible { outline: 2px solid var(--kk-text); outline-offset: 2px; }
.kk-omix__brand { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-muted); }

/* Varieties picker — grey photo tiles, card price vs shelf price, click → main gallery */
.kk-ovar__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 18px;
}
.kk-ovar__head .kk-odetails__heading { margin: 0; }
.kk-ovar__sub { margin: 4px 0 0; font-size: 14px; color: var(--kk-text-light); }
.kk-ovar__deal {
	display: flex;
	flex-direction: column;
	padding: 10px 16px;
	background: var(--kk-loyalty-accent, #2e7d32);
	color: #fff;
	border-radius: 12px;
	line-height: 1.25;
}
.kk-ovar__deal-price { font-size: 18px; font-weight: 700; }
.kk-ovar__deal-note { font-size: 12px; opacity: .9; }

.kk-ovar__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }

.kk-ovar__item {
	position: relative;
	padding: 0;
	font: inherit;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
/* Reset hello-elementor's global pink button styles (border, padding, hover fill). */
button.kk-ovar__item,
button.kk-ovar__item:hover,
button.kk-ovar__item:focus,
button.kk-ovar__item:active {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	color: inherit;
	text-align: left;
	white-space: normal;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}
.kk-ovar__item:hover { box-shadow: none; transform: none; }
.kk-ovar__item:focus-visible { outline: 2px solid var(--kk-ink, #1F1A14); outline-offset: 4px; border-radius: 18px; }

.kk-ovar__img {
	position: relative;
	height: 180px;
	padding: 18px;
	background: var(--kk-surface, #F3F2F0);
	border: 2px solid transparent;
	border-radius: 18px;
	transition: border-color var(--kk-transition), background var(--kk-transition);
}
.kk-ovar__img img { transition: transform .3s ease; mix-blend-mode: multiply; }
.kk-ovar__item:hover .kk-ovar__img img { transform: scale(1.06); }
.kk-ovar__item:hover .kk-ovar__img { background: #ECEAE6; }
.kk-ovar__item--active .kk-ovar__img { border-color: var(--kk-brown, #3B2A1A); background: #fff; }

.kk-ovar__save {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--kk-loyalty-accent, #2e7d32);
	border-radius: var(--kk-radius-full, 999px);
}

.kk-ovar__body { padding: 10px 4px 0; border-top: 0; gap: 2px; }
.kk-ovar__body .kk-oincluded__name { font-size: 15px; }
.kk-ovar__prices { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.kk-ovar__card { font-size: 15px; font-weight: 700; color: var(--kk-loyalty-accent, #2e7d32); }
.kk-ovar__shelf { font-size: 13px; color: var(--kk-text-muted); }

.kk-ovar__hint { margin: 14px 0 0; font-size: 13px; color: var(--kk-text-muted); }

@media (hover: none) {
	.kk-ovar__item:hover .kk-ovar__img img { transform: none; }
}

@media (max-width: 600px) {
	.kk-oincluded__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.kk-oincluded__img { height: 110px; }
	.kk-ovar__img { height: 140px; padding: 12px; border-radius: 14px; }
	.kk-ovar__deal { width: 100%; flex-direction: row; align-items: baseline; gap: 10px; }
}

/* ==========================================================================
   Loyalty single offer — clean price pill + variety picker in the product column
   ========================================================================== */

.kk-pdetails__lprice {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	align-self: flex-start;
	padding: 12px 20px 13px;
	border-radius: 14px;
	background: var(--kk-loyalty-accent, #2e7d32);
	color: #fff;
	line-height: 1.15;
}
.kk-pdetails__lprice-main { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.kk-pdetails__lprice-note { font-size: 13px; font-weight: 500; opacity: .92; }
.kk-pdetails__lprice-shelf {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--kk-text-light, #6b6b6b);
	font-variant-numeric: tabular-nums;
}

.kk-ovar--inline {
	margin: 22px 0 6px;
	padding-top: 20px;
	border-top: 1px solid var(--kk-border, #e8e8e4);
}
.kk-ovar--inline .kk-ovar__head { margin-bottom: 12px; }
.kk-ovar--inline .kk-ovar__heading { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--kk-text, #2d2d2d); }
.kk-ovar--inline .kk-ovar__sub { margin: 3px 0 0; font-size: 13px; }
.kk-ovar--inline .kk-ovar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
}
.kk-ovar--inline .kk-ovar__item { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.kk-ovar--inline .kk-ovar__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	padding: 10px;
	border-radius: 12px;
	border: 1.5px solid transparent;
	background: #F3F2EF;
	overflow: hidden;
}
.kk-ovar--inline .kk-ovar__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kk-ovar--inline .kk-ovar__body { display: flex; flex-direction: column; gap: 1px; padding: 7px 2px 0; }
.kk-ovar--inline .kk-ovar__name { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--kk-text, #2d2d2d); overflow-wrap: anywhere; }
.kk-ovar--inline .kk-ovar__meta { font-size: 12px; color: var(--kk-text-muted, #999); }

@media (max-width: 600px) {
	.kk-pdetails__lprice-main { font-size: 23px; }
	.kk-ovar--inline .kk-ovar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.kk-ovar--inline .kk-ovar__img { height: 92px; padding: 8px; }
}

/* ==========================================================================
   Archive cards — variety pills spacing, loyalty price pill, list = grid look
   ========================================================================== */

.kk-ocard__var-head { margin-top: 12px; }
.kk-ocard__var-pills { gap: 6px; margin-top: 8px; margin-bottom: 14px; }
.kk-ocard__var-pill { padding: 3px 11px; }
.kk-ocard__var-pill--more {
	cursor: default;
	color: var(--kk-text-light, #6b6b6b);
	background: transparent;
	border-style: dashed;
}

/* Loyalty price on cards: same treatment as the single loyalty page */
.kk-ocard__pricing--loyalty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding-top: 10px;
}
.kk-ocard__lprice {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 13px 8px;
	border-radius: 11px;
	background: var(--kk-loyalty-accent, #2e7d32);
	color: #fff;
	line-height: 1.15;
}
.kk-ocard__lprice-main { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.kk-ocard__lprice-note { font-size: 11px; font-weight: 500; opacity: .92; }
.kk-ocard__lprice-shelf { font-size: 12.5px; color: var(--kk-text-light, #6b6b6b); font-variant-numeric: tabular-nums; }
.kk-ocard--sold-out .kk-ocard__lprice { background: var(--kk-text-3, #999); }
.kk-ocard__lprice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* Neat card price: full-width pill (price left, note right) + one row below
   with the badge on the left and the shelf price / saving on the right */
.kk-ocard__pricing--loyalty { align-items: stretch; gap: 8px; }
.kk-ocard__lprice {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px;
}
.kk-ocard__lprice-main { font-size: 19px; white-space: nowrap; }
.kk-ocard__lprice-note { max-width: 86px; font-size: 10.5px; line-height: 1.2; text-align: right; }
.kk-ocard__lprice-meta { justify-content: flex-start; flex-wrap: nowrap; min-height: 18px; }
.kk-ocard__lprice-shelf { font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-ocard__lprice-shelf strong { font-weight: 600; color: var(--kk-loyalty-accent, #2e7d32); }

/* Small "Loyalty card" badge that follows the price pill (cards + single page) */
.kk-lo-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid var(--kk-loyalty-accent, #2e7d32);
	color: var(--kk-loyalty-accent, #2e7d32);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: 1px;
}
.kk-pdetails__lprice-shelf .kk-lo-badge { margin-right: 6px; }

/* List view: the grid card laid out sideways — same white picture tile,
   radius and padding, no grey box behind the row. */
.kk-view-list .kk-ocard { background: transparent; border-radius: var(--kk-radius-lg); }
.kk-view-list .kk-ocard__img-wrap,
.kk-view-list .kk-ocard:hover .kk-ocard__img-wrap {
	background: #fff;
	aspect-ratio: 1 / 1;
	height: auto;
	min-height: 0;
	margin: 10px;
	border-radius: var(--kk-radius-lg);
	align-self: start;
}
.kk-view-list .kk-ocard__img-wrap img { padding: 11%; }
.kk-view-list .kk-ocard__body { padding: 14px 16px 4px 6px; }
.kk-view-list .kk-ocard__pricing { padding: 4px 16px 14px 6px; }
@media (max-width: 600px) {
	.kk-view-list .kk-ocard__img-wrap { aspect-ratio: 1 / 1; margin: 0 0 4px; }
	.kk-view-list .kk-ocard__body { padding: 4px 4px 4px; }
	.kk-view-list .kk-ocard__pricing { padding: 4px 4px 12px; }
}

/* ==========================================================================
   List view = the grid card laid out sideways (final word — overrides the
   earlier list rules). Same hairline cells, same 16px cell padding, same
   white image tile (fixed size, left), same body, same footer rule.
   ========================================================================== */

.kk-view-list .kk-ogrid { gap: 1px; overflow: hidden; }
.kk-view-list .kk-ogrid > .kk-ocard {
	outline: 1px solid var(--kk-line);
	padding: 16px 16px 18px;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}
.kk-view-list .kk-ocard__link {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"img body"
		"img footer";
	column-gap: 20px;
}
.kk-view-list .kk-ocard__img-wrap,
.kk-view-list .kk-ocard:hover .kk-ocard__img-wrap {
	grid-area: img;
	width: 210px;
	height: auto;
	min-height: 0;
	aspect-ratio: 1 / 1;
	margin: 0;
	align-self: start;
	background: #fff;
	border-radius: var(--kk-radius-lg);
}
.kk-view-list .kk-ocard__img-wrap img { padding: 5%; }   /* bigger product in the tile */
.kk-view-list .kk-ocard__body { grid-area: body; padding: 2px 0 4px; }
.kk-view-list .kk-ocard__title { font-size: inherit; }
.kk-view-list .kk-ocard__footer { grid-area: footer; align-self: end; }
.kk-view-list .kk-ocard__pricing { padding: 10px 0 0; }
.kk-view-list .kk-ocard__var-pills { margin-bottom: 4px; }

@media (min-width: 1024px) {
	.kk-view-list .kk-ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-view-list .kk-ocard__link { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.kk-view-list .kk-ogrid > .kk-ocard { padding: 12px 10px 14px; }
	.kk-view-list .kk-ocard__link { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "img body" "img footer"; column-gap: 12px; }
	.kk-view-list .kk-ocard__img-wrap,
	.kk-view-list .kk-ocard:hover .kk-ocard__img-wrap { width: 128px; margin: 0; }
	.kk-view-list .kk-ocard__body { padding: 0 0 4px; }
	.kk-view-list .kk-ocard__pricing { padding: 8px 0 0; }
}

/* "+N more" varieties: a neat pop-up panel of the remaining pills on hover /
   keyboard focus (hovering a pill in it still swaps the card picture). */
.kk-ocard__var-more { position: relative; display: inline-flex; outline: none; }
.kk-ocard__var-more .kk-ocard__var-pill--more { cursor: default; }
.kk-ocard__var-more:hover .kk-ocard__var-pill--more,
.kk-ocard__var-more:focus-within .kk-ocard__var-pill--more { border-style: solid; border-color: var(--kk-text, #2d2d2d); color: var(--kk-text, #2d2d2d); }
.kk-ocard__var-more:focus-visible .kk-ocard__var-pill--more { outline: 2px solid var(--kk-gold, #C5A355); outline-offset: 2px; }
.kk-ocard__var-pop {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: max-content;
	max-width: 260px;
	padding: 12px 12px 13px;
	background: #fff;
	border: 1px solid var(--kk-line, #EBE9E5);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(31, 26, 20, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
/* little bridge so the pointer can travel from the pill into the panel */
.kk-ocard__var-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.kk-ocard__var-more:hover .kk-ocard__var-pop,
.kk-ocard__var-more:focus-within .kk-ocard__var-pop {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
.kk-ocard__var-pop-head { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-gold-deep, #A8883E); }
.kk-ocard__var-pop-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (hover: none) {
	/* touch: no hover panel — tapping the card opens the offer, which lists every variety */
	.kk-ocard__var-pop { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kk-ocard__var-pop { transition: none; transform: none; } }

/* The hairline grid clips anything outside a cell; let the open panel show */
.kk-ogrid:has(.kk-ocard__var-more:hover),
.kk-ogrid:has(.kk-ocard__var-more:focus-within) { overflow: visible; }
.kk-ogrid > .kk-ocard:has(.kk-ocard__var-more:hover),
.kk-ogrid > .kk-ocard:has(.kk-ocard__var-more:focus-within) { z-index: 5; position: relative; }

/* Varieties as ONE compact line on every card (keeps the grid even); the full
   list of pills opens in a panel on hover/focus. Cards without varieties keep
   an empty line of the same height so prices line up across a row. */
.kk-ocard__vars {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 26px;
	margin-top: 8px;
	outline: none;
	min-width: 0;
}
.kk-ocard__vars--none { pointer-events: none; }
.kk-ocard__vars-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid var(--kk-line-strong, #D9D6D1);
	background: #fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--kk-gold-deep, #A8883E);
	cursor: default;
	transition: border-color .15s, color .15s;
}
.kk-ocard__vars-chip svg { transition: transform .2s; }
.kk-ocard__vars-names { min-width: 0; font-size: 12px; color: var(--kk-text-muted, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-ocard__vars:hover .kk-ocard__vars-chip,
.kk-ocard__vars:focus-within .kk-ocard__vars-chip { border-color: var(--kk-text, #2d2d2d); color: var(--kk-text, #2d2d2d); }
.kk-ocard__vars:hover .kk-ocard__vars-chip svg,
.kk-ocard__vars:focus-within .kk-ocard__vars-chip svg { transform: rotate(180deg); }
.kk-ocard__vars:focus-visible .kk-ocard__vars-chip { outline: 2px solid var(--kk-gold, #C5A355); outline-offset: 2px; }
/* panel spans the card width, centred under the varieties line */
.kk-ocard__vars .kk-ocard__var-pop { left: 0; right: 0; width: auto; max-width: none; }
.kk-ocard__vars .kk-ocard__var-pills { justify-content: flex-start; }
.kk-ocard__vars:hover .kk-ocard__var-pop,
.kk-ocard__vars:focus-within .kk-ocard__var-pop {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.kk-ocard__vars .kk-ocard__var-pills { margin: 0; }
/* let the open panel escape the hairline grid's clipping */
.kk-ogrid:has(.kk-ocard__vars:hover),
.kk-ogrid:has(.kk-ocard__vars:focus-within) { overflow: visible; }
.kk-ogrid > .kk-ocard:has(.kk-ocard__vars:hover),
.kk-ogrid > .kk-ocard:has(.kk-ocard__vars:focus-within) { z-index: 5; position: relative; }

/* ==========================================================================
   Phones: offer grids are always 2 across (archives, search, "More Special
   Offers"). List view stays one per row. Card internals tightened to fit.
   ========================================================================== */
@media (max-width: 600px) {
	/* gap stays 1px: the hairline grid draws the dividers with each card's
	   outline, a wider gap shows every divider twice */
	.kk-ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
	.kk-view-list .kk-ogrid { grid-template-columns: minmax(0, 1fr); }

	.kk-ogrid .kk-ocard__img-wrap img, .kk-ogrid .kk-ocard__img { padding: 8%; }
	.kk-ogrid .kk-ocard__body { padding: 9px 4px 6px; }
	.kk-ogrid .kk-ocard__title { font-size: 13px; line-height: 1.3; }
	/* brand only on half-width cards; the category wrapped onto a second line */
	.kk-ogrid .kk-ocard__eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kk-ogrid .kk-ocard__eyebrow .kk-ocard__cat { display: none; }

	/* loyalty pill: stack price over note so it fits a half-width card */
	.kk-ogrid .kk-ocard__pricing--loyalty { padding: 6px 4px 10px; gap: 6px; }
	.kk-ogrid .kk-ocard__lprice { flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; }
	.kk-ogrid .kk-ocard__lprice-main { font-size: 16px; }
	.kk-ogrid .kk-ocard__lprice-note { max-width: none; font-size: 10px; text-align: left; }
	.kk-ogrid .kk-ocard__lprice-shelf { font-size: 11px; white-space: normal; }

	/* varieties: chip only, no names, on narrow cards */
	.kk-ogrid .kk-ocard__vars-names { display: none; }
	.kk-ogrid .kk-ocard__vars-chip { font-size: 11px; padding: 2px 8px; }
}