/*
 * Napelle redesign: foundation styles.
 * Everything is scoped under body.np-preview (the class exists only on pages that use the new design).
 *
 * Contents
 *  1. Tokens (+ Minimog variable mapping for theme-template pages)
 *  2. Theme chrome hidden on preview pages
 *  3. Base / resets for our own markup (.np-ui, .np-card, .np-page)
 *  4. Utilities + typography (.np-container, .np-eyebrow, .np-display, .np-h2, .np-h3, .np-lead ...)
 *  5. Buttons and links (.np-btn--primary|dark|outline|light, --sm, --block, .np-link)
 *  6. Badges, swatches, prices
 *  7. Header (announcement, bar, nav + dropdown, chips) 8. Search dialog 9. Drawer 10. Tab bar
 * 11. Footer 12. Preview badge 13. Toast 14. Product card + .np-products grid 15. Motion
 *
 * Breakpoints: desktop >= 1024px, mobile/tablet < 1024px (compact header + tab bar), phone < 768px.
 * Below 1024px the 64px header bar is sticky: page CSS that pins something under it uses
 * top: calc(var(--np-sticky-top) + …); --np-sticky-top is 0px on desktop.
 */

/* 1. Tokens ------------------------------------------------------------------------------------ */
body.np-preview {
	--np-bg: #FAF7F2;
	--np-paper: #FFFDF9;
	--np-ink: #23231D;
	--np-ink-2: #26261F;
	--np-muted: #5E5C55;
	--np-body: #4A4A42;
	--np-line: #E6DFD3;
	--np-line-2: #D9D1C3;
	--np-line-header: #E4DDD0;
	--np-line-soft: #EEE8DC;
	--np-photo: #EDE7DC;
	--np-olive: #5F6645;
	--np-olive-deep: #3B3F2C;
	--np-olive-darker: #2E3122;
	--np-olive-tint: #ECEBE0;
	--np-olive-line: #575C45;
	--np-on-olive: #F7F3EC;
	--np-on-deep: #E6E4D6;
	--np-on-deep-muted: #CFCDBD;
	--np-on-deep-faint: #B9B7A6;
	--np-bordo: #8B1E24;
	--np-xmas: #4F1014;
	--np-gold: #D9BE85;
	--np-ivory: #F5EEE2;
	--np-ivory-muted: #E7DCCB;
	--np-white: #FAF7F2;
	--np-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--np-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--np-container: 1400px; /* 1320px of content + 2 x 40px gutter, as in the design (content-box containers). */
	--np-gutter: 40px;
	--np-tabbar-h: 64px;
	--np-header-h: 64px; /* mobile header bar */
	--np-sticky-top: 0px;
	--np-ease: cubic-bezier(.2, .7, .2, 1);

	/* Minimog theme variables, so cart / checkout / account (theme templates) follow the new palette. */
	--minimog-color-heading: #23231D;
	--minimog-color-text: #4A4A42;
	--minimog-color-link: #23231D;
	--minimog-color-link-hover: #5F6645;
	--minimog-color-button-text: #FFFDF9;
	--minimog-color-button-border: #5F6645;
	--minimog-color-button-background: #5F6645;
	--minimog-color-button-hover-text: #FFFDF9;
	--minimog-color-button-hover-border: #3B3F2C;
	--minimog-color-button-hover-background: #3B3F2C;
	--minimog-color-button2-text: #23231D;
	--minimog-color-button2-border: #23231D;
	--minimog-color-button2-background: transparent;
	--minimog-color-button2-hover-text: #FFFDF9;
	--minimog-color-button2-hover-border: #23231D;
	--minimog-color-button2-hover-background: #23231D;
	--minimog-color-form-border: #D9D1C3;
	--minimog-color-form-background: #FFFDF9;
	--minimog-color-form-focus-border: #5F6645;
	--minimog-typography-headings-2-font-family: 'Playfair Display';

	background: var(--np-bg);
	color: var(--np-ink);
	font-family: var(--np-sans);
	padding-bottom: 0; /* the site's custom CSS adds 50px under the footer */
}

