/* ==========================================================================
   Moje Stravování — Shoptet theme override
   Matches https://www.mojestravovani.cz visual language.
   Paste into Shoptet admin → HTML kódy → "before </head>" wrapped in <style>.
   ========================================================================== */

:root {
	/* Brand */
	--ms-green: #a1ea34; /* primary fill */
	--ms-green-hover: #82cf13;
	--ms-green-ink: #1c3f34; /* text on primary */
	--ms-green-accent: #62a50b; /* links / eyebrows */
	--ms-green-tint: #f7fee7; /* image + panel wash */
	--ms-green-soft: #ebfdca; /* pills on the wash */
	--ms-green-deep: #3e6311; /* text on soft / wash */

	/* Neutrals */
	--ms-fg: #0f172a; /* headings, strong text */
	--ms-muted: #4b5563; /* body copy */
	--ms-subtle: #6b7280; /* meta */
	--ms-card: #f9fafb; /* card surface */
	--ms-border: #e5e7eb;
	--ms-border-soft: #f3f4f6;

	/* Shape */
	--ms-r-sm: 8px;
	--ms-r: 12px; /* buttons, inputs */
	--ms-r-lg: 16px; /* cards */
	--ms-r-xl: 24px; /* large panels */

	--ms-container: 1280px;
	--ms-gutter: 32px;
}

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

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

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
	font-family: inherit;
	color: var(--ms-fg);
	font-weight: 600;
	letter-spacing: -0.025em;
	text-transform: none;
}

h1,
.h1 {
	font-size: 60px;
	line-height: 1;
	margin: 0 0 24px;
}

h2,
.h2 {
	font-size: 36px;
	line-height: 1.5;
	margin: 0 0 24px;
}

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

h4,
.h4 {
	font-size: 20px;
	line-height: 1.4;
	margin: 0 0 12px;
}

p {
	color: var(--ms-muted);
	line-height: 26px;
}

a {
	color: var(--ms-green-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--ms-green-hover);
	text-decoration: none;
}

/* Section headings on the homepage ("Náš výběr" etc.) */
.homepage-group-title,
.products-block-header,
.footer-newsletter h2 {
	font-size: 36px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--ms-fg);
	text-align: center;
	text-transform: none;
	margin: 0 0 40px;
}

/* --------------------------------------------------------------------------
   2. Layout — constrain full-bleed blocks to the reference container width
   -------------------------------------------------------------------------- */

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

.content-wrapper {
	padding-top: 64px;
	padding-bottom: 64px;
}

/* Already inside .content-wrapper's container — don't constrain twice. */
.welcome-wrapper {
	margin: 0;
	padding: 48px 0 0;
}

.welcome-wrapper .h1,
.welcome-wrapper h1 {
	font-size: 40px;
	line-height: 1.2;
}

.welcome-wrapper p {
	max-width: 75ch;
}

/* --------------------------------------------------------------------------
   3. Header — single row: logo | nav | actions (desktop)
   -------------------------------------------------------------------------- */

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

/* Sticky is desktop-only: on mobile Shoptet uses position:fixed plus a
   matching padding-top on the wrapper, so overriding it to sticky puts the
   header back in flow and leaves that padding as an empty 60px band. */
@media (min-width: 992px) {
	#header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

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

/* custom.js lifts the logo, menu and action icons into .ms-bar — the stock
   second row is then empty, so collapse it. */
.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;
}

/* Shoptet lays the header-top row out as three 33.3% columns; our single bar
   has to opt out of that explicitly. */
#header .ms-bar {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 0 !important;
	float: none !important;
}

/* Desktop only — below 992px Shoptet's own (flex) mobile header is left
   untouched, since custom.js doesn't build .ms-bar there. */
@media (min-width: 992px) {
	#header .header-top-wrapper {
		display: block !important;
		padding-top: 0;
		padding-bottom: 0;
	}
}

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

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

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

