/*
 * The shop pages: Mizuki Picks, and Tools & Vases.
 *
 * One design system, two page widgets. They share a palette, a set of faces, a product rail, an
 * accordion and a phone bar, and differ in which sections they have and how the banner is set —
 * so they share this file and js/shop-page.js, and the prefix stays .mzk-pk for both.
 *
 * Same two rules as the other page widgets, for the same reasons.
 *
 * Enforced, not declared: this lands inside a theme that styles bare headings, buttons and lists
 * and wins on ordinary specificity, so everything that matters carries !important and is anchored
 * to .mzk-pk. And every selector carries at least two classes, because the element reset is
 * `.mzk-pk <element>` — a class plus a type — so a single-class layout rule loses to it. That
 * mistake once left a whole page hard against the left edge on a wide screen and looked fine on a
 * narrow one; wp-plugin/tests/page-css.php checks all four stylesheets for it now.
 *
 * The palette and the faces are the product page's, deliberately — the two pages sit next to each
 * other in the shop and a second set of near-identical greens would show.
 */

.mzk-pk {
	--pk-navy: #17304d;
	--pk-green: #4f7d70;
	--pk-green-dark: #3f665a;
	--pk-teal: #315e74;
	--pk-ivory: #fcfbf8;
	--pk-beige: #f4f2ec;
	--pk-sand: #ede8dc;
	--pk-sage: #8fa99d;
	--pk-charcoal: #4f5358;
	--pk-divider: #dcddd8;

	--pk-serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
	--pk-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--pk-max: 1440px;
	--pk-pad: 20px;

	/* Measured by js/elementor.js; 100vw includes the scrollbar and would run the whole site a
	   dozen pixels wide. The fallback is only reached with the script blocked. */
	--pk-vw: var(--mzk-vw, 100vw);

	display: block !important;
	width: var(--pk-vw) !important;
	max-width: var(--pk-vw) !important;
	margin-left: calc(50% - var(--pk-vw) / 2) !important;
	margin-right: calc(50% - var(--pk-vw) / 2) !important;
	padding: 0 !important;

	background: var(--pk-ivory) !important;
	font-family: var(--pk-sans) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	color: var(--pk-charcoal) !important;
	text-align: left !important;
	-webkit-font-smoothing: antialiased;
}

.elementor-widget-mizuki-picks-page,
.elementor-widget-mizuki-picks-page > .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (min-width: 1024px) { .mzk-pk { --pk-pad: 64px; } }
@media (min-width: 1280px) { .mzk-pk { --pk-pad: 80px; } }

/* ------------------------------------------------------------- the reset */

.mzk-pk *,
.mzk-pk *::before,
.mzk-pk *::after { box-sizing: border-box !important; }

.mzk-pk section {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	clear: both !important;
	border: 0;
	margin: 0 !important;
}

/* Only what has a margin of its own to remove. Zeroing every div outranks the layout rules. */
.mzk-pk h1,
.mzk-pk h2,
.mzk-pk h3,
.mzk-pk p,
.mzk-pk ul,
.mzk-pk ol,
.mzk-pk li {
	margin: 0 !important;
	padding: 0 !important;
}

.mzk-pk h1,
.mzk-pk h2,
.mzk-pk h3,
.mzk-pk p,
.mzk-pk ul,
.mzk-pk ol,
.mzk-pk li,
.mzk-pk span,
.mzk-pk div {
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	float: none !important;
	background: none;
}

.mzk-pk h1,
.mzk-pk h2,
.mzk-pk h3 {
	font-family: inherit !important;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	border: 0 !important;
}

.mzk-pk ul,
.mzk-pk ol { list-style: none !important; }
.mzk-pk li::marker { content: none !important; }

.mzk-pk img {
	display: block !important;
	max-width: 100% !important;
	height: auto;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none;
}

.mzk-pk a { text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }

.mzk-pk button {
	font-family: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	line-height: inherit !important;
	border-radius: 0 !important;
}