@media (max-width: 1023px) {
	body.np-preview {
		--np-gutter: 20px;
		--np-sticky-top: var(--np-header-h);
		padding-bottom: calc(var(--np-tabbar-h) + env(safe-area-inset-bottom, 0px));
	}

	/* Anchor jumps and keyboard focus stop below the sticky header (64px bar + 8px air) and above
	   the fixed tab bar (64px + 8px air + safe area), on every page that uses the new design. The
	   custom properties live on body, so the values are written out here. Page CSS that adds another
	   fixed bar (product.css: the add-to-cart bar) overrides scroll-padding-bottom with a more
	   specific html:has(...) rule. */
	html:has(> body.np-preview) {
		scroll-padding-top: 72px;
		scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* 2. Theme chrome hidden on preview pages (content stays) -------------------------------------- */
body.np-preview #page-top-bar,
body.np-preview #page-header,
body.np-preview #page-footer-wrapper,
body.np-preview #napelle-compliance-footer,
body.np-preview #page-mobile-tabs,
body.np-preview #page-mobile-main-menu,
body.np-preview #popup-search,
body.np-preview #popup-fly-cart,
body.np-preview #modal-promo-popup,
body.np-preview .page-scroll-up,
body.np-preview #page-scroll-up {
	display: none !important;
}

body.np-preview.page-has-mobile-tabs .site {
	margin-bottom: 0 !important;
}

/* The theme stretches .site to 100vh; on short theme-template pages (search, policies, empty cart)
   that pushed the new footer a full screen down. */
body.np-preview .site {
	min-height: 0;
}

/* WooCommerce notices. The site's custom CSS hides every notice wrapper and success message,
   because WooCommerce's shipping debug note ("… bölgesi ile eşlenmiş müşteri") is printed as a
   success message on every page. Errors and info notices must still be seen (coupon, stock,
   checkout problems), so a wrapper is shown when it holds one; success messages stay hidden exactly
   as on the live site (the preview confirms add-to-cart with its own toast). */
body.np-preview .woocommerce-notices-wrapper:has(> :is(.woocommerce-error, .woocommerce-info)) {
	display: block;
}

body.np-preview .woocommerce-notices-wrapper > .woocommerce-message {
	display: none !important;
}

/* The theme opens its (hidden) fly cart after AJAX add-to-cart and locks scrolling: undo that. */
body.np-preview.popup-fly-cart-opened {
	overflow: visible !important;
	padding-right: 0 !important;
}

html.np-lock {
	overflow: hidden !important;
}

/* clip (not hidden): the body must not become a scroll container, or the sticky mobile header
   would jump back to the top of the document while a dialog is open. */
html.np-lock body.np-preview {
	overflow: clip !important;
}

/* 3. Base / resets for our own markup ---------------------------------------------------------- */
.np-preview .np-ui,
.np-preview .np-ui *,
.np-preview .np-ui *::before,
.np-preview .np-ui *::after,
.np-preview .np-card,
.np-preview .np-card *,
.np-preview .np-page,
.np-preview .np-page *,
.np-preview .np-page *::before,
.np-preview .np-page *::after {
	box-sizing: border-box;
}

.np-preview .np-ui,
.np-preview .np-card,
.np-preview .np-page {
	font-family: var(--np-sans);
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

.np-preview :where(.np-ui, .np-card, .np-page) :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	clear: none;
	color: inherit;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.np-preview :where(.np-ui, .np-card, .np-page) :where(ul[class], ol[class]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The theme spaces sibling list items (li + li { margin-top: 6px }). */
.np-preview :where(.np-ui, .np-card, .np-page) :where(ul[class], ol[class]) > li {
	margin: 0;
}

.np-preview :where(.np-ui, .np-card, .np-page) a {
	color: inherit;
	text-decoration: none;
}

.np-preview :where(.np-ui, .np-card, .np-page) button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 0;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	transition: color .2s, background-color .2s, border-color .2s, opacity .2s;
}

.np-preview :where(.np-ui, .np-card, .np-page) img {
	max-width: 100%;
	vertical-align: top;
}

/* The site's custom CSS rounds .thumbnail / .attachment-woocommerce_single / .minimog-image images (with !important). */
.np-preview .np-ui img,
.np-preview .np-card img,
.np-preview .np-page img {
	border-radius: 0 !important;
}

.np-preview :where(.np-ui, .np-card, .np-page) svg {
	flex: none;
}

.np-preview .np-ui :focus-visible,
.np-preview .np-card :focus-visible,
.np-preview .np-page :focus-visible {
	outline: 2px solid var(--np-olive);
	outline-offset: 2px;
}

.np-preview .np-ui [hidden],
.np-preview .np-ui[hidden],
.np-preview .np-page [hidden] {
	display: none !important;
}

/* 4. Utilities + typography -------------------------------------------------------------------- */
.np-preview .np-visually-hidden {
	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;
}

.np-preview .np-container {
	width: 100%;
	max-width: var(--np-container);
	margin-inline: auto;
	padding-inline: var(--np-gutter);
	box-sizing: border-box;
}

.np-preview .np-section {
	padding-block: 120px;
}

.np-preview .np-eyebrow {
	margin: 0 0 18px;
	font-family: var(--np-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--np-olive);
}

.np-preview .np-display,
.np-preview .np-h2,
.np-preview .np-h3 {
	margin: 0;
	font-family: var(--np-serif);
	font-weight: 400;
	color: inherit;
}

.np-preview .np-display {
	font-size: clamp(44px, 6.4vw, 92px);
	line-height: .98;
	letter-spacing: -.01em;
}

.np-preview .np-h2 {
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.08;
}

.np-preview .np-h3 {
	font-size: clamp(24px, 2.1vw, 30px);
	line-height: 1.2;
}

.np-preview :is(.np-display, .np-h2, .np-h3) em {
	font-style: italic;
}

.np-preview .np-lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--np-body);
}

.np-preview .np-small {
	font-size: 13px;
	line-height: 1.6;
	color: var(--np-muted);
}

.np-preview .np-hairline {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--np-line);
}

.np-preview .np-skip {
	position: absolute;
	top: -80px;
	left: 12px;
	z-index: 2000;
	padding: 12px 18px;
	background: var(--np-ink);
	color: var(--np-paper);
	font-family: var(--np-sans);
	font-size: 14px;
	text-decoration: none;
	transition: none; /* the theme animates every link, which kept the focused skip link off-screen for a moment */
}

.np-preview .np-skip:focus {
	top: 12px;
	color: var(--np-paper);
}

@media (min-width: 1024px) {
	.np-preview .np-only-mobile {
		display: none !important;
	}
}

