/* ==========================================================================
   Moje Stravování — Shoptet theme (template 14)

   Follows the brand manual (apps/design) and the landing page art direction
   (apps/nextjs/src/features/landing): Poppins only, Inkoust text on white,
   Bazalka as the signature green, Smetana for warm surfaces, pills for every
   button and tag, and no sharp corners anywhere.

   Loaded as a hosted stylesheet linked before </head>; see README.md.
   ========================================================================== */

:root {
	/* Brand palette (apps/design · Barvy) */
	--ms-bazalka: #298c31; /* primary: buttons, large surfaces, links */
	--ms-spenat: #0e4913; /* hover, price, contrast panels */
	--ms-hrasek: #a6d271; /* tags, highlights, mascot */
	--ms-smetana: #fdf6e4; /* warm cards, text on green */
	--ms-inkoust: #1f3524; /* text */
	--ms-rajce: #de4848; /* errors, discounts */
	--ms-zloutek: #ffb400; /* rating stars */

	/* Derived */
	--ms-mist: #f3f6ec; /* neutral tint: nav pill, image tiles, inputs */
	--ms-text: var(--ms-inkoust);
	--ms-text-soft: rgba(31, 53, 36, 0.7);
	--ms-text-faint: rgba(31, 53, 36, 0.55);
	--ms-line: rgba(31, 53, 36, 0.12);
	--ms-line-soft: rgba(31, 53, 36, 0.08);

	/* Radius grows with the surface. */
	--ms-r-pill: 999px;
	--ms-r-input: 16px;
	--ms-r-card: 28px;
	--ms-r-photo: 32px;
	--ms-r-panel: 40px;

	--ms-shadow-card:
		0 1px 2px rgba(31, 53, 36, 0.04), 0 12px 32px rgba(14, 73, 19, 0.08);
	--ms-shadow-pop: 0 24px 60px rgba(14, 73, 19, 0.18);
	--ms-shadow-photo: 0 24px 60px rgba(14, 73, 19, 0.35);

	--ms-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ms-container: 1440px;
	--ms-gutter: 48px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body,
body.desktop {
	font-family:
		'Poppins',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ms-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The bigger the type, the tighter the tracking. Headings are never bold:
   the brand sets them in Regular/Medium and lets size do the work. */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: inherit;
	font-weight: 500;
	color: var(--ms-text);
	text-transform: none;
	letter-spacing: -0.03em;
}

h1,
.h1 {
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -0.04em;
	margin: 0 0 24px;
}

h2,
.h2 {
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.035em;
	margin: 0 0 20px;
}

h3,
.h3 {
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 16px;
}

h4,
.h4 {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}

h5,
.h5,
h6,
.h6 {
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

p {
	color: var(--ms-text-soft);
	line-height: 1.6;
}

strong,
b {
	font-weight: 500;
}

a {
	color: var(--ms-bazalka);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--ms-spenat);
	text-decoration: none;
}

::selection {
	background: var(--ms-hrasek);
	color: var(--ms-spenat);
}

:focus-visible {
	outline: 2px solid var(--ms-bazalka);
	outline-offset: 2px;
}

hr {
	border-color: var(--ms-line);
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

.container,
.container-full-width {
	max-width: var(--ms-container);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ms-gutter);
	padding-right: var(--ms-gutter);
	float: none;
}

/* Template 14 zeroes the content container's gutters and pads <main>
   instead, pulling the sidebar back out with negative margins. Put the gutter
   on the container so every page type shares one left edge. */
#content-wrapper.container {
	padding-left: var(--ms-gutter);
	padding-right: var(--ms-gutter);
}

#content-wrapper main#content {
	padding-left: 0;
	padding-right: 0;
}

/* Shoptet's script breaks .full-width strips out to the viewport with an
   inline `left` and width; here they stay on the page grid. */
#content-wrapper .full-width {
	left: 0 !important;
	width: auto !important;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	transform: none;
}

/* Full-width strips already sit inside the padded container. */
.content-wrapper .container-full-width {
	padding-left: 0;
	padding-right: 0;
}

.content-wrapper {
	padding-top: 40px;
	padding-bottom: 96px;
	background: transparent;
}

/* Pages with a sidebar get a grey page and a white, shadowed content card
   from the template; everything here sits flat on white instead. */
body,
.overall-wrapper,
#content-wrapper,
.content-wrapper-in,
main#content,
.content-inner {
	background: #fff !important;
}

.content-inner {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
}

main#content {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.breadcrumbs {
	background: transparent !important;
}

.content-inner > h1,
main#content > h1 {
	text-align: left;
}

/* Breadcrumbs */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 14px;
	line-height: 20px;
	color: var(--ms-text-faint);
}

.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.breadcrumbs > span {
	display: inline-flex;
	align-items: center;
}

.breadcrumbs a {
	color: var(--ms-text-faint);
	padding: 0;
}

.breadcrumbs a:hover {
	color: var(--ms-bazalka);
}

.breadcrumbs .navigation-bullet {
	margin: 0 10px;
	color: var(--ms-line);
}

.breadcrumbs > span:last-child,
.breadcrumbs > span:last-child span {
	color: var(--ms-text);
}

/* --------------------------------------------------------------------------
   3. Header — logo | pill navigation | actions

   custom.js lifts the logo, menu and action buttons into one .ms-bar row on
   desktop. Below 992px Shoptet's own mobile header is left in place.
   -------------------------------------------------------------------------- */

#header {
	background: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 0;
	box-shadow: 0 1px 0 var(--ms-line-soft);
}

@media (min-width: 992px) {
	#header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* Search, login and the cart preview open inside the header, above a page
   overlay drawn at z-index 1002. A sticky header is its own stacking context,
   so it has to rise above the overlay as a whole or its popups end up dimmed
   and unclickable underneath it. */
body.user-action-visible #header {
	z-index: 1003;
}

body.user-action-visible::before {
	background: rgba(14, 73, 19, 0.45);
}

#header .header-top,
#header .header-bottom {
	background: transparent !important;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.ms-header-ready .header-bottom,
.ms-header-ready .navigation-tools,
.ms-header-ready .menu-helper,
.ms-header-ready .navigationActions,
.ms-header-ready .navigation-close {
	display: none !important;
}

@media (min-width: 992px) {
	#header .header-top-wrapper {
		display: block !important;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Shoptet lays .header-top out as three 33% columns; the bar opts out. */
#header .ms-bar {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 16px 0 !important;
	float: none !important;
}

#header .ms-bar .site-name {
	display: flex !important;
	align-items: center;
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-align: left;
}

.site-name a {
	display: block;
	line-height: 0;
}

.site-name img {
	width: auto !important;
	height: 44px !important;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

/* The menu is one rounded group on a mist pad; the hovered or current item
   turns into a white pill inside it. */
#header .ms-bar .ms-nav {
	display: flex !important;
	align-items: center;
	gap: 2px;
	flex: 0 1 auto;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 6px !important;
	list-style: none;
	position: static !important;
	overflow: visible !important;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist) !important;
}

#header .ms-bar .ms-nav > li {
	display: block !important;
	position: relative;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	white-space: nowrap;
}

#header .ms-bar .ms-nav > li > a {
	display: block !important;
	height: auto !important;
	padding: 12px 20px !important;
	border-radius: var(--ms-r-pill);
	background: transparent !important;
	color: var(--ms-text) !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: normal;
	text-transform: none;
	transition:
		background-color 0.25s var(--ms-ease),
		box-shadow 0.25s var(--ms-ease);
}

#header .ms-bar .ms-nav > li > a b {
	font-weight: 400;
}

#header .ms-bar .ms-nav > li > a:hover,
#header .ms-bar .ms-nav > li.exp > a,
#header .ms-bar .ms-nav > li.active > a {
	background: #fff !important;
	color: var(--ms-text) !important;
	box-shadow: 0 1px 2px rgba(31, 53, 36, 0.06);
}

#header .ms-bar .ms-nav > li > a::after,
#header .ms-bar .ms-nav > li > a::before {
	display: none !important;
}

/* Submenu. Shoptet's show/hide rules are scoped to #navigation, which the
   menu has left, so the dropdown behaviour is restated here. */
#header .ms-bar .ms-nav .menu-level-2 {
	display: block;
	position: absolute;
	z-index: 10;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity 0.2s ease,
		transform 0.3s var(--ms-ease),
		visibility 0s 0.2s;
	top: calc(100% + 12px);
	left: 0;
	min-width: 240px;
	width: auto;
	padding: 10px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: #fff;
	box-shadow: var(--ms-shadow-pop);
}

#header .ms-bar .ms-nav > li:hover > .menu-level-2,
#header .ms-bar .ms-nav > li:focus-within > .menu-level-2 {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* Bridge the gap so the pointer can travel from the item to its submenu. */
#header .ms-bar .ms-nav .menu-level-2::before {
	content: '';
	position: absolute;
	inset: -12px 0 auto;
	height: 12px;
}

#header .ms-bar .ms-nav .menu-level-2 > li {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	border: 0;
}

#header .ms-bar .ms-nav .menu-level-2 a {
	display: block;
	padding: 10px 14px;
	border-radius: 14px;
	color: var(--ms-text);
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
}

#header .ms-bar .ms-nav .menu-level-2 a:hover {
	background: var(--ms-mist);
	color: var(--ms-text);
}

#header .ms-bar .ms-nav .menu-level-2 .menu-image {
	display: none;
}

#header .ms-bar .ms-nav .menu-level-3 {
	position: static;
	padding: 0 0 6px 14px;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#header .ms-bar .ms-nav .menu-level-3 a {
	padding: 6px 14px;
	color: var(--ms-text-soft);
	font-size: 14px;
}

/* Action buttons: search and account are round mist chips, the cart is the
   one green pill in the bar. */
#header .ms-bar .navigation-buttons {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static;
}

@media (min-width: 992px) {
	#header .navigation-buttons > a:not([data-testid='hamburgerMenu']),
	#header .navigation-buttons > button {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 48px !important;
		height: 48px !important;
		min-width: 0;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: var(--ms-r-pill);
		background: var(--ms-mist) !important;
		color: var(--ms-text) !important;
		font-size: 18px;
		transition:
			background-color 0.2s ease,
			color 0.2s ease,
			transform 0.3s var(--ms-ease);
	}

	#header .navigation-buttons > a:not([data-testid='hamburgerMenu']):hover,
	#header .navigation-buttons > button:hover {
		background: #e6ecda !important;
		color: var(--ms-text) !important;
	}

	#header .navigation-buttons > a.cart-count {
		background: var(--ms-bazalka) !important;
		color: #fff !important;
	}

	#header .navigation-buttons > a.cart-count:hover {
		background: var(--ms-spenat) !important;
		color: #fff !important;
	}

	#header .navigation-buttons > a[data-testid='hamburgerMenu'],
	#header .navigation-buttons > a#hamburgerMenu {
		display: none !important;
	}
}

/* Below 992px the same chips, a size down: search and menu on mist, the cart
   green between them. Shoptet keeps the bar's own layout here (see the
   custom.js header note), so only the buttons are restyled. */
@media (max-width: 991px) {
	#header .navigation-buttons {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-right: 16px;
	}

	#header .navigation-buttons > a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
		min-width: 0;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: var(--ms-r-pill);
		background: var(--ms-mist) !important;
		color: var(--ms-text) !important;
		font-size: 18px;
		line-height: 1;
	}

	#header .navigation-buttons > a.cart-count {
		background: var(--ms-bazalka) !important;
		color: #fff !important;
	}

	/* Shoptet shows the account button from tablet width up; leave its
	   display alone so phones keep it hidden. */
	#header .navigation-buttons > button {
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--ms-r-pill);
		background: var(--ms-mist);
		color: var(--ms-text);
		font-size: 18px;
		line-height: 44px;
		text-align: center;
	}
}

#header .navigation-buttons i,
#header .navigation-buttons [class^='icon-'] {
	color: inherit !important;
}

/* Item count badge on the cart */
.navigation-buttons .cart-count i,
.navigation-buttons .cart-count[data-count]::after,
.cart-count .cart-count-badge {
	font-style: normal;
}

.navigation-buttons .cart-count > i:not([class^='icon-']) {
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid #fff;
	border-radius: var(--ms-r-pill);
	background: var(--ms-hrasek) !important;
	color: var(--ms-spenat) !important;
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
}

/* Popups under the header (login, cart preview, search) */
.popup-widget {
	border: 0;
	background: transparent;
}

.popup-widget .popup-widget-inner,
.popup-widget.search-widget {
	border: 0;
	border-radius: var(--ms-r-card);
	background: #fff;
	box-shadow: var(--ms-shadow-pop);
}

.popup-widget .popup-widget-inner {
	padding: 24px;
}

.popup-widget::before,
.popup-widget::after {
	display: none !important;
}

.popup-widget h2,
.popup-widget .h2 {
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

.cart-widget-product {
	border-color: var(--ms-line-soft);
}

.cart-widget-product-name a,
.cart-widget-product .cart-widget-product-name {
	color: var(--ms-text);
	font-weight: 400;
}

/* Search */
.search-form .form-control,
.search-form input[type='search'] {
	height: 52px;
	border-radius: var(--ms-r-pill);
	padding: 0 24px;
	background: var(--ms-mist);
	border-color: transparent;
}

.search-form .btn {
	border-radius: var(--ms-r-pill);
}

.search-whisperer,
.searchWhisperer {
	border: 0;
	border-radius: var(--ms-r-card);
	box-shadow: var(--ms-shadow-pop);
	overflow: hidden;
}

/* Search results page */
.in-vyhledavani main#content > h2 {
	margin: 0 0 32px;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -0.04em;
	text-align: left;
}

.in-vyhledavani main#content > h2 * {
	color: var(--ms-bazalka) !important;
	font-weight: inherit;
}

.search-results-groups,
.search-results-groups > *,
.search-results-group {
	padding-left: 0;
	padding-right: 0;
	border-color: var(--ms-line) !important;
	text-align: left;
}

.search-results-groups h3,
.search-results-groups h4,
.search-results-group-title,
.search-results h3,
.search-results h4 {
	margin: 0 0 12px;
	color: var(--ms-text-faint);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-align: left;
}

.search-results-groups ul {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-start !important;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-results-groups li a {
	display: inline-flex;
	padding: 8px 16px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	color: var(--ms-text);
}

.search-results-groups li {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

.search-results-groups li a::after,
.search-results-groups li a::before {
	display: none;
}

.search-results-groups li a:hover {
	background: var(--ms-hrasek);
	color: var(--ms-spenat);
}

/* Cart preview under the cart button */
#cart-widget,
#login {
	border-radius: var(--ms-r-card) !important;
	box-shadow: none !important;
}

#cart-widget .popup-widget-inner,
#login .popup-widget-inner {
	border-radius: var(--ms-r-card) !important;
}

.cart-widget-products,
.cart-widget-products-inner {
	height: auto !important;
	max-height: 50vh;
	margin: 0;
	padding: 0;
	overflow-y: auto;
}

.cart-widget-products-inner {
	max-height: none;
	overflow: visible;
}

.cart-widget-bottom,
.cart-free-shipping,
.cart-free-shipping > div {
	position: static !important;
	width: auto !important;
	font-weight: 400 !important;
	text-align: left !important;
}

.cart-widget-product {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		'image name delete'
		'image amount price';
	align-items: center;
	gap: 10px 14px;
	width: 100%;
	margin: 0 0 16px;
	padding: 0 0 16px !important;
	border: 0;
	border-bottom: 1px solid var(--ms-line);
}

.cart-widget-product > div {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

/* One row of image, name, quantity and remove left the name about 100px
   on phones. Unwrapping name-and-price lets the price sit under the remove
   button, beside the quantity. */
.cart-widget-product > .cart-widget-product-name-and-price {
	display: contents;
}

.cart-widget-product-image {
	grid-area: image;
}

.cart-widget-product-name {
	grid-area: name;
}

.cart-widget-product-amount {
	grid-area: amount;
	justify-self: start;
}

.cart-widget-product-price {
	grid-area: price;
	justify-self: end;
	white-space: nowrap;
}

.cart-widget-product-delete {
	grid-area: delete;
	justify-self: end;
}

/* Empty cart: Shoptet reuses .cart-widget-product for the message, without
   the cartItem microdata. */
.cart-widget-products-inner > .cart-widget-product:not([data-micro]) {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 40px 24px !important;
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-smetana);
	color: var(--ms-inkoust);
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	text-align: center;
}