.mzk-pk .mzk-pk__inner {
	max-width: var(--pk-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	padding-left: var(--pk-pad) !important;
	padding-right: var(--pk-pad) !important;
}

.mzk-pk .mzk-pk__eyebrow {
	display: block !important;
	font-family: var(--pk-sans) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	line-height: 1.6 !important;
	color: var(--pk-sage) !important;
	margin: 0 0 16px !important;
}
@media (min-width: 768px) { .mzk-pk .mzk-pk__eyebrow { font-size: 11px !important; } }

.mzk-pk .mzk-pk__h2 {
	font-family: var(--pk-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(1.875rem, 4vw, 2.625rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.015em !important;
	color: var(--pk-navy) !important;
	margin: 0 0 20px !important;
	text-wrap: balance;
}

.mzk-pk .mzk-pk__body,
.mzk-pk .mzk-pk__body p {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: rgba(79, 83, 88, .9) !important;
}
.mzk-pk .mzk-pk__body p + p { margin-top: 24px !important; }
@media (min-width: 768px) {
	.mzk-pk .mzk-pk__body,
	.mzk-pk .mzk-pk__body p { font-size: 16px !important; }
}

/* ----------------------------------------------------------- the buttons */

.mzk-pk .mzk-pk__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	padding: 0 32px !important;
	font-family: var(--pk-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	border: 0 !important;
	cursor: pointer !important;
	background: var(--pk-green) !important;
	color: #fff !important;
	transition: background-color .4s cubic-bezier(.25, 1, .5, 1), transform .4s cubic-bezier(.25, 1, .5, 1) !important;
}
@media (min-width: 768px) { .mzk-pk .mzk-pk__btn { height: 56px !important; padding: 0 40px !important; font-size: 12px !important; } }
.mzk-pk .mzk-pk__btn:hover,
.mzk-pk .mzk-pk__btn:focus { background: var(--pk-green-dark) !important; color: #fff !important; transform: translateY(-1px) !important; }

.mzk-pk .mzk-pk__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: var(--pk-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--pk-navy) !important;
	transition: color .3s !important;
}
@media (min-width: 768px) { .mzk-pk .mzk-pk__link { font-size: 12px !important; } }
.mzk-pk .mzk-pk__link:hover { color: var(--pk-green) !important; }
.mzk-pk .mzk-pk__link span { border-bottom: 1px solid transparent !important; padding-bottom: 2px !important; transition: border-color .3s !important; }
.mzk-pk .mzk-pk__link:hover span { border-bottom-color: currentColor !important; }
.mzk-pk .mzk-pk__link svg { width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; transition: transform .4s cubic-bezier(.25, 1, .5, 1) !important; }
.mzk-pk .mzk-pk__link:hover svg { transform: translateX(4px) !important; }

.mzk-pk .mzk-pk__link--light,
.mzk-pk .mzk-pk__link--light:visited { color: #fff !important; }
.mzk-pk .mzk-pk__link--light:hover { color: rgba(255,255,255,.82) !important; }

@media (prefers-reduced-motion: reduce) {
	.mzk-pk .mzk-pk__btn,
	.mzk-pk .mzk-pk__link svg,
	.mzk-pk .mzk-pk-card__media img { transition: none !important; }
	.mzk-pk .mzk-pk__btn:hover { transform: none !important; }
	.mzk-pk .mzk-pk__link:hover svg { transform: none !important; }
}

/* -------------------------------------------------------------- banner */

.mzk-pk .mzk-pk-banner {
	position: relative !important;
	overflow: hidden !important;
	background: var(--pk-navy) !important;
	height: 540px !important;
	display: flex !important;
	align-items: flex-end !important;
}
@media (min-width: 768px)  { .mzk-pk .mzk-pk-banner { height: 600px !important; align-items: center !important; } }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-banner { height: 700px !important; } }

.mzk-pk .mzk-pk-banner__bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; }
.mzk-pk .mzk-pk-banner__bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }

/*
 * The scrim is set by the brightest photograph rather than the darkest. The design fades bottom
 * to top on a phone and left to right on a desktop, which is right for text on the left — but it
 * fades to almost nothing, and the picture is a control, so the next one is unknown.
 */
.mzk-pk .mzk-pk-banner__bg::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background:
		linear-gradient(to top, rgba(23,48,77,.92), rgba(23,48,77,.55) 55%, rgba(23,48,77,.32)),
		rgba(23,48,77,.18) !important;
}
@media (min-width: 768px) {
	.mzk-pk .mzk-pk-banner__bg::after {
		background:
			linear-gradient(to right, rgba(23,48,77,.94), rgba(23,48,77,.55) 55%, rgba(23,48,77,.22)),
			rgba(23,48,77,.16) !important;
	}
}