@media (max-width: 1023px) {
	.np-preview .np-only-desktop {
		display: none !important;
	}

	.np-preview .np-section {
		padding-block: 72px;
	}
}

/* 5. Buttons and links ------------------------------------------------------------------------- */
.np-preview .np-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--np-ink);
	font-family: var(--np-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .14em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s, color .2s, border-color .2s;
}

.np-preview .np-btn--primary {
	background: var(--np-olive);
	border-color: var(--np-olive);
	color: var(--np-paper);
}

.np-preview .np-btn--primary:hover,
.np-preview .np-btn--primary:focus-visible {
	background: var(--np-olive-deep);
	border-color: var(--np-olive-deep);
	color: var(--np-paper);
}

.np-preview .np-btn--dark {
	background: var(--np-olive-deep);
	border-color: var(--np-olive-deep);
	color: var(--np-paper);
}

.np-preview .np-btn--dark:hover,
.np-preview .np-btn--dark:focus-visible {
	background: var(--np-olive-darker);
	border-color: var(--np-olive-darker);
	color: var(--np-paper);
}

.np-preview .np-btn--outline {
	background: transparent;
	border-color: var(--np-ink);
	color: var(--np-ink);
}

.np-preview .np-btn--outline:hover,
.np-preview .np-btn--outline:focus-visible {
	background: var(--np-ink);
	border-color: var(--np-ink);
	color: var(--np-paper);
}

.np-preview .np-btn--light {
	background: var(--np-ivory);
	border-color: var(--np-ivory);
	color: var(--np-xmas);
	font-weight: 500;
}

.np-preview .np-btn--light:hover,
.np-preview .np-btn--light:focus-visible {
	background: #FFFDF9;
	border-color: #FFFDF9;
	color: var(--np-xmas);
}

.np-preview .np-btn--sm {
	min-height: 44px;
	padding: 0 20px;
	font-size: 12px;
	letter-spacing: .12em;
}

.np-preview .np-btn--block {
	display: flex;
	width: 100%;
}

/* !important: the theme forces disabled buttons into the (olive) button colours with !important. */
.np-preview .np-btn:disabled,
.np-preview .np-btn[aria-disabled="true"] {
	background: var(--np-line) !important;
	border-color: var(--np-line) !important;
	color: var(--np-muted) !important;
	cursor: not-allowed;
	opacity: 1;
}

.np-preview .np-btn.is-loading {
	cursor: progress;
	opacity: .75;
}

.np-preview .np-btn.is-added {
	background: var(--np-olive);
	border-color: var(--np-olive);
	color: var(--np-paper);
}

.np-preview .np-link {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	color: var(--np-ink);
	font-family: var(--np-sans);
	font-size: 13px;
	letter-spacing: .14em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s, border-color .2s;
}

.np-preview .np-link:hover {
	color: var(--np-olive);
}

.np-preview .np-link--light,
.np-preview .np-link--light:hover {
	color: var(--np-white);
}

.np-preview .np-link--light:hover {
	border-bottom-color: rgba(250, 247, 242, .5);
}

/* 6. Badges, swatches, prices ------------------------------------------------------------------ */
.np-preview .np-badge {
	display: inline-block;
	padding: 8px 12px;
	font-family: var(--np-sans);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.np-preview .np-badge--new {
	background: var(--np-paper);
	color: var(--np-ink);
	box-shadow: inset 0 0 0 1px var(--np-line-2);
}

.np-preview .np-badge--best {
	background: var(--np-bordo);
	color: var(--np-paper);
}

.np-preview .np-badge--xmas {
	background: var(--np-xmas);
	color: var(--np-gold);
}

.np-preview .np-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-preview .np-swatch {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--np-swatch, #D9D1C3);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.np-preview a.np-swatch {
	position: relative;
}

.np-preview a.np-swatch::after {
	content: "";
	position: absolute;
	inset: -5px;
}

/* Linked dots: 24px hit areas that do not overlap. */
.np-preview .np-swatches--links {
	gap: 10px;
}

.np-preview a.np-swatch:hover,
.np-preview a.np-swatch:focus-visible {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px var(--np-paper), 0 0 0 3px var(--np-ink);
	outline: none;
}

.np-preview .np-price {
	font-family: var(--np-sans);
	font-weight: 500;
	color: inherit;
}

.np-preview .np-price del {
	margin-right: 6px;
	color: var(--np-muted);
	font-weight: 400;
	text-decoration: line-through;
}

.np-preview .np-price ins {
	color: var(--np-bordo);
	text-decoration: none;
	background: none;
}

/* 7. Header ------------------------------------------------------------------------------------ */
.np-preview .np-announce {
	background: var(--np-olive);
	color: var(--np-on-olive);
}

.np-preview .np-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 28px;
	min-height: 38px;
	margin: 0;
	padding: 4px 16px;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: .04em;
	text-align: center;
}

.np-preview .np-announce__sep {
	opacity: .5;
}

.np-preview .np-header {
	position: relative;
	z-index: 80;
	background: var(--np-paper);
	border-bottom: 1px solid var(--np-line-header);
	color: var(--np-ink-2);
}

.np-preview .np-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: 96px;
	max-width: var(--np-container);
	margin: 0 auto;
	padding: 0 var(--np-gutter);
}

.np-preview .np-header__start {
	display: flex;
	align-items: center;
	gap: 21px;
	min-width: 0;
}

.np-preview .np-header__end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
}