.cart-widget-products-inner > .cart-widget-product:not([data-micro])::before {
	content: '';
	width: 64px;
	height: 74px;
	margin-bottom: 12px;
	background: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/maskot.svg') center /
		contain no-repeat;
}

.cart-widget-products-inner > .cart-widget-product:not([data-micro])::after {
	content: 'Vyber si něco dobrého z naší nabídky.';
	color: var(--ms-text-soft);
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
}

.cart-widget-product-image img {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--ms-mist);
	object-fit: contain;
}

.cart-widget-product-name strong,
.cart-widget-product-name a {
	color: var(--ms-text) !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
}

.cart-widget-product-price strong {
	color: var(--ms-text) !important;
	font-size: 15px;
	font-weight: 500;
}

.cart-widget-product .quantity {
	height: 44px;
	padding: 0 4px;
}

.cart-widget-product .quantity .increase,
.cart-widget-product .quantity .decrease {
	width: 34px;
	height: 34px;
}

.cart-widget-product .quantity input {
	width: 32px;
	height: 36px;
	font-size: 15px;
}

.cart-widget-product-unit {
	display: none !important;
}

.cart-widget-bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

#cart-widget {
	min-height: 0;
	padding: 0 !important;
}

#cart-widget .cart-widget-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cart-widget-button,
.cart-free-shipping {
	display: block !important;
	top: auto !important;
	height: auto !important;
	margin: 0 !important;
	transform: none !important;
}

.cart-widget-button {
	padding: 0 !important;
}

.cart-widget-button .btn {
	width: 100%;
	min-height: 52px;
}

.cart-free-shipping {
	order: -1;
	margin: 0;
	padding: 14px 18px;
	border-radius: 18px;
	background: var(--ms-smetana);
	color: var(--ms-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.cart-free-shipping strong {
	color: var(--ms-bazalka);
	font-weight: 500;
	text-transform: none;
}

/* Search field and its live suggestions */
.search-widget .search-form .btn,
.search-form button[type='submit'] {
	border-color: var(--ms-bazalka) !important;
	background: var(--ms-bazalka) !important;
	color: #fff !important;
}

.search-widget .search-form .btn:hover {
	border-color: var(--ms-spenat) !important;
	background: var(--ms-spenat) !important;
}

.searchWhisperer {
	margin-top: 8px;
	padding: 12px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: #fff;
	box-shadow: var(--ms-shadow-pop);
}

.searchWhisperer > *,
.searchWhisperer [class*='__group'],
.searchWhisperer [class*='__products'],
.searchWhisperer [class*='__categories'] {
	border: 0;
	border-radius: 20px;
	background: transparent;
}

.searchWhisperer h2,
.searchWhisperer h3,
.searchWhisperer [class*='heading'],
.searchWhisperer [class*='title'] {
	color: var(--ms-text-faint);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
}

.searchWhisperer a,
.searchWhisperer [class*='name'] {
	color: var(--ms-text) !important;
	font-size: 17px;
	font-weight: 400 !important;
	letter-spacing: -0.01em;
}

.searchWhisperer a:hover {
	color: var(--ms-bazalka) !important;
}

.searchWhisperer [class*='price'],
.searchWhisperer [class*='price'] strong {
	color: var(--ms-text) !important;
	font-weight: 500;
}

.searchWhisperer [class*='availability'] {
	font-size: 14px;
	font-weight: 400;
}

.searchWhisperer img {
	border-radius: 14px;
	background: var(--ms-mist);
}

.searchWhisperer .btn {
	min-height: 44px;
	padding: 10px 18px;
	white-space: nowrap;
}

.searchWhisperer .quantity {
	height: 48px;
}

.searchWhisperer .quantity .increase,
.searchWhisperer .quantity .decrease {
	width: 36px;
	height: 36px;
}

/* --------------------------------------------------------------------------
   4. Buttons — always pills, one primary action per surface
   -------------------------------------------------------------------------- */

.btn,
button.btn,
a.btn,
input[type='submit'].btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: auto;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--ms-r-pill);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.3s var(--ms-ease);
}

.btn:active {
	transform: scale(0.98);
}

/* Shoptet styles `a.btn-primary` separately from `button.btn-primary`
   (inverted, as link buttons), so both forms are named explicitly. */
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
.btn.btn-conversion,
a.btn.btn-conversion,
.btn.btn-cart,
.btn.add-to-cart-button,
.btn.btn-plain,
button[type='submit'].btn:not(.btn-secondary):not(.btn-default):not(
		.btn-arrow-left
	) {
	background: var(--ms-bazalka);
	border-color: var(--ms-bazalka);
	color: #fff;
}

.btn.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-conversion:hover,
a.btn.btn-conversion:hover,
.btn.btn-cart:hover,
.btn.add-to-cart-button:hover,
.btn.btn-plain:hover,
button[type='submit'].btn:not(.btn-secondary):not(.btn-default):not(
		.btn-arrow-left
	):hover {
	background: var(--ms-spenat);
	border-color: var(--ms-spenat);
	color: #fff;
}

.btn.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary,
.btn.btn-default,
a.btn.btn-default {
	background: var(--ms-mist);
	border-color: var(--ms-mist);
	color: var(--ms-text);
}

.btn.btn-secondary:hover,
a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover,
.btn.btn-default:hover,
a.btn.btn-default:hover {
	background: #e6ecda;
	border-color: #e6ecda;
	color: var(--ms-text);
}

.btn.btn-lg {
	min-height: 60px;
	padding: 18px 30px;
	font-size: 18px;
	line-height: 22px;
}

.btn.btn-sm,
.btn.btn-xs {
	min-height: 40px;
	padding: 8px 18px;
	font-size: 14px;
}

.btn[disabled],
.btn.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.btn::before,
.btn::after {
	color: inherit;
}

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */

.form-control,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='number'],
input[type='search'],
select,
textarea {
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r-input);
	background: #fff;
	box-shadow: none;
	color: var(--ms-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

textarea,
textarea.form-control {
	height: auto;
	min-height: 140px;
	padding: 14px 18px;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--ms-text-faint);
}

.form-control:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ms-bazalka);
	box-shadow: 0 0 0 4px rgba(41, 140, 49, 0.16);
}

label,
.form-group label {
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 400;
}

.form-group {
	margin-bottom: 16px;
}

.required-asterisk::after,
.form-group .required::after {
	color: var(--ms-rajce);
}

.js-validated-element-wrapper .js-validator-msg,
.validator-msg,
.msg-error {
	border-radius: 12px;
}

.js-error-field,
.form-control.error-field,
input.js-error-field {
	border-color: var(--ms-rajce) !important;
	box-shadow: 0 0 0 4px rgba(222, 72, 72, 0.12) !important;
}

