/*
 * Masterfish storefront — catalog/SSR styling for the WP-hosted storefront (řez 8d, FÁZE 2).
 *
 * Styles ONLY the PHP-SSR'd catalog body (and the host bundle's client re-render, which uses the same
 * classes) so the three public SEO pages have a real, styled first paint inside the active theme.
 *
 * SAFETY (super-safe): every rule is scoped under `.mf-storefront-root` (the wrapper printed only by
 * the storefront template), and the stylesheet is enqueued ONLY on storefront routes — so it cannot
 * touch marketing/Woo pages or the theme chrome, and it is removed entirely on plugin deactivation.
 * Derived from the dev-harness host.css catalog rules, with the harness CHROME (#mf-header/#mf-footer/
 * .bar/.brand/.lang-switch — theme-owned in prod) and the global element resets (*, body, bare h1)
 * DROPPED. Reads the same --mf-* token contract (tokens.css) as the components.
 */

.mf-storefront-root {
	font-family: var(--mf-font-sans, system-ui, sans-serif);
	color: var(--mf-color-text, #151617);
	line-height: 1.55;
}
.mf-storefront-root *,
.mf-storefront-root *::before,
.mf-storefront-root *::after {
	box-sizing: border-box;
}
.mf-storefront-root .mono {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
}
.mf-storefront-root .muted {
	color: var(--mf-color-text-muted, #797d81);
}

/* ── PAGE SCAFFOLD ───────────────────────────────────────────────────────── */
.mf-storefront-root #mf-content,
#mf-content.mf-storefront-content {
	max-width: var(--mf-maxw, 1000px);
	margin: 0 auto;
	/* Horizontal page gutter (shared --mf-page-gutter token, tokens.css — enqueued site-wide). Was a
	   flat `0`, which assumed the theme supplied the side spacing; the storefront template mounts
	   #mf-content full-bleed (after get_header, not inside a Salient .container), so below ~1000px the
	   auto-margins collapse and content stuck to both viewport edges. The token gives a 16px mobile
	   floor scaling to the 32px desktop cap — identical in this SSR'd #mf-content and the host bundle's
	   hydrated re-render (same token), so the gutter never shifts on hydration (no CLS). */
	padding: 30px var(--mf-page-gutter, 16px) 64px;
	/* ANTI-CLS — reserve the content area to (roughly) the viewport under the live theme header so the
	   theme footer sits at the bottom from the FIRST paint. The client-rendered app screens (login /
	   register / forgot / empty cart) emit no SSR body, so #mf-content was momentarily short and the
	   theme footer flashed up high, then dropped when the Stencil screen mounted. The header height is
	   published live as --mf-wp-header-offset (storefront-sticky.js, measures the fixed Salient header);
	   the fallback keeps the footer below the fold even before it publishes. */
	min-height: calc(100vh - var(--mf-wp-header-offset, 0px));
}
.mf-storefront-root .crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--mf-color-text-muted, #797d81);
	margin-bottom: 14px;
}
.mf-storefront-root .crumbs a {
	color: var(--mf-color-text-muted, #797d81);
	text-decoration: none;
}
.mf-storefront-root .crumbs a:hover {
	color: var(--mf-color-text, #151617);
}
.mf-storefront-root .page-head {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}
.mf-storefront-root .page-head h1 {
	font-size: 2.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}
.mf-storefront-root .page-head .cnt {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.82rem;
	color: var(--mf-color-text-muted, #797d81);
}
.mf-storefront-root .lede {
	font-size: 0.92rem;
	color: var(--mf-color-text-muted, #797d81);
	margin: 11px 0 0;
	max-width: 64ch;
}

/* ── ROZCESTNÍK (category list) ──────────────────────────────────────────── */
.mf-storefront-root .cat {
	margin-top: 34px;
}
.mf-storefront-root .cat-head {
	display: flex;
	align-items: baseline;
	gap: 13px;
	flex-wrap: wrap;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--mf-color-text, #151617);
}
.mf-storefront-root .cat-name {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-decoration: none;
	color: var(--mf-color-text, #151617);
}
.mf-storefront-root .cat-name:hover {
	color: var(--mf-color-accent, #1f6b75);
}
.mf-storefront-root .cat-cnt {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.8rem;
	color: var(--mf-color-text-muted, #797d81);
}
.mf-storefront-root .seeall {
	margin-left: auto;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--mf-color-text-muted, #797d81);
	text-decoration: none;
	white-space: nowrap;
}
.mf-storefront-root .seeall:hover {
	color: var(--mf-color-accent, #1f6b75);
}
.mf-storefront-root .tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 16px;
	margin-top: 18px;
}
.mf-storefront-root .tile {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.mf-storefront-root .tile .timg {
	aspect-ratio: 4 / 3;
	border-radius: var(--mf-radius-lg, 11px);
	overflow: hidden;
	background: var(--mf-color-surface-alt, #f6f6f4);
	background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(31, 107, 117, 0.06) 12px 13px);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mf-storefront-root .tile .timg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mf-storefront-root .tile:hover .timg {
	transform: translateY(-2px);
	box-shadow: var(--mf-shadow-2, 0 10px 30px rgba(21, 22, 23, 0.1));
}
.mf-storefront-root .tile .tn {
	font-size: 0.92rem;
	font-weight: 600;
	margin-top: 10px;
	line-height: 1.25;
}
.mf-storefront-root .tile:hover .tn {
	color: var(--mf-color-accent, #1f6b75);
}
.mf-storefront-root .tile .ts {
	font-size: 0.78rem;
	color: var(--mf-color-text-muted, #797d81);
	margin-top: 2px;
}

/* ── CATEGORY (rows grouped by subcategory + chip nav) ───────────────────── */
.mf-storefront-root .cat-note {
	margin: 16px 0 0;
	padding: 11px 14px;
	border: 1px solid var(--mf-color-accent-line, rgba(31, 107, 117, 0.3));
	background: var(--mf-color-accent-soft, #e9f1f2);
	color: var(--mf-color-accent, #1f6b75);
	border-radius: var(--mf-radius-md, 7px);
	font-size: 0.84rem;
	line-height: 1.45;
}

/* Subcategory chip nav (light DOM rendered by the host bundle). host.css styles it in the dev harness;
 * this scoped sheet REPLACES host.css on WP, so the same rules must live here (they were omitted in
 * Phase 2 → the chips rendered as bare default buttons on WP).
 *
 * STICKY on WP, pinned snug under the active theme header. The Salient header is fixed and varies in
 * height (shrinks on scroll, admin-bar-aware), so a static `top` can't stay aligned — storefront-sticky.js
 * measures the live header and publishes its bottom edge as --mf-wp-header-offset on <html>, and adds the
 * marker class `.mf-sf-has-header-offset`. The base rule below stays STATIC; sticky positioning is gated
 * on that marker class, so without the publisher (JS absent / header not found / plugin deactivated) the
 * chip bar is static — never a sticky bar overlapping the theme header. The button look is unchanged. */
.mf-storefront-root .chipbar {
	margin: 18px 0 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--mf-color-line, rgba(21, 22, 23, 0.09));
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
/* Sticky only when the offset publisher is active (marker class on <html>). `top` tracks the live theme
 * header height; the frosted background lets catalog rows scroll cleanly under the pinned bar. */
html.mf-sf-has-header-offset .mf-storefront-root .chipbar {
	position: sticky;
	top: var(--mf-wp-header-offset, 0px);
	z-index: 30;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* THE ONE DELIBERATELY UN-SCOPED RULE IN THIS SHEET. The Salient theme sets `body { overflow: hidden }`
 * while the page scrolls on <html> (`overflow-y: scroll`) — that makes <body> a NON-scrolling scroll
 * container, which is the nearest scroll ancestor of `.chipbar`, so `position: sticky` computes but
 * never pins (the bar scrolls away). Taking <body> out of being a scroll container rebinds sticky to
 * the <html> viewport scroller. <html> keeps `overflow-x: hidden`, so this re-enables NO horizontal
 * page scroll; <body> grows with content, so nothing is clipped vertically either.
 * SAFE + SCOPED-BY-ENQUEUE: this sheet loads on storefront routes only → it never touches marketing/Woo,
 * and plugin deactivation removes it (body reverts to the theme default). The `html body` specificity
 * (0,0,2) beats the theme's plain `body{overflow:hidden}` regardless of source order, yet stays BELOW
 * Salient's off-canvas scroll-lock `html.no-overflow-y body` (0,1,2) — so opening the mobile menu still
 * locks background scroll. */
html body {
	overflow: visible;
}
.mf-storefront-root .navchip {
	appearance: none;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: var(--mf-radius-pill, 999px);
	border: 1px solid var(--mf-color-line-2, rgba(21, 22, 23, 0.16));
	color: var(--mf-color-ink-2, #494c4f);
	background: var(--mf-color-surface, #fff);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mf-storefront-root .navchip:hover,
.mf-storefront-root .navchip.on {
	border-color: var(--mf-color-accent, #1f6b75);
	color: var(--mf-color-accent, #1f6b75);
	background: var(--mf-color-accent-soft, #e9f1f2);
}
.mf-storefront-root .navchip:focus-visible {
	outline: 2px solid var(--mf-color-accent, #1f6b75);
	outline-offset: 2px;
}
.mf-storefront-root .navchip .n {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.68rem;
	color: var(--mf-color-ink-4, #a9acaf);
}
.mf-storefront-root .navchip:hover .n,
.mf-storefront-root .navchip.on .n {
	color: var(--mf-color-accent, #1f6b75);
}
.mf-storefront-root .group {
	margin-top: 30px;
	scroll-margin-top: 110px;
}
/* When the chip bar is sticky, a chip click (scrollIntoView, block:start) must land the group heading
 * BELOW the live theme header + the pinned chip bar — clear both via the published offset + the bar's
 * own height. */
html.mf-sf-has-header-offset .mf-storefront-root .group {
	scroll-margin-top: calc(var(--mf-wp-header-offset, 0px) + 100px);
}
.mf-storefront-root .glabel {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: 0.92rem;
	font-weight: 700;
	margin: 0 0 4px;
}
.mf-storefront-root .glabel .n {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--mf-color-ink-4, #a9acaf);
}

/* product row — thumb · name/meta · price-block */
.mf-storefront-root .prow {
	display: grid;
	grid-template-columns: 48px 1fr minmax(160px, auto);
	gap: 18px;
	align-items: center;
	padding: 15px 4px;
	border-bottom: 1px solid var(--mf-color-line, rgba(21, 22, 23, 0.09));
}
.mf-storefront-root .prow:hover {
	background: var(--mf-color-surface-alt, #f6f6f4);
}
.mf-storefront-root .pthumb {
	width: 48px;
	height: 48px;
	border-radius: var(--mf-radius-sm, 5px);
	overflow: hidden;
	background: var(--mf-color-surface-alt, #f6f6f4);
	background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(21, 22, 23, 0.04) 8px 9px);
}
.mf-storefront-root .pthumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mf-storefront-root .pname {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mf-color-text, #151617);
	text-decoration: none;
}
.mf-storefront-root .pname:hover {
	color: var(--mf-color-accent, #1f6b75);
}
.mf-storefront-root .pmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
	font-size: 0.76rem;
	color: var(--mf-color-text-muted, #797d81);
	margin-top: 3px;
}
.mf-storefront-root .pmeta .pcode {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	color: var(--mf-color-text-muted, #797d81);
}
.mf-storefront-root .pcell {
	justify-self: end;
	min-width: 0;
}
/* ANTI-CLS — for a SIGNED-IN client (the html[data-mf-authed] marker set at first paint by the early
   inline script — a DATA ATTRIBUTE because the theme rewrites <html> className wholesale and would wipe
   a class), pre-size the bare <mf-price-block> to its hydrated height (token = the component's reserved
   .block.authed height) so the price area never pops in / grows the row when the loader upgrades the
   element or the price fetch lands. Anon has no marker → the lock-hint cell stays compact. */
html[data-mf-authed] .mf-storefront-root .prow mf-price-block {
	display: block;
	min-height: var(--mf-price-block-reserve-card, 107px);
}
@media (max-width: 680px) {
	.mf-storefront-root .prow {
		grid-template-columns: 48px 1fr;
	}
	.mf-storefront-root .pcell {
		grid-column: 2 / 3;
		justify-self: start;
	}
}

/* ── PRODUCT DETAIL ──────────────────────────────────────────────────────── */
.mf-storefront-root .pgrid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 40px;
	align-items: start;
	margin-top: 8px;
}
.mf-storefront-root .gal .gmain {
	aspect-ratio: 1 / 1;
	border-radius: var(--mf-radius-md, 7px);
	overflow: hidden;
	background: var(--mf-color-surface-alt, #f6f6f4);
	background-image: repeating-linear-gradient(135deg, transparent 0 15px, rgba(21, 22, 23, 0.04) 15px 16px);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 12px;
}
.mf-storefront-root .gal .gmain img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mf-storefront-root .gal .gcap {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.7rem;
	color: var(--mf-color-ink-4, #a9acaf);
}
.mf-storefront-root .pcode {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.75rem;
	color: var(--mf-color-text-muted, #797d81);
}
.mf-storefront-root .ptitle {
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
	margin: 8px 0 3px;
}
.mf-storefront-root .ppath {
	font-size: 0.82rem;
	color: var(--mf-color-text-muted, #797d81);
	margin: 0 0 20px;
}
.mf-storefront-root .pricecell {
	margin: 0 0 20px;
}
/* ANTI-CLS — detail hero buy block: pre-size the bare element for a signed-in client (see .prow above). */
html[data-mf-authed] .mf-storefront-root .pricecell mf-price-block {
	display: block;
	min-height: var(--mf-price-block-reserve-detail, 164px);
}
.mf-storefront-root .kv {
	margin-top: 22px;
}
.mf-storefront-root .kvh {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mf-color-ink-4, #a9acaf);
	margin: 0 0 10px;
}
.mf-storefront-root .spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.84rem;
	padding: 10px 0;
	border-bottom: 1px solid var(--mf-color-line, rgba(21, 22, 23, 0.09));
}
.mf-storefront-root .spec:last-child {
	border-bottom: 0;
}
.mf-storefront-root .spec .k {
	color: var(--mf-color-text-muted, #797d81);
}
.mf-storefront-root .spec .v {
	font-family: var(--mf-font-mono, ui-monospace, monospace);
	font-weight: 500;
}
.mf-storefront-root .pdesc {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding-top: 24px;
	border-top: 1px solid var(--mf-color-text, #151617);
}
.mf-storefront-root .pdesc p {
	font-size: 0.92rem;
	color: var(--mf-color-ink-2, #494c4f);
	line-height: 1.75;
	max-width: 74ch;
	margin: 0;
}
@media (max-width: 680px) {
	.mf-storefront-root .pgrid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ── EMPTY / STUB ────────────────────────────────────────────────────────── */
.mf-storefront-root .empty,
.mf-storefront-root .stub {
	padding: 54px 16px;
	text-align: center;
	color: var(--mf-color-text-muted, #797d81);
}
.mf-storefront-root .empty h3,
.mf-storefront-root .stub h1 {
	color: var(--mf-color-text, #151617);
}