.mzk-pk .mzk-pk-banner__content {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: var(--pk-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 var(--pk-pad) 64px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
@media (min-width: 768px) {
	.mzk-pk .mzk-pk-banner__content { align-items: flex-start !important; text-align: left !important; padding-bottom: 0 !important; }
}

.mzk-pk .mzk-pk-banner__box { max-width: 700px !important; display: flex !important; flex-direction: column !important; align-items: inherit !important; }

.mzk-pk .mzk-pk-banner__eyebrow { color: rgba(255,255,255,.85) !important; letter-spacing: 0.3em !important; }
.mzk-pk .mzk-pk-banner__title {
	font-family: var(--pk-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(2.625rem, 6vw, 4.25rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: #fff !important;
	margin: 0 0 24px !important;
	text-shadow: 0 1px 14px rgba(10,20,32,.35) !important;
	text-wrap: balance;
}
.mzk-pk .mzk-pk-banner__lede {
	font-family: var(--pk-serif) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: clamp(1.125rem, 2.4vw, 1.375rem) !important;
	line-height: 1.4 !important;
	letter-spacing: -0.01em !important;
	color: rgba(255,255,255,.95) !important;
	margin: 0 0 20px !important;
	max-width: 500px !important;
	text-wrap: balance;
}
.mzk-pk .mzk-pk-banner__text {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: rgba(255,255,255,.82) !important;
	margin: 0 0 40px !important;
	max-width: 480px !important;
}
@media (min-width: 768px) { .mzk-pk .mzk-pk-banner__text { font-size: 16px !important; } }

.mzk-pk .mzk-pk-banner__actions {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 24px !important;
	width: 100% !important;
}
@media (min-width: 640px) { .mzk-pk .mzk-pk-banner__actions { flex-direction: row !important; width: auto !important; } }
.mzk-pk .mzk-pk-banner__actions .mzk-pk__btn { width: 100% !important; }
@media (min-width: 640px) { .mzk-pk .mzk-pk-banner__actions .mzk-pk__btn { width: auto !important; } }

/* --------------------------------------------------------------- intro */

.mzk-pk .mzk-pk-intro { background: var(--pk-ivory) !important; padding: 72px 0 !important; }
@media (min-width: 768px)  { .mzk-pk .mzk-pk-intro { padding: 110px 0 !important; } }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-intro { padding: 130px 0 !important; } }

.mzk-pk .mzk-pk-intro__inner { max-width: 960px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.mzk-pk .mzk-pk-intro__title { font-size: clamp(1.875rem, 4.6vw, 3.125rem) !important; margin-bottom: 32px !important; }
.mzk-pk .mzk-pk-intro__foot { margin-top: 40px !important; }
@media (min-width: 768px) {
	.mzk-pk .mzk-pk-intro__body,
	.mzk-pk .mzk-pk-intro__body p { font-size: 17px !important; }
}

/* -------------------------------------------------------------- slider */

.mzk-pk .mzk-pk-picks {
	background: #fff !important;
	border-top: 1px solid rgba(220, 221, 216, .4) !important;
	padding: 96px 0 !important;
	overflow: hidden !important;
	scroll-margin-top: 90px !important;
}
@media (min-width: 1024px) { .mzk-pk .mzk-pk-picks { padding: 140px 0 !important; } }

/*
 * margin-bottom, not a margin shorthand.
 *
 * This element carries .mzk-pk__inner too, and that is what centres the page's content on a wide
 * screen — with `margin: 0 0 48px` the left and right of that shorthand overwrote its auto
 * margins, and the whole slider section sat hard against the left edge while every other section
 * centred. It looked correct below 1440px, where there is no spare width to centre into.
 */
.mzk-pk .mzk-pk-picks__head {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important;
	margin-bottom: 48px !important;
}
@media (min-width: 768px) {
	.mzk-pk .mzk-pk-picks__head { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; }
}
.mzk-pk .mzk-pk-picks__blurb { max-width: 600px !important; }
.mzk-pk .mzk-pk-picks__title { margin-bottom: 16px !important; }
.mzk-pk .mzk-pk-picks__intro { font-size: 15px !important; line-height: 1.7 !important; color: rgba(79, 83, 88, .9) !important; }
@media (min-width: 768px) { .mzk-pk .mzk-pk-picks__intro { font-size: 16px !important; } }

/* The controls only appear once the script is there to drive them — the track is a real
   scrollable list and needs neither, and an arrow that does nothing is worse than no arrow. */
.mzk-pk .mzk-pk-picks__nav { display: none !important; }
@media (min-width: 768px) {
	.mzk-pk .mzk-pk-slider.is-ready .mzk-pk-picks__nav {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 24px !important;
		flex: none !important;
	}
}


.mzk-pk .mzk-pk-picks__arrows { align-items: center !important; gap: 16px !important; }
.mzk-pk .mzk-pk-picks__count {
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	color: rgba(23, 48, 77, .7) !important;
	margin-right: 16px !important;
	font-variant-numeric: tabular-nums !important;
}
.mzk-pk .mzk-pk-picks__arrow {
	width: 44px !important;
	height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid var(--pk-divider) !important;
	border-radius: 999px !important;
	color: var(--pk-navy) !important;
	cursor: pointer !important;
	transition: background-color .3s, opacity .3s !important;
}
.mzk-pk .mzk-pk-picks__arrow:hover:not([disabled]) { background: var(--pk-beige) !important; }
.mzk-pk .mzk-pk-picks__arrow[disabled] { opacity: .3 !important; cursor: default !important; }
.mzk-pk .mzk-pk-picks__arrow svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.25 !important; }

/*
 * A scroll-snap track, and proximity rather than mandatory.
 *
 * A mandatory snap container cancels a smooth programmatic scroll outright: the animation starts,
 * the container re-snaps to the point it is still nearest, and it ends where it began — with no
 * error, so the arrows simply do nothing. Proximity still snaps a swipe, which is the part a
 * reader notices.
 */
.mzk-pk .mzk-pk-slider__track {
	display: flex !important;
	align-items: stretch !important;
	gap: 16px !important;
	overflow-x: auto !important;
	scroll-snap-type: x proximity !important;
	padding: 16px 0 32px !important;
	margin: 0 !important;
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}
.mzk-pk .mzk-pk-slider__track::-webkit-scrollbar { display: none !important; }
@media (min-width: 768px) { .mzk-pk .mzk-pk-slider__track { gap: 24px !important; } }
.mzk-pk .mzk-pk-slider__track:focus-visible { outline: 2px solid var(--pk-green) !important; outline-offset: 4px !important; }

/* Full-bleed to the right so the next card is half-seen, which is what says "this scrolls". */
.mzk-pk .mzk-pk-slider__rail {
	max-width: var(--pk-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--pk-pad) !important;
	padding-right: var(--pk-pad) !important;
}

.mzk-pk .mzk-pk-card {
	flex: 0 0 auto !important;
	width: 85% !important;
	scroll-snap-align: start !important;
	display: flex !important;
	flex-direction: column !important;
}
@media (min-width: 768px)  { .mzk-pk .mzk-pk-card { width: 320px !important; } }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-card { width: 360px !important; } }

/*
 * A card is one link, so every part of it is a span. They happen to lay out correctly because
 * their parents are flex containers and a flex item is blockified — but relying on that means a
 * card stops working the day somebody changes a parent's display. Said outright instead; the
 * same omission on the product page's cards collapsed the picture to a strip of its padding.
 */
.mzk-pk .mzk-pk-card__media,
.mzk-pk .mzk-pk-card__label,
.mzk-pk .mzk-pk-card__title,
.mzk-pk .mzk-pk-card__text,
.mzk-pk .mzk-pk-card__price,
.mzk-pk .mzk-pk-card__cta { display: block !important; }

.mzk-pk .mzk-pk-card__link { display: flex !important; flex-direction: column !important; height: 100% !important; }
.mzk-pk .mzk-pk-card__media {
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
	background: #fafafa !important;
	border: 1px solid rgba(0,0,0,.05) !important;
	box-shadow: 0 4px 20px rgba(0,0,0,.03) !important;
	margin: 0 0 24px !important;
}
.mzk-pk .mzk-pk-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 1.2s cubic-bezier(.215, .61, .355, 1) !important;
}
.mzk-pk .mzk-pk-card:hover .mzk-pk-card__media img { transform: scale(1.03) !important; }

.mzk-pk .mzk-pk-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 0 4px !important; }
.mzk-pk .mzk-pk-card__label { margin-bottom: 10px !important; }
.mzk-pk .mzk-pk-card__title {
	font-family: var(--pk-serif) !important;
	font-weight: 500 !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: var(--pk-navy) !important;
	margin: 0 0 8px !important;
	transition: color .3s !important;
}
.mzk-pk .mzk-pk-card:hover .mzk-pk-card__title { color: var(--pk-green) !important; }