/* Checkboxes and radios */
input[type='checkbox'] + label::before,
input[type='radio'] + label::before {
	border: 1.5px solid rgba(31, 53, 36, 0.3);
	background: #fff;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

input[type='checkbox'] + label::before {
	border-radius: 7px;
}

input[type='checkbox']:checked + label::before,
input[type='radio']:checked + label::before {
	border-color: var(--ms-bazalka);
}

input[type='checkbox']:checked + label::after,
input[type='radio']:checked + label::after {
	background-color: var(--ms-bazalka);
	color: #fff;
}

input[type='checkbox']:checked + label::after {
	border-radius: 7px;
}

/* System messages */
.msg,
.messages .msg {
	border: 0;
	border-radius: var(--ms-r-input);
	padding: 14px 20px;
	font-size: 15px;
}

.msg-success,
.msg.msg-success {
	background: var(--ms-hrasek);
	color: var(--ms-spenat);
}

.msg-error,
.msg.msg-error {
	background: rgba(222, 72, 72, 0.12);
	color: #9c2a2a;
}

.msg-info,
.msg.msg-info,
.msg-notice {
	background: var(--ms-smetana);
	color: var(--ms-text);
}

/* --------------------------------------------------------------------------
   6. Tags and flags
   -------------------------------------------------------------------------- */

.flags {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.flag,
.flags .flag {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: #fff !important;
	color: var(--ms-text) !important;
	box-shadow: 0 2px 8px rgba(31, 53, 36, 0.1);
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: normal;
	text-transform: none;
}

.flag.flag-new,
.flag.flag-tip {
	background: var(--ms-hrasek) !important;
	color: var(--ms-spenat) !important;
	box-shadow: none;
}

.flag.flag-action,
.flag.flag-discount,
.flag.flag-freeshipping {
	background: var(--ms-spenat) !important;
	color: var(--ms-smetana) !important;
	box-shadow: none;
}

.flags-extra .flag,
.flag.flag-discount {
	border-radius: var(--ms-r-pill);
}

.flags-extra .price-standard,
.flags-extra .price-save {
	color: inherit;
}

/* Rating stars */
.star.star-on::before,
.star.star-half::before,
.stars .star-on,
.stars .star-half {
	color: var(--ms-zloutek);
}

.star.star-off::before,
.stars .star-off {
	color: var(--ms-line);
}

/* Availability */
.availability,
.availability-label,
.detail-parameter-availability .availability-label {
	color: var(--ms-bazalka) !important;
}

/* --------------------------------------------------------------------------
   7. Product cards

   No card surface: the photo sits on a rounded mist tile and the name, price
   and button run on the page background beneath it.
   -------------------------------------------------------------------------- */

.products,
.products.products-block {
	justify-content: flex-start;
	border: 0;
}

.products .product,
.products-block .product {
	padding: 12px !important;
	border: 0 !important;
	background: transparent;
}

.product .p {
	display: flex !important;
	flex-direction: column;
	align-items: stretch !important;
	height: 100%;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left;
}

.product .p > .image {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 28px !important;
	border: 0 !important;
	border-radius: var(--ms-r-card) !important;
	background: var(--ms-mist) !important;
	box-sizing: border-box;
	overflow: hidden;
}

/* Fill the tile but keep the ratio. Some widgets (bestsellers) ship a small
   thumbnail, which would otherwise sit lost in the middle of the tile. */
.product .p > .image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 420px !important;
	max-height: 420px !important;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.6s var(--ms-ease);
}

.product .p:hover > .image img {
	transform: scale(1.05) rotate(-2deg);
}

.product .p > .image .flags {
	top: 16px;
	left: 16px;
}

.product .p-in {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	align-self: stretch !important;
	width: 100% !important;
	padding: 18px 4px 0 !important;
	background: transparent !important;
	box-sizing: border-box;
}

.p .p-in-in,
.p a.name {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* Shoptet centres card text in some widgets and not others. */
.p .p-in,
.p .p-in-in,
.p .p-in *,
.p .p-bottom,
.p .p-bottom *,
.p .name,
.p .name span {
	text-align: left !important;
}

.p .prices,
.p .p-tools,
.p .ratings-wrapper {
	justify-content: flex-start !important;
}

.p .p-bottom,
.p .p-bottom > div,
.p .prices,
.p .price-final,
.p .availability {
	width: 100% !important;
	box-sizing: border-box;
}

.product .p .name {
	display: block !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 0 6px !important;
	color: var(--ms-text) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.02em;
	text-transform: none !important;
}

.product .p .name:hover {
	color: var(--ms-bazalka) !important;
}

.product .ratings-wrapper {
	margin: 0 0 4px;
	padding: 0;
	min-height: 0;
}

.product .availability {
	margin: 0 0 12px !important;
	font-size: 14px !important;
	line-height: 20px;
}

/* The teaser repeats the product page's short description; cards stay to
   name, availability and price. */
.product .p-desc {
	display: none !important;
	margin: 0 0 12px;
	color: var(--ms-text-soft) !important;
	font-size: 15px !important;
	line-height: 22px !important;
}

/* Rating and availability under the name; price left and button right,
   pinned to the bottom of the card. */
.product .p-bottom {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.product .p-bottom > div {
	display: grid !important;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'rating rating'
		'availability availability'
		'prices tools';
	grid-template-rows: auto 1fr auto;
	align-items: center;
	gap: 0 12px;
}

.product .ratings-wrapper {
	grid-area: rating;
}

.product .ratings-wrapper,
.product .ratings-wrapper .stars-wrapper,
.product .ratings-wrapper .stars {
	display: flex !important;
	justify-content: flex-start !important;
	width: 100%;
	margin: 0;
}

.product .availability {
	grid-area: availability;
	align-self: start;
}

.product .prices {
	grid-area: prices;
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.product .prices .price-final {
	order: -1;
	width: auto !important;
}

.product .prices .price-standard {
	text-decoration: line-through;
}

.product .prices .price-save,
.product .prices .price-additional {
	display: none;
}

.product .price-final,
.product .price-final strong {
	color: var(--ms-text) !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	line-height: 28px;
	letter-spacing: -0.02em;
}

.product .price-standard,
.product .price-standard span {
	color: var(--ms-text-faint) !important;
	font-size: 14px;
}

.product .price-additional,
.product .price-final small {
	color: var(--ms-text-faint) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.product .p-tools {
	grid-area: tools;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.product .p-tools .btn {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
}

.product .p-code {
	display: none !important;
}

/* Section headings above product rows */
.homepage-group-title,
.homepage-group-title.h4,
.products-header,
.products-related-header,
.products-block-header {
	margin: 0 0 32px;
	color: var(--ms-text);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.035em;
	text-align: left;
	text-transform: none;
}

.products-related-wrapper,
.products-wrapper.product-slider-holder {
	margin: 0 -12px;
	padding: 0;
}

/* Slider arrows */
.product-slider-holder .product-slider-navigation,
.product-slider-navigation {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: #fff;
	box-shadow: var(--ms-shadow-card);
	color: var(--ms-text);
}

.product-slider-navigation:hover {
	background: var(--ms-bazalka);
	color: #fff;
}

/* Shoptet draws the chevron in a 32px box pinned to the button's corner and
   turns it lime on hover, which disappears on Bazalka. */
.product-slider-holder .product-slider-navigation::before,
.product-slider-holder .product-slider-navigation:hover::before {
	width: 100%;
	height: 100%;
	color: inherit;
}

/* --------------------------------------------------------------------------
   8. Benefit banners
   -------------------------------------------------------------------------- */

.benefit-banners-full-width {
	margin: 56px 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.benefitBanner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.benefitBanner__item {
	display: flex;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 16px;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 22px 24px !important;
	border: 0 !important;
	border-radius: var(--ms-r-card);
	background: var(--ms-smetana) !important;
	text-align: left !important;
}

.benefitBanner__content,
.benefitBanner__title,
.benefitBanner__data {
	text-align: left !important;
}

.benefitBanner__picture {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.benefitBanner__img {
	width: 44px !important;
	height: 44px !important;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.benefitBanner__content {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.benefitBanner__title {
	display: block !important;
	margin: 0 0 2px !important;
	color: var(--ms-text) !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.02em;
	text-transform: none !important;
}

.benefitBanner__data,
.benefitBanner__data p {
	margin: 0;
	color: var(--ms-text-soft) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

/* An empty strip (no benefits set for this position) leaves no gap. */
.benefit-banners-full-width:not(:has(.benefitBanner__item)) {
	display: none;
}

/* --------------------------------------------------------------------------
   9. Homepage carousel and banners (used only until the hero block replaces
      them; kept rounded so stock banners still fit the look)
   -------------------------------------------------------------------------- */

.carousel-wrapper {
	max-width: var(--ms-container);
	margin: 24px auto 0;
	padding: 0 var(--ms-gutter);
}

.carousel-wrapper .wide-carousel,
.carousel-wrapper .carousel,
.carousel-wrapper .carousel-inner {
	border-radius: var(--ms-r-panel);
	overflow: hidden;
}

.next-to-carousel-banners .banner-wrapper,
.banner-wrapper,
.banner-wrapper img,
.footer-banners .banner-wrapper img {
	border-radius: var(--ms-r-photo);
	overflow: hidden;
}

.extended-banner-texts {
	padding: 40px !important;
	border-radius: var(--ms-r-card);
}

.extended-banner-title {
	margin: 0 0 8px !important;
	color: var(--ms-text) !important;
	font-size: 40px !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.035em;
	text-transform: none !important;
}

.extended-banner-text {
	color: var(--ms-text-soft) !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
}

.extended-banner-link {
	display: inline-flex !important;
	align-items: center;
	align-self: flex-start;
	width: auto !important;
	min-height: 48px;
	margin: 16px 0 0 !important;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: var(--ms-r-pill) !important;
	background: var(--ms-bazalka) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

.extended-banner-link:hover {
	background: var(--ms-spenat) !important;
}

.carousel-control {
	width: 48px;
	height: 48px;
	border-radius: var(--ms-r-pill);
	background: #fff;
	color: var(--ms-text);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Category listing
   -------------------------------------------------------------------------- */

.category-top {
	margin: 0 0 40px;
	padding: 0 !important;
	border: 0 !important;
	text-align: left;
}

.category-title,
.category-top h1 {
	text-align: left;
	margin: 0 0 12px;
	font-size: 64px;
	line-height: 1.08;
	letter-spacing: -0.04em;
}

.category-perex,
.category-perex p {
	max-width: 68ch;
	color: var(--ms-text-soft);
	font-size: 18px;
	line-height: 1.6;
}

/* "Nejprodávanější" repeats, with 100px thumbnails, the same handful of
   products the list right below it shows in full. */
.products-top-wrapper {
	display: none;
}

/* "Otevřít filtr" toggle */
.filters-unveil-button-wrapper {
	margin: 0 0 24px;
	text-align: left;
}

.filters-unveil-button-wrapper .btn,
.filters-unveil-button-wrapper a {
	border-color: var(--ms-mist) !important;
	background: var(--ms-mist) !important;
	color: var(--ms-text) !important;
	font-weight: 400;
}

/* Subcategory tiles */
.subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.subcategories li {
	width: auto !important;
	margin: 0;
	padding: 0;
	float: none;
}

.subcategories li a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: auto;
	padding: 8px 18px 8px 8px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	color: var(--ms-text);
	font-size: 15px;
	line-height: 20px;
}

.subcategories li a:hover {
	background: var(--ms-hrasek);
	color: var(--ms-spenat);
}

.subcategories li a .image {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
}

.subcategories li a .text {
	padding: 0;
}

.subcategories li a::after {
	display: none;
}

/* Sidebar boxes */
.sidebar {
	background: transparent;
}

@media (min-width: 992px) {
	#content-wrapper aside.sidebar {
		flex: 0 0 280px;
		width: 280px;
		margin: 0 40px 0 0;
		padding: 0;
	}

	#content-wrapper aside.sidebar ~ .category-content-wrapper {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}
}

.sidebar-inner {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.sidebar .box {
	margin: 0 0 16px;
	padding: 24px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
}

.sidebar .box h3,
.sidebar .box h4,
.sidebar .box .pageElement__heading,
.sidebar .box .topic {
	margin: 0 0 14px;
	color: var(--ms-text);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.sidebar #categories,
.sidebar #categories ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar #categories .categories > .topic,
.sidebar #categories .topic {
	margin: 0;
}

.sidebar #categories a {
	display: block;
	padding: 8px 12px;
	border-radius: 12px;
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
}

.sidebar #categories a:hover,
.sidebar #categories .active > a,
.sidebar #categories .topic.active > a {
	background: #fff;
	color: var(--ms-text);
}

.sidebar #categories ul ul {
	padding-left: 12px;
}

/* The expand toggles sit on top of the labels; the active branch is already
   open, which is all a shop this size needs. */
.sidebar #categories .cat-trigger {
	display: none !important;
}

.sidebar .box.box-filters {
	padding: 24px;
	background: var(--ms-mist);
}

.sidebar .box-filters .filter-sections,
.sidebar .box-filters .filter-section,
.sidebar .box-filters fieldset,
.sidebar .box-filters .slider-wrapper,
.sidebar .box-filters .filter-total-count {
	background: transparent;
}

/* Filters */
.filters-wrapper,
.filters,
#filters {
	background: transparent;
	border: 0;
}

.filter-section {
	padding: 16px 0;
	border: 0;
	border-top: 1px solid var(--ms-line);
}

.filter-section:first-child {
	border-top: 0;
	padding-top: 0;
}

.filter-section h4,
.filter-section .filter-headline {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.filter-label,
.filter-section label {
	color: var(--ms-text);
	font-size: 15px;
}

.filter-count {
	color: var(--ms-text-faint);
	background: transparent;
}

.ui-slider,
.slider-wrapper .ui-slider {
	height: 4px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-line);
}

.ui-slider .ui-slider-range {
	background: var(--ms-bazalka);
}

.ui-slider .ui-slider-handle {
	width: 20px;
	height: 20px;
	top: -8px;
	border: 3px solid var(--ms-bazalka);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
}

/* Sorting */
.category-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: transparent;
}

.listSorting__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	list-style: none;
}

.listSorting__control,
.listSorting__controls button {
	display: block;
	height: auto;
	padding: 9px 18px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: transparent;
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: none;
}

.listSorting__control:hover,
.listSorting__control--current,
.listSorting__control.listSorting__control--current {
	background: #fff;
	color: var(--ms-text);
	box-shadow: 0 1px 2px rgba(31, 53, 36, 0.06);
}

.listSorting__control::after,
.listSorting__control::before {
	display: none;
}

/* Paging */
.listingControls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 48px 0 0;
	padding: 0;
	border: 0;
}

.itemsTotal {
	color: var(--ms-text-faint);
	font-size: 14px;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	border: 0;
}

.pagination__link,
.pagination__currentPage,
.pagination > a,
.pagination > strong,
.pagination__list a,
.pagination__list strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 400;
}

.pagination__link:hover,
.pagination > a:hover {
	background: #e6ecda;
	color: var(--ms-text);
}

.pagination__currentPage,
.pagination > strong,
.pagination__list strong {
	background: var(--ms-bazalka);
	color: #fff;
}

.pagination__link::before,
.pagination__link::after {
	color: inherit;
}

/* --------------------------------------------------------------------------
   11. Product detail
   -------------------------------------------------------------------------- */

.p-detail {
	border: 0;
}

.p-detail-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 56px;
	margin: 0;
}

.p-detail-inner > .p-image-wrapper {
	order: 1;
	flex: 1 1 480px;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

.p-detail-inner > .p-data-wrapper {
	order: 2;
	flex: 1 1 400px;
	width: auto;
	max-width: 560px;
	margin: 0;
	padding: 0;
	float: none;
}

@media (min-width: 992px) {
	.p-detail-inner > .p-image-wrapper {
		position: sticky;
		top: 112px;
	}
}

/* Gallery */
.p-detail .p-image {
	position: relative;
	margin: 0;
	padding: 40px;
	border: 0;
	border-radius: var(--ms-r-panel);
	background: var(--ms-mist);
	overflow: hidden;
}

.p-detail .p-image .p-main-image {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
}

.p-detail .p-image img {
	max-width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.p-detail .p-image .flags {
	top: 24px;
	left: 24px;
}

.p-thumbnails-wrapper {
	margin: 16px 0 0;
}

.p-thumbnails a,
.p-thumbnail {
	margin: 0 10px 0 0;
	border: 2px solid transparent;
	border-radius: 18px;
	background: var(--ms-mist);
	overflow: hidden;
}

.p-thumbnails a img,
.p-thumbnail img {
	mix-blend-mode: multiply;
}

.p-thumbnails a.highlighted,
.p-thumbnail.highlighted,
.p-thumbnails a:hover {
	border-color: var(--ms-bazalka);
}

/* Title block */
.p-detail-inner-header {
	margin: 0 0 16px;
}

.p-detail-inner-header h1,
.p-detail-inner-header-mobile .h1 {
	font-weight: 500 !important;
	margin: 0 0 12px;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.p-detail .brand-wrapper,
.p-detail .brand-wrapper a,
.p-detail .p-manufacturer,
.p-detail .p-manufacturer a {
	display: inline-flex;
	margin: 0 0 12px;
	color: var(--ms-bazalka) !important;
	font-size: 17px;
	font-weight: 400;
	line-height: 22px;
	text-transform: none;
	letter-spacing: normal;
}

.p-detail .brand-wrapper img {
	max-height: 28px;
	width: auto;
}

.p-detail .stars-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--ms-text-faint);
	font-size: 14px;
}

.p-detail .stars-wrapper a {
	color: var(--ms-text-soft) !important;
	text-decoration: underline;
	text-decoration-color: var(--ms-line);
	text-underline-offset: 4px;
}

.p-short-description,
.p-short-description p {
	margin: 0 0 24px;
	color: var(--ms-text-soft);
	font-size: 18px;
	line-height: 1.6;
}

.p-short-description p:last-child {
	margin-bottom: 0;
}

/* Below 992px Shoptet shows its own centred copy of the title block. */
.p-detail-inner-header-mobile,
.p-detail-inner-header-mobile .h1,
.p-detail-inner-header-mobile .brand-wrapper,
.p-detail-inner-header-mobile .stars-wrapper {
	justify-content: flex-start;
	text-align: left;
}

.p-detail-inner-header-mobile {
	margin: 0 0 20px;
}

/* Variants */
.p-variants-block,
.detail-parameters .variant-list {
	margin: 0 0 20px;
}

.p-variants-block label,
.variant-label {
	display: block;
	margin: 0 0 8px;
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 500;
}

/* Price */
.p-detail .p-price-wrapper,
.p-detail .p-final-price-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.p-detail .price-final,
.p-detail .price-final strong,
.p-detail .price-final-holder {
	color: var(--ms-spenat) !important;
	font-size: 44px !important;
	font-weight: 500 !important;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.p-detail .price-standard,
.p-detail .price-standard span {
	color: var(--ms-text-faint);
	font-size: 18px;
}

.p-detail .price-save {
	display: inline-flex;
	padding: 6px 12px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-spenat);
	color: var(--ms-smetana);
	font-size: 14px;
	line-height: 16px;
}

.p-detail .price-additional,
.p-detail .price-measure {
	width: 100%;
	color: var(--ms-text-faint);
	font-size: 14px;
	line-height: 20px;
}

/* Availability, delivery, code */
.p-detail .detail-parameters,
.p-detail table.detail-parameters {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin: 0 0 28px;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--ms-line);
}

.p-detail .detail-parameter {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ms-text-faint);
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
}

.p-detail .detail-parameter > * {
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.p-detail .detail-parameter .delivery-time,
.p-detail .detail-parameter .delivery-time span,
.p-detail .detail-parameter-product-code > span:last-child,
.p-detail .detail-parameter .availability-amount {
	color: var(--ms-text);
}

.p-detail .detail-parameter .availability-label {
	font-weight: 500;
}

/* Quantity + add to cart */
.p-detail .p-to-cart-block,
.p-detail .add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.p-detail .add-to-cart .btn,
.p-detail .add-to-cart-button {
	flex: 1 1 220px;
	min-height: 60px;
	margin: 0;
	padding: 18px 30px;
	font-size: 18px;
	line-height: 22px;
}

.p-detail .p-to-cart-block .add-to-cart {
	flex: 1 1 100%;
	flex-wrap: nowrap;
}

.quantity {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: auto;
	flex: 0 0 auto;
	height: 60px;
	margin: 0 !important;
	padding: 0 8px;
	border: 0 !important;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
}

.quantity label {
	order: 2;
	margin: 0;
}

.quantity input,
.quantity .amount {
	order: 2;
	width: 44px;
	height: 48px;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ms-text);
	font-size: 17px;
	font-weight: 500;
	text-align: center;
}

.quantity .increase,
.quantity .decrease {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ms-text);
	box-shadow: 0 1px 2px rgba(31, 53, 36, 0.08);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.quantity .decrease {
	order: 1;
}

.quantity .increase {
	order: 3;
}

.quantity .increase:hover,
.quantity .decrease:hover {
	background: var(--ms-bazalka);
	color: #fff;
}

.quantity .increase::before,
.quantity .decrease::before {
	color: inherit;
}

/* Print / ask / watchdog / share */
.social-buttons-wrapper {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

/* The pills' side padding hangs outside the column, so the first icon lines
   up with the quantity stepper and with the share buttons that replace it. */
.link-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 0 -14px;
	padding: 0;
	border: 0;
}

.link-icons .link-icon,
.social-buttons .close-after {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: transparent;
	color: var(--ms-text-soft);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

.link-icons .link-icon:hover,
.social-buttons .close-after:hover {
	background: var(--ms-mist);
	color: var(--ms-text);
}

.link-icons .link-icon::before {
	color: inherit;
}

/* Shoptet drops "Tisk" on small screens; the display above would bring it
   back. */
@media (max-width: 991px) {
	.link-icons .link-icon.print {
		display: none;
	}
}

/* Template 14 stacks a 28px icon above the label; inline at label size the
   row stays one pill tall. */
.link-icons .link-icon i {
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

/* "Sdílet" swaps the row for the X and Facebook buttons. Shoptet lays the
   panel over the row at the height of its stacked icons less their bottom
   margin, which left our labels showing below it. Cover the whole row and
   centre the widgets, whose iframes are a fixed 20px. */
.social-buttons-wrapper .social-buttons {
	align-items: center;
	gap: 8px;
	min-height: 100%;
	background: #fff;
	transition: opacity 0.2s var(--ms-ease);
}

.social-buttons > div,
.social-buttons > div:nth-last-child(2) {
	align-items: center;
	padding: 0;
	line-height: 0;
}

.social-buttons > div.close-wrapper {
	flex-grow: 0;
	line-height: inherit;
	text-transform: none;
}

.social-buttons .close-after::after {
	margin: 0;
}

/* Tabs */
.p-detail-tabs-wrapper {
	margin: 0;
}

.p-detail-full-width,
.p-detail-tabs-wrapper:not(.p-detail-full-width .p-detail-tabs-wrapper) {
	margin: 72px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.shp-tabs-wrapper .shp-tabs-row,
.shp-tabs-holder {
	border: 0;
	background: transparent;
}

.shp-tabs,
ul.shp-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 40px;
	padding: 6px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	list-style: none;
}

.shp-tabs .shp-tab {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	float: none;
}

.shp-tabs .shp-tab .shp-tab-link,
.shp-tabs .shp-tab > a {
	display: block;
	height: auto;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: transparent;
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	text-transform: none;
}

.shp-tabs .shp-tab.active .shp-tab-link,
.shp-tabs .shp-tab.active > a,
.shp-tabs .shp-tab .shp-tab-link:hover {
	background: #fff;
	color: var(--ms-text);
	box-shadow: 0 1px 2px rgba(31, 53, 36, 0.06);
}

.shp-tabs .shp-tab::after,
.shp-tabs .shp-tab::before,
.shp-tabs .shp-tab .shp-tab-link::after,
.shp-tabs .shp-tab .shp-tab-link::before {
	display: none !important;
}

.shp-tabs .shp-tab.active,
.shp-tabs .shp-tab:hover {
	border: 0;
	border-radius: var(--ms-r-pill);
	background: transparent;
	box-shadow: none;
}

.shp-tabs-holder,
.shp-tabs-row {
	width: auto;
	padding: 0;
	float: none;
}

.p-detail-tabs-wrapper > .row {
	margin: 0;
}

.p-detail-tabs-wrapper > .row > div {
	padding: 0;
}

.tab-content,
.tab-content .tab-pane {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ms-text-soft);
}

.description-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

.description-inner > div {
	width: 100% !important;
	max-width: none !important;
	padding: 0;
	float: none;
}

#tab-content,
.p-detail-tabs-wrapper .tab-content,
.p-detail-tabs-wrapper .tab-pane {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.p-detail-tabs .shp-tab,
.p-detail-tabs .shp-tab.active {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.p-detail-tabs .shp-tab .shp-tab-link {
	border-radius: var(--ms-r-pill) !important;
	font-weight: 400 !important;
}

.p-detail-tabs .shp-tab.active .shp-tab-link {
	background: #fff !important;
}

/* Parameters table */
.extended-description h4,
.basic-description > h4:first-child {
	margin: 0 0 20px;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.extended-description table.detail-parameters {
	width: 100%;
	max-width: 720px;
	border: 0;
	border-collapse: collapse;
}

.extended-description .detail-parameters tr,
.extended-description .detail-parameters th,
.extended-description .detail-parameters td {
	background: transparent !important;
}

.p-detail-tabs-wrapper .shp-tabs-holder {
	margin-bottom: 40px;
}

.p-detail-tabs-wrapper .shp-tabs {
	margin-bottom: 0;
}

.extended-description .detail-parameters th,
.extended-description .detail-parameters td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--ms-line);
	background: transparent;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
	vertical-align: top;
}

.extended-description .detail-parameters th {
	width: 40%;
	padding-right: 24px;
	color: var(--ms-text-faint);
}

.extended-description .detail-parameters td {
	color: var(--ms-text);
}

/* Ratings and discussion */
.rate-wrapper,
.votes-wrap,
.vote-wrap,
.discussion .vote-wrap {
	border-color: var(--ms-line);
}

.rate-average {
	color: var(--ms-text);
	font-size: 56px;
	font-weight: 500;
	letter-spacing: -0.04em;
}

.rate-list .rate-bar,
.rate-bar {
	height: 8px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	overflow: hidden;
}

.rate-bar .rate-bar-inner,
.rate-bar span {
	border-radius: var(--ms-r-pill);
	background: var(--ms-zloutek);
}

.vote-wrap {
	padding: 24px 0;
}

.vote-name,
.vote-title {
	color: var(--ms-text);
	font-weight: 500;
}

.vote-initials,
.vote-pic {
	border-radius: 50%;
	background: var(--ms-hrasek);
	color: var(--ms-spenat);
}

/* --------------------------------------------------------------------------
   12. Long-form content — articles, static pages, product descriptions
   -------------------------------------------------------------------------- */

.news-item-detail,
.content-inner > article,
.type-post .content-inner,
.type-page .content-inner {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.news-item-detail img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ms-r-photo);
}

.news-item-detail h1,
article > header h1 {
	text-align: left;
	margin: 0 0 32px;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

article .text,
.basic-description,
.category-perex,
.welcome {
	color: var(--ms-text-soft);
	font-size: 18px;
	line-height: 1.65;
}

article .text p,
.basic-description p {
	margin: 0 0 1.2em;
	font-size: inherit;
	line-height: inherit;
}

article .text h2,
.basic-description h2 {
	margin: 1.6em 0 0.6em;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

article .text h3,
.basic-description h3 {
	margin: 1.5em 0 0.5em;
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

article .text h4,
.basic-description h4 {
	margin: 1.4em 0 0.5em;
}

article .text strong,
.basic-description strong {
	color: var(--ms-text);
	font-weight: 500;
}

article .text a,
.basic-description a {
	color: var(--ms-bazalka);
	text-decoration: underline;
	text-decoration-color: rgba(41, 140, 49, 0.4);
	text-underline-offset: 4px;
}

article .text a:hover,
.basic-description a:hover {
	text-decoration-color: var(--ms-bazalka);
}

article .text ul,
article .text ol,
.basic-description ul,
.basic-description ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

article .text li,
.basic-description li {
	margin: 0 0 0.4em;
}

article .text li::marker,
.basic-description li::marker {
	color: var(--ms-bazalka);
}

article .text img,
.basic-description img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ms-r-photo);
}

article .text blockquote,
.basic-description blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border: 0;
	border-left: 3px solid var(--ms-hrasek);
	color: var(--ms-text);
	font-size: 22px;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

article .text table,
.basic-description table {
	width: 100%;
	margin: 0 0 1.4em;
	border: 0;
	border-collapse: collapse;
	font-size: 16px;
}

article .text table th,
article .text table td,
.basic-description table th,
.basic-description table td {
	padding: 12px 16px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--ms-line);
	background: transparent;
	text-align: left;
	font-weight: 400;
}

article .text table th,
.basic-description table th {
	color: var(--ms-text-faint);
}

/* Article listing (blog, news) */
.news-wrapper,
.news-item-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 40px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-wrapper .news-item,
.news-item {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	background: transparent;
}

.news-item .image {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	border-radius: var(--ms-r-photo);
	aspect-ratio: 3 / 2;
	background: var(--ms-mist);
	overflow: hidden;
}

.news-item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ms-ease);
}