.np-preview .np-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--np-ink-2);
	background: none;
	border: 0;
	text-decoration: none;
	transition: color .2s;
}

.np-preview .np-icon-btn:hover {
	color: var(--np-olive);
}

.np-preview .np-icon-btn--first {
	margin-left: -11px;
}

.np-preview .np-header__custom {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--np-ink-2);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s;
}

.np-preview .np-header__custom .np-icon {
	color: var(--np-olive);
}

.np-preview .np-header__custom:hover {
	color: var(--np-olive);
}

.np-preview .np-header__logo {
	display: block;
	line-height: 0;
}

.np-preview .np-logo {
	display: block;
	width: auto;
	max-width: none;
	height: 54px;
}

.np-preview .np-logo--light {
	filter: brightness(0) invert(1);
}

.np-preview .np-count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--np-bordo);
	color: var(--np-paper);
	font-family: var(--np-sans);
	font-size: 10px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: 0;
	text-align: center;
}

.np-preview .np-count.is-bumped {
	animation: np-bump .45s var(--np-ease);
}

.np-preview .np-count--fav {
	background: var(--np-olive);
}

/* Navigation row (desktop) */
.np-preview .np-nav {
	border-top: 1px solid var(--np-line-soft);
}

.np-preview .np-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp(20px, 2.5vw, 36px);
	max-width: var(--np-container);
	margin: 0 auto;
	padding: 0 24px;
	list-style: none;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.np-preview .np-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.np-preview .np-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 52px;
	color: var(--np-ink-2);
	white-space: nowrap;
	transition: color .2s, box-shadow .2s;
}

.np-preview .np-nav__link:hover {
	color: var(--np-olive);
}

.np-preview .np-nav__item--highlight .np-nav__link,
.np-preview .np-nav__item--highlight .np-nav__link:hover {
	color: var(--np-bordo);
	font-weight: 500;
}

.np-preview .np-nav__link[aria-current] {
	box-shadow: inset 0 -2px 0 currentColor;
}

.np-preview .np-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 32px;
	margin-left: 2px;
	color: var(--np-ink-2);
}

.np-preview .np-nav__toggle .np-icon {
	transition: transform .2s;
}

.np-preview .np-nav__item.is-open .np-nav__toggle .np-icon {
	transform: rotate(180deg);
}

.np-preview .np-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 90;
	min-width: 248px;
	padding: 12px 0;
	background: var(--np-paper);
	border: 1px solid var(--np-line-header);
	box-shadow: 0 18px 40px rgba(35, 35, 29, .08);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .18s, transform .18s, visibility 0s linear .18s;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: none;
}

.np-preview .np-nav__item--has-sub:hover .np-nav__sub,
.np-preview .np-nav__item--has-sub:focus-within .np-nav__sub,
.np-preview .np-nav__item--has-sub.is-open .np-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.np-preview .np-nav__item--has-sub.is-dismissed .np-nav__sub {
	opacity: 0;
	visibility: hidden;
}

.np-preview .np-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-preview .np-nav__sublink {
	display: block;
	padding: 10px 26px;
	color: var(--np-ink);
	white-space: nowrap;
	transition: color .2s, background-color .2s;
}

.np-preview .np-nav__sublink:hover,
.np-preview .np-nav__sublink[aria-current] {
	background: var(--np-bg);
	color: var(--np-olive);
}

.np-preview .np-nav__suball {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--np-line);
}

.np-preview .np-nav__suball .np-nav__sublink {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--np-muted);
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.np-preview .np-nav__list {
		gap: 0 22px;
		padding: 0 16px;
		font-size: 12px;
		letter-spacing: .06em;
	}

	.np-preview .np-header__start {
		gap: 10px;
	}
}

/* Category chips (mobile row under the header, also used inside the search dialog) */
.np-preview .np-chips {
	color: var(--np-ink-2);
}

.np-preview .np-chips__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 10px var(--np-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--np-gutter);
	scrollbar-width: none;
	list-style: none;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.np-preview .np-chips__list::-webkit-scrollbar {
	display: none;
}

.np-preview .np-chips__list > li {
	flex: none;
}

.np-preview .np-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--np-line-2);
	background: var(--np-paper);
	color: var(--np-ink);
	font-family: var(--np-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s;
}

.np-preview .np-chip:hover {
	border-color: var(--np-ink);
}

.np-preview .np-chip--highlight {
	border-color: var(--np-bordo);
	color: var(--np-bordo);
	font-weight: 500;
}

.np-preview .np-chip.is-current {
	background: var(--np-ink);
	border-color: var(--np-ink);
	color: var(--np-paper);
}

.np-preview .np-chip--highlight.is-current {
	background: var(--np-bordo);
	border-color: var(--np-bordo);
}

@media (max-width: 1023px) {
	.np-preview .np-announce__inner {
		position: relative;
		min-height: 34px;
		padding: 0 16px;
		font-size: 12px;
		letter-spacing: .08em;
	}

	.np-preview .np-announce__sep,
	.np-preview .np-announce__item {
		display: none;
	}

	.np-preview .np-announce__item.is-current {
		display: block;
		animation: np-fade .5s var(--np-ease);
	}

	/* The bar stays on screen while scrolling; the announcement above and the chips below scroll away. */
	.np-preview .np-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		border-bottom-color: var(--np-line-soft);
		transition: box-shadow .25s, border-color .25s;
	}

	html.np-header-stuck .np-preview .np-header {
		border-bottom-color: var(--np-line-header);
		box-shadow: 0 6px 18px rgba(35, 35, 29, .07);
	}

	.np-preview .np-header__bar {
		height: var(--np-header-h);
		padding: 0 12px;
	}

	.np-preview .np-chips {
		position: relative;
		background: var(--np-paper);
		border-top: 0;
		border-bottom: 1px solid var(--np-line-header);
	}

	.np-preview .np-header__start,
	.np-preview .np-header__end {
		gap: 0;
	}

	.np-preview .np-logo {
		height: 34px;
	}

	.np-preview .np-count {
		top: 5px;
		right: 3px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
	}
}