/* Main menu — sentence case, ghost-button hover like the reference nav */
#header .ms-bar .ms-nav {
	display: flex !important;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	margin: 0 0 0 24px !important;
	padding: 0 !important;
	list-style: none;
	position: static !important;
	background: transparent !important;
	border: 0;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	overflow: visible !important;
}

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

#header .ms-bar .ms-nav > li > a {
	display: block !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ms-fg) !important;
	padding: 8px 16px !important;
	border-radius: var(--ms-r);
	height: auto !important;
	background: transparent !important;
	transition: background-color 0.15s 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 {
	background: #f3f4f6 !important;
	color: var(--ms-fg) !important;
}

#header .ms-bar .ms-nav > li > a::after,
#header .ms-bar .ms-nav > li > a::before {
	display: none !important; /* kill the stock underline indicator */
}

/* Header icon buttons (search / login / cart) */
#header .ms-bar .navigation-buttons {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	position: static;
	width: auto !important;
	max-width: none !important;
}

/* Desktop only. On mobile Shoptet hides some of these buttons (login) and
   shows the hamburger; forcing display here would resurrect them.
   NB: Shoptet's JS rewrites id="x" into data-testid="x" at runtime, so
   #hamburgerMenu never matches on the live page — target the testid. */
@media (min-width: 992px) {
	#header .navigation-buttons > a:not([data-testid='hamburgerMenu']),
	#header .navigation-buttons > button {
		color: var(--ms-fg) !important;
		border-radius: var(--ms-r);
		width: 40px !important;
		height: 40px !important;
		min-width: 0;
		margin: 0 !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: transparent !important;
		border: 0 !important;
		transition: background-color 0.15s ease;
	}

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

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

.navigation-buttons .cart-count[data-count]::after {
	background: var(--ms-green);
	color: var(--ms-green-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn,
button.btn,
a.btn,
input[type='submit'].btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	border-radius: var(--ms-r);
	height: 44px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	box-shadow: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.btn-primary,
.btn-cart,
.add-to-cart-button,
.btn-conversion,
button[type='submit'].btn {
	background: var(--ms-green);
	color: var(--ms-green-ink);
}

.btn-primary:hover,
.btn-cart:hover,
.add-to-cart-button:hover,
.btn-conversion:hover,
button[type='submit'].btn:hover {
	background: var(--ms-green-hover);
	color: var(--ms-green-ink);
}

.btn-secondary,
.btn-default {
	background: #fff;
	color: var(--ms-fg);
	border: 1px solid var(--ms-border);
}

.btn-secondary:hover,
.btn-default:hover {
	background: #f9fafb;
	color: var(--ms-fg);
}

/* --------------------------------------------------------------------------
   5. Hero carousel + top banners
   -------------------------------------------------------------------------- */

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

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

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

/* On desktop the carousel and the two banners below it sit flush against each
   other as one block, so only the block's four outer corners are rounded —
   the seams between them stay square. Mobile stacks them as separate cards,
   so it keeps the all-round radius above. */
@media (min-width: 992px) {
	.carousel-wrapper .wide-carousel,
	.carousel-wrapper .carousel,
	.carousel-wrapper .carousel-inner,
	.carousel-wrapper .item img,
	.next-to-carousel-banners .banner-wrapper,
	.next-to-carousel-banners .banner-wrapper img {
		border-radius: 0;
	}

	.carousel-wrapper .wide-carousel,
	.carousel-wrapper .carousel,
	.carousel-wrapper .carousel-inner,
	.carousel-wrapper .item img {
		border-top-left-radius: var(--ms-r-xl);
		border-top-right-radius: var(--ms-r-xl);
	}

	.next-to-carousel-banners .banner-wrapper:first-child,
	.next-to-carousel-banners .banner-wrapper:first-child img {
		border-bottom-left-radius: var(--ms-r-xl);
	}

	.next-to-carousel-banners .banner-wrapper:last-child,
	.next-to-carousel-banners .banner-wrapper:last-child img {
		border-bottom-right-radius: var(--ms-r-xl);
	}
}

/* Text overlay panel sitting on top of the banner image */
.extended-banner-texts {
	border-radius: var(--ms-r-lg);
	padding: 40px !important;
	gap: 16px;
}

.wide-carousel .extended-banner-title,
.next-to-carousel-banners .extended-banner-title,
.extended-banner-title {
	font-size: 36px !important;
	line-height: 1.15 !important;
	font-weight: 600 !important;
	letter-spacing: -0.025em;
	color: var(--ms-fg) !important;
	text-transform: none !important;
	margin: 0 !important;
}

.next-to-carousel-banners .extended-banner-title {
	font-size: 28px !important;
}

.wide-carousel .extended-banner-text,
.next-to-carousel-banners .extended-banner-text,
.extended-banner-text {
	color: var(--ms-muted) !important;
	font-size: 15px !important;
	line-height: 24px !important;
	margin: 0 !important;
}

.wide-carousel .extended-banner-link,
.next-to-carousel-banners .extended-banner-link,
.extended-banner-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: auto !important;
	height: 44px !important;
	padding: 0 24px !important;
	border-radius: var(--ms-r) !important;
	background: var(--ms-green) !important;
	color: var(--ms-green-ink) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

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

/* --------------------------------------------------------------------------
   6. Benefit banners (Garance doručení / Dárek zdarma / …)
   -------------------------------------------------------------------------- */

.benefitBanner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0;
	border: 0;
	background: transparent;
}

.benefitBanner__item {
	flex: 1 1 200px;
	background: var(--ms-card) !important;
	border-radius: var(--ms-r-lg);
	border: 0 !important;
	padding: 32px 24px !important;
	text-align: center;
	margin: 0 !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
}

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

/* NB: these icons are raster images with opaque backgrounds, so a
   filter-based recolour fills the whole box. Leave the artwork alone —
   swap the source files in Shoptet admin if the teal needs to go. */
.benefitBanner__img {
	width: 48px !important;
	height: 48px !important;
	object-fit: contain;
}

.benefitBanner__content {
	width: 100%;
}

.benefitBanner__title {
	display: block !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--ms-fg) !important;
	letter-spacing: -0.01em;
	text-transform: none !important;
	margin: 0 0 4px !important;
}