.news-item:hover .image img {
	transform: scale(1.04);
}

.news-item .text {
	padding: 0;
}

.news-item .title,
.news-item h2,
.news-item .text a.title {
	display: block;
	margin: 0 0 8px;
	color: var(--ms-text);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.news-item .title:hover {
	color: var(--ms-bazalka);
}

.news-item time,
.news-item .date,
.news-item-detail time {
	display: block;
	margin: 0 0 8px;
	color: var(--ms-text-faint);
	font-size: 14px;
}

.news-item .description,
.news-item .text p {
	color: var(--ms-text-soft);
	font-size: 16px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   13. Cart and checkout
   -------------------------------------------------------------------------- */

.cart-heading,
.ordering-process h1,
.cart-inner > h1 {
	margin: 0 0 32px;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

/* Steps: a numbered pill group. The numbers come from a CSS counter, so the
   template's own boxed digits are dropped. */
.cart-header,
ol.cart-header {
	display: flex;
	gap: 4px;
	height: auto;
	margin: 0 0 32px;
	padding: 6px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	list-style: none;
	counter-reset: ms-cart-step;
}

.cart-header li,
.cart-header .step {
	display: block;
	flex: 1 1 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	counter-increment: ms-cart-step;
	text-align: center;
}

.cart-header li > a,
.cart-header li > strong {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: transparent;
	box-shadow: none;
	color: var(--ms-text-faint) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 18px !important;
	letter-spacing: normal;
	text-transform: none;
}

.cart-header li > a span,
.cart-header li > strong span {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: normal;
}

.cart-header li > a::before,
.cart-header li > strong::before {
	content: counter(ms-cart-step) !important;
	position: static !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(31, 53, 36, 0.08) !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	transform: none !important;
}

.cart-header li.active > a,
.cart-header li.active > strong {
	background: #fff;
	color: var(--ms-text) !important;
	box-shadow: 0 1px 2px rgba(31, 53, 36, 0.06);
}

.cart-header li.active > a::before,
.cart-header li.active > strong::before {
	background: var(--ms-bazalka) !important;
	color: #fff !important;
}

.cart-header li.completed > a {
	color: var(--ms-text) !important;
}

.cart-header li.completed > a::before {
	background: var(--ms-hrasek) !important;
	color: var(--ms-spenat) !important;
}

.cart-header li::before,
.cart-header li::after,
.cart-header li > a::after,
.cart-header li > strong::after {
	display: none !important;
}

/* Items */
.cart-table,
table.cart-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.cart-table tr,
.cart-table tr.removeable {
	border: 0;
	border-bottom: 1px solid var(--ms-line);
}

.cart-table td,
.cart-table th {
	padding: 20px 12px 20px 0;
	border: 0;
	background: transparent;
	color: var(--ms-text);
	vertical-align: middle;
}

.cart-table .cart-p-image a,
.cart-table .cart-p-image img {
	display: block;
	border-radius: 18px;
	background: var(--ms-mist);
}

.cart-table .cart-p-image img {
	mix-blend-mode: multiply;
}

.cart-table .main-link,
.cart-table .p-name a {
	color: var(--ms-text);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.cart-table .main-link:hover {
	color: var(--ms-bazalka);
}

.cart-table .p-label {
	display: none;
}

.cart-table .p-price,
.cart-table .p-price .price-final,
.cart-table .unit-value {
	color: var(--ms-text-faint);
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

.cart-table .cart-p-availability,
.cart-table .show-related {
	display: block;
	margin-top: 4px;
	color: var(--ms-text-soft);
	font-size: 14px;
	font-weight: 400;
}

.cart-table .cart-p-availability strong {
	font-weight: 400;
}

.cart-table .p-total .price-final,
.cart-table .p-total strong {
	color: var(--ms-text);
	font-size: 18px;
	font-weight: 500;
}

.cart-table .quantity {
	height: 48px;
}

.cart-table .quantity .increase,
.cart-table .quantity .decrease {
	width: 36px;
	height: 36px;
}

.cart-table .remove-item,
.remove-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ms-text-faint);
}

.remove-item:hover {
	background: rgba(222, 72, 72, 0.12);
	color: var(--ms-rajce);
}

/* Coupon, free-shipping progress */
.cart-summary {
	margin: 32px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.cart-content h2.h4,
.cart-content h4,
.cart-summary h2,
.co-box h4,
.order-summary h4 {
	display: block;
	margin: 0 0 16px;
	color: var(--ms-text);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: none;
}

.cart-content h4::before,
.co-box h4::before {
	color: var(--ms-bazalka);
}

.extras-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 16px;
	margin: 0;
}

.extras-wrapper .extras-col {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

.discount-coupon form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.discount-coupon [class^='icon-'] {
	display: none;
}

.discount-coupon .form-control {
	flex: 1 1 auto;
	border-radius: var(--ms-r-pill);
	padding: 0 22px;
}

.discount-coupon .btn {
	flex: 0 0 auto;
	min-height: 52px;
	border-radius: var(--ms-r-pill);
}

.extras-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.extras-wrap .extra {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 20px;
	background: var(--ms-smetana);
	color: var(--ms-text);
	font-size: 14px;
	line-height: 20px;
}

.extras-wrap .extra > span {
	flex: 1 1 auto;
}

.extras-wrap .extra [class^='icon-'] {
	flex: 0 0 auto;
	color: var(--ms-bazalka);
	font-size: 24px;
}

.extras-wrap .extra strong {
	color: var(--ms-bazalka) !important;
	font-weight: 500;
	text-transform: none;
}

.price-range {
	height: 6px;
	margin-top: 8px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: rgba(31, 53, 36, 0.1);
	overflow: hidden;
}

.price-range > div {
	height: 100%;
	border-radius: var(--ms-r-pill);
	background: var(--ms-bazalka);
}

.cart-content .delivery-time {
	margin: 20px 0 0;
	color: var(--ms-text-soft);
	font-size: 15px;
}

/* Sidebar: summary first, help second */
.sidebar-in-cart {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sidebar-in-cart .cart-content {
	width: 100%;
	margin: 0;
	padding: 28px;
	border: 0;
	border-radius: var(--ms-r-card);
	box-shadow: none;
}

.sidebar-in-cart .summary-wrapper {
	order: -1;
	background: var(--ms-smetana);
}

.sidebar-in-cart .checkout-box-wrapper {
	background: var(--ms-mist);
}

.sidebar-in-cart .cart-content .box {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.sidebar-in-cart .contact-box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 16px;
	align-items: start;
}

.sidebar-in-cart .contact-box img {
	grid-row: span 2;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.sidebar-in-cart .contact-box strong {
	color: var(--ms-text);
	font-weight: 500;
}

.sidebar-in-cart .contact-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-in-cart .contact-box li {
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
}

.sidebar-in-cart .contact-box [class^='icon-'] {
	color: var(--ms-bazalka);
}

.price-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 6px 16px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.price-wrapper .price-label,
.price-wrapper .price {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	text-align: left;
}

.price-wrapper .price {
	text-align: right;
}

.price-wrapper .price-label.price-primary {
	color: var(--ms-text);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.price-wrapper strong.price-primary {
	color: var(--ms-spenat);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.price-wrapper .price-secondary {
	color: var(--ms-text-faint);
	font-size: 14px;
	font-weight: 400;
}

.sidebar-in-cart .next-step {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}

.sidebar-in-cart .next-step .btn {
	width: 100%;
	margin: 0;
	text-transform: none;
}

.next-step .btn.next-step-forward {
	min-height: 60px;
	font-size: 18px;
}

.next-step .btn.next-step-back {
	min-height: 44px;
	padding: 8px 16px;
	background: transparent;
	border-color: transparent;
	color: var(--ms-text-soft);
	font-size: 15px;
	font-weight: 400;
}

.next-step .btn.next-step-back:hover {
	background: transparent;
	color: var(--ms-text);
}

/* Shoptet wraps each column of the order steps in a grey .cart-content card;
   the boxes inside carry the surfaces here, so the wrapper is flattened. */
.cart-row .cart-content,
.ordering-process .cart-content {
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
}

.sidebar-in-cart .cart-content {
	padding: 28px !important;
	border-radius: var(--ms-r-card) !important;
}

.sidebar-in-cart .contact-box a {
	overflow-wrap: anywhere;
}

.sidebar-in-cart .summary-wrapper {
	background: var(--ms-smetana) !important;
}

.sidebar-in-cart .checkout-box-wrapper {
	background: var(--ms-mist) !important;
}

.next-step .btn span {
	text-transform: none;
}

.cart-header li.step {
	background: transparent !important;
	box-shadow: none !important;
}

.ordering-process .cart-inner {
	padding-top: 16px;
}

.ordering-process .co-box,
.ordering-process .box.co-box {
	margin: 0 0 16px;
	padding: 28px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
}

.ordering-process h2,
.ordering-process h4,
.ordering-process .h4,
.ordering-process .btn {
	text-transform: none !important;
}

/* Order summary beside the shipping, payment and contact steps */
.order-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.order-summary .order-summary-inner {
	order: -1;
}

.order-summary .checkout-box {
	margin: 0;
	padding: 20px;
	background: var(--ms-mist);
}

.order-summary .checkout-box .toggle-contacts {
	width: 100%;
	background: transparent;
	border-color: transparent;
	color: var(--ms-text);
	font-weight: 400;
}

.order-summary .checkout-box .toggle-contacts span {
	color: var(--ms-text-faint);
	font-size: 14px;
}

.order-summary .checkout-box .box {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.order-summary-inner {
	padding: 28px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-smetana);
	box-shadow: none;
}

.order-summary-inner h2,
.order-summary-inner h4,
.order-summary-inner .h4 {
	margin: 0 0 12px;
	color: var(--ms-text);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: none;
}

.order-summary-item {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: transparent;
}

.order-summary-item.helper {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0;
	font-size: 15px;
}

.order-summary-item.helper strong {
	font-weight: 400;
}

.order-summary .recapitulation-single {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 8px 0;
	color: var(--ms-text-soft);
}

.order-summary .recapitulation-shipping-billing-info {
	font-weight: 400;
	text-align: right;
}

.order-summary .recapitulation-shipping-billing-info span {
	float: none;
	margin-left: 8px;
	color: var(--ms-text);
	text-transform: none;
}

.order-summary-item.price {
	margin: 16px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--ms-line);
}

.order-summary-item.price .price-wrapper {
	margin: 0;
}

.order-summary .cart-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: baseline;
}

.order-summary .cart-item > div {
	width: auto;
	padding: 0;
	border: 0 !important;
	float: none;
}

.order-summary .cart-item-amount {
	color: var(--ms-text-faint);
}

.order-summary .cart-items,
.order-summary .cart-item {
	border-color: var(--ms-line);
}

.order-summary .cart-item {
	padding: 10px 0;
	font-size: 15px;
}

.order-summary .cart-item > * {
	border-color: var(--ms-line) !important;
}

.order-summary .cart-item a,
.order-summary .cart-item-name {
	color: var(--ms-text);
}

.order-summary .cart-item-price,
.order-summary strong {
	color: var(--ms-text);
	font-weight: 500;
}

.order-summary .recapitulation-single,
.order-summary .recapitulation-shipping-billing {
	border-color: var(--ms-line);
	font-size: 15px;
}

.order-summary .next-step {
	margin: 24px 0 0;
}

.order-summary .next-step .btn {
	text-transform: none;
}

.co-box h2,
.co-box h4,
.co-box .order-icon {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	color: var(--ms-text);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
	text-transform: none;
}

.co-box .order-icon i,
.co-box .order-icon [class^='icon-'],
.co-box h4::before {
	color: var(--ms-bazalka);
	font-size: 26px;
}

/* Order form boxes (shipping, payment, contact details) */
.co-box,
.checkout-box {
	margin: 0 0 16px;
	padding: 28px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
	box-shadow: none;
}

/* Shipping / payment choices */
.radio-wrapper,
.shipping-billing-table .radio-wrapper {
	height: auto !important;
	margin: 0 0 8px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 18px;
	background: #fff;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.radio-wrapper:hover {
	border-color: var(--ms-line);
}

.radio-wrapper.active {
	border-color: var(--ms-bazalka);
	box-shadow: 0 0 0 4px rgba(41, 140, 49, 0.12);
}

.radio-wrapper label {
	align-items: center !important;
	min-height: 64px;
	height: auto !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.radio-wrapper input + label::before,
.radio-wrapper input + label::after {
	top: 50% !important;
	margin-top: 0;
	translate: 0 -50%;
}

.radio-wrapper.active input + label::after,
.radio-wrapper input:checked + label::after {
	border-color: var(--ms-bazalka) !important;
	background: var(--ms-bazalka) !important;
}

.radio-wrapper.active input + label::before,
.radio-wrapper input:checked + label::before {
	border-color: var(--ms-bazalka) !important;
}

.radio-wrapper .payment-logo {
	display: flex;
	align-items: center;
	height: auto;
}

.radio-wrapper label b,
.radio-wrapper.active label b {
	color: var(--ms-text) !important;
	font-weight: 400;
}

.radio-wrapper label,
.radio-wrapper.active label,
.radio-wrapper .payment-shipping-price,
.radio-wrapper .shipping-billing-name,
.radio-wrapper.active .shipping-billing-name {
	color: var(--ms-text);
}

.radio-wrapper .payment-info,
.radio-wrapper .sublabel,
.radio-wrapper .question-tooltip {
	color: var(--ms-text-faint);
	font-style: normal;
}

.radio-wrapper .payment-logo img,
.radio-wrapper img {
	border-radius: 6px;
}

.radio-wrapper .payment-shipping-price.for-free,
.payment-shipping-price.for-free {
	color: var(--ms-bazalka);
	text-transform: none;
}

/* Bottom navigation of each step */
.next-step,
.cart-content .next-step {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
}

.btn.btn-arrow-left,
a.next-step-back {
	background: transparent;
	border-color: transparent;
	color: var(--ms-text-soft);
}

a.next-step-back:hover,
.btn.btn-arrow-left:hover {
	color: var(--ms-text);
}

/* Empty cart: one panel with the mascot, the message, two actions and a
   quiet help line. The two boxes' headings only repeat the buttons. */
.cart-inner.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64px 32px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-smetana);
	text-align: center;
}

.cart-inner.cart-empty::before {
	content: '';
	width: 88px;
	height: 100px;
	margin-bottom: 24px;
	background: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/maskot.svg') center /
		contain no-repeat;
}

.cart-empty .cart-heading {
	max-width: 560px;
	margin: 0 0 32px !important;
	color: var(--ms-inkoust);
	font-size: 40px !important;
	line-height: 1.1 !important;
	letter-spacing: -0.03em;
}

.cart-empty .cart-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
}

.cart-empty .cart-row > div {
	width: auto;
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	float: none;
}

.cart-empty .empty-cart-boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.cart-empty .empty-cart-boxes > div {
	width: auto;
	padding: 0;
	float: none;
}

.cart-empty .empty-cart-boxes h3 {
	display: none;
}

.cart-empty .empty-cart-boxes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-empty .empty-cart-boxes li {
	margin: 0;
	padding: 0;
}

.cart-empty .empty-cart-boxes li::before {
	display: none;
}

.cart-empty .empty-cart-boxes a,
.cart-empty .empty-cart-boxes .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 0 28px;
	border: 1px solid var(--ms-bazalka);
	border-radius: var(--ms-r-pill);
	background: var(--ms-bazalka);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.cart-empty .empty-cart-boxes .btn {
	border-color: var(--ms-line);
	background: #fff;
	color: var(--ms-inkoust);
}

.cart-empty .cart-row > .col-md-4 {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--ms-line);
}

.cart-empty .cart-row > .col-md-4 .cart-content {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 8px;
}

.cart-empty .cart-row > .col-md-4 h2 {
	margin: 0;
	color: var(--ms-text-soft);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.cart-empty .contact-box,
.cart-empty .box {
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	border: 0;
	background: none;
}

.cart-empty .contact-box img,
.cart-empty .contact-box i,
.cart-empty .contact-box li:not(:has(.mail)) {
	display: none;
}

.cart-empty .contact-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-empty .contact-box li {
	margin: 0 !important;
	padding: 0;
}

.cart-empty .contact-box a {
	color: var(--ms-bazalka);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* Order confirmation */
.order-summary,
.recapitulation-wrapper,
.order-complete-links {
	border-color: var(--ms-line);
}

.recapitulation-single,
.recapitulation-table {
	border: 0;
	border-bottom: 1px solid var(--ms-line);
}

/* --------------------------------------------------------------------------
   14. Account — login, registration, customer zone
   -------------------------------------------------------------------------- */

.in-login .content-inner,
.in-registrace .content-inner,
.in-zapomenute-heslo .content-inner,
.in-klient .content-inner {
	max-width: 720px;
}

.in-login .content-inner > h1,
.in-registrace .content-inner > h1,
.in-klient .content-inner > h1 {
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.login-wrapper,
.in-login #formLogin,
.in-registrace #register-form,
form.register-form {
	padding: 32px;
	border: 0;
	border-radius: var(--ms-r-panel);
	background: var(--ms-mist);
}

fieldset {
	border: 0;
	padding: 0;
}

/* Registration: one mist panel; the nested order-form boxes inside it are
   flattened so the fields share a single left edge. */
.in-registrace main#content {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 !important;
}

#register-form {
	width: 100%;
	max-width: none;
	padding: 40px;
}

#register-form .co-box,
#register-form fieldset.box {
	margin: 0 0 28px;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

#register-form h2,
#register-form h4,
#register-form legend {
	margin: 0 0 16px;
	color: var(--ms-text);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

#register-form .form-control {
	width: 100%;
	max-width: none;
}

#register-form .stay-in-touch,
#register-form > fieldset {
	margin: 0 0 24px;
}

#register-form p {
	font-size: 15px;
}

.register-form h4,
.co-registration h4,
form fieldset > h4 {
	margin: 24px 0 14px;
	font-size: 22px;
	letter-spacing: -0.02em;
}

.client-center-box,
.customer-page .box,
.in-klient .box {
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
}

.alternative-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 20px 0 0;
	font-size: 15px;
}

