/*
 * Mobiele Winkel, voorkant.
 * Alles is gescoped op .mw-shop zodat het thema buiten de module ongemoeid blijft.
 */

.mw-shop {
	--mw-width: 430px;
	--mw-columns: 2;
	--mw-gap: 12px;
	--mw-radius: 6px;
	--mw-section: 20px;
	--mw-font: 15px;
	--mw-heading: 22px;
	--mw-price: 16px;
	--mw-header: 60px;
	--mw-logo: 40px;
	--mw-button: 44px;
	--mw-brand-height: 28px;
	--mw-brand-gap: 14px;
	--mw-brand-columns: 3;
	--mw-cat-columns: 2;
	--mw-ratio: 1 / 1;
	--mw-bg: #f1eee4;
	--mw-surface: #fff;
	--mw-text: #1b211c;
	--mw-muted: #59625a;
	--mw-border: #d8d4c8;
	--mw-accent: #abef65;
	--mw-accent-text: #101010;
	--mw-header-bg: #101611;
	--mw-header-text: #f4f1e8;
	--mw-focus: #abef65;

	max-width: var(--mw-width);
	margin-inline: auto;
	background: var(--mw-bg);
	color: var(--mw-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--mw-font);
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
}

.mw-shop *,
.mw-shop *::before,
.mw-shop *::after {
	box-sizing: border-box;
}

.mw-shop img,
.mw-shop video {
	display: block;
	max-width: 100%;
}

.mw-shop a {
	color: inherit;
	text-decoration: none;
}

.mw-shop p,
.mw-shop h1,
.mw-shop h2,
.mw-shop h3,
.mw-shop ul {
	margin: 0;
	padding: 0;
}

.mw-shop ul {
	list-style: none;
}

.mw-shop :focus-visible {
	outline: 3px solid var(--mw-focus);
	outline-offset: 2px;
}

.mw-shop .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mw-shell {
	position: relative;
	background: var(--mw-bg);
}

.mw-announcement {
	padding: 8px 16px;
	background: var(--mw-accent);
	color: var(--mw-accent-text);
	font-size: 0.8em;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
}

.mw-announcement a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mw-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--mw-header);
	padding: 8px 14px;
	background: var(--mw-header-bg);
	color: var(--mw-header-text);
}

.mw-logo {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 44px;
}

.mw-logo__image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--mw-logo);
	object-fit: contain;
}

.mw-logo__text {
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mw-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.mw-icon-button,
.mw-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	border: 0;
	border-radius: var(--mw-radius);
	background: transparent;
	color: var(--mw-header-text);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mw-disclosure {
	position: static;
}

.mw-disclosure > summary {
	list-style: none;
}

.mw-disclosure > summary::-webkit-details-marker {
	display: none;
}

.mw-cart {
	gap: 4px;
	font-size: 0.85em;
	font-weight: 700;
}

.mw-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mw-accent);
	color: var(--mw-accent-text);
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
}

.mw-search-wrap {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 25;
	padding: 14px;
	background: var(--mw-surface);
	color: var(--mw-text);
	border-bottom: 1px solid var(--mw-border);
	box-shadow: 0 10px 18px rgba(16, 22, 17, 0.14);
}

.mw-search__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8em;
	font-weight: 700;
}

.mw-search__row {
	display: flex;
	gap: 8px;
}

.mw-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
	color: var(--mw-text);
	font: inherit;
}

.mw-search__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--mw-radius);
	background: var(--mw-accent);
	color: var(--mw-accent-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mw-search__status {
	margin-top: 8px;
	font-size: 0.82em;
	color: var(--mw-muted);
}

.mw-search__results {
	max-height: 46vh;
	margin-top: 6px !important;
	overflow-y: auto;
}

.mw-search__result {
	border-top: 1px solid var(--mw-border);
}

.mw-search__result a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 8px 0;
}

.mw-search__result img {
	width: 44px;
	height: 44px;
	border-radius: var(--mw-radius);
	object-fit: cover;
	background: var(--mw-bg);
}

.mw-search__result-name {
	font-size: 0.9em;
	font-weight: 700;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mw-search__result-price {
	font-size: 0.85em;
	font-weight: 700;
	white-space: nowrap;
}

.mw-main {
	padding: var(--mw-section) 14px 0;
}

.mw-hero {
	overflow: hidden;
	margin-bottom: var(--mw-section);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
}

.mw-hero__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--mw-header-bg);
}

.mw-hero__copy {
	padding: 14px;
}