.benefitBanner__data {
	color: var(--ms-muted) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

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

.products .product {
	border: 0 !important;
	padding: 8px !important;
}

/* The card itself carries no surface: only the thumbnail sits on an off-white
   tile, and the title/price/button area runs straight on the page background.
   The tile is what reads as "the card", so the radius and hover live there. */
.product .p {
	background: transparent !important;
	border-radius: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	height: 100%;
	display: flex !important;
	flex-direction: column;
	/* stretch, not center — otherwise the image/text children shrink-wrap
	   and the card collapses on category pages. */
	align-items: stretch !important;
	text-align: left;
}

/* Fixed-ratio tile so every card's image area is the same height, with the
   photo centred inside it rather than filling it. */
.product .p > .image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	aspect-ratio: 4 / 3;
	align-self: stretch;
	background: var(--ms-card) !important;
	border-radius: var(--ms-r-lg) !important;
	overflow: hidden;
	padding: 20px !important;
	margin: 0 !important;
	border: 0 !important;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

.product .p:hover > .image {
	background: var(--ms-border-soft) !important;
}

/* Only max-* constraints — no width/height — so the photo keeps its own
   aspect ratio and is never scaled past its natural size. */
.product .p > .image img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
	mix-blend-mode: normal;
}

/* No horizontal padding — the copy lines up with the tile's edges instead of
   being inset inside a surface that is no longer painted. */
.product .p-in {
	background: transparent !important;
	padding: 16px 0 0 !important;
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column;
	/* .p-in and .name shrink-wrap in the inline/bestseller widgets, which
	   makes short titles look centred. Force them to fill the card. */
	width: 100% !important;
	align-self: stretch !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 (bestsellers, category grid) and
   not others. Force left everywhere so every grid reads consistently.
   Note .prices is a flex container, so it needs justify-content, not
   text-align. */
.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;
}