.alternative-links a {
	color: var(--ms-text-soft);
	text-decoration: underline;
	text-decoration-color: var(--ms-line);
	text-underline-offset: 4px;
}

.alternative-links a:hover {
	color: var(--ms-bazalka);
}

.social-login-buttons-divider {
	margin: 24px 0 16px;
	color: var(--ms-text-faint);
	font-size: 14px;
}

.social-login-buttons-divider::before,
.social-login-buttons-divider::after {
	border-color: var(--ms-line);
}

.social-login-buttons-divider span {
	background: var(--ms-mist);
}

.login-btn {
	min-height: 52px;
	border-radius: var(--ms-r-pill) !important;
	overflow: hidden;
}

.login-btn strong {
	font-weight: 400;
}

.login-btn.google {
	border-color: var(--ms-line);
	background: #fff;
}

.login-form-links a,
.password-helper a,
.login-wrapper a {
	color: var(--ms-text-soft);
	text-decoration: underline;
	text-decoration-color: var(--ms-line);
	text-underline-offset: 4px;
}

.login-form-links a:hover,
.password-helper a:hover {
	color: var(--ms-bazalka);
}

/* Tables in the customer zone */
.table,
table.table {
	border: 0;
}

.table th,
.table td {
	padding: 14px 12px 14px 0;
	border: 0;
	border-bottom: 1px solid var(--ms-line);
	background: transparent;
}

.table th {
	color: var(--ms-text-faint);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   15. Newsletter and footer
   -------------------------------------------------------------------------- */

/* Shoptet breaks this strip out to the viewport with left/transform; it is
   brought back in as a panel on the page grid. */
.footer-newsletter-full-width {
	position: static;
	left: auto;
	transform: none;
	width: auto;
	max-width: calc(var(--ms-container) - 2 * var(--ms-gutter));
	margin: 0
		max(
			var(--ms-gutter),
			calc((100% - var(--ms-container)) / 2 + var(--ms-gutter))
		);
	padding: 72px 32px;
	border: 0;
	border-radius: var(--ms-r-panel);
	background: var(--ms-smetana);
}

.footer-newsletter {
	width: 100%;
	max-width: 560px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	float: none !important;
	text-align: center;
}

.footer-newsletter h2,
.footer-newsletter .h2,
.footer-newsletter .h4 {
	margin: 0 0 24px !important;
	color: var(--ms-bazalka);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.035em;
	text-align: center;
	text-transform: none;
}

/* Captcha step inside the form */
.footer-newsletter fieldset.box {
	margin: 16px 0 !important;
	padding: 0 !important;
	background: transparent;
}

.footer-newsletter fieldset h2,
.footer-newsletter .box h2 {
	margin: 0 0 12px !important;
	color: var(--ms-text);
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-align: left;
}

.footer-newsletter .subscribe-form,
.footer-newsletter fieldset {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
}

.footer-newsletter .form-group {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 12px !important;
	float: none !important;
	text-align: left;
}

.footer-newsletter .form-control,
.footer-newsletter .form-control-wrapper {
	width: 100% !important;
}

.footer-newsletter .form-control {
	height: 56px;
	padding: 0 24px;
	border-color: transparent;
	border-radius: var(--ms-r-pill);
}

.footer-newsletter .consents {
	color: var(--ms-text-soft);
	font-size: 13px;
	text-align: left;
}

.footer-newsletter .btn {
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
}

#footer,
.footer {
	margin: 0;
	padding: 72px 0 40px;
	border: 0;
	background: #fff;
	color: var(--ms-text-faint);
	font-size: 15px;
	line-height: 23px;
}

#footer a {
	color: var(--ms-text-soft);
	text-decoration: none;
	background-image: linear-gradient(var(--ms-bazalka), var(--ms-bazalka));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition:
		color 0.2s ease,
		background-size 0.3s var(--ms-ease);
}

#footer a:hover {
	color: var(--ms-bazalka);
	background-size: 100% 1px;
}

#footer .footer-rows,
#footer .custom-footer {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	border: 0;
	background: transparent;
}

#footer .custom-footer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px 48px;
	margin: 0 0 56px;
}

#footer .custom-footer > div {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	border: 0;
}

#footer .custom-footer::before,
#footer .custom-footer::after {
	display: none;
}

#footer h3,
#footer h4,
#footer .pageElement__heading,
#footer .newsItemWidget__heading,
#footer .h4 {
	margin: 0 0 14px;
	color: var(--ms-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: normal;
	text-transform: none;
}

#footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer li {
	margin: 0 0 10px;
	padding: 0;
}

#footer li::before {
	display: none;
}

#footer .contact-box ul li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 0;
}

#footer .contact-box li > span::before,
#footer .contact-box [class^='icon-'] {
	color: var(--ms-bazalka);
}

#footer .system-footer {
	margin-bottom: 40px;
}

#footer .footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

#footer .footer-links li {
	margin: 0;
}

#footer .footer-bottom-full-width {
	border: 0;
	background: transparent;
}

#footer .footer-bottom {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 24px;
	padding-bottom: 0;
	border-top: 1px solid var(--ms-line);
	color: var(--ms-text-faint);
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	float: none !important;
}

/* The top rule belongs to the content, not to the container's gutters. */
#footer .footer-bottom {
	background:
		linear-gradient(#fff, #fff) left top / var(--ms-gutter) 1px no-repeat,
		linear-gradient(#fff, #fff) right top / var(--ms-gutter) 1px no-repeat;
	margin-top: -1px;
}

#footer .footer-bottom > span,
#footer .footer-bottom > div {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}

#footer .footer-bottom a {
	color: var(--ms-text-faint);
}

#footer #signature {
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0.7;
}

#footer #signature a {
	background-image: none;
}

/* --------------------------------------------------------------------------
   16. Cookie bar, modals, back-to-top
   -------------------------------------------------------------------------- */

/* Shoptet paints the inner form, not the dialog, so the card lives there. */
.siteCookies {
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ms-text) !important;
}

.siteCookies .siteCookies__form {
	border-radius: var(--ms-r-card);
	box-shadow: var(--ms-shadow-pop);
}

/* The dialog stays a full-width, click-through strip (Shoptet resizes it on
   scroll); the card inside is centred and takes the clicks. */
.siteCookies--bottom,
.siteCookies--bottom.siteCookies--scrolled {
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 24px 24px;
	transform: none;
	pointer-events: none;
}

.siteCookies--bottom .siteCookies__form {
	width: 100%;
	max-width: 720px;
	margin: 0;
	pointer-events: auto;
}

.siteCookies .siteCookies__form {
	padding: 24px;
	background: #fff !important;
	color: var(--ms-text) !important;
}

.siteCookies .siteCookies__text,
.siteCookies .siteCookies__links {
	color: var(--ms-text-soft) !important;
	font-size: 15px;
	line-height: 1.5;
}

.siteCookies .siteCookies__text a {
	color: var(--ms-bazalka) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.siteCookies .siteCookies__link,
.siteCookies__button {
	min-height: 48px;
	padding: 12px 24px;
	border: 0 !important;
	border-radius: var(--ms-r-pill);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
}

.siteCookies .siteCookies__link,
.siteCookies__button[value='reject'] {
	background: var(--ms-mist) !important;
	color: var(--ms-text) !important;
}

.siteCookies__button[value='all'] {
	background: var(--ms-bazalka) !important;
	color: #fff !important;
}

#colorbox,
#cboxContent,
#cboxLoadedContent,
.colorbox-html-content {
	border-radius: var(--ms-r-card);
}

#cboxContent {
	background: #fff;
	box-shadow: var(--ms-shadow-pop);
	overflow: hidden;
}

#cboxOverlay {
	background: rgba(14, 73, 19, 0.45);
}

#cboxClose {
	border-radius: 50%;
}

.scroll-top,
#scroll-top {
	border: 0;
	border-radius: 50%;
	background: var(--ms-bazalka);
	color: #fff;
	box-shadow: var(--ms-shadow-card);
}

/* --------------------------------------------------------------------------
   18. Shared content components (homepage block, product descriptions, pages)

   Everything pasted into a Shoptet WYSIWYG field is built from these. The
   markup carries classes only: no inline styles, no <img>, no SVG, because
   the editor rewrites all three on save.
   -------------------------------------------------------------------------- */

/* Pill link. Used instead of .btn inside content, because Shoptet restyles
   `a.btn-*` on its own and inverts it. */
a.ms-pill,
.ms-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-bazalka);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.4s var(--ms-ease);
}

a.ms-pill:hover,
.ms-pill:hover {
	background: var(--ms-spenat);
	color: #fff;
	transform: translateY(-2px);
}

a.ms-pill--cream,
.ms-pill--cream {
	background: var(--ms-smetana);
	color: var(--ms-inkoust);
}

a.ms-pill--cream:hover,
.ms-pill--cream:hover {
	background: #fff;
	color: var(--ms-inkoust);
}

a.ms-pill--lg,
.ms-pill--lg {
	min-height: 60px;
	padding: 18px 30px;
	font-size: 18px;
	line-height: 22px;
}

/* Eyebrow label above a headline */
.ms-label {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 20px;
	padding: 8px 18px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-bazalka);
	box-shadow: 0 10px 24px rgba(41, 140, 49, 0.25);
	color: var(--ms-smetana);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

.ms-label--pea {
	background: var(--ms-hrasek);
	box-shadow: none;
	color: var(--ms-spenat);
}