/* Two lines, so every card's price and link sit on the same line across the row. */
.mzk-pk .mzk-pk-card__text {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: rgba(79, 83, 88, .8) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: 2.2em !important;
}
.mzk-pk .mzk-pk-card__price { font-size: 14px !important; font-weight: 500 !important; color: var(--pk-navy) !important; margin: 12px 0 0 !important; }
.mzk-pk .mzk-pk-card__price del { opacity: .5 !important; margin-right: 8px !important; }
.mzk-pk .mzk-pk-card__price ins { text-decoration: none !important; }
.mzk-pk .mzk-pk-card__cta { display: inline-flex !important; margin-top: auto !important; padding-top: 16px !important; }
.mzk-pk .mzk-pk-card:hover .mzk-pk-card__cta { color: var(--pk-green) !important; }

.mzk-pk .mzk-pk-picks__swipe {
	justify-content: space-between !important;
	align-items: center !important;
	margin: 8px 0 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: rgba(23, 48, 77, .7) !important;
}

/* Same here: this one is a container as well, so it may not set its own horizontal margins. */
.mzk-pk .mzk-pk-picks__foot { text-align: center !important; margin-top: 48px !important; }
@media (min-width: 768px) { .mzk-pk .mzk-pk-picks__foot { margin-top: 80px !important; } }