.mw-hero__title {
	font-size: var(--mw-heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.mw-hero__text {
	margin-top: 6px !important;
	color: var(--mw-muted);
	font-size: 0.92em;
}

.mw-button,
.mw-add,
.mw-sticky__checkout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(44px, var(--mw-button));
	padding: 0 16px;
	border: 0;
	border-radius: var(--mw-radius);
	background: var(--mw-accent);
	color: var(--mw-accent-text);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.mw-hero .mw-button {
	margin-top: 12px;
}

.mw-section {
	margin-bottom: var(--mw-section);
}

.mw-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.mw-section__title {
	font-size: 1.06em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mw-section__link {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mw-muted);
	font-size: 0.82em;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mw-brand-grid {
	display: grid;
	grid-template-columns: repeat(var(--mw-brand-columns), minmax(0, 1fr));
	gap: var(--mw-brand-gap);
	align-items: center;
	padding: 12px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
}

.mw-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 44px;
}

.mw-brand a,
.mw-brand > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 44px;
}

.mw-brand__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--mw-brand-height);
	object-fit: contain;
}

.mw-brand__name {
	max-width: 100%;
	overflow: hidden;
	color: var(--mw-muted);
	font-size: 0.72em;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mw-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--mw-cat-columns), minmax(0, 1fr));
	gap: var(--mw-gap);
}

.mw-category a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
}

.mw-category__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--mw-bg);
}

.mw-category__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-category__name {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 10px;
	font-size: 0.88em;
	font-weight: 700;
}

.mw-products {
	display: grid;
	grid-template-columns: repeat(var(--mw-columns), minmax(0, 1fr));
	gap: var(--mw-gap);
}

.mw-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
}

.mw-product__media {
	position: relative;
	display: block;
	aspect-ratio: var(--mw-ratio);
	background: var(--mw-bg);
}

.mw-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 7px;
	border-radius: calc(var(--mw-radius) / 2);
	background: var(--mw-accent);
	color: var(--mw-accent-text);
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1.3;
}

.mw-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
}

.mw-product__stock {
	color: var(--mw-muted);
	font-size: 0.72em;
}

.mw-product__name {
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	min-height: 2.6em;
}

.mw-product__name a {
	display: block;
	min-height: 24px;
}

.mw-product__price {
	margin-top: auto !important;
	font-size: var(--mw-price);
	font-weight: 700;
}

.mw-product__price del {
	color: var(--mw-muted);
	font-size: 0.75em;
	font-weight: 400;
}

.mw-product__price ins {
	text-decoration: none;
}

.mw-product__action {
	margin-top: 6px;
}

.mw-product__action .mw-add {
	width: 100%;
	min-height: 44px;
	padding: 0 8px;
	font-size: 0.82em;
}

.mw-message {
	padding: 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
	color: var(--mw-muted);
	font-size: 0.9em;
}

.mw-message a {
	color: var(--mw-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mw-footer {
	padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--mw-border);
	background: var(--mw-header-bg);
	color: var(--mw-header-text);
	font-size: 0.8em;
}

.mw-footer p + p {
	margin-top: 6px !important;
}

.mw-footer__tagline {
	font-weight: 700;
}

.mw-sticky {
	position: fixed;
	right: auto;
	bottom: 0;
	left: var(--mw-bar-left, 50%);
	z-index: 30;
	display: none;
	align-items: center;
	gap: 10px;
	width: var(--mw-bar-width, min(100%, var(--mw-width)));
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	border: 1px solid var(--mw-border);
	border-bottom: 0;
	border-radius: var(--mw-radius) var(--mw-radius) 0 0;
	background: var(--mw-surface);
	transform: translateX(-50%);
}

.mw-sticky.is-visible {
	display: flex;
}

.mw-shop--full .mw-sticky {
	width: 100%;
}

.mw-sticky__cart {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	font-size: 0.85em;
	font-weight: 700;
}

.mw-sticky__cart .mw-cart-total {
	color: var(--mw-muted);
	font-size: 0.85em;
	font-weight: 400;
}

.mw-sticky__cart .mw-cart-total:empty {
	display: none;
}

.mw-sticky__checkout {
	flex: 0 0 auto;
	padding: 0 14px;
	font-size: 0.85em;
}

.mw-shop--bar.mw-bar-visible .mw-shell {
	padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.mw-shop--full {
	max-width: none;
}

.mw-shop--motion .mw-button,
.mw-shop--motion .mw-add,
.mw-shop--motion .mw-category a,
.mw-shop--motion .mw-product,
.mw-shop--motion .mw-brand a {
	transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.mw-shop--motion .mw-button:hover,
.mw-shop--motion .mw-add:hover,
.mw-shop--motion .mw-sticky__checkout:hover {
	filter: brightness(0.94);
}

.mw-shop--motion .mw-category a:hover,
.mw-shop--motion .mw-product:hover {
	border-color: var(--mw-muted);
}

@media (min-width: 782px) {
	.mw-shop--mobile-only {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-shop *,
	.mw-shop *::before,
	.mw-shop *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}