/* The editor has been seen nesting an inline tag inside a copy of itself. */
.ms-label .ms-label {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

.ms-title {
	margin: 0 0 20px !important;
	color: var(--ms-inkoust);
	font-size: 56px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.ms-title--center {
	text-align: center;
}

/* Checklist: Bazalka tick on a Hrášek disc */
.ms-checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 28px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ms-checks li {
	margin: 0 !important;
	padding: 1px 0 1px 36px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23A6D271'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='%23298C31' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		left top / 24px 24px no-repeat;
	color: var(--ms-inkoust);
	font-size: 17px;
	line-height: 22px;
}

.ms-checks li::marker {
	content: '';
}

/* Photo surfaces. font-size: 0 is not cosmetic: the editor fills every empty
   element with &nbsp;, which would otherwise add a text line to the box. */
.ms-tile,
.ms-cta__mascot {
	background-color: var(--ms-mist);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 0;
	line-height: 0;
}

/* --------------------------------------------------------------------------
   18b. Product descriptions — a facelift of the content already in Shoptet

   Each product's "Popis" is an <article class="ms-product"> that ships its own
   <style> block (lime palette, 16px cards) ahead of the markup, and "Krátký
   popis" is a <div class="ms-short"> that does the same. The content, images
   and class names stay exactly as they are in administration; these rules
   only re-dress them. They are scoped one level higher (.basic-description /
   .p-short-description) so they outrank the embedded stylesheet, which comes
   later in the document than this file.
   -------------------------------------------------------------------------- */

.basic-description:has(.ms-product) > h4:first-child {
	display: none;
}

.basic-description .ms-product {
	max-width: none;
	margin: 0;
	color: var(--ms-inkoust);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.6;
}

.basic-description .ms-product section {
	margin: 96px 0;
}

.basic-description .ms-product > :first-child {
	margin-top: 0;
}

.basic-description .ms-product > :last-child {
	margin-bottom: 0;
}

.basic-description .ms-product h2 {
	max-width: 20ch;
	margin: 0 0 20px;
	color: var(--ms-inkoust);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.basic-description .ms-product h3 {
	margin: 48px 0 12px;
	color: var(--ms-inkoust);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.basic-description .ms-product p {
	max-width: 62ch;
	margin: 0 0 16px;
	color: var(--ms-text-soft);
	font-size: 18px;
	line-height: 1.6;
}

.basic-description .ms-product p:last-child {
	margin-bottom: 0;
}

.basic-description .ms-product .lead {
	color: var(--ms-inkoust);
	font-size: 22px;
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.basic-description .ms-product strong {
	color: var(--ms-inkoust);
	font-weight: 500;
}

.basic-description .ms-product small {
	color: var(--ms-text-faint);
	font-size: 14px;
	line-height: 1.55;
}

/* Photos: big rounded panels between the sections */
.basic-description .ms-product .product-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 72px 0;
	border-radius: var(--ms-r-panel);
	background: var(--ms-mist);
}

.basic-description .ms-product .hero-image {
	margin-top: 0;
}

/* Eyebrow → the landing's green label */
.basic-description .ms-product .eyebrow {
	display: inline-flex;
	gap: 0;
	margin: 0 0 20px;
	padding: 8px 18px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-bazalka);
	box-shadow: 0 10px 24px rgba(41, 140, 49, 0.25);
	color: var(--ms-smetana);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

.basic-description .ms-product .eyebrow::before {
	display: none;
}

/* Fact chips → tags */
.basic-description .ms-product .facts,
.basic-description .ms-product .recipe-list {
	gap: 8px;
	margin: 28px 0 0;
}

.basic-description .ms-product .facts li,
.basic-description .ms-product .recipe-list li {
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-hrasek);
	color: var(--ms-spenat);
	font-size: 15px;
	line-height: 18px;
}

/* Key numbers */
.basic-description .ms-product .stats {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.basic-description .ms-product .stat {
	padding: 28px;
	border-radius: var(--ms-r-card);
	background: var(--ms-hrasek);
}

.basic-description .ms-product .stat::before {
	display: none;
}

.basic-description .ms-product .stat-value {
	color: var(--ms-spenat);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.basic-description .ms-product .stat-label {
	margin-top: 8px;
	color: var(--ms-spenat);
	font-size: 17px;
	font-weight: 500;
}

.basic-description .ms-product .stat-note {
	margin-top: 2px;
	color: rgba(14, 73, 19, 0.75);
	font-size: 14px;
}

.basic-description .ms-product .stats + p,
.basic-description .ms-product .steps-grid + p,
.basic-description .ms-product .table-wrap + p {
	margin-top: 24px;
}

/* Check list (the markup already carries a check-circle icon) */
.basic-description .ms-product .check-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 48px;
	max-width: 960px;
	margin: 24px 0 0;
}

.basic-description .ms-product .check-list li {
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ms-inkoust);
	font-size: 17px;
	line-height: 22px;
}

.basic-description .ms-product .check-list svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	color: var(--ms-bazalka);
}

/* Cards */
.basic-description .ms-product .ingredients-grid,
.basic-description .ms-product .serving-grid,
.basic-description .ms-product .steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
	margin-top: 32px;
}

.basic-description .ms-product .ingredient-card,
.basic-description .ms-product .serving-card,
.basic-description .ms-product .step-card,
.basic-description .ms-product .detail-box {
	padding: 32px;
	border: 0;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
}

.basic-description .ms-product .ingredient-card:first-child,
.basic-description .ms-product .serving-card:first-child,
.basic-description .ms-product .detail-box.composition {
	background: var(--ms-smetana);
}

.basic-description .ms-product .ingredient-card h3,
.basic-description .ms-product .serving-card h3,
.basic-description .ms-product .step-card h3,
.basic-description .ms-product .detail-box h3 {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.basic-description .ms-product .ingredient-card:first-child h3,
.basic-description .ms-product .serving-card:first-child h3,
.basic-description .ms-product .detail-box.composition h3 {
	color: var(--ms-bazalka);
}

.basic-description .ms-product .detail-box h3 + h3,
.basic-description .ms-product .detail-box p + h3 {
	margin-top: 28px;
}

.basic-description .ms-product .ingredient-card p,
.basic-description .ms-product .serving-card p,
.basic-description .ms-product .step-card p,
.basic-description .ms-product .detail-box p {
	font-size: 16px;
	line-height: 1.6;
}

.basic-description .ms-product .step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 28px;
	border-radius: 50%;
	background: var(--ms-bazalka);
	color: var(--ms-smetana);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.basic-description .ms-product .step-card:first-child {
	background: var(--ms-mist);
}

.basic-description .ms-product .steps-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Smetana panel with Bazalka headline */
.basic-description .ms-product .highlight,
.basic-description .ms-product .recipe-box {
	padding: 56px;
	border: 0;
	border-radius: var(--ms-r-panel);
	background: var(--ms-smetana);
}

.basic-description .ms-product .recipe-box {
	margin-top: 40px;
	padding: 36px;
	border-radius: var(--ms-r-card);
}

.basic-description .ms-product .highlight h2 {
	color: var(--ms-bazalka);
}

.basic-description .ms-product .recipe-box h3 {
	margin-top: 0;
}

.basic-description .ms-product .highlight .eyebrow,
.basic-description .ms-product .recipe-box .eyebrow,
.basic-description .ms-product .cta-panel .eyebrow {
	background: var(--ms-hrasek);
	box-shadow: none;
	color: var(--ms-spenat);
}

.basic-description .ms-product .recipe-box .recipe-list {
	margin: 4px 0 20px;
}

.basic-description .ms-product .recipe-box .recipe-list li {
	background: #fff;
	color: var(--ms-inkoust);
}

.basic-description .ms-product .badges {
	gap: 10px;
	margin-top: 28px;
}

.basic-description .ms-product .badges li {
	margin: 0;
	padding: 16px 22px;
	border-radius: 20px;
	background: #fff;
}

.basic-description .ms-product .badges span {
	color: var(--ms-text-faint);
	font-size: 14px;
}

.basic-description .ms-product .badges strong {
	color: var(--ms-inkoust);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* App panel: Špenát with Smetana text and a cream pill */
.basic-description .ms-product .cta-panel {
	padding: 56px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-spenat);
	color: var(--ms-smetana);
}

.basic-description .ms-product .cta-panel h2,
.basic-description .ms-product .cta-panel strong {
	color: var(--ms-smetana);
}

.basic-description .ms-product .cta-panel p {
	color: rgba(253, 246, 228, 0.8);
}

.basic-description .ms-product .button {
	height: auto;
	min-height: 48px;
	margin-top: 20px;
	padding: 12px 24px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-bazalka);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		transform 0.4s var(--ms-ease);
}

.basic-description .ms-product .button:hover {
	background: var(--ms-spenat);
	transform: translateY(-2px);
}

.basic-description .ms-product .cta-panel .button {
	background: var(--ms-smetana);
	color: var(--ms-inkoust);
}

.basic-description .ms-product .cta-panel .button:hover {
	background: #fff;
}

/* Nutrition table */
.basic-description .ms-product .table-wrap {
	margin-top: 28px;
	padding: 12px 32px;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
}

.basic-description .ms-product table {
	min-width: 520px;
	margin: 0;
	font-size: 16px;
}

.basic-description .ms-product thead th,
.basic-description .ms-product tbody th,
.basic-description .ms-product tbody td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--ms-line);
	background: transparent;
	color: var(--ms-inkoust);
	font-weight: 400;
}

.basic-description .ms-product thead th {
	color: var(--ms-text-faint);
	font-size: 14px;
}

.basic-description .ms-product thead th.is-primary {
	color: var(--ms-bazalka);
}

.basic-description .ms-product td.is-primary {
	color: var(--ms-inkoust);
	font-weight: 500;
}

.basic-description .ms-product .is-sub th,
.basic-description .ms-product .is-sub td {
	color: var(--ms-text-soft);
}

.basic-description .ms-product .is-sub th {
	padding-left: 20px;
}

.basic-description .ms-product th:first-child,
.basic-description .ms-product td:first-child {
	padding-left: 0;
}

.basic-description .ms-product .is-sub th:first-child {
	padding-left: 20px;
}

.basic-description .ms-product th:last-child,
.basic-description .ms-product td:last-child {
	padding-right: 0;
}

.basic-description .ms-product tbody tr:last-child th,
.basic-description .ms-product tbody tr:last-child td {
	border-bottom: 0;
}

.basic-description:has(.ms-product) {
	padding: 0 !important;
}

.basic-description .ms-product .details-grid {
	align-items: flex-start;
	gap: 16px;
	margin-top: 32px;
}

.basic-description .ms-product .detail-stack {
	gap: 16px;
}

/* Short description beside the product photo */
.p-short-description .ms-short {
	color: var(--ms-inkoust);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
}

.p-short-description .ms-short p {
	margin: 0 0 12px;
	color: var(--ms-text-soft);
	font-size: 16px;
	line-height: 1.6;
}

.p-short-description .ms-short .ms-short-lead {
	margin-bottom: 12px;
	color: var(--ms-inkoust);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.p-short-description .ms-short .ms-short-caption {
	margin: 20px 0 8px;
	color: var(--ms-text-faint);
	font-size: 14px;
}

.p-short-description .ms-short-stats {
	gap: 8px;
}

.p-short-description .ms-short-stats li {
	margin: 0;
	padding: 14px 16px;
	border-radius: 20px;
	background: var(--ms-hrasek);
}

.p-short-description .ms-short-stats strong {
	color: var(--ms-spenat);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.p-short-description .ms-short-stats span {
	color: var(--ms-spenat);
	font-size: 13px;
}

.p-short-description .ms-short-checks {
	gap: 10px;
	margin: 20px 0 0;
}

.p-short-description .ms-short-checks li {
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ms-inkoust);
	font-size: 16px;
	line-height: 22px;
}

.p-short-description .ms-short-checks svg {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	color: var(--ms-bazalka);
}

.p-short-description .ms-short .ms-short-note {
	margin: 20px 0 24px;
	padding-top: 16px;
	border-top: 1px solid var(--ms-line);
	color: var(--ms-text-faint);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   19. Homepage (blocks/homepage-welcome.html)

   The welcome field is the last row of Shoptet's homepage. Its wrappers are
   flattened with display: contents so each section of the block becomes a row
   of <main> itself; the hero is then ordered first and the rest stay below
   Shoptet's benefit strip and product slider.
   -------------------------------------------------------------------------- */

body.in-index:has(.ms-home) main#content {
	display: flex;
	flex-direction: column;
}

body.in-index:has(.ms-home) .welcome-wrapper,
body.in-index:has(.ms-home) .welcome,
body.in-index:has(.ms-home) .welcome > div,
.ms-home {
	display: contents;
}

/* Shoptet's fixed "Vítejte v našem obchodě" title; the hero is the headline. */
body.in-index:has(.ms-home) .welcome > .h1 {
	display: none;
}

/* The hero replaces the banner carousel rather than stacking under it. */
body.in-index:has(.ms-hero) .carousel-wrapper,
body.in-index:has(.ms-hero) .breadcrumbs {
	display: none;
}

body.in-index:has(.ms-hero) .content-wrapper {
	padding-top: 12px;
}

.ms-home > * {
	margin-top: 140px;
}

.ms-home h1,
.ms-home h2,
.ms-home h3,
.ms-home p {
	margin: 0;
	padding: 0;
}

.ms-home p {
	color: var(--ms-text-soft);
	font-size: 19px;
	line-height: 30px;
}

/* Hero: one slide per product over its photo, product tabs underneath.
   custom.js moves .is-active between slides and tabs; until it runs (or
   without it) the first of each is the active one. */
.ms-home > .ms-hero {
	order: -1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 0;
	/* Shoptet tracks body text out by 0.4px; the design sets it plain. */
	letter-spacing: 0;
}

.ms-hero__slides {
	display: grid;
	height: 660px;
}

/* Slides share one grid cell. The incoming slide fades in on top while the
   outgoing one stays put underneath, so the green panel never thins out over
   the photos mid-change; only the panel's text cross-fades. */
.ms-slide {
	position: relative;
	z-index: 0;
	grid-area: 1 / 1;
	display: flex;
	padding: 32px;
	border-radius: 52px;
	overflow: hidden;
	isolation: isolate;
	visibility: hidden;
	transition: visibility 0s 0.9s;
}

.ms-slide.is-active,
.ms-hero:not(.is-ready) .ms-slide:first-child {
	z-index: 1;
	visibility: visible;
	transition: none;
	animation: ms-slide-in 0.9s var(--ms-ease) both;
}

.ms-slide::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ms-mist) var(--ms-photo) var(--ms-photo-at, 70%) / cover
		no-repeat;
	scale: 1.04;
	transition: scale 0s 0.9s;
}

.ms-slide.is-active::before,
.ms-hero:not(.is-ready) .ms-slide:first-child::before {
	scale: 1;
	transition: scale 6s var(--ms-ease);
}

.ms-slide--granola {
	--ms-photo: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/hero/granola.webp');
	--ms-photo-m: 97%;
}

/* Bowl and pack fill the right half of the photo. */
.ms-slide--kase {
	--ms-photo: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/hero/kase.webp');
	--ms-photo-at: 100%;
	--ms-photo-m: 84%;
}

.ms-slide--livance {
	--ms-photo: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/hero/livance.webp');
	--ms-photo-m: 100%;
}

/* The wrapper and the cut bars fill the right two thirds of the photo, so it
   is anchored right to keep them clear of the panel. */
.ms-slide--tycinka {
	--ms-photo: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/hero/tycinka.webp');
	--ms-photo-at: 100%;
	--ms-photo-m: 70%;
}

.ms-slide__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 560px;
	max-width: 100%;
	padding: 48px 48px 44px;
	border-radius: 36px;
	background: var(--ms-bazalka);
}

.ms-slide__panel > * {
	opacity: 0;
	translate: 0 12px;
	transition:
		opacity 0.25s ease,
		translate 0s 0.25s;
}

.ms-slide.is-active .ms-slide__panel > *,
.ms-hero:not(.is-ready) .ms-slide:first-child .ms-slide__panel > * {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity 0.5s ease var(--ms-delay, 0.25s),
		translate 0.8s var(--ms-ease) var(--ms-delay, 0.25s);
}

.ms-slide__panel > :nth-child(2) {
	--ms-delay: 0.3s;
}

.ms-slide__panel > :nth-child(3) {
	--ms-delay: 0.35s;
}

.ms-slide__panel > :nth-child(4) {
	--ms-delay: 0.4s;
}

.ms-home .ms-slide__kicker {
	color: var(--ms-smetana);
	font-size: 19px;
	line-height: 24px;
}

.ms-slide__title {
	color: var(--ms-smetana);
	font-size: 64px;
	font-weight: 500;
	line-height: 71px;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.ms-home .ms-slide__text {
	color: var(--ms-smetana);
	font-size: 18px;
	line-height: 27px;
}

.ms-home .ms-slide__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: auto;
}

.ms-slide__actions a.ms-pill {
	color: var(--ms-bazalka);
	font-weight: 400;
}

.ms-slide__actions a.ms-pill:hover {
	color: var(--ms-spenat);
}

a.ms-slide__more {
	color: var(--ms-smetana);
	font-size: 18px;
	line-height: 22px;
	text-decoration: none;
	text-underline-offset: 4px;
}

a.ms-slide__more:hover {
	color: var(--ms-smetana);
	text-decoration: underline;
}

/* Tabs: a packshot, the product and one figure. The active tab lifts onto
   white and its bar fills for as long as the slide stays up; custom.js moves
   on when the fill's animation ends. */
.ms-hero__tabs {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-tab {
	--ms-hero-interval: 7s;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
	transition:
		background-color 0.4s ease,
		box-shadow 0.4s ease;
}

.ms-tab::marker {
	content: '';
}

.ms-tab:hover {
	background: #fff;
}

.ms-tab.is-active,
.ms-hero:not(.is-ready) .ms-tab:first-child {
	background: #fff;
	box-shadow: 0 20px 50px rgba(14, 73, 19, 0.18);
}

.ms-tab > a {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: 16px;
	row-gap: 4px;
	height: 100%;
	padding: 14px 20px 18px 14px;
	border-radius: inherit;
	color: var(--ms-inkoust);
	text-decoration: none !important;
}

.ms-tab > a::before {
	content: '';
	grid-row: 1 / -1;
	align-self: center;
	width: 72px;
	height: 72px;
	border-radius: 20px;
	background: #fff var(--ms-pack) var(--ms-pack-at, 50% 40%) /
		var(--ms-pack-size, 130%) no-repeat;
}

.ms-tab__name {
	grid-row: 2;
	font-size: 16px;
	line-height: 20px;
}

.ms-tab__meta {
	grid-row: 3;
	color: rgba(31, 53, 36, 0.65);
	font-size: 14px;
	line-height: 18px;
}

.ms-tab::before,
.ms-tab::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 4px;
	border-radius: var(--ms-r-pill);
	opacity: 0;
}

.ms-tab::before {
	background: var(--ms-mist);
}

