/* ==========================================================================
   KK Homepage — hero panel, quick links, highlights, inspiration, departments
   ========================================================================== */

.kk-home { font-family: var(--kk-font); color: var(--kk-text); line-height: 1.6; }
.kk-home .kk-section { padding: 48px 0 8px; }

/* ============ Hero panel ============ */

.kk-hero { padding: 24px 0 0; }

.kk-hero__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: stretch;
	background: var(--kk-surface);
	border-radius: var(--kk-radius-xl);
	overflow: hidden;
	min-height: 400px;
}

.kk-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	padding: 48px 48px 48px 52px;
}

.kk-hero__title {
	font-size: clamp(38px, 4.6vw, 58px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--kk-ink);
	margin: 0;
	max-width: 11ch;
}

.kk-hero__tagline { font-size: 18px; color: var(--kk-text-2); margin: 0 0 10px; max-width: 34ch; }

.kk-hero__image { position: relative; min-height: 300px; }
.kk-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Quick links ============ */

.kk-quicklinks { padding: 22px 0 8px; }

.kk-quicklinks__list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kk-quicklinks__list li { display: flex; align-items: center; }
.kk-quicklinks__list li + li::before { content: ""; width: 1px; height: 28px; background: var(--kk-line-strong); margin: 0 36px; }

.kk-quicklinks__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font-size: 16px;
	font-weight: 500;
	color: var(--kk-ink);
}

.kk-quicklinks__item svg { color: var(--kk-brown); flex-shrink: 0; }
.kk-quicklinks__item span::after { content: " \2192"; font-weight: 500; }
.kk-quicklinks__item:hover { color: var(--kk-brown); }

/* ============ Inspiration tiles ============ */

.kk-inspiration__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.kk-inspo {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 0;
	background: var(--kk-surface);
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	min-height: 220px;
	transition: background var(--kk-duration) var(--kk-ease);
}

.kk-inspo:hover { background: var(--kk-surface-2); color: inherit; }

.kk-inspo__img { position: relative; min-height: 200px; }
.kk-inspo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--kk-ease); }
.kk-inspo:hover .kk-inspo__img img { transform: scale(1.03); }

.kk-inspo__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 26px 28px; }
.kk-inspo__course { font-size: 12.5px; font-weight: 600; color: var(--kk-gold-deep); }
.kk-inspo__title { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--kk-ink); margin: 0; }
.kk-inspo__text { font-size: 14px; color: var(--kk-text-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.kk-inspo__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	min-height: 38px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--kk-ink);
	background: #fff;
	border: 1.5px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-sm);
}

.kk-inspo__cta::after { content: "\2192"; }
.kk-inspo:hover .kk-inspo__cta { border-color: var(--kk-brown); color: var(--kk-brown); }

/* ============ Department tiles ============ */

.kk-depts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.kk-dept-tile { display: block; color: inherit; text-decoration: none; }
.kk-dept-tile__img { aspect-ratio: 4 / 3; border-radius: var(--kk-radius-lg); overflow: hidden; background: var(--kk-surface); }
.kk-dept-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--kk-ease); }
.kk-dept-tile:hover .kk-dept-tile__img img { transform: scale(1.03); }
.kk-dept-tile__title { display: block; margin-top: 12px; font-size: 17px; font-weight: 600; color: var(--kk-ink); }
.kk-dept-tile__title::after { content: " \2192"; font-weight: 500; }
.kk-dept-tile:hover .kk-dept-tile__title { color: var(--kk-brown); }
/* Unavailable tile is not a link: no arrow, no hover effects. */
.kk-dept-tile--unavailable { cursor: default; }
.kk-dept-tile--unavailable .kk-dept-tile__title::after { content: none; }
.kk-dept-tile--unavailable:hover .kk-dept-tile__img img { transform: none; }
.kk-dept-tile--unavailable:hover .kk-dept-tile__title { color: var(--kk-ink); }

/* ============ Savings marquee ============ */