/* Same shrink-wrap problem as .p-in — the price row and its wrappers must
   fill the card or short prices drift to the middle. */
.p .p-bottom,
.p .p-bottom > div,
.p .prices,
.p .price-final,
.p .availability {
	width: 100% !important;
	box-sizing: border-box;
}

.product .p .name {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--ms-fg) !important;
	letter-spacing: -0.01em;
	text-transform: none !important;
	text-align: left !important;
	display: block !important;
	margin: 0 0 12px !important;
	min-height: 0 !important;
}

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

.product .p-bottom {
	margin-top: auto;
	text-align: left;
}

.product .prices {
	display: block !important;
	text-align: left !important;
	margin: 0 0 4px !important;
}

.product .price-final,
.product .price-final strong {
	color: var(--ms-fg) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	text-align: left !important;
}

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

.product .availability {
	font-size: 13px !important;
	text-align: left !important;
	margin: 0 0 16px !important;
}

/* Product code badge and the empty ratings row add noise the reference
   product grid doesn't have. */
.product .p-code,
.product .ratings-wrapper,
.product .stars-placeholder {
	display: none !important;
}

.product .p-tools {
	margin: 0 !important;
	padding: 0 !important;
}

.product .p-tools .btn {
	width: 100%;
}

/* Short teaser text under some cards */
.product .p-desc {
	text-align: left !important;
	font-size: 14px !important;
	color: var(--ms-muted) !important;
	line-height: 22px !important;
}

/* --------------------------------------------------------------------------
   7b. Product detail
   -------------------------------------------------------------------------- */

/* Shoptet renders the detail price in the theme's primary colour, which for
   us is the toxic green — unreadable on white. Match the reference and use
   the dark ink instead; the green stays for accents only. */
.p-detail .price-final,
.p-detail .price-final strong,
.p-detail-inner .price-final,
.p-detail-inner .price-final strong {
	color: var(--ms-fg) !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	letter-spacing: -0.025em;
}

.p-detail .p-final-price-wrapper {
	margin-bottom: 8px;
}

.p-detail h1,
.p-detail-inner h1 {
	font-size: 36px;
	line-height: 1.2;
	margin-bottom: 16px;
}

/* Manufacturer eyebrow above the title */
.p-detail .p-manufacturer,
.p-detail .p-manufacturer a {
	color: var(--ms-green-accent) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.p-detail .p-image,
.p-detail .p-main-image,
.p-detail .p-image-wrapper img {
	border-radius: var(--ms-r-lg);
	overflow: hidden;
}

/* Quantity stepper */
.p-detail .quantity input,
.quantity input {
	height: 44px;
	border-radius: 0;
	text-align: center;
}

.p-detail .increase,
.p-detail .decrease,
.quantity .increase,
.quantity .decrease {
	height: 44px;
	border: 1px solid var(--ms-border);
	background: #fff;
}

/* Tabs / accordions on the detail page */
.p-detail .tab-content,
.detail-tabs .tab-pane {
	color: var(--ms-muted);
}

/* --------------------------------------------------------------------------
   8. Forms / newsletter
   -------------------------------------------------------------------------- */

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

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ms-green);
	box-shadow: 0 0 0 3px rgba(161, 234, 52, 0.35);
}

.footer-newsletter-full-width {
	background: var(--ms-green-tint);
	padding: 64px 0;
	margin-top: 64px;
}

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

.footer-newsletter h2 {
	margin: 0 0 24px !important;
	text-align: center;
}

.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 .consents {
	text-align: left;
	font-size: 13px;
	color: var(--ms-muted);
}

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

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

#footer {
	background: #fff;
	border-top: 1px solid var(--ms-border-soft);
	padding: 32px 0;
	color: var(--ms-subtle);
	font-size: 14px;
}

#footer a {
	color: var(--ms-subtle);
}