/* 8. Search dialog ----------------------------------------------------------------------------- */
.np-preview .np-search,
.np-preview .np-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.np-preview .np-search__backdrop,
.np-preview .np-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(35, 35, 29, .42);
	opacity: 0;
	transition: opacity .25s;
}

.np-preview .np-search.is-open .np-search__backdrop,
.np-preview .np-drawer.is-open .np-drawer__backdrop {
	opacity: 1;
}

.np-preview .np-search__panel {
	position: relative;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	background: var(--np-paper);
	border-bottom: 1px solid var(--np-line-header);
	opacity: 0;
	transform: translateY(-16px);
	transition: transform .28s var(--np-ease), opacity .2s;
}

.np-preview .np-search.is-open .np-search__panel {
	opacity: 1;
	transform: none;
}

.np-preview .np-search__inner {
	max-width: var(--np-container);
	margin: 0 auto;
	padding: 24px var(--np-gutter) 44px;
}

.np-preview .np-search__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.np-preview .np-search__head .np-icon-btn {
	margin-right: -11px;
}

.np-preview .np-search__title {
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--np-olive);
}

.np-preview .np-search__form {
	display: flex;
	align-items: stretch;
	margin: 0;
	border-bottom: 1px solid var(--np-ink);
}

.np-preview .np-search .np-search__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--np-ink);
	font-family: var(--np-serif);
	font-size: 40px !important;
	font-weight: 400;
	line-height: 1.2;
	outline: none;
}

.np-preview .np-search .np-search__input::placeholder {
	color: #9A968B;
	opacity: 1;
}

.np-preview .np-search .np-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.np-preview .np-search__form:focus-within {
	box-shadow: 0 1px 0 var(--np-olive);
	border-bottom-color: var(--np-olive);
}

.np-preview .np-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 0 24px;
	color: var(--np-ink);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.np-preview .np-search__submit:hover {
	color: var(--np-olive);
}

.np-preview .np-search__links {
	margin-top: 28px;
}

.np-preview .np-search__label {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--np-muted);
}

.np-preview .np-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023px) {
	.np-preview .np-search__inner {
		padding-top: 12px;
		padding-bottom: 28px;
	}

	.np-preview .np-search .np-search__input {
		font-size: 24px !important;
	}

	.np-preview .np-search__submit span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.np-preview .np-search__submit {
		padding-left: 12px;
	}
}

/* 9. Drawer ------------------------------------------------------------------------------------ */
.np-preview .np-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(380px, 88vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--np-paper);
	color: var(--np-ink);
	transform: translateX(-100%);
	transition: transform .3s var(--np-ease);
}

.np-preview .np-drawer.is-open .np-drawer__panel {
	transform: none;
}

.np-preview .np-drawer__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 8px 0 20px;
	border-bottom: 1px solid var(--np-line);
}

.np-preview .np-drawer__head .np-logo {
	height: 30px;
}

.np-preview .np-drawer__list {
	margin: 0;
	padding: 4px 20px 0;
	list-style: none;
}

.np-preview .np-drawer__item {
	border-bottom: 1px solid var(--np-line);
}

.np-preview .np-drawer__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	color: var(--np-ink);
	font-family: var(--np-serif);
	font-size: 22px;
	line-height: 1.2;
}

.np-preview .np-drawer__item--highlight .np-drawer__link {
	color: var(--np-bordo);
}

.np-preview .np-drawer__link[aria-current],
.np-preview .np-drawer__sublink[aria-current] {
	color: var(--np-olive);
	font-style: italic;
}

.np-preview .np-drawer__sublist {
	margin: -4px 0 12px;
	padding: 0;
	list-style: none;
}

.np-preview .np-drawer__sublink {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding-left: 2px;
	color: var(--np-body);
	font-size: 15px;
	letter-spacing: .02em;
}

.np-preview .np-drawer__account {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 20px 0 28px;
	padding: 0 20px;
	list-style: none;
}

.np-preview .np-drawer__account a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 4px 12px;
	border: 1px solid var(--np-line);
	color: var(--np-ink);
	font-size: 12px;
	letter-spacing: .06em;
}

.np-preview .np-drawer__account a:hover {
	border-color: var(--np-ink);
}

.np-preview .np-drawer__count[data-np-wishlist-count] {
	background: var(--np-olive);
}

.np-preview .np-drawer__count {
	position: absolute;
	top: 6px;
	right: 8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--np-bordo);
	color: var(--np-paper);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}

.np-preview .np-drawer__contact {
	margin-top: auto;
	padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--np-line);
	background: var(--np-bg);
}

.np-preview .np-drawer__label {
	margin: 0 0 16px;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--np-olive);
}