/* ------------------------------------------------------------- featured */

.mzk-pk .mzk-pk-featured { background: var(--pk-beige) !important; padding: 96px 0 !important; overflow: hidden !important; }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-featured { padding: 140px 0 !important; } }

.mzk-pk .mzk-pk-featured__grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 48px !important; }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-featured__grid { flex-direction: row !important; gap: 96px !important; } }
.mzk-pk .mzk-pk-featured__media { width: 100% !important; position: relative !important; }
.mzk-pk .mzk-pk-featured__text  { width: 100% !important; padding-top: 48px !important; }
@media (min-width: 1024px) {
	.mzk-pk .mzk-pk-featured__media { width: 55% !important; }
	.mzk-pk .mzk-pk-featured__text  { width: 45% !important; padding-top: 0 !important; padding-right: 40px !important; }
}

.mzk-pk .mzk-pk-featured__main {
	background: var(--pk-sand) !important;
	padding: 24px !important;
	max-width: 600px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
	overflow: hidden !important;
}
@media (min-width: 1024px) { .mzk-pk .mzk-pk-featured__main { padding: 40px !important; } }
.mzk-pk .mzk-pk-featured__main img {
	width: 100% !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
	transition: transform 1.2s cubic-bezier(.215, .61, .355, 1) !important;
}
.mzk-pk .mzk-pk-featured__main:hover img { transform: scale(1.03) !important; }