.kk-savings__band {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 6px 0;
	overflow: hidden;
	/* soft fade at both edges */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.kk-savings__row { display: flex; width: max-content; }
.kk-savings__track {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0 7px;
	list-style: none;
	animation: kk-savings-scroll var(--kk-savings-dur, 60s) linear infinite;
}
.kk-savings__row--reverse .kk-savings__track { animation-direction: reverse; }
.kk-savings__band:hover .kk-savings__track,
.kk-savings__band:focus-within .kk-savings__track { animation-play-state: paused; }

@keyframes kk-savings-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.kk-saving {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 300px;
	height: 100%;
	padding: 10px 16px 10px 10px;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	transition: border-color var(--kk-duration) var(--kk-ease), box-shadow var(--kk-duration) var(--kk-ease);
}
.kk-saving:hover { color: inherit; border-color: var(--kk-line-strong); box-shadow: 0 6px 18px rgba(31, 26, 20, 0.08); }
.kk-saving:focus-visible { outline: 2px solid var(--kk-gold-deep); outline-offset: 2px; }

.kk-saving__img {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 6px;
	background: #fff;
	border-radius: var(--kk-radius-md, 10px);
}
.kk-saving__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.kk-saving__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kk-saving__brand { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-3); }
.kk-saving__title { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--kk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-saving__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kk-saving__prices > * { white-space: nowrap; }
.kk-saving__prices strong { font-size: 16px; font-weight: 700; color: var(--kk-green-dark); }
.kk-saving__prices s { font-size: 12.5px; color: var(--kk-text-3); }
.kk-saving__save { font-size: 11.5px; font-weight: 600; color: var(--kk-green-dark); }
.kk-saving__card { font-size: 11px; color: var(--kk-text-3); }

@media (max-width: 600px) {
	.kk-savings__band { gap: 10px; }
	.kk-savings__track { gap: 10px; padding: 0 5px; }
	.kk-saving { width: 252px; padding: 8px 12px 8px 8px; }
	.kk-saving__img { width: 60px; height: 60px; }
	/* Phones: swipeable strip instead of the auto-scroll (same as the landing page). */
	.kk-savings__band { -webkit-mask-image: none; mask-image: none; }
	.kk-savings__row { width: auto; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px var(--kk-gutter, 20px); scroll-snap-type: x mandatory; scroll-padding-left: var(--kk-gutter, 20px); scrollbar-width: none; }
	.kk-savings__row::-webkit-scrollbar { display: none; }
	.kk-savings__track { animation: none; padding: 0; }
	.kk-savings__track[aria-hidden="true"] { display: none; }
	.kk-savings__track > li { scroll-snap-align: start; }
}

/* No motion: a plain swipeable row instead of the marquee */
@media (prefers-reduced-motion: reduce) {
	.kk-savings__band { -webkit-mask-image: none; mask-image: none; }
	.kk-savings__row { width: auto; overflow-x: auto; padding: 0 var(--kk-gutter, 20px); scroll-snap-type: x mandatory; }
	.kk-savings__track { animation: none; }
	.kk-savings__track[aria-hidden="true"] { display: none; }
	.kk-saving { scroll-snap-align: start; }
}

/* ============ About ============ */

.kk-about { padding-top: 56px !important; }
.kk-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.kk-about__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--kk-radius-lg); display: block; }
.kk-about__text .kk-section__heading { margin-bottom: 14px; }
.kk-about__text p { font-size: 15.5px; line-height: 1.7; color: var(--kk-text-2); margin: 0 0 14px; }

.kk-about__features {
	list-style: none;
	margin: 28px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--kk-line);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}

.kk-about__features li { display: flex; gap: 12px; align-items: flex-start; }
.kk-about__features svg { color: var(--kk-brown); flex-shrink: 0; margin-top: 2px; }
.kk-about__features strong { display: block; font-size: 15px; font-weight: 600; color: var(--kk-ink); }
.kk-about__features span { font-size: 13.5px; color: var(--kk-text-2); line-height: 1.5; }

/* ============ Visit ============ */

.kk-visit { padding: 48px 0 56px; }

.kk-visit__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: 40px 48px;
	background: var(--kk-brown);
	border-radius: var(--kk-radius-xl);
	color: #fff;
}