.ms-tab::after {
	background: var(--ms-bazalka);
	transform-origin: left;
	scale: 0 1;
}

.ms-hero.is-ready .ms-tab.is-active::before,
.ms-hero.is-ready .ms-tab.is-active::after {
	opacity: 1;
}

.ms-hero.is-ready .ms-tab.is-active::after {
	animation: ms-hero-progress var(--ms-hero-interval) linear both;
}

.ms-hero.is-paused .ms-tab.is-active::after,
.ms-hero:hover .ms-tab.is-active::after,
.ms-hero:focus-within .ms-tab.is-active::after {
	animation-play-state: paused;
}

/* Without motion the slides change only on a tab, so there is no timer to show. */
.ms-hero.is-static .ms-tab::before,
.ms-hero.is-static .ms-tab::after {
	display: none;
}

.ms-tab--granola {
	--ms-pack: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/pack-granola.png');
}

.ms-tab--kase {
	--ms-pack: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/hero/kase.webp');
	--ms-pack-at: 100% 50%;
	--ms-pack-size: auto 112%;
}

.ms-tab--livance {
	--ms-pack: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/pack-livance.png');
}

.ms-tab--tycinka {
	--ms-pack: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/pack-tycinka.png');
	--ms-pack-at: 50%;
	--ms-pack-size: 150%;
}

@keyframes ms-slide-in {
	from {
		opacity: 0;
	}
}

@keyframes ms-hero-progress {
	to {
		scale: 1 1;
	}
}

/* Below 1200px the tabs keep a 236px minimum and scroll sideways, out to the
   screen edges, once four of those no longer fit. */
@media (max-width: 1199px) {
	.ms-hero__tabs {
		gap: 10px;
		margin: 0 calc(-1 * var(--ms-gutter));
		padding: 4px var(--ms-gutter) 36px;
		overflow-x: auto;
		scroll-padding-inline: var(--ms-gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ms-hero__tabs::-webkit-scrollbar {
		display: none;
	}

	.ms-tab {
		flex: 1 0 236px;
		scroll-snap-align: start;
	}

	.ms-tab.is-active,
	.ms-hero:not(.is-ready) .ms-tab:first-child {
		box-shadow: 0 12px 30px rgba(14, 73, 19, 0.16);
	}

	.ms-tab > a {
		grid-template-columns: 60px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 2px;
		padding: 10px 16px 14px 10px;
	}

	.ms-tab > a::before {
		width: 60px;
		height: 60px;
		border-radius: 18px;
	}

	.ms-tab__name {
		font-size: 15px;
		line-height: 19px;
	}

	.ms-tab__meta {
		font-size: 13px;
		line-height: 17px;
	}

	.ms-tab::before,
	.ms-tab::after {
		left: 16px;
		right: 16px;
	}
}

.ms-tile {
	position: absolute;
	z-index: 0;
	border-radius: var(--ms-r-photo);
	box-shadow: var(--ms-shadow-photo);
	rotate: var(--ms-tilt);
}

@keyframes ms-float {
	50% {
		translate: 0 -12px;
	}
}

/* Statement: one large sentence and the proof row */
.ms-statement {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	text-align: center;
}

.ms-home .ms-statement__text {
	max-width: 1040px;
	color: var(--ms-inkoust);
	font-size: 64px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.ms-stats {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ms-stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0 !important;
	padding: 0 40px;
	border-left: 1px solid rgba(31, 53, 36, 0.15);
}

.ms-stats li:first-child {
	border-left: 0;
}

.ms-stats strong {
	color: var(--ms-inkoust);
	font-size: 28px;
	font-weight: 400;
	line-height: 34px;
	letter-spacing: -0.02em;
}

.ms-stats span {
	color: var(--ms-text-faint);
	font-size: 14px;
	line-height: 20px;
}

/* Three claims, each on one approved colour combination */
.ms-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* Each card shows the product its claim is about: the packshot is drawn as a
   pseudo-element, tilted and cropped by the card's top-right corner, so the
   pasted markup stays text-only. */
.ms-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	min-height: 440px;
	padding: 36px;
	border-radius: var(--ms-r-panel);
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.6s var(--ms-ease);
}

.ms-card::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -56px;
	right: -72px;
	width: 380px;
	aspect-ratio: 4 / 3;
	background: center / contain no-repeat;
	filter: drop-shadow(0 24px 30px rgba(14, 73, 19, 0.22));
	rotate: var(--ms-tilt, 8deg);
	transition:
		rotate 0.6s var(--ms-ease),
		scale 0.6s var(--ms-ease);
}

.ms-card:hover::before {
	rotate: 0deg;
	scale: 1.05;
}

.ms-card--cream::before {
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/pack-livance.png');
}

.ms-card--pea::before {
	--ms-tilt: -7deg;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/pack-granola.png');
}

.ms-card--dark::before {
	--ms-tilt: 12deg;
	top: -24px;
	width: 420px;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/pack-tycinka.png');
}

.ms-card:hover {
	transform: translateY(-6px) rotate(-1deg);
}

.ms-card:nth-child(even):hover {
	transform: translateY(-6px) rotate(1deg);
}

.ms-home .ms-card__title {
	font-size: 34px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

.ms-home .ms-card__text {
	font-size: 17px;
	line-height: 26px;
}

.ms-card--cream {
	background: var(--ms-smetana);
}

.ms-card--cream .ms-card__title {
	color: var(--ms-bazalka);
}

.ms-home .ms-card--cream .ms-card__text {
	color: var(--ms-text-soft);
}

.ms-card--pea {
	background: var(--ms-hrasek);
}

.ms-card--pea .ms-card__title,
.ms-home .ms-card--pea .ms-card__text {
	color: var(--ms-spenat);
}

.ms-card--dark {
	background: var(--ms-spenat);
}

.ms-card--dark .ms-card__title {
	color: var(--ms-smetana);
}

.ms-home .ms-card--dark .ms-card__text {
	color: rgba(253, 246, 228, 0.8);
}

/* Photo collage on a Smetana panel beside the copy */
.ms-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 96px;
}

.ms-collage {
	position: relative;
	font-size: 0;
	line-height: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--ms-r-panel);
	background: var(--ms-smetana);
	overflow: hidden;
}

/* The collage photos are pseudo-elements, not child divs: the welcome editor
   deletes a wrapper's children when they are all empty, which left a bare
   Smetana panel. The panel itself survives because .ms-split__copy is its
   sibling, and comes back holding &nbsp;, hence font-size: 0. */
.ms-collage::before,
.ms-collage::after {
	content: '';
	position: absolute;
	border-radius: var(--ms-r-photo);
	box-shadow: 0 24px 60px rgba(31, 53, 36, 0.16);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--ms-mist);
	transition: rotate 0.6s var(--ms-ease);
}

.ms-collage::before {
	top: 8%;
	left: 7%;
	width: 50%;
	aspect-ratio: 4 / 5;
	rotate: -7deg;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/granola-jar.jpg');
}

.ms-collage::after {
	right: -4%;
	bottom: -6%;
	width: 58%;
	aspect-ratio: 4 / 3;
	rotate: 5deg;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/granola-yogurt.jpg');
}

.ms-collage:hover::before,
.ms-collage:hover::after {
	rotate: 0deg;
}

.ms-split__copy p {
	max-width: 52ch;
}

/* Three steps */
.ms-flow {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ms-flow .ms-title {
	max-width: 16ch;
	margin-bottom: 56px !important;
}

.ms-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: ms-step;
}

.ms-steps li {
	margin: 0 !important;
	padding: 32px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-mist);
}

.ms-steps li::before {
	counter-increment: ms-step;
	content: counter(ms-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 56px;
	border-radius: 50%;
	background: var(--ms-bazalka);
	color: var(--ms-smetana);
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.02em;
}

.ms-steps li::marker {
	content: '';
}

.ms-home .ms-steps__title {
	margin-bottom: 8px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.ms-home .ms-steps__text {
	font-size: 17px;
	line-height: 26px;
}

/* App panel: Špenát with Smetana text. The phone is a real screen of the app
   (the meal-recognition result), cut out of the App Store screenshot mural and
   drawn as the stage's own background so the stage can stay an empty element.
   It runs off the bottom edge on purpose. */
.ms-app {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: stretch;
	border-radius: var(--ms-r-panel);
	background: var(--ms-spenat);
	overflow: hidden;
}

.ms-app__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 72px;
}

.ms-app .ms-title {
	color: var(--ms-smetana);
}

.ms-home .ms-app p {
	max-width: 46ch;
	margin-bottom: 36px;
	color: rgba(253, 246, 228, 0.8);
}

.ms-app__stage {
	min-height: 600px;
	background-color: var(--ms-hrasek);
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/app-phone.png');
	background-position: center top 56px;
	background-repeat: no-repeat;
	background-size: auto 720px;
	font-size: 0;
	line-height: 0;
}

/* What the app does, as chips */
.ms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 36px !important;
	padding: 0 !important;
	list-style: none !important;
}

.ms-chips li {
	margin: 0 !important;
	padding: 8px 14px;
	border-radius: var(--ms-r-pill);
	background: rgba(253, 246, 228, 0.12);
	color: var(--ms-smetana);
	font-size: 15px;
	line-height: 18px;
}

.ms-chips li::marker {
	content: '';
}

.ms-home .ms-app p {
	margin-bottom: 24px;
}

.ms-split__copy p + p {
	margin-top: 16px;
}

/* Closing panel */
.ms-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 560px;
	padding: 96px 24px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-bazalka);
	overflow: hidden;
	isolation: isolate;
}

.ms-cta__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.ms-cta__title {
	color: var(--ms-smetana);
	font-size: 96px;
	font-weight: 500;
	line-height: 100px;
	letter-spacing: -0.045em;
}

.ms-home .ms-cta__text {
	max-width: 560px;
	color: rgba(253, 246, 228, 0.8);
	font-size: 20px;
	line-height: 31px;
}

.ms-cta__body .ms-pill {
	margin-top: 8px;
}

.ms-cta .ms-tile {
	animation: ms-float var(--ms-float, 7s) ease-in-out infinite;
}

.ms-tile--5 {
	--ms-tilt: -10deg;
	top: 70px;
	left: 60px;
	width: 220px;
	height: 220px;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/granola-jar.jpg');
}

.ms-tile--6 {
	--ms-tilt: 9deg;
	--ms-float: 9s;
	top: 60px;
	right: 54px;
	width: 230px;
	height: 200px;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/palacinky.jpg');
}

/* The mascot peeks over the bottom edge; one per page, always smiling. */
.ms-cta__mascot {
	position: absolute;
	right: 96px;
	bottom: -34px;
	width: 180px;
	height: 205px;
	background-color: transparent;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify-next/assets/home/maskot.svg');
	background-size: contain;
	transform-origin: 50% 90%;
	animation: ms-wave 4s ease-in-out infinite;
}

@keyframes ms-wave {
	0%,
	60%,
	100% {
		rotate: 0deg;
	}

	70%,
	90% {
		rotate: -6deg;
	}

	80% {
		rotate: 5deg;
	}
}

/* Shoptet's own homepage rows, between the hero and the rest of the block */
body.in-index:has(.ms-home) .benefit-banners-full-width {
	margin: 24px 0 0;
}

body.in-index:has(.ms-home) .homepage-group-title {
	margin-top: 96px;
}

body.in-index .homepage-latest-contribution-full-width,
body.in-index .footer-banners {
	margin-top: 96px;
}

body.in-index:has(.ms-home) .content-wrapper {
	padding-bottom: 140px;
}

/* --------------------------------------------------------------------------
   19b. Product pages (blocks/products/<slug>.html and <slug>.short.html)

   .ms-pd is a product's "Popis", .ms-ps its "Krátký popis". Both are pasted
   into Shoptet's product editor, which keeps <img> but not inline styles or
   SVG, so the markup is classes and the product's own Shoptet-hosted photos.
   They replace the older .ms-product / .ms-short markup (section 18b).
   -------------------------------------------------------------------------- */

.basic-description:has(.ms-pd) > h4:first-child {
	display: none;
}

.ms-pd {
	display: flex;
	flex-direction: column;
	gap: 120px;
	color: var(--ms-inkoust);
	font-size: 18px;
	line-height: 1.6;
}

.ms-pd h2,
.ms-pd h3,
.ms-pd p,
.ms-pd ul,
.ms-pd ol,
.ms-pd dl,
.ms-pd dd {
	margin: 0;
	padding: 0;
}

.ms-pd p {
	color: var(--ms-text-soft);
	font-size: 18px;
	line-height: 29px;
}

.ms-pd p + p {
	margin-top: 14px;
}

.ms-pd ul,
.ms-pd ol {
	list-style: none;
}

.ms-pd li::marker {
	content: '';
}

/* The editor wraps a bare <img> in <p>; keep that wrapper invisible. */
.ms-pd p:has(> img:only-child) {
	display: contents;
}

.ms-pd img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ms-pd .ms-title {
	max-width: 18ch;
	font-size: 48px;
}

.ms-pd-lead {
	max-width: 46ch;
}

.ms-pd .ms-pd-lead {
	color: var(--ms-inkoust);
	font-size: 21px;
	line-height: 32px;
}

.ms-pd .ms-pd-subtitle {
	margin-top: 36px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.ms-pd .ms-pd-subtitle + .ms-checks {
	margin-top: 18px !important;
}

/* Hero: the product photo as a wide panel, copy underneath on the left */
.ms-pd-hero {
	display: grid;
	gap: 56px;
}

.ms-pd-hero__photo {
	width: 100%;
	aspect-ratio: 16 / 8;
	border-radius: var(--ms-r-panel);
	object-fit: cover;
}

.ms-pd-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 96px;
	align-items: end;
}

.ms-pd-hero__body .ms-label {
	grid-column: 1 / -1;
}

.ms-pd-hero__body .ms-title {
	margin-bottom: 0 !important;
}

/* Per-portion figures: big numbers on a Smetana band, claims as pills */
.ms-pd-numbers {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 64px 48px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-smetana);
	text-align: center;
}

.ms-pd .ms-pd-numbers__caption {
	color: var(--ms-text-faint);
	font-size: 15px;
	line-height: 20px;
}

.ms-pd-figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
}

.ms-pd-figures li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 24px;
	border-left: 1px solid var(--ms-line);
}

.ms-pd-figures li:first-child {
	border-left: 0;
}

.ms-pd-figures strong {
	color: var(--ms-bazalka);
	font-size: 64px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.ms-pd-figures span {
	color: var(--ms-text-soft);
	font-size: 16px;
	line-height: 22px;
}

.ms-pd-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.ms-pd-tags li {
	padding: 8px 16px;
	border-radius: var(--ms-r-pill);
	background: #fff;
	color: var(--ms-inkoust);
	font-size: 15px;
	line-height: 20px;
}

/* Photo beside copy */
.ms-pd-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 96px;
}

.ms-pd-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--ms-r-photo);
	object-fit: cover;
}

.ms-pd-split--reverse .ms-pd-photo,
.ms-pd-split--reverse > p:has(> img:only-child) > .ms-pd-photo {
	order: 2;
}

.ms-pd-split--reverse > p:has(> img:only-child) {
	order: 2;
}

.ms-pd-split__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Generic section: label + title, then content */
.ms-pd-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ms-pd-section > .ms-title {
	margin-bottom: 48px !important;
}

/* Ingredient cards, cycling through the approved colour pairs */
.ms-pd-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.ms-pd-cards li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 220px;
	padding: 32px;
	border-radius: var(--ms-r-card);
	background: var(--ms-mist);
	transition: transform 0.6s var(--ms-ease);
}

/* A short last row stretches instead of leaving a hole in the grid. */
.ms-pd-cards li:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
}

.ms-pd-cards li:last-child:nth-child(3n + 2) {
	grid-column: span 2;
}

.ms-pd-cards li:hover {
	transform: translateY(-4px);
}

.ms-pd-cards h3 {
	margin-top: auto !important;
	color: var(--ms-inkoust);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.ms-pd .ms-pd-cards p {
	font-size: 16px;
	line-height: 24px;
}

.ms-pd-cards li:nth-child(4n + 1) {
	background: var(--ms-smetana);
}

.ms-pd-cards li:nth-child(4n + 1) h3 {
	color: var(--ms-bazalka);
}

.ms-pd-cards li:nth-child(4n + 2) {
	background: var(--ms-hrasek);
}

.ms-pd-cards li:nth-child(4n + 2) h3,
.ms-pd .ms-pd-cards li:nth-child(4n + 2) p {
	color: var(--ms-spenat);
}

.ms-pd-cards li:nth-child(4n + 3) {
	background: var(--ms-spenat);
}

.ms-pd-cards li:nth-child(4n + 3) h3 {
	color: var(--ms-smetana);
}

.ms-pd .ms-pd-cards li:nth-child(4n + 3) p {
	color: rgba(253, 246, 228, 0.8);
}

/* Bazalka panel with three big figures */
.ms-pd-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
	padding: 72px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-bazalka);
}