.mzk-pk .mzk-pk-featured__inset {
	background: #fff !important;
	padding: 12px !important;
	border: 1px solid rgba(220, 221, 216, .2) !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.1) !important;
	width: 45% !important;
	max-width: 280px !important;
	margin: -40px 0 0 auto !important;
	position: relative !important;
}
@media (min-width: 1024px) { .mzk-pk .mzk-pk-featured__inset { margin-top: -64px !important; } }
.mzk-pk .mzk-pk-featured__inset img { width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; }

.mzk-pk .mzk-pk-featured__title { font-size: clamp(2.25rem, 4.4vw, 2.75rem) !important; margin-bottom: 16px !important; }
.mzk-pk .mzk-pk-featured__lede {
	font-family: var(--pk-serif) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 1.4 !important;
	letter-spacing: -0.01em !important;
	color: var(--pk-navy) !important;
	margin: 0 0 24px !important;
	text-wrap: balance;
}
.mzk-pk .mzk-pk-featured__body { margin: 0 0 40px !important; }
.mzk-pk .mzk-pk-featured__body p + p { margin-top: 20px !important; }

/* ------------------------------------------------------------- benefits */

.mzk-pk .mzk-pk-why { background: var(--pk-ivory) !important; padding: 96px 0 !important; }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-why { padding: 140px 0 !important; } }
.mzk-pk .mzk-pk-why__head { text-align: center !important; margin: 0 0 64px !important; }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-why__head { margin-bottom: 80px !important; } }
.mzk-pk .mzk-pk-why__intro { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.7 !important; }

.mzk-pk .mzk-pk-why__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 48px !important; }
@media (min-width: 640px)  { .mzk-pk .mzk-pk-why__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-why__grid { grid-template-columns: repeat(4, 1fr) !important; gap: 32px !important; } }

.mzk-pk .mzk-pk-why__item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.mzk-pk .mzk-pk-why__dial {
	width: 60px !important;
	height: 60px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(220, 221, 216, .8) !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 0 24px !important;
	color: var(--pk-teal) !important;
	font-size: 26px !important;
	line-height: 1 !important;
	transition: border-color .5s !important;
}
.mzk-pk .mzk-pk-why__item:hover .mzk-pk-why__dial { border-color: var(--pk-green) !important; }
.mzk-pk .mzk-pk-why__dial svg { width: 26px !important; height: 26px !important; fill: currentColor !important; }
.mzk-pk .mzk-pk-why__dial i { color: var(--pk-teal) !important; }

.mzk-pk .mzk-pk-why__title {
	font-family: var(--pk-sans) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	line-height: 1.5 !important;
	color: var(--pk-navy) !important;
	margin: 0 0 12px !important;
}
@media (min-width: 768px) { .mzk-pk .mzk-pk-why__title { font-size: 13px !important; } }
.mzk-pk .mzk-pk-why__text { font-size: 14px !important; line-height: 1.6 !important; color: rgba(79, 83, 88, .9) !important; max-width: 260px !important; }

/* ------------------------------------------------------------------ faq */

.mzk-pk .mzk-pk-faq { background: var(--pk-beige) !important; border-top: 1px solid rgba(220, 221, 216, .4) !important; padding: 96px 0 !important; }
@media (min-width: 1024px) { .mzk-pk .mzk-pk-faq { padding: 140px 0 !important; } }
.mzk-pk .mzk-pk-faq__inner { max-width: 900px !important; }
.mzk-pk .mzk-pk-faq__head { text-align: center !important; margin: 0 0 64px !important; }