.np-preview .np-drawer__facts {
	display: grid;
	gap: 2px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.np-preview .np-drawer__facts a,
.np-preview .np-drawer__fact {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	color: var(--np-body);
	font-size: 15px;
}

.np-preview .np-drawer__facts .np-icon {
	color: var(--np-olive);
}

/* 10. Tab bar (mobile) ------------------------------------------------------------------------- */
.np-preview .np-tabbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	height: calc(var(--np-tabbar-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--np-paper);
	border-top: 1px solid var(--np-line);
}

.np-preview .np-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: var(--np-tabbar-h);
	padding: 0;
	background: none;
	border: 0;
	color: var(--np-muted);
	font-family: var(--np-sans);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: .02em;
	text-transform: none;
	cursor: pointer;
}

.np-preview .np-tabbar__item[aria-current="page"],
.np-preview .np-tabbar__item[aria-expanded="true"] {
	color: var(--np-olive);
	font-weight: 500;
}

.np-preview .np-tabbar__icon {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
}

.np-preview .np-tabbar__icon .np-icon {
	display: block;
}

.np-preview .np-tabbar .np-count {
	top: -4px;
	right: -10px;
}

/* 11. Footer ----------------------------------------------------------------------------------- */
.np-preview .np-footer {
	position: relative;
	z-index: 1;
	background: var(--np-olive-deep);
	color: var(--np-on-deep);
}

.np-preview .np-footer__inner {
	max-width: var(--np-container);
	margin: 0 auto;
	padding: 80px var(--np-gutter) 0;
}

.np-preview .np-footer__news {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--np-olive-line);
}

.np-preview .np-footer__title {
	margin: 0;
	color: var(--np-white);
	font-family: var(--np-serif);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
}

.np-preview .np-footer__text {
	margin: 12px 0 0;
	color: var(--np-on-deep-muted);
	font-size: 16px;
	line-height: 1.6;
}

.np-preview .np-footer__follow {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

.np-preview .np-footer__cta {
	min-width: 254px; /* both buttons as wide as the WhatsApp one, so they line up when they wrap */
}

.np-preview .np-footer__cta .np-icon {
	flex: none;
}

.np-preview .np-footer__cta--ghost {
	border-color: rgba(250, 247, 242, .55);
	color: var(--np-white);
}

.np-preview .np-footer__cta--ghost:hover,
.np-preview .np-footer__cta--ghost:focus-visible {
	background: rgba(250, 247, 242, .08);
	border-color: var(--np-white);
	color: var(--np-white);
}

.np-preview .np-footer :focus-visible {
	outline-color: var(--np-gold);
}

.np-preview .np-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: 48px;
	padding: 56px 0;
}

.np-preview .np-footer__logo {
	display: inline-block;
	line-height: 0;
}

.np-preview .np-footer__logo .np-logo {
	height: 46px;
	margin-left: -7px;
}

.np-preview .np-footer__tagline {
	max-width: 320px;
	margin: 20px 0 0;
	color: var(--np-on-deep-muted);
	font-size: 15px;
	line-height: 1.7;
}

.np-preview .np-footer__heading {
	margin: 0 0 18px;
	color: var(--np-white);
	font-family: var(--np-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.np-preview .np-footer__list,
.np-preview .np-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}

.np-preview .np-footer__list a,
.np-preview .np-footer__contact a,
.np-preview .np-footer__contact address {
	color: var(--np-on-deep-muted);
	font-style: normal;
	transition: color .2s;
}

.np-preview .np-footer__contact address {
	margin: 0; /* the theme adds a bottom margin to every address */
}

.np-preview .np-footer__list a:hover,
.np-preview .np-footer__contact a:hover {
	color: var(--np-white);
}

.np-preview .np-footer__key {
	display: none;
}

.np-preview .np-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 24px 0 32px;
	border-top: 1px solid var(--np-olive-line);
	color: var(--np-on-deep-faint);
	font-size: 13px;
}

/* Room under the last footer line for the fixed preview badge, so it never covers that line. */
body.np-preview:has(.np-preview-badge) .np-footer__bottom {
	padding-bottom: 84px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.np-preview .np-footer__cols {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
}

@media (max-width: 1023px) {
	.np-preview .np-footer__inner {
		padding: 56px var(--np-gutter) 0;
	}

	.np-preview .np-footer__news {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-bottom: 48px;
	}

	.np-preview .np-footer__title {
		font-size: 28px;
		line-height: 34px;
	}

	.np-preview .np-footer__text {
		margin-top: 8px;
		font-size: 14px;
		line-height: 22px;
	}

	.np-preview .np-footer__follow {
		justify-content: flex-start;
	}

	.np-preview .np-footer__cta {
		flex: 1 1 200px;
		min-width: 0;
	}

	.np-preview .np-footer__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 40px 0 24px;
	}

	.np-preview .np-footer__logo .np-logo {
		height: 30px;
		margin-left: -5px;
	}

	.np-preview .np-footer__tagline {
		margin-top: 16px;
		font-size: 14px;
		line-height: 22px;
	}

	.np-preview .np-footer__col--shop {
		display: none;
	}

	.np-preview .np-footer__col--contact {
		order: 2;
	}

	.np-preview .np-footer__col--service {
		order: 3;
	}

	.np-preview .np-footer__col--contact .np-footer__heading,
	.np-preview .np-footer__col--service .np-footer__heading {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.np-preview .np-footer__contact {
		gap: 0;
		border-top: 1px solid var(--np-olive-line);
	}

	.np-preview .np-footer__contact a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 52px;
		border-bottom: 1px solid var(--np-olive-line);
		color: var(--np-white);
		font-size: 15px;
	}

	.np-preview .np-footer__key {
		display: inline;
		color: var(--np-on-deep-muted);
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
	}

	.np-preview .np-footer__desktop-only {
		display: none;
	}

	.np-preview .np-footer__address {
		margin-top: 16px;
		font-size: 14px;
		line-height: 22px;
	}

	.np-preview .np-footer__col--service .np-footer__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 20px;
	}

	.np-preview .np-footer__col--service .np-footer__list a {
		display: inline-block;
		padding: 10px 0;
		font-size: 13px;
		line-height: 20px;
	}

	.np-preview .np-footer__bottom {
		flex-direction: column;
		gap: 4px;
		padding: 20px 0 28px;
		font-size: 12px;
		line-height: 18px;
	}

	body.np-preview:has(.np-preview-badge) .np-footer__bottom {
		padding-bottom: 72px;
	}
}