.kk-visit__title { font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; color: #fff; margin: 0 0 6px; }
.kk-visit__text { font-size: 15px; color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 56ch; }

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

@media (max-width: 900px) {
	.kk-hero__panel { grid-template-columns: 1fr; min-height: 0; }
	.kk-hero__text { padding: 32px 28px; order: 1; }
	.kk-hero__image { min-height: 240px; order: 0; }
	.kk-inspiration__grid { grid-template-columns: 1fr; }
	.kk-depts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.kk-about__grid { grid-template-columns: 1fr; gap: 24px; }
	.kk-about__image img { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
	.kk-hero { padding-top: 12px; }
	.kk-hero__text { padding: 24px 20px 28px; }
	.kk-hero__title { font-size: 32px; }
	.kk-quicklinks__list { flex-direction: column; align-items: stretch; gap: 0; }
	.kk-quicklinks__list li + li::before { display: none; }
	.kk-quicklinks__item { width: 100%; min-height: 52px; border-bottom: 1px solid var(--kk-line); }
	.kk-section__head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.kk-inspo { grid-template-columns: 1fr; }
	.kk-inspo__img { aspect-ratio: 16 / 10; min-height: 0; }
	.kk-inspo__body { padding: 18px 20px 22px; }
	.kk-about__features { grid-template-columns: 1fr; }
	.kk-visit__panel { padding: 28px 24px; }
}

/* ============ Savings strip v2: bigger, slower, offer type at a glance ============ */

.kk-savings__band { gap: 18px; }
.kk-savings__track { gap: 18px; padding: 0 9px; }

.kk-saving {
	width: 420px;
	gap: 18px;
	padding: 14px 20px 14px 14px;
	border-radius: 18px;
	border-top: 3px solid var(--kk-saving-accent, var(--kk-line));
}
.kk-saving__img { width: 120px; height: 120px; padding: 8px; border-radius: 14px; }
.kk-saving__body { gap: 3px; }
.kk-saving__brand { font-size: 11.5px; }
.kk-saving__title { font-size: 17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kk-saving__prices { margin-top: 5px; gap: 0 9px; }
.kk-saving__prices strong { font-size: 22px; color: var(--kk-saving-accent-ink, var(--kk-green-dark)); }
.kk-saving__prices s { font-size: 14px; }
.kk-saving__save { font-size: 13px; color: var(--kk-saving-accent-ink, var(--kk-green-dark)); }

/* Offer type: one colour per kind, used for the tag, the top edge and the price */
.kk-saving--loyalty { --kk-saving-accent: #2e7d32; --kk-saving-accent-ink: #1f6b2a; --kk-saving-tint: #E8F5E9; }
.kk-saving--special { --kk-saving-accent: #C5A355; --kk-saving-accent-ink: #8A6A22; --kk-saving-tint: #F6EEDB; }
.kk-saving--wine    { --kk-saving-accent: #7B2337; --kk-saving-accent-ink: #7B2337; --kk-saving-tint: #F5E6EA; }
.kk-saving__kind {
	align-self: flex-start;
	margin-bottom: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--kk-saving-accent-ink);
	background: var(--kk-saving-tint);
}

/* Filter pills in the section head: one per live offer type */
.kk-savings__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-savings__filter { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--kk-line-strong); background: #fff; color: var(--kk-ink); font: 500 13px/1 var(--kk-font); cursor: pointer; transition: border-color var(--kk-duration) var(--kk-ease), background-color var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease); }
.kk-savings__filter:hover { border-color: var(--kk-brown); color: var(--kk-brown); background: #fff; }
.kk-savings__filter.is-on, .kk-savings__filter.is-on:hover { background: var(--kk-brown); border-color: var(--kk-brown); color: #fff; }
.kk-savings__filter:focus-visible { outline: 2px solid var(--kk-gold-deep); outline-offset: 2px; }
.kk-savings__filter i { width: 8px; height: 8px; border-radius: 50%; background: var(--kind, var(--kk-gold)); }
.kk-savings__filter--loyalty { --kind: #829A35; }
.kk-savings__filter--special { --kind: #C5A355; }
.kk-savings__filter--wine { --kind: #7B2337; }
.kk-savings__row[hidden] { display: none; }

/* Sign-up band under the strip */
.kk-loyalty-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 20px 26px;
	border-radius: 18px;
	background: #E8F5E9;
}
.kk-loyalty-cta__text { min-width: 0; flex: 1 1 380px; }
.kk-loyalty-cta__title { margin: 0; font-size: 20px; font-weight: 700; color: #1f6b2a; }
.kk-loyalty-cta__lead { margin: 4px 0 0; font-size: 15px; color: var(--kk-text-2, #4a4a4a); max-width: 62ch; }
.kk-loyalty-cta__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kk-loyalty-cta__btn {
	display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px;
	background: #2e7d32; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
	transition: background var(--kk-duration, .2s);
}
.kk-loyalty-cta__btn:hover { background: #1f6b2a; color: #fff; }
.kk-loyalty-cta__btn:focus-visible, .kk-loyalty-cta__link:focus-visible { outline: 2px solid #1f6b2a; outline-offset: 3px; }
.kk-loyalty-cta__link { font-weight: 600; font-size: 14px; color: #1f6b2a; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
	.kk-saving { width: 300px; gap: 12px; padding: 10px 14px 10px 10px; }
	.kk-saving__img { width: 84px; height: 84px; }
	.kk-saving__title { font-size: 15px; }
	.kk-saving__prices strong { font-size: 18px; }
	.kk-loyalty-cta { padding: 18px; }
	.kk-loyalty-cta__title { font-size: 18px; }
}

/* Loyalty brand look for the sign-up band: Scan 'n Save olive greens + the
   double wave from the loyalty artwork (drawn as an inline SVG). */
.kk-loyalty-cta {
	--kk-lo-olive: #829A35;
	--kk-lo-olive-light: #9DB443;
	--kk-lo-olive-ink: #4F5F1A;
	position: relative;
	overflow: hidden;
	padding: 46px 30px 26px;
	background: var(--kk-lo-olive);
	color: #fff;
}
.kk-loyalty-cta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 34px;
	background: no-repeat top / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V8C880 30 760 44 600 44 380 44 180 24 0 18Z' fill='%23ffffff'/%3E%3Cpath d='M0 18C180 24 380 44 600 44 760 44 880 30 1000 8V16C880 38 760 54 600 54 380 54 180 34 0 30Z' fill='%239DB443'/%3E%3C/svg%3E");
	pointer-events: none;
}
.kk-loyalty-cta > * { position: relative; }
.kk-loyalty-cta__title { color: #fff; font-size: 22px; letter-spacing: -.01em; }
.kk-loyalty-cta__lead { color: rgba(255, 255, 255, .92); }
.kk-loyalty-cta__btn { background: #fff; color: var(--kk-lo-olive-ink); }
.kk-loyalty-cta__btn:hover { background: #F3F7E6; color: var(--kk-lo-olive-ink); }
.kk-loyalty-cta__link { color: #fff; }
.kk-loyalty-cta__btn:focus-visible, .kk-loyalty-cta__link:focus-visible { outline-color: #fff; }

/* Loyalty tag/price on the strip cards use the same olive family */
.kk-saving--loyalty { --kk-saving-accent: #829A35; --kk-saving-accent-ink: #5E7022; --kk-saving-tint: #EEF3DD; }

/* ============ Loyalty sign-up band: full width, stretching SVG wave, card on top ============ */
.kk-loyalty-band { position: relative; margin-top: 56px; padding: 0 0 34px; color: #fff; isolation: isolate; }
.kk-loyalty-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.kk-loyalty-band__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px 34px;
	padding-top: 70px;
}
.kk-loyalty-band__card {
	width: 230px; height: auto; max-width: 100%;
	margin-top: -96px;                 /* sits on top of the wave */
	transform: rotate(-6deg);
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28));
}
.kk-loyalty-band__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.kk-loyalty-band__lead { margin: 6px 0 0; font-size: 16px; color: rgba(255, 255, 255, .92); max-width: 60ch; }
.kk-loyalty-band__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kk-loyalty-band__btn {
	display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 999px;
	background: #fff; color: #4F5F1A; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
	transition: background .2s;
}
.kk-loyalty-band__btn:hover { background: #F3F7E6; color: #4F5F1A; }
.kk-loyalty-band__link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.kk-loyalty-band__btn:focus-visible, .kk-loyalty-band__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) {
	.kk-loyalty-band__inner { grid-template-columns: auto minmax(0, 1fr); }
	.kk-loyalty-band__actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.kk-loyalty-band { margin-top: 70px; }
	.kk-loyalty-band__inner { grid-template-columns: 1fr; padding-top: 40px; text-align: left; }
	.kk-loyalty-band__card { width: 170px; margin-top: -90px; }
	.kk-loyalty-band__title { font-size: 21px; }
	.kk-loyalty-band__lead { font-size: 15px; }
}

/* Sign-up band as its own full-width section: green body, wave top and bottom */
.kk-loyalty-band { margin: 64px 0 0; padding: 0; background: transparent; }
.kk-loyalty-band__bg { display: none; }
.kk-loyalty-band__wave { display: block; width: 100%; height: 70px; }
.kk-loyalty-band__wave--top { height: 80px; margin-bottom: -1px; }
.kk-loyalty-band__wave--bottom { height: 56px; margin-top: -1px; }
.kk-loyalty-band__inner {
	background: transparent;
	padding-top: 6px;
	padding-bottom: 26px;
	position: relative;
}
/* the green body runs edge to edge behind the container */
.kk-loyalty-band__inner::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
	background: #829A35; z-index: -1;
}
.kk-loyalty-band { overflow-x: clip; }
.kk-loyalty-band__card { margin-top: -110px; width: 240px; }
@media (max-width: 600px) {
	.kk-loyalty-band { margin-top: 80px; }
	.kk-loyalty-band__wave--top { height: 46px; }
	.kk-loyalty-band__wave--bottom { height: 34px; }
	.kk-loyalty-band__card { margin-top: -80px; width: 170px; }
}