#footer a:hover {
	color: var(--ms-fg);
}

#footer .footer-bottom {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	text-align: left;
	float: none !important;
}

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

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

/* --------------------------------------------------------------------------
   10. Cookie bar
   -------------------------------------------------------------------------- */

.siteCookies {
	border-radius: var(--ms-r-xl);
	background: #fff !important;
	color: var(--ms-fg) !important;
	box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
	border: 1px solid var(--ms-border-soft);
	overflow: hidden;
}

/* The dark Shoptet variant paints its inner form rather than the dialog
   itself. Override both layers so global body-copy colors never end up on a
   dark surface. */
.siteCookies .siteCookies__form {
	background: #fff !important;
	color: var(--ms-fg) !important;
}

.siteCookies .siteCookies__text,
.siteCookies .siteCookies__links {
	color: var(--ms-muted) !important;
}

.siteCookies .siteCookies__text a {
	color: var(--ms-green-ink) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.siteCookies .siteCookies__link {
	background: #fff !important;
	border: 1px solid var(--ms-border) !important;
	border-radius: var(--ms-r);
	color: var(--ms-fg) !important;
}

.siteCookies__button {
	border-radius: var(--ms-r);
	font-size: 14px;
	font-weight: 500;
	height: 44px;
	padding: 0 24px;
	border: 0;
}

.siteCookies__button[value='reject'] {
	background: #f3f4f6 !important;
	color: var(--ms-fg) !important;
}

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

/* --------------------------------------------------------------------------
   11. Homepage welcome block (blocks/homepage-welcome.html)

   Photography-led layout mirroring the marketing sections on
   mojestravovani.cz: an offset intro figure on a toxic-50 pad, photo-topped
   bento cards, alternating media/copy splits, and a CTA whose app artwork
   bleeds out of the bottom-right corner.

   Every photo is attached here as a background-image on an empty
   .ms-welcome__media element, so the HTML pasted into the Shoptet WYSIWYG
   editor stays free of <img> tags it could rewrite on save. Swapping a photo
   is a URL change in this file. Sources are listed in IMAGERY.md.
   -------------------------------------------------------------------------- */

/* Shoptet may render a fixed "Vítejte v našem obchodě" title above the
   editable area. Our block opens with its own headline, so drop the stock one
   when present — but only when the block is actually present, otherwise the
   default welcome text loses its heading. */
.welcome-wrapper:has(.ms-welcome) .welcome > .h1 {
	display: none;
}

.ms-welcome {
	display: grid;
	gap: 80px;
	text-align: left;
}

/* blockquote is deliberately absent: this reset is an element selector inside
   .ms-welcome, so it outranks the single-class .ms-welcome__quote and would
   silently strip that card's padding. The quote zeroes its own margin instead. */
.ms-welcome h2,
.ms-welcome h3,
.ms-welcome p,
.ms-welcome ul,
.ms-welcome ol {
	margin: 0;
	padding: 0;
}

/* Shared photo surface. The tint shows while a photo loads and fills the
   letterbox left by the two `contain` app mockups.

   font-size: 0 is not cosmetic — the Shoptet WYSIWYG rewrites every empty
   element to contain `&nbsp;` on save, and without this that space adds a text
   line to each photo box. See the note above .ms-welcome__intro-figure. */
.ms-welcome__media {
	background-color: var(--ms-green-tint);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--ms-r-lg);
	font-size: 0;
	line-height: 0;
}

.ms-welcome__media--granola {
	aspect-ratio: 4 / 5;
	border-radius: var(--ms-r-xl);
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/granola-bowl.jpg');
}

.ms-welcome__media--jar {
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/granola-jar.jpg');
	background-position: center 42%;
}

.ms-welcome__media--fresh {
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/fresh-bowl.jpg');
}

/* Transparent PNG of the app on a phone — `contain` keeps the device whole
   and the tint behind it becomes the card's colour block. */
.ms-welcome__media--app {
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/app-plan.png');
	background-size: 84%;
	background-position: center;
}