/* 12. Preview badge ---------------------------------------------------------------------------- */
/* Desktop: bottom centre, the one strip the hero leaves free (CTAs bottom-left, slide tabs
   bottom-right at every viewport height). Mobile: bottom-left, above the tab bar. */
.np-preview .np-preview-badge {
	position: fixed;
	bottom: 16px;
	left: 50%;
	z-index: 95;
	max-width: calc(100vw - 40px);
	transform: translateX(-50%);
	font-family: var(--np-sans);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .03em;
}

.np-preview .np-preview-badge__full,
.np-preview .np-preview-badge__unfold {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(35, 35, 29, .92);
	color: var(--np-white);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(35, 35, 29, .18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.np-preview .np-preview-badge__full {
	padding: 3px 3px 3px 14px;
}

.np-preview .np-preview-badge__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--np-gold);
}

.np-preview .np-preview-badge__text {
	white-space: nowrap;
}

.np-preview .np-preview-badge__exit,
.np-preview .np-preview-badge__exit:hover {
	padding: 8px 2px;
	color: var(--np-white);
	text-decoration: underline;
	text-decoration-color: rgba(250, 247, 242, .5);
	text-underline-offset: 3px;
	white-space: nowrap;
}

.np-preview .np-preview-badge__exit:hover {
	text-decoration-color: var(--np-white);
}

.np-preview .np-preview-badge__fold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(250, 247, 242, .12);
	color: var(--np-white);
}

.np-preview .np-preview-badge__fold:hover {
	background: rgba(250, 247, 242, .24);
}

.np-preview .np-preview-badge__unfold {
	padding: 8px 14px;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.np-preview .np-preview-badge.is-folded .np-preview-badge__full {
	display: none;
}

.np-preview .np-preview-badge :focus-visible {
	outline-color: var(--np-gold);
}

@media (max-width: 1023px) {
	.np-preview .np-preview-badge {
		bottom: calc(var(--np-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		max-width: calc(100vw - 24px);
		transform: none;
		font-size: 11px;
	}

	.np-preview .np-preview-badge__full {
		gap: 8px;
		padding-left: 12px;
	}
}

/* 13. Toast ------------------------------------------------------------------------------------ */
.np-preview .np-toasts {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	width: min(440px, calc(100vw - 48px));
	pointer-events: none;
}

.np-preview .np-toast {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 8px 12px 18px;
	background: var(--np-ink);
	color: var(--np-white);
	box-shadow: 0 12px 32px rgba(35, 35, 29, .22);
	font-family: var(--np-sans);
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s, transform .25s var(--np-ease);
	pointer-events: auto;
}

.np-preview .np-toast.is-visible {
	opacity: 1;
	transform: none;
}

.np-preview .np-toast--error {
	background: var(--np-bordo);
}

.np-preview .np-toast__icon {
	flex: none;
	color: var(--np-gold);
}

.np-preview .np-toast__msg {
	flex: 1 1 auto;
	min-width: 0;
}

.np-preview .np-toast__link,
.np-preview .np-toast__link:hover {
	flex: none;
	padding: 6px 0 3px;
	border-bottom: 1px solid currentColor;
	color: var(--np-white);
	font-size: 12px;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.np-preview .np-toast__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--np-white);
	opacity: .75;
}

.np-preview .np-toast__close:hover {
	opacity: 1;
}

.np-preview .np-toast :focus-visible {
	outline-color: var(--np-gold);
}

@media (max-width: 1023px) {
	.np-preview .np-toasts {
		right: 12px;
		bottom: calc(var(--np-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		width: auto;
	}
}

/* 14. Product card ------------------------------------------------------------------------------ */
.np-preview .np-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-preview .np-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	color: var(--np-ink);
}

.np-preview .np-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--np-photo);
}

.np-preview .np-card__img-link {
	display: block;
	width: 100%;
	height: 100%;
}

.np-preview .np-card .np-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: opacity .45s var(--np-ease), transform .8s var(--np-ease);
}

.np-preview .np-card .np-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) and (min-width: 1024px) {
	.np-preview .np-card:hover .np-card__img {
		transform: scale(1.025);
	}

	.np-preview .np-card:hover .np-card__img--alt.is-loaded {
		opacity: 1;
	}
}

.np-preview .np-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	pointer-events: none;
}