.mzk-pk .mzk-pk-faq__list { border-top: 1px solid rgba(220, 221, 216, .8) !important; }
.mzk-pk .mzk-pk-faq__item { border-bottom: 1px solid rgba(220, 221, 216, .8) !important; }

.mzk-pk .mzk-pk-faq__q {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 32px !important;
	width: 100% !important;
	padding: 24px 0 !important;
	background: none !important;
	border: 0 !important;
	text-align: left !important;
	cursor: pointer !important;
	font-family: var(--pk-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(1.25rem, 2.4vw, 1.375rem) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.015em !important;
	color: var(--pk-navy) !important;
	transition: color .3s !important;
}
@media (min-width: 768px) { .mzk-pk .mzk-pk-faq__q { padding: 32px 0 !important; } }
.mzk-pk .mzk-pk-faq__q:hover { color: var(--pk-green) !important; }
.mzk-pk .mzk-pk-faq__q:focus-visible { outline: 2px solid var(--pk-green) !important; outline-offset: -4px !important; }
.mzk-pk .mzk-pk-faq__mark { flex: none !important; display: inline-flex !important; color: inherit !important; }
.mzk-pk .mzk-pk-faq__mark svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.25 !important; }
.mzk-pk .mzk-pk-faq__q[aria-expanded="true"] .mzk-pk-faq__plus { display: none !important; }
.mzk-pk .mzk-pk-faq__q[aria-expanded="false"] .mzk-pk-faq__minus { display: none !important; }

.mzk-pk .mzk-pk-faq__a { display: grid !important; grid-template-rows: 0fr !important; transition: grid-template-rows .4s cubic-bezier(.25, 1, .5, 1) !important; }
.mzk-pk .mzk-pk-faq__a[data-open="true"] { grid-template-rows: 1fr !important; }
.mzk-pk .mzk-pk-faq__a > div { overflow: hidden !important; }
.mzk-pk .mzk-pk-faq__a p { font-size: 15px !important; line-height: 1.8 !important; color: rgba(79, 83, 88, .9) !important; padding: 0 0 24px !important; }
@media (min-width: 768px) { .mzk-pk .mzk-pk-faq__a p { font-size: 16px !important; padding-right: 48px !important; } }

.mzk-pk .mzk-pk-faq__foot { text-align: center !important; margin: 64px 0 0 !important; }

@media (prefers-reduced-motion: reduce) {
	.mzk-pk .mzk-pk-faq__a { transition: none !important; }
	.mzk-pk .mzk-pk-featured__main img { transition: none !important; }
	.mzk-pk .mzk-pk-card:hover .mzk-pk-card__media img,
	.mzk-pk .mzk-pk-featured__main:hover img { transform: none !important; }
}

/* ----------------------------------------------------------- sticky bar */

/*
 * Moved to <body> by the script. `position: fixed` resolves against the nearest ancestor with a
 * transform or a filter, and Elementor applies both — left where it is rendered the bar would sit
 * inside its own section rather than against the window.
 */
.mzk-pk-sticky {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 2147482000 !important;
	padding: 16px !important;
	background: rgba(255,255,255,.96) !important;
	backdrop-filter: blur(8px) !important;
	border-top: 1px solid rgba(220, 221, 216, .6) !important;
	box-shadow: 0 -10px 20px rgba(0,0,0,.04) !important;
	transform: translateY(120%) !important;
	transition: transform .5s cubic-bezier(.25, 1, .5, 1) !important;
}
.mzk-pk-sticky[hidden] { display: none !important; }
.mzk-pk-sticky.is-shown { transform: translateY(0) !important; }
@media (min-width: 768px) { .mzk-pk-sticky { display: none !important; } }

.mzk-pk-sticky__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 52px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: #17304d !important;
	color: #fff !important;
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background-color .3s !important;
}
.mzk-pk-sticky__btn:hover,
.mzk-pk-sticky__btn:active { background: #4f7d70 !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
	.mzk-pk-sticky { transition: none !important; }
}