.ms-pd-panel .ms-title {
	color: var(--ms-smetana);
}

.ms-pd .ms-pd-panel p {
	color: rgba(253, 246, 228, 0.85);
}

.ms-pd-badges {
	display: grid;
	gap: 12px;
}

.ms-pd-badges li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 28px;
	border-radius: var(--ms-r-card);
	background: rgba(253, 246, 228, 0.12);
}

.ms-pd-badges strong {
	color: var(--ms-smetana);
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
}

.ms-pd-badges span {
	color: rgba(253, 246, 228, 0.85);
	font-size: 17px;
	line-height: 22px;
}

/* Numbered recipe / preparation steps */
.ms-pd-recipe {
	display: grid;
	gap: 10px;
	width: 100%;
	margin-top: 28px !important;
	counter-reset: ms-recipe;
}

.ms-pd-recipe li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px 14px 14px;
	border-radius: var(--ms-r-input);
	background: var(--ms-mist);
	color: var(--ms-text-soft);
	font-size: 17px;
	line-height: 24px;
}

.ms-pd-recipe li::before {
	counter-increment: ms-recipe;
	content: counter(ms-recipe);
	display: flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 50%;
	background: var(--ms-bazalka);
	color: var(--ms-smetana);
	font-size: 16px;
	line-height: 1;
}

.ms-pd-recipe strong {
	color: var(--ms-inkoust);
	font-weight: 500;
}

.ms-pd .ms-pd-note {
	margin-top: 20px;
	color: var(--ms-text-faint);
	font-size: 16px;
	line-height: 24px;
}

/* Step cards for longer preparations (reuses the homepage .ms-steps look) */
.ms-pd .ms-steps {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-pd .ms-steps li::before {
	margin-bottom: 40px;
}

.ms-pd .ms-steps h3 {
	margin-bottom: 8px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.ms-pd .ms-steps p {
	font-size: 16px;
	line-height: 24px;
}

/* App panel: Špenát copy beside the product's in-app screenshot */
.ms-pd-app {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: stretch;
	border-radius: var(--ms-r-panel);
	background: var(--ms-spenat);
	overflow: hidden;
}

.ms-pd-app__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 72px;
}

.ms-pd-app .ms-title {
	color: var(--ms-smetana);
}

.ms-pd .ms-pd-app p {
	margin-bottom: 32px;
	color: rgba(253, 246, 228, 0.8);
}

.ms-pd-app__photo {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
}

/* Nutrition table beside the label details */
.ms-pd-facts {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: start;
	gap: 20px;
}

.ms-pd-facts__table,
.ms-pd .ms-pd-details {
	padding: 40px;
	border-radius: var(--ms-r-panel);
	background: var(--ms-mist);
}

.ms-pd .ms-pd-heading {
	margin-bottom: 24px;
	color: var(--ms-inkoust);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.ms-pd .ms-pd-nutrition {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: 16px;
	line-height: 22px;
}

.ms-pd .ms-pd-nutrition th,
.ms-pd .ms-pd-nutrition td {
	padding: 12px 0 12px 16px;
	border: 0;
	border-top: 1px solid var(--ms-line);
	background: none;
	color: var(--ms-inkoust);
	font-weight: 400;
	text-align: right;
	white-space: nowrap;
}

.ms-pd .ms-pd-nutrition th:first-child {
	padding-left: 0;
	text-align: left;
	white-space: normal;
}

.ms-pd .ms-pd-nutrition thead th {
	border-top: 0;
	color: var(--ms-text-faint);
	font-size: 14px;
}

.ms-pd .ms-pd-nutrition td:last-child,
.ms-pd .ms-pd-nutrition thead th:last-child {
	color: var(--ms-bazalka);
	font-weight: 500;
}

.ms-pd .ms-pd-nutrition .ms-pd-sub th {
	padding-left: 16px;
	color: var(--ms-text-soft);
}

.ms-pd .ms-pd-nutrition .ms-pd-sub th,
.ms-pd .ms-pd-nutrition .ms-pd-sub td {
	border-top-style: dashed;
}

.ms-pd-details {
	display: flex;
	flex-direction: column;
}

.ms-pd-details dt {
	margin-top: 24px;
	color: var(--ms-text-faint);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.ms-pd-details dt:first-child {
	margin-top: 0;
}

.ms-pd-details dd {
	margin-top: 6px !important;
	color: var(--ms-inkoust);
	font-size: 16px;
	line-height: 25px;
}

.ms-pd-details dd strong {
	font-weight: 500;
}

.ms-pd-details .ms-pd-details__small {
	color: var(--ms-text-faint);
	font-size: 14px;
	line-height: 20px;
}

/* Short description beside the buy box */
.p-short-description .ms-ps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-short-description .ms-ps p,
.p-short-description .ms-ps ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-short-description .ms-ps li::marker {
	content: '';
}

.p-short-description .ms-ps .ms-ps__lead {
	color: var(--ms-inkoust);
	font-size: 18px;
	line-height: 28px;
}

.ms-ps__portion {
	padding: 18px 20px 20px;
	border-radius: var(--ms-r-card);
	background: var(--ms-smetana);
}

.p-short-description .ms-ps .ms-ps__caption {
	margin-bottom: 12px;
	color: var(--ms-text-faint);
	font-size: 14px;
	line-height: 20px;
}

.ms-ps__figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ms-ps__figures li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 16px;
	border-left: 1px solid var(--ms-line);
}

.ms-ps__figures li:first-child {
	padding-left: 0;
	border-left: 0;
}

.ms-ps__figures strong {
	color: var(--ms-bazalka);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.ms-ps__figures span {
	color: var(--ms-text-soft);
	font-size: 14px;
	line-height: 20px;
}

.p-short-description .ms-ps .ms-ps__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ms-ps__tags li {
	padding: 6px 12px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-mist);
	color: var(--ms-inkoust);
	font-size: 14px;
	line-height: 18px;
}

.p-short-description .ms-ps .ms-ps__note {
	color: var(--ms-text-soft);
	font-size: 15px;
	line-height: 22px;
}

@media (max-width: 991px) {
	.ms-pd {
		gap: 80px;
	}

	.ms-pd .ms-title {
		font-size: 36px;
	}

	.ms-pd-hero__body,
	.ms-pd-split,
	.ms-pd-panel,
	.ms-pd-app,
	.ms-pd-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ms-pd-hero__body .ms-title {
		margin-bottom: 16px !important;
	}

	.ms-pd-split--reverse .ms-pd-photo,
	.ms-pd-split--reverse > p:has(> img:only-child) {
		order: 0;
	}

	.ms-pd-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}

	.ms-pd-figures li:nth-child(odd) {
		border-left: 0;
	}

	.ms-pd-figures strong {
		font-size: 44px;
	}

	.ms-pd-cards,
	.ms-pd .ms-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-pd-cards li {
		min-height: 0;
	}

	.ms-pd-cards li:last-child:nth-child(n) {
		grid-column: auto;
	}

	.ms-pd-numbers,
	.ms-pd-panel,
	.ms-pd-app__copy,
	.ms-pd-facts__table,
	.ms-pd .ms-pd-details {
		padding: 32px 24px;
	}

	.ms-pd-hero__photo {
		aspect-ratio: 4 / 3;
	}

	.ms-pd .ms-pd-nutrition {
		font-size: 14px;
		line-height: 19px;
	}

	.ms-pd .ms-pd-nutrition th,
	.ms-pd .ms-pd-nutrition td {
		padding-left: 10px;
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	:root {
		--ms-gutter: 32px;
	}

	#header .ms-bar .ms-nav > li > a {
		padding: 10px 14px !important;
	}
}

@media (max-width: 991px) {
	:root {
		--ms-gutter: 20px;
		--ms-r-card: 24px;
		--ms-r-photo: 24px;
		--ms-r-panel: 28px;
	}

	/* backdrop-filter creates a containing block for Shoptet's position:fixed
	   mobile popups, which traps search inside the 60px header. */
	#header {
		background: #fff !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Shoptet toggles the drawer correctly, but its measured inner wrapper can
	   stay at height:0 after the desktop header nodes are restored. */
	body.navigation-window-visible #navigation {
		height: calc(100dvh - 60px) !important;
		max-height: calc(100dvh - 60px);
		overflow-y: auto !important;
		background: #fff !important;
	}

	body.navigation-window-visible #navigation .navigation-in {
		height: auto !important;
		min-height: 100%;
		overflow: visible !important;
		background: #fff !important;
	}

	#navigation .menu-level-1 > li > a {
		padding: 16px 20px;
		border-bottom: 1px solid var(--ms-line-soft);
		color: var(--ms-text);
		font-size: 20px;
		font-weight: 400;
		line-height: 28px;
		letter-spacing: -0.02em;
		text-transform: none;
	}

	#navigation .menu-level-1 > li > a b {
		font-weight: 400;
	}

	h1,
	.h1,
	.category-title,
	.category-top h1,
	.news-item-detail h1,
	article > header h1,
	.cart-heading,
	.p-detail-inner-header h1,
	.p-detail-inner-header-mobile .h1 {
		font-size: 36px;
		line-height: 1.12;
	}

	h2,
	.h2,
	.homepage-group-title,
	.products-header,
	.products-related-header,
	.footer-newsletter h2,
	.footer-newsletter .h4 {
		font-size: 30px;
	}

	h3,
	.h3 {
		font-size: 22px;
	}

	.content-wrapper {
		padding-top: 24px;
		padding-bottom: 64px;
	}

	.p-detail-inner {
		gap: 24px;
	}

	.p-detail .p-image {
		padding: 24px;
	}

	.p-detail .price-final,
	.p-detail .price-final strong {
		font-size: 36px !important;
	}

	.p-detail-full-width,
	.p-detail-tabs-wrapper {
		margin-top: 48px;
	}

	.shp-tabs,
	ul.shp-tabs {
		display: flex;
		border-radius: 26px;
	}

	.benefit-banners-full-width {
		margin: 40px 0;
	}

	.benefitBanner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.benefitBanner__item {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px;
		padding: 18px !important;
	}

	.footer-newsletter-full-width {
		padding: 48px 20px;
	}

	#footer,
	.footer {
		padding-top: 48px;
	}

	.order-summary-inner,
	.summary-wrapper,
	.checkout-box,
	.co-box,
	.cart-content .box,
	.login-wrapper,
	.in-login #formLogin,
	.in-registrace #register-form,
	form.register-form {
		padding: 20px;
	}

	.siteCookies--bottom,
	.siteCookies--bottom.siteCookies--scrolled {
		padding: 0 12px 12px;
	}

	/* Product descriptions */
	.basic-description .ms-product section {
		margin: 56px 0;
	}

	.basic-description .ms-product .product-image {
		margin: 40px 0;
	}

	.basic-description .ms-product h2 {
		max-width: none;
		font-size: 32px;
	}

	.basic-description .ms-product h3 {
		margin-top: 36px;
		font-size: 22px;
	}

	.basic-description .ms-product p {
		font-size: 17px;
	}

	.basic-description .ms-product .lead {
		font-size: 19px;
	}

	.basic-description .ms-product .stat-value {
		font-size: 34px;
	}

	.basic-description .ms-product .highlight,
	.basic-description .ms-product .cta-panel {
		padding: 32px 24px;
	}

	.basic-description .ms-product .recipe-box,
	.basic-description .ms-product .ingredient-card,
	.basic-description .ms-product .serving-card,
	.basic-description .ms-product .step-card,
	.basic-description .ms-product .detail-box {
		padding: 24px;
	}

	.basic-description .ms-product .table-wrap {
		padding: 8px 20px;
	}

	.basic-description .ms-product .check-list,
	.basic-description .ms-product .steps-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Homepage */
	.ms-home > * {
		margin-top: 88px;
	}

	body.in-index:has(.ms-home) .homepage-group-title {
		margin-top: 72px;
	}

	body.in-index:has(.ms-home) .content-wrapper {
		padding-bottom: 88px;
	}

	.ms-home p {
		font-size: 17px;
		line-height: 27px;
	}

	.ms-title {
		font-size: 36px;
	}

	/* Hero: the photo on top, the panel overlapping its bottom edge */
	.ms-hero__slides {
		height: auto;
	}

	.ms-slide {
		flex-direction: column;
		padding: 0;
		border-radius: 0;
		overflow: visible;
	}

	.ms-slide::before {
		position: static;
		height: 400px;
		border-radius: 36px;
		background-position: var(--ms-photo-m, 50%);
		scale: none;
	}

	/* Every panel takes the tallest slide's height, so the green box stays
	   put when the copy changes; the buttons sit on its bottom edge. */
	.ms-slide__panel {
		position: relative;
		flex: 1;
		gap: 16px;
		width: auto;
		margin: -56px 12px 0;
		padding: 28px 24px 24px;
	}

	.ms-slide__kicker {
		display: none;
	}

	.ms-slide__title {
		font-size: 34px;
		line-height: 44px;
	}

	.ms-home .ms-slide__text {
		font-size: 17px;
		line-height: 26px;
	}

	.ms-home .ms-slide__actions {
		padding-top: 6px;
	}

	a.ms-slide__more {
		font-size: 17px;
	}

	.ms-home .ms-statement__text {
		font-size: 34px;
		line-height: 1.18;
	}

	.ms-stats li {
		padding: 0 16px;
	}

	.ms-stats strong {
		font-size: 20px;
		line-height: 26px;
	}

	.ms-stats span {
		font-size: 12px;
		line-height: 16px;
	}

	.ms-cards,
	.ms-steps,
	.ms-split,
	.ms-app {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-cards,
	.ms-steps {
		gap: 12px;
	}

	.ms-card {
		min-height: 300px;
		padding: 28px;
	}

	.ms-card::before,
	.ms-card--dark::before {
		top: -40px;
		right: -56px;
		width: 280px;
	}

	.ms-home .ms-card__title {
		font-size: 28px;
	}

	.ms-split {
		gap: 40px;
	}

	.ms-flow .ms-title {
		margin-bottom: 32px !important;
	}

	.ms-steps li {
		padding: 24px;
	}

	.ms-steps li::before {
		width: 44px;
		height: 44px;
		margin-bottom: 28px;
		font-size: 18px;
	}

	.ms-home .ms-steps__title {
		font-size: 24px;
	}

	.ms-app__copy {
		padding: 40px 24px;
	}

	.ms-app__stage {
		min-height: 420px;
		background-position: center top 40px;
		background-size: auto 560px;
	}

	.ms-cta {
		min-height: 480px;
		padding: 72px 20px 150px;
	}

	.ms-cta__title {
		font-size: 48px;
		line-height: 54px;
	}

	.ms-home .ms-cta__text {
		font-size: 18px;
		line-height: 28px;
	}

	.ms-cta .ms-tile {
		display: none;
	}

	.ms-cta__mascot {
		right: calc(50% - 60px);
		bottom: -24px;
		width: 120px;
		height: 137px;
	}
}

@media (max-width: 575px) {
	.ms-home .ms-slide__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		text-align: center;
	}

	.ms-ps__figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 16px;
	}

	.ms-ps__figures li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.ms-ps__figures li:nth-child(even) {
		padding-left: 16px;
		border-left: 1px solid var(--ms-line);
	}

	.cart-inner.cart-empty {
		padding: 48px 24px;
	}

	.cart-empty .cart-heading {
		font-size: 30px !important;
	}

	.products .product,
	.products-block .product {
		padding: 6px !important;
	}

	.product .p > .image {
		padding: 16px !important;
	}

	.product .p .name {
		font-size: 16px !important;
	}

	.product .price-final,
	.product .price-final strong {
		font-size: 18px !important;
	}

	.product .p-bottom > div {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'rating'
			'availability'
			'prices'
			'tools';
		grid-template-rows: auto;
		gap: 8px 0;
	}

	.product .p-tools,
	.product .p-tools .btn {
		width: 100% !important;
	}

	.cart-header li:not(.active) > a span,
	.cart-header li:not(.active) > strong span {
		display: none !important;
	}

	.listSorting__controls {
		border-radius: 24px;
	}

	.p-detail .add-to-cart .btn,
	.p-detail .add-to-cart-button {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}