.ms-welcome__eyebrow {
	display: inline-block;
	border-radius: 999px;
	background: var(--ms-green-soft);
	color: var(--ms-green-deep);
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	margin-bottom: 16px;
}

/* The welcome editor has been seen nesting this span inside a copy of itself,
   which paints the pill twice and doubles the padding and bottom margin. Keep
   the outer shell as the pill and flatten anything it wraps. */
.ms-welcome__eyebrow .ms-welcome__eyebrow {
	display: inline;
	background: none;
	padding: 0;
	margin: 0;
}

.ms-welcome__title {
	font-size: 44px;
	line-height: 1.12;
	max-width: 16ch;
}

.ms-welcome__heading {
	font-size: 36px;
	line-height: 1.25;
	margin-bottom: 16px !important;
}

.ms-welcome__heading--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.ms-welcome__perex {
	max-width: 60ch;
	margin-top: 16px !important;
}

.ms-welcome__perex--strong {
	color: var(--ms-fg) !important;
	font-weight: 500;
}

/* Copy beside an offset figure: the tint pad sits down-right of the photo, so
   both stay inside the grid cell and nothing can cause a horizontal scroll. */
.ms-welcome__intro {
	display: grid;
	gap: 56px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	align-items: center;
}

/* Both layers are pseudo-elements on purpose. The Shoptet WYSIWYG deletes an
   empty element when it is a wrapper's only child (replacing it with `&nbsp;`),
   so a nested photo div here does not survive a save in the welcome editor.
   Anything decorative that has no siblings has to be drawn from CSS. */
.ms-welcome__intro-figure {
	position: relative;
	aspect-ratio: 5 / 4;
	font-size: 0;
	line-height: 0;
}

.ms-welcome__intro-figure::before {
	content: '';
	position: absolute;
	inset: 48px 0 0 48px;
	border-radius: var(--ms-r-xl);
	background: var(--ms-green-tint);
}

.ms-welcome__intro-figure::after {
	content: '';
	position: absolute;
	inset: 0 48px 48px 0;
	border-radius: var(--ms-r-xl);
	background: var(--ms-green-tint)
		url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/breakfast-spread.jpg') center /
		cover no-repeat;
}

/* Three claims from the intro — same card as the marketing feature grid, with
   a photo band replacing that grid's illustrations. */