/* Favourite toggle (any [data-np-fav]; app.js sets aria-pressed). Pressed = filled bordo heart. */
.np-preview [data-np-fav] {
	cursor: pointer;
}

.np-preview [data-np-fav] .np-icon--heart path {
	fill: transparent;
	transition: fill .2s;
}

.np-preview [data-np-fav][aria-pressed="true"] {
	color: var(--np-bordo);
}

.np-preview [data-np-fav][aria-pressed="true"] .np-icon--heart path {
	fill: currentColor;
}

.np-preview [data-np-fav][aria-busy="true"] {
	cursor: progress;
}

.np-preview [data-np-fav].is-popped .np-icon--heart {
	animation: np-bump .45s var(--np-ease);
}

.np-preview .np-card__fav {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--np-paper);
	box-shadow: 0 1px 2px rgba(35, 35, 29, .08);
	color: var(--np-ink);
	line-height: 0;
	transition: color .2s, background-color .2s;
}

/* Hover colour only for a real pointer: on touch screens :hover sticks after a tap, which kept an
   un-favourited heart bordo. Pressed / unpressed colours come from [aria-pressed] alone. */
@media (hover: hover) and (pointer: fine) {
	.np-preview .np-card__fav:not([aria-pressed="true"]):hover {
		background: var(--np-paper);
		color: var(--np-bordo);
	}
}

.np-preview .np-card__fav:focus-visible {
	outline: 2px solid var(--np-olive);
	outline-offset: 2px;
}

.np-preview .np-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.np-preview .np-card__label {
	margin: 0 0 6px;
	color: var(--np-card-label, var(--np-olive));
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.np-preview .np-card__name {
	margin: 0;
	font-family: var(--np-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.np-preview .np-card__name a {
	position: relative;
	color: var(--np-ink);
	transition: color .2s;
}

/* Taller hit area (>= 24px) without changing the layout. */
.np-preview .np-card__name a::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.np-preview .np-card__name a:hover {
	color: var(--np-olive);
}

.np-preview .np-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 8px;
	color: var(--np-muted);
	font-size: 13px;
	line-height: 1.4;
}

.np-preview .np-card__price {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.4;
}

.np-preview .np-card__add {
	align-self: stretch;
	width: 100%;
}

.np-preview .np-card__stock {
	margin-left: 6px;
	color: var(--np-muted);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Dark tone (e.g. Yılbaşı band) */
.np-preview .np-card--dark {
	color: var(--np-ivory);
}

.np-preview .np-card--dark .np-card__media {
	background: rgba(0, 0, 0, .2);
}

.np-preview .np-card--dark .np-card__name a {
	color: var(--np-ivory);
}

.np-preview .np-card--dark .np-card__name a:hover {
	color: var(--np-gold);
}

.np-preview .np-card--dark .np-card__label {
	color: var(--np-card-label, var(--np-gold));
}

.np-preview .np-card--dark .np-card__meta {
	color: var(--np-ivory-muted);
}

.np-preview .np-card--dark .np-price del {
	color: var(--np-ivory-muted);
}

.np-preview .np-card--dark .np-price ins {
	color: var(--np-gold);
}

.np-preview .np-card--dark .np-card__fav {
	background: var(--np-ivory);
	color: var(--np-xmas);
}

@media (hover: hover) and (pointer: fine) {
	.np-preview .np-card--dark .np-card__fav:not([aria-pressed="true"]):hover {
		background: var(--np-ivory);
		color: var(--np-xmas);
	}
}

.np-preview .np-card--dark .np-card__fav[aria-pressed="true"] {
	color: var(--np-bordo);
}

.np-preview .np-card--dark .np-card__stock {
	color: var(--np-ivory-muted);
}

.np-preview .np-card--dark .np-btn--outline {
	border-color: var(--np-ivory);
	color: var(--np-ivory);
}

.np-preview .np-card--dark .np-btn--outline:hover,
.np-preview .np-card--dark .np-btn--outline:focus-visible {
	background: var(--np-ivory);
	color: var(--np-xmas);
}

.np-preview .np-card--dark :focus-visible {
	outline-color: var(--np-gold);
}

@media (max-width: 1023px) {
	.np-preview .np-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 16px;
	}
}

@media (max-width: 767px) {
	.np-preview .np-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.np-preview .np-card {
		gap: 12px;
	}

	.np-preview .np-card__name {
		font-size: 14px;
		line-height: 20px;
	}

	.np-preview .np-card__meta {
		font-size: 12px;
	}

	.np-preview .np-card__price {
		font-size: 15px;
	}

	.np-preview .np-card__fav {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
	}

	/* 36px circle, 44px tap target: a near miss saves the favourite instead of opening the product. */
	.np-preview .np-card__fav::before {
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: 50%;
	}

	.np-preview .np-card__badge {
		top: 8px;
		left: 8px;
		padding: 6px 8px;
		font-size: 10px;
	}

	.np-preview .np-swatch {
		width: 12px;
		height: 12px;
	}

	.np-preview .np-card .np-btn--sm {
		padding: 0 10px;
		font-size: 11px;
		letter-spacing: .1em;
	}
}

/* 15. Motion ----------------------------------------------------------------------------------- */
@keyframes np-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes np-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.np-preview .np-ui *,
	.np-preview .np-ui,
	.np-preview .np-card *,
	.np-preview .np-toast {
		animation: none !important;
		transition: none !important;
	}
}