/* ------------------------------------------------ Tools & Vases variations */

/*
 * The centred banner.
 *
 * Mizuki Picks runs its heading to the left on a desktop, against a picture that fades left to
 * right. Tools & Vases centres it over an evenly darkened photograph, so the scrim is flat rather
 * than directional — a left-to-right fade under centred text leaves the right-hand words on the
 * brightest part of the picture.
 */
.mzk-pk.mzk-pk--centred .mzk-pk-banner { height: 420px !important; }
@media (min-width: 640px)  { .mzk-pk.mzk-pk--centred .mzk-pk-banner { height: 500px !important; } }
@media (min-width: 768px)  { .mzk-pk.mzk-pk--centred .mzk-pk-banner { height: 580px !important; } }
@media (min-width: 1024px) { .mzk-pk.mzk-pk--centred .mzk-pk-banner { height: 620px !important; } }

.mzk-pk.mzk-pk--centred .mzk-pk-banner {
	align-items: center !important;
}

.mzk-pk.mzk-pk--centred .mzk-pk-banner__bg::after {
	background: rgba(23, 48, 77, .56) !important;
}

.mzk-pk.mzk-pk--centred .mzk-pk-banner__content {
	align-items: center !important;
	text-align: center !important;
	padding-bottom: 0 !important;
}

.mzk-pk.mzk-pk--centred .mzk-pk-banner__box { align-items: center !important; }
.mzk-pk.mzk-pk--centred .mzk-pk-banner__lede { max-width: 460px !important; margin-bottom: 32px !important; }
@media (min-width: 768px) { .mzk-pk.mzk-pk--centred .mzk-pk-banner__lede { margin-bottom: 40px !important; } }
.mzk-pk.mzk-pk--centred .mzk-pk-banner__text { margin-left: auto !important; margin-right: auto !important; }
.mzk-pk.mzk-pk--centred .mzk-pk-banner__actions { justify-content: center !important; }

/* Cards with no line of description sit closer together. */
.mzk-pk.mzk-pk--centred .mzk-pk-card__media { margin-bottom: 20px !important; }
.mzk-pk.mzk-pk--centred .mzk-pk-card__title { margin-bottom: 16px !important; }

/* ------------------------------------------------------ the dash row */

.mzk-pk .mzk-pk-picks__swipe--dashes {
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 24px !important;
}

.mzk-pk .mzk-pk-picks__dashes { display: flex !important; align-items: center !important; gap: 6px !important; }
.mzk-pk .mzk-pk-picks__dash {
	display: block !important;
	width: 16px !important;
	height: 2px !important;
	background: var(--pk-divider) !important;
	transition: width .3s, background-color .3s !important;
}
.mzk-pk .mzk-pk-picks__dash[data-current="true"] { width: 24px !important; background: var(--pk-green) !important; }

/* The count in words, for anything that cannot see the dashes. */
.mzk-pk .mzk-pk-picks__reader {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.mzk-pk .mzk-pk-picks__dash { transition: none !important; }
}

/* ------------------------------------------ controls for a rail that moves */

/*
 * Last in the file on purpose: these decide whether the arrows and the phone hint are drawn at
 * all, and the rules they override are above. Three cards that all fit is a rail that cannot
 * move, and arrows over it are two buttons that do nothing beside a count reading "03 / 03"
 * before the reader has touched anything. The "View all" link above them stays either way.
 */
.mzk-pk .mzk-pk-picks__arrows { display: none !important; }
.mzk-pk .mzk-pk-slider.is-scrollable .mzk-pk-picks__arrows { display: flex !important; }

.mzk-pk .mzk-pk-picks__swipe { display: none !important; }
@media (max-width: 767px) {
	.mzk-pk .mzk-pk-slider.is-scrollable .mzk-pk-picks__swipe { display: flex !important; }
	.mzk-pk .mzk-pk-slider.is-scrollable .mzk-pk-picks__swipe--dashes { display: flex !important; }
}