.ms-welcome__pillars {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.ms-welcome__pillar {
	display: flex;
	flex-direction: column;
	background: var(--ms-card);
	border: 1px solid var(--ms-border-soft);
	border-radius: var(--ms-r-lg);
	overflow: hidden;
}

/* The card already clips to its radius, so the band must stay square-cornered
   or the two radii double up along the top edge. */
.ms-welcome__pillar-media {
	aspect-ratio: 16 / 11;
	border-radius: 0;
}

.ms-welcome__pillar-body {
	padding: 24px;
}

.ms-welcome__pillar-title {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 8px !important;
}

.ms-welcome__pillar-text {
	font-size: 15px;
	line-height: 24px;
}

/* Copy on one side, a photo or quote on the other. auto-fit keeps it a single
   column below ~880px without a breakpoint. */
.ms-welcome__split {
	display: grid;
	gap: 56px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	align-items: center;
}

/* The checklist makes this column much taller than the photo, so top-align
   the pair instead of floating the photo in the middle of the copy. */
.ms-welcome__split--media-first {
	align-items: start;
}

.ms-welcome__copy p {
	max-width: 60ch;
}

.ms-welcome__copy p + p {
	margin-top: 16px !important;
}

/* Quote over its own photo. The gradient is stacked above the image in the
   same background shorthand so the white text keeps contrast wherever the
   photo happens to be light. */
.ms-welcome__quote {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 380px;
	margin: 0;
	border: 0;
	border-radius: var(--ms-r-xl);
	padding: 40px;
	background-image:
		linear-gradient(
			180deg,
			rgba(15, 23, 42, 0) 25%,
			rgba(15, 23, 42, 0.55) 55%,
			rgba(15, 23, 42, 0.88) 100%
		),
		url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/granola-yogurt.jpg');
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.ms-welcome__quote::before {
	content: '„';
	display: block;
	font-size: 56px;
	line-height: 0.8;
	color: var(--ms-green);
	margin-bottom: 8px;
}

.ms-welcome__quote p {
	color: #fff !important;
	font-size: 18px;
	line-height: 30px;
}

/* Reused as the checklist heading inside the copy column. */
.ms-welcome__panel-title {
	font-size: 18px;
	line-height: 1.4;
	margin-top: 32px !important;
	margin-bottom: 8px !important;
}

.ms-welcome__checklist {
	list-style: none;
}

.ms-welcome__checklist li,
.ms-welcome__features li {
	/* Encoded lucide check-circle-2 — the same icon the app's marketing
	   sections use. A background image keeps the pasted HTML free of SVG. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362a50b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	color: var(--ms-fg);
}

.ms-welcome__checklist li {
	background-position: 0 14px;
	background-size: 20px 20px;
	border-bottom: 1px solid var(--ms-border);
	padding: 12px 0 12px 32px;
	font-size: 15px;
	line-height: 24px;
}

.ms-welcome__checklist li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ms-welcome__app {
	background: var(--ms-green-tint);
	border-radius: var(--ms-r-xl);
	padding: 56px 48px;
}

.ms-welcome__app-head {
	max-width: 60ch;
}

.ms-welcome__app-head p + p {
	margin-top: 16px !important;
}

.ms-welcome__features {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	list-style: none;
	margin-top: 32px !important;
}

.ms-welcome__features li {
	background-color: #fff;
	background-position: 16px 16px;
	background-size: 18px 18px;
	border-radius: var(--ms-r);
	padding: 14px 16px 14px 44px;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
}

.ms-welcome__note {
	margin-top: 24px !important;
	font-size: 15px;
}

.ms-welcome__steps {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	counter-reset: ms-step;
	list-style: none;
}

.ms-welcome__steps li {
	background: #fff;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-lg);
	padding: 28px 24px;
}

.ms-welcome__steps li::before {
	counter-increment: ms-step;
	content: counter(ms-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ms-green);
	color: var(--ms-green-ink);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 16px;
}

.ms-welcome__step-title {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 8px !important;
}

.ms-welcome__step-text {
	font-size: 15px;
	line-height: 24px;
}

.ms-welcome__closing {
	max-width: 56ch !important;
	margin: 40px auto 0 !important;
	text-align: center;
	color: var(--ms-fg) !important;
	font-size: 18px;
	line-height: 30px;
}

/* Closing banner: copy left, app artwork bleeding past the bottom-right
   corner. `overflow: hidden` is what turns the translated artwork into a
   bleed rather than a page-widening overflow. */
.ms-welcome__cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	background: var(--ms-green-tint);
	border-radius: var(--ms-r-xl);
	padding: 64px 48px;
	overflow: hidden;
}

.ms-welcome__cta-body {
	position: relative;
	z-index: 1;
	max-width: 58%;
}

.ms-welcome__cta-title {
	font-size: 44px;
	line-height: 1.15;
	margin-bottom: 16px !important;
}

.ms-welcome__cta-text {
	max-width: 46ch;
}

.ms-welcome__media--cta {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
	max-width: 460px;
	aspect-ratio: 900 / 829;
	background-color: transparent;
	background-image: url('https://mojestravovani-fr-1.fra1.digitaloceanspaces.com/shopify/assets/welcome/app-coaching.png');
	background-size: contain;
	background-position: right bottom;
	border-radius: 0;
	transform: translate(16%, 20%);
}

.ms-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* These two actions are anchors, and Shoptet's template styles `a.btn-primary`
   / `a.btn-secondary` directly — an element+class selector that outranks the
   plain `.btn-primary` rules in section 4 and paints the pair white-on-green
   and green-on-white. Hence !important rather than more class nesting.

   The banner is a lime wash, so the secondary action is an outlined chip in the
   same green family: a white fill on lime reads as a disabled surface. */
.ms-welcome__actions .btn-primary {
	background: var(--ms-green) !important;
	color: var(--ms-green-ink) !important;
	border: 0 !important;
}

.ms-welcome__actions .btn-primary:hover {
	background: var(--ms-green-hover) !important;
	color: var(--ms-green-ink) !important;
}

.ms-welcome__actions .btn-secondary {
	background: transparent !important;
	border: 1px solid rgba(62, 99, 17, 0.35) !important;
	color: var(--ms-green-deep) !important;
}

.ms-welcome__actions .btn-secondary:hover {
	background: var(--ms-green-soft) !important;
	border-color: var(--ms-green-deep) !important;
	color: var(--ms-green-deep) !important;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	:root {
		--ms-gutter: 20px;
	}

	/* backdrop-filter creates a containing block for Shoptet's position:fixed
	   mobile popups. That traps search inside the 60px header and collapses
	   the form; use the same opaque surface without the filter on mobile. */
	#header {
		background: #fff !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Shoptet toggles the drawer correctly, but its measured inner wrapper can
	   remain at height:0 after our desktop header nodes are restored. Give the
	   open drawer a real scrollable surface so its links are painted and
	   clickable after both a fresh mobile load and a breakpoint transition. */
	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;
	}

	h1,
	.h1 {
		font-size: 32px;
	}

	h2,
	.h2,
	.homepage-group-title,
	.footer-newsletter h2 {
		font-size: 26px !important;
		margin-bottom: 24px;
	}

	.welcome-wrapper .h1,
	.welcome-wrapper h1 {
		font-size: 28px;
	}

	.wide-carousel .extended-banner-title,
	.next-to-carousel-banners .extended-banner-title,
	.extended-banner-title {
		font-size: 24px !important;
	}

	.extended-banner-texts {
		padding: 24px !important;
	}

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

	.footer-newsletter-full-width {
		padding: 40px 0;
		margin-top: 40px;
	}

	.benefitBanner__item {
		flex-basis: calc(50% - 8px);
		padding: 24px 16px !important;
	}

	.ms-welcome {
		gap: 56px;
	}

	/* The h2 rule above is !important, so the welcome headline has to be too or
	   the lead title drops to the same 26px as the section headings. */
	.ms-welcome__title {
		font-size: 30px !important;
	}

	.ms-welcome__intro,
	.ms-welcome__split {
		gap: 32px;
	}

	/* A 48px offset is a sixth of the column once the split stacks, which reads
	   as a misplaced block rather than a deliberate offset. */
	.ms-welcome__intro-figure::before {
		inset: 24px 0 0 24px;
	}

	.ms-welcome__intro-figure .ms-welcome__media {
		inset: 0 24px 24px 0;
	}

	.ms-welcome__quote,
	.ms-welcome__app {
		padding: 32px 24px;
	}

	.ms-welcome__quote {
		min-height: 320px;
	}

	.ms-welcome__steps li {
		padding: 24px;
	}

	/* The artwork becomes a band under the copy rather than a corner bleed —
	   at this width a 46% absolute column would sit on top of the buttons. */
	.ms-welcome__cta {
		display: block;
		min-height: 0;
		padding: 40px 24px;
	}

	.ms-welcome__cta-body {
		max-width: none;
	}

	.ms-welcome__cta-title {
		font-size: 30px !important;
	}

	.ms-welcome__media--cta {
		position: relative;
		width: 100%;
		max-width: 320px;
		margin: 24px auto -40px;
		background-position: center bottom;
		transform: none;
	}

	.ms-welcome__closing {
		font-size: 16px;
	}

	#footer .footer-bottom {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 575px) {
	.ms-welcome__actions {
		flex-direction: column;
	}

	.ms-welcome__actions .btn {
		width: 100%;
	}
}