/* ==========================================================================
   Elan — component stylesheet

   SOURCE OF TRUTH: "Elan Design System/reference-pages/" — six approved,
   pixel-measured HTML pages rebuilt from the Figma full-page exports. Every
   selector, value and sub-pixel number below is transcribed from that folder's
   elan.css. Where a value exists in tokens/, the token is used.

   The reference ships two fixed frames (a 1440px `.pg--d` and a 390px `.pg--m`).
   A WordPress theme has to be fluid, so this file is that same design expressed
   as one responsive sheet:

     - the desktop frame is the BASE layer, unchanged at >= 1200px;
     - `.pg--m` rules are ported verbatim into `@media (max-width: 767px)`;
     - two intermediate steps (1200 / 900) carry the layout across the gap the
       reference never had to draw.

   Sub-pixel values (46.914px, 944.023px, 16.313px, 22.626px) are intentional and
   measured off ELAN.fig. Do not round them. The source is NOT on an 8px grid:
   4, 10, 14, 23, 33 and 66 are real values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Two deltas where the reference pages supersede tokens/

   1. --overlay-hero. tokens/shape.css carries a 181.586deg (top-to-bottom) ramp.
      Every approved page uses a 91.6deg left-to-right ramp, because the hero copy
      sits on the LEFT and needs the density there. The reference wins.
   2. --page-gutter-mobile. tokens/spacing.css says 20px; all six reference pages
      are drawn at 16px.
   -------------------------------------------------------------------------- */
:root {
	--overlay-hero: linear-gradient(91.6deg, rgba(0, 0, 0, .71) 1%, rgba(0, 0, 0, 0) 82.7%);
	--page-gutter-mobile: 16px;

	/* Distance from a full-bleed section's own edge to the start of the centred
	   content frame. Below 1440 it collapses to the plain page gutter. Used by the
	   few things that cannot simply be a centred box — the bleeding rails and the
	   footer rule. The percentage resolves against the element it is used on. */
	--frame-inset: calc((100% - min(100%, var(--page-width))) / 2 + var(--page-gutter));

	/* Derived interaction fills. ELAN.fig is static and carries no hover state;
	   CLAUDE.md sets the convention: primary darkens ~8% on hover, ~14% on press,
	   as a mix toward black so no new hue enters the palette. */
	--elan-green-hover: #12433C;
	--elan-green-press: #0F3A34;
	--elan-link-hover-opacity: .65;
}

/* ==========================================================================
   Reset / element defaults
   ========================================================================== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--elan-page);
	font-family: var(--font-sans);
	font-size: var(--type-body);
	color: var(--elan-ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a {
	color: var(--elan-green);
	text-decoration: none;
	transition: opacity var(--dur-base) var(--ease-brand);
}

a:hover { opacity: var(--elan-link-hover-opacity); }

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
}

/* Margins only. A blanket `font-family: display; font-weight: 400` here would be
   wrong: every Marcellus heading in this system already declares its own face and
   weight (.h1/.h2/.h3, .hero-t, .pcard__name, .bcard__t, .proc__t, .pdp__title),
   while .promise__t and .acc__t are headings that are deliberately SANS and BOLD.
   Resetting them centrally silently flattened both. */
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }

/* Focus is never removed. 1px --elan-green at 2px offset. */
:focus-visible {
	outline: 1px solid var(--elan-green);
	outline-offset: 2px;
}

/* A class selector otherwise beats the UA's [hidden] { display: none }, so
   inactive category panels would stay visible. */
[hidden] { display: none !important; }

.elan-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Page shell

   The reference frame is a hard 1440px box. Here that measure is applied to the
   CONTENT, not to the page: every section runs edge to edge so its background —
   a photograph, a wash, the footer's mint ramp, the header bar — fills the whole
   viewport, and `.shell` centres a 1440px column inside it.

   Putting the max-width on the page instead would letterbox the whole site on a
   wide monitor, which is what this used to do.
   ========================================================================== */
.elan-site {
	position: relative;
	width: 100%;
	background: var(--elan-page);
	overflow: clip;
}

/* The content frame. Anything that should line up with the page's text column
   carries this, whether it is a <section> or a wrapper inside one. */
.shell {
	max-width: var(--page-width);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
}

/* --------------------------------------------------------------------------
   Section rhythm

   The reference pages carry a bespoke vertical padding on every section rather
   than one repeating value — the file is not on a grid. `.sec` is the 80px
   default; each modifier below is the exact pair measured off its own frame.
   -------------------------------------------------------------------------- */
.sec { padding-block: 80px; }

.sec--products { padding-block: 87px 118px; }
.sec--panel    { padding-block: 80px 103px; }
.sec--reviews  { padding-block: 64px 24px; }
.sec--about    { padding-block: 80px 112px; }
.sec--blog     { padding-block: 80px 112px; }
.sec--catgrid  { padding-block: 40px 64px; }
.sec--why      { padding-block: 64px 112px; }
.sec--proc     { padding-block: 112px 100px; }
.sec--recipes  { padding-block: 80px 96px; }
.sec--faq      { padding-block: 33px 112px; }
.sec--related  { padding-block: 112px 96px; }

.sec--related__t { text-align: center; }
.sec--related .grid4 { margin-top: 64px; }

.sec__more { display: flex; justify-content: center; margin-top: 33px; }
.sec__empty { margin-top: 33px; color: var(--elan-ink-muted); }

/* --------------------------------------------------------------------------
   Section heading — eyebrow -> Marcellus headline -> lede

   The gap under the headline is 24px everywhere except the home product
   section, which sets 11px because it has no eyebrow above it.
   -------------------------------------------------------------------------- */
/* Written as descendant + sibling pairs rather than `.shead > * + *`, which ties
   on specificity with the `.h1 { margin: 0 }` reset further down the file and
   loses to it. */
.shead .eyebrow + .h1,
.shead .eyebrow + .h2,
.shead .eyebrow + .hero-t,
.shead .h1 + .lede,
.shead .h2 + .lede,
.shead .h1 + .body,
.shead .h2 + .body { margin-top: 24px; }

.shead--tight .h1 + .lede,
.shead--tight .h2 + .lede { margin-top: 11px; }

/* The lede holds a ~664px measure everywhere except the wide "Tri kategorije"
   paragraph, which the export sets at 936px. */
.shead .lede { max-width: 664px; }
.sec--panel .shead .lede { max-width: 936px; }

/* ==========================================================================
   Icons — inline SVG sprite; every glyph inherits currentColor
   ========================================================================== */
.ico { display: inline-block; flex: none; fill: currentColor; }

.ico-search   { width: 26px;     height: 26px; }
.ico-heart    { width: 26px;     height: 23px; }
.ico-cart     { width: 28px;     height: 25px; }
.ico-cart-sm  { width: 16.313px; height: 13.813px; }
.ico-leaf     { width: 22.626px; height: 22.626px; }
.ico-ring     { width: 22px;     height: 23px; }
.ico-arrow    { width: 23px;     height: 8px; }
.ico-fb       { width: 25px;     height: 25px; }
.ico-tt       { width: 22px;     height: 26px; }
.ico-ig       { width: 26px;     height: 26px; }

/* The three category glyphs are bitmaps cut from the PNG export — the design
   system shipped no vector for them. Replace with SVGs when Elan supplies them. */
.ico-ishrana, .ico-zdravlje, .ico-probava { width: 30px; height: 30px; }
.ico-ishrana  { background: url(../img/extracted/ico-ishrana.png) center/contain no-repeat; }
.ico-zdravlje { background: url(../img/extracted/ico-zdravlje.png) center/contain no-repeat; }
.ico-probava  { background: url(../img/extracted/ico-probava.png) center/contain no-repeat; }

/* ==========================================================================
   Navbar

   Links left, wordmark dead centre, utilities right. The bar is transparent and
   takes its ink from the tone modifier. On the home page it is lifted OUT of the
   flow and overlaid on the hero photograph (.topbar--over); on the category and
   product pages it sits in normal flow on the light wash.
   ========================================================================== */
.topbar { position: relative; z-index: 5; }

.topbar--over {
	position: absolute;
	inset: 0 0 auto;
}

/* The bar itself is full-bleed (so .topbar--over and the sticky bar's fill span
   the viewport); the row inside it holds the content frame, which is what keeps
   the wordmark centred on the text column rather than on the monitor. */
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 141px;
	max-width: var(--page-width);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	position: relative;
	z-index: 3;
}

.nav__nav { display: block; }

.nav__links {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--type-lead);
	line-height: 100%;
}

.nav__item { position: relative; }

/* Hover used to be opacity alone, which on a photograph is nearly invisible. The
   brand allows no lift and no colour change on a nav link, so the affordance is a
   hairline that grows from the left. */
.nav__links > .nav__item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 6px;
	color: inherit;
	position: relative;
}

.nav__links > .nav__item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-brand);
}

.nav__links > .nav__item > a:hover { opacity: 1; }
.nav__links > .nav__item > a:hover::after,
.nav__links > .nav__item--on > a::after { transform: scaleX(1); }

/* The chevron is a state indicator, so it is the one thing in the bar that moves. */
.nav__chev { width: 11px; height: 11px; transition: transform var(--dur-base) var(--ease-brand); }
.nav__item--has-sub:hover > a .nav__chev,
.nav__item--has-sub:focus-within > a .nav__chev { transform: rotate(180deg); }

/* The accordion toggle only ever exists in the drawer. */
.nav__subtoggle { display: none; }

/* --------------------------------------------------------------------------
   Category dropdown

   The product categories were unreachable from the header: "Proizvodi" went to
   the shop and the taxonomy was two more clicks away. The panel is a white card
   on the tile hairline - no shadow, per the brand's depth rule.
   -------------------------------------------------------------------------- */
.nav__sub {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 4;
	min-width: 232px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--elan-white);
	border-radius: var(--radius-md);
	box-shadow: var(--ring-tile);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--dur-base) var(--ease-brand),
		transform var(--dur-base) var(--ease-brand),
		visibility 0s linear var(--dur-base);
}

/* A gap between the link and the panel would drop the hover halfway; an invisible
   bridge spans it instead of a margin on the panel. */
.nav__item--has-sub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 18px;
}

.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(10px);
	transition: opacity var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand), visibility 0s;
}

.nav__sub a {
	display: block;
	padding: 10px 20px;
	font-size: var(--type-body);
	line-height: 130%;
	color: var(--elan-ink);
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-brand);
}

.nav__sub a:hover { opacity: 1; background: var(--elan-green-tint); color: var(--elan-green); }

.nav__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 127px;
	line-height: 0;
}

.nav__logo svg, .nav__logo img { width: 100%; height: auto; }


/* A replacement logo uploaded in the customiser is a flat bitmap, so it cannot take
   its colour from the bar the way the drawn wordmark does. Over the hero photograph
   it is knocked out to white, exactly as the partner logos are. */
.nav--light .elan-logo--img { filter: brightness(0) invert(1); }

.nav__utils { display: flex; align-items: center; gap: 30px; }

/* The account glyph comes from the 20px utility set; the rest of this row is drawn
   at 26-28, so left alone it read as a smaller, lighter icon than its neighbours. */
.nav__ic--account .ico { width: 26px; height: 26px; }

.nav__ic {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: opacity var(--dur-base) var(--ease-brand);
}

/* The count is a filled bubble rather than a bare numeral: over the hero
   photograph an unbacked digit sat on whatever the picture happened to be. */
.nav__count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--elan-green);
	color: var(--elan-white);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: var(--weight-medium);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.nav__count.is-empty { display: none; }

.nav--light, .nav--light a { color: var(--elan-white); }
.nav--dark,  .nav--dark a  { color: var(--elan-ink); }

/* The wordmark is a BRAND ASSET, not UI text, so it does not take the bar's ink the
   way the links and the glyphs do: it is Elan green — #18534B, the colour the client
   supplied the mark in, which is already the --elan-green token. The one exception is
   the hero, where it sits on a photograph and has to knock out to white.

   These have to come AFTER the two rules above and match their specificity:
   `.nav--dark a` is 0,2,0, so a bare `.nav__logo` at 0,1,0 loses to it. */
.nav--dark .nav__logo  { color: var(--elan-green); }
.nav--light .nav__logo { color: var(--elan-white); }

/* Over the photograph a green bubble loses contrast against the scrim, so the
   tone flips it to a white chip with green figures. */
.nav--light .nav__count { background: var(--elan-white); color: var(--elan-green); }

/* The dropdown is always a white card, so its ink is always dark - the light tone
   must not carry white type into it. */
.nav--light .nav__sub a { color: var(--elan-ink); }
.nav--light .nav__sub a:hover { color: var(--elan-green); }

.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 26px;
	height: 26px;
	padding: 0;
}

.burger i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur-base) var(--ease-brand), opacity var(--dur-fast) var(--ease-brand);
}

.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Header search

   The icon is a link in the markup and elan.js upgrades it into this panel, so
   search still works with JavaScript off. The panel belongs to .topbar, which is
   why it inherits the overlay position on the home page.
   -------------------------------------------------------------------------- */
.nav__search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 6;
	background: var(--elan-white);
	border-block: 1px solid var(--elan-border);
	padding-block: 18px;
}

.nav__searchform {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nav__searchinput {
	flex: 1;
	min-width: 0;
	height: 48px;
	border: 0;
	border-bottom: 1px solid var(--elan-ink-soft);
	background: none;
	padding: 0 2px;
	font-family: var(--font-sans);
	font-size: var(--type-lead);
	color: var(--elan-ink);
}

.nav__searchinput::placeholder { color: var(--elan-ink-soft); }
.nav__searchinput::-webkit-search-cancel-button { -webkit-appearance: none; }

.nav__searchgo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 24px;
	border-radius: var(--radius-sm);
	background: var(--elan-green);
	color: var(--elan-white);
	font-size: var(--type-small);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	transition: background var(--dur-base) var(--ease-brand);
}

.nav__searchgo:hover { background: var(--elan-green-hover); }
.nav__searchgo .ico-arrow { width: 18px; }
.nav__searchclose { display: flex; color: var(--elan-ink); padding: 8px; }


/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 50px;
	padding: 0 26px;
	border-radius: var(--radius-sm);
	background: var(--elan-green);
	color: var(--elan-white);
	font-size: var(--type-lead);
	line-height: 100%;
	white-space: nowrap;
	transition: background var(--dur-base) var(--ease-brand);
}

.btn:hover  { background: var(--elan-green-hover); opacity: 1; }
.btn:active { background: var(--elan-green-press); }

.btn--ghost {
	background: transparent;
	color: var(--elan-green);
	box-shadow: var(--ring-brand-half);
}

.btn--ghost:hover { background: var(--elan-green-tint); }

.btn--sm { height: 40px; font-size: var(--type-small); padding: 0 20px; }

.btn--block {
	width: 100%;
	height: 41px;
	border-radius: var(--radius-xs);
	font-size: var(--type-small);
	gap: 10px;
	padding: 0;
}

.arrows { display: flex; gap: 16px; }

.arw {
	width: 46.914px;
	height: 46.914px;
	border-radius: 50%;
	border: 1px solid var(--elan-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--elan-ink);
	padding: 0;
	transition: background var(--dur-base) var(--ease-brand);
}

.arw:hover { background: var(--elan-surface); }
.arw .ico-arrow { width: 20px; }
.arw--prev .ico-arrow { transform: scaleX(-1); }
.arw[disabled] { opacity: .35; cursor: default; }
.arw[disabled]:hover { background: none; }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.eyebrow {
	font-size: var(--type-lead);
	line-height: 100%;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--elan-ink);
}

.h1 { font-family: var(--font-display); font-size: var(--type-h1); line-height: var(--type-h1-lh); font-weight: 400; margin: 0; }
.h2 { font-family: var(--font-display); font-size: var(--type-h2); line-height: var(--type-h2-lh); font-weight: 400; margin: 0; }
.h3 { font-family: var(--font-display); font-size: var(--type-h3); line-height: 100%; font-weight: 400; margin: 0; }

.hero-t {
	font-family: var(--font-display);
	font-size: var(--type-hero);
	line-height: var(--type-hero-lh);
	font-weight: 400;
	margin: 0;
}

.lede { font-size: var(--type-lead); line-height: 1.35; margin: 0; text-wrap: pretty; }
.body { font-size: var(--type-body); line-height: 150%; margin: 0; text-wrap: pretty; }
.meta { font-size: var(--type-micro); line-height: 100%; color: var(--elan-ink-soft); }

/* ==========================================================================
   Attribute chips

   The double space in "VEGAN  / POSNO" is verbatim from ELAN.fig. The label is
   rendered inside white-space: pre-wrap so it survives HTML collapsing.
   ========================================================================== */
.chips { display: flex; flex-direction: column; gap: 10px; }

.chip {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--type-small);
	line-height: 100%;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	white-space: pre-wrap;
}

.chips--row { flex-direction: row; gap: 33px; flex-wrap: wrap; }

/* ==========================================================================
   Hero (photo band)
   ========================================================================== */
.hero {
	position: relative;
	height: 888px;
	overflow: hidden;
	background: var(--elan-white);
}

/* The export's hero is a tighter crop than object-fit: cover produces, so the
   desktop hero draws the bitmap at its measured 1977 x 1117 to match the
   composition. `max()` keeps exactly that crop on any viewport up to 1977 and
   scales it up beyond, so the photograph always reaches both edges.
   Replace with a correctly cropped asset when Elan supplies one. */
.hero__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: max(1977px, 100%);
	height: auto;
	max-width: none;
}

/* The video covers the band rather than reproducing the still's measured crop:
   its own framing is already the composition, and letting it overflow the way the
   photograph does would push the subject off the left edge. */
.hero__bg--video {
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Above the poster, below the scrim and the copy. */
	z-index: 1;
}

/* No autoplaying footage for anyone who has asked their system for less movement.
   The poster underneath is the same frame, so the hero still reads as designed. */
@media (prefers-reduced-motion: reduce) {
	.hero__bg--video { display: none; }
}

.hero__grad { position: absolute; inset: 0; z-index: 2; background: var(--overlay-hero); }

/* Full-bleed photograph, framed copy. */
.hero__in {
	position: relative;
	z-index: 3;
	padding: 188px var(--page-gutter) 0;
	display: flex;
	flex-direction: column;
	gap: 23px;
	max-width: var(--page-width);
	margin-inline: auto;
	color: var(--elan-white);
}

.hero__in > * { max-width: 1060px; }

.hero__eyebrow {
	font-size: var(--type-lead);
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	margin: 0;
	max-width: 404px;
}

.hero__title { margin-top: 22px; }
.hero__lede { max-width: 660px; }

.hero__actions { display: flex; align-items: center; gap: 48px; margin-top: 24px; }
.hero__seal { width: 118px; height: 118px; }

.partners {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 62px;
}

/* The hero strip is a WHITE KNOCKOUT over the photograph, as the export draws it.
   The bundled defaults are already white, but a client-supplied full-colour logo
   coming out of the ACF repeater would otherwise sit dark-on-dark and vanish, so
   every logo here is flattened to white. The filter is idempotent on an already
   white mark (white -> black -> white) and leaves transparency alone.
   On the light category banner the same logos are used at full colour. */
.partners img { height: 40px; width: auto; filter: brightness(0) invert(1); }

/* The track and its slots exist only so the mobile marquee has something to
   translate. Above the phone breakpoint both are transparent to layout, so each
   strip stays the plain flex row of <img> it has always been. */
.partners__track,
.partners__item { display: contents; }

/* The second pass of logos exists ONLY to make the mobile marquee loop without a
   seam. Anywhere the marquee is not running it is a duplicate of the whole strip,
   so it stays out of the document's layout entirely. */
.partners__item[aria-hidden="true"] { display: none; }

/* ==========================================================================
   Light page banner — category and product pages

   No photo bleed: a top-down #EDEDED wash with the subject bitmap sitting on the
   right. The navbar rides inside it in normal flow.
   ========================================================================== */
.banner {
	position: relative;
	background: var(--elan-page);
	overflow: hidden;
}

.banner__wash { position: absolute; inset: 0 0 auto; height: 100%; background: var(--wash-hero-top); }
.banner__in { position: relative; z-index: 2; }

.banner--category { height: 782px; }

/* The export's subject bitmap is a wide 780px composition that fits the band
   exactly. A category image uploaded through ACF can carry any aspect ratio, so
   the art is also capped in height and contained: a tall photograph then scales
   down inside the band instead of being clipped in half by .banner's overflow. */
.banner--category .banner__art {
	position: absolute;
	/* Anchored to the content frame's right edge, not the monitor's, so on a wide
	   screen the photograph stays beside the copy instead of drifting away. */
	right: max(0px, calc(50% - var(--page-width) / 2));
	top: 136px;
	width: 720px;
	max-width: 54%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	object-position: right center;
}
/* The copy block is a full content frame — a max-width here would beat .shell's
   and centre the column on the monitor instead of aligning it to the page. The
   760px measure belongs to the headline inside it. */
.banner--category .banner__copy { padding-top: 96px; padding-right: min(52vw, 700px); }
.banner--category .banner__title { max-width: 620px; }

.banner__partners {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 52px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 96px;
	flex-wrap: wrap;
}

.banner__partners img { height: 44px; width: auto; }

.banner--product .banner__wash { height: 760px; }

/* ==========================================================================
   Filter pills
   ========================================================================== */
.pills { display: flex; gap: 10px; flex-wrap: wrap; }

.pill {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border-radius: var(--radius-sm);
	background: var(--elan-white);
	box-shadow: var(--ring-brand-half);
	color: var(--elan-green);
	font-size: var(--type-small);
	line-height: 100%;
	white-space: nowrap;
	transition: background var(--dur-base) var(--ease-brand);
}

.pill:hover { background: var(--elan-green-tint); opacity: 1; }
.pill--on { background: var(--elan-chip); color: var(--elan-ink); box-shadow: none; }

/* ==========================================================================
   Product card — the 313 x 280 shop tile

   Names are Marcellus 32px. Do not shorten a long name to fit; let it wrap.
   ========================================================================== */
.pcard { width: var(--card-w); flex: none; display: flex; flex-direction: column; }

/* The product photographs carry their own background, so the well is the picture:
   the image fills it edge to edge rather than floating on a tinted tile. The shots
   are slightly portrait, so the well is too — 4:5 matches the source crop, and the
   tint underneath only ever shows for a product with no image at all. */
.pcard__well {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	background: var(--elan-surface);
	box-shadow: var(--ring-tile);
	overflow: hidden;
}

/* The whole picture is a link to the product. It is hidden from assistive tech and
   skipped by the tab order because the product name below already links there —
   otherwise every card would be two identical stops saying the same thing. */
.pcard__link { display: block; width: 100%; height: 100%; }

.pcard__well img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-brand);
}

/* focus-within, not .pcard__link:focus — the picture link is tabindex="-1", so
   the focus that matters belongs to the product name below it. */
.pcard:hover .pcard__well img,
.pcard:focus-within .pcard__well img { transform: scale(1.04); }

.pcard__heart {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 0;
	color: var(--elan-ink);
	transition: color var(--dur-base) var(--ease-brand);
}

.pcard__heart:hover { color: var(--elan-green); }

/* The one glyph that ever fills solid. */
.pcard__heart[aria-pressed="true"] { color: var(--elan-green); }

.disc {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-pill);
	background: var(--elan-clay);
	color: var(--elan-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--type-body);
	font-weight: 700;
	line-height: 100%;
}

.pcard__name {
	font-family: var(--font-display);
	font-size: var(--type-h2);
	line-height: 100%;
	font-weight: 400;
	margin: 24px 0 0;
}

.pcard__name a { color: inherit; }

.pcard__sub { font-size: var(--type-small); line-height: 100%; color: var(--elan-ink-muted); margin: 14px 0 0; }

.price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; }
.price s { font-size: var(--type-micro); color: var(--elan-ink-soft); text-decoration-thickness: 1px; }
.price b { font-size: var(--type-price); font-weight: 500; line-height: 100%; }

/* The card's button always sits on the card's baseline, however the name wraps. */
.pcard .btn--block { margin-top: auto; margin-block-start: 20px; }

.rail {
	display: flex;
	gap: var(--grid-product-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rail::-webkit-scrollbar { display: none; }

/* The reference pins four 313px columns; a fluid grid keeps the same rhythm and
   avoids the 12px horizontal overflow that fixed columns cause at exactly 1440. */
.grid4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px var(--grid-product-gap);
}

.grid4 .pcard, .grid2 .pcard { width: auto; }

/* ==========================================================================
   Category panel (home) — the tabbed "Tri kategorije" block
   ========================================================================== */
.wash { background: var(--wash-section); }

.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.tab {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 20px;
	border-radius: var(--radius-xs);
	font-size: var(--type-body);
	line-height: 100%;
	color: var(--elan-ink);
	white-space: nowrap;
}

.tab--on { background: var(--elan-green-tint); box-shadow: var(--ring-brand-half); color: var(--elan-green); }

/* Three cards, stacked. This was a tab set until 2026-08-30 — see
   parts/sections/category-panel.php for why it changed. */
.panels { display: flex; flex-direction: column; gap: 24px; }

.panel {
	position: relative;
	display: flex;
	gap: 48px;
	align-items: stretch;
	--panel-pad: 33px;
	padding: var(--panel-pad);
	border-radius: var(--radius-2xl);
	background: rgba(194, 194, 194, .2);
	box-shadow: var(--ring-brand-half);
	/* The ornaments bleed toward the card's edges; the radius has to clip them or
	   they escape the corners. */
	overflow: hidden;
}

/* The two line drawings sit BEHIND the copy, at the weight the Figma frame draws
   them: visible as texture, never as content. They are the first thing to go when
   there is no room for them.

   They live in the COPY COLUMN and are anchored to its right edge, so they follow
   it as it narrows and can never reach the photograph. */
.panel__orn {
	position: absolute;
	z-index: 0;
	/* The copy column is a flex COLUMN, so its cross axis is horizontal and the
	   inherited align-items: stretch blows an absolutely positioned child out to the
	   full column width. Opting out is what keeps these at their drawn size. */
	align-self: flex-start;
	width: auto;
	max-width: 92%;
	opacity: .7;
	pointer-events: none;
	user-select: none;
}

.panel__orn--a { top: 2%; right: 4%; height: 84px; }
.panel__orn--b { bottom: calc(var(--panel-pad) * -1); right: 4%; height: 84px; }

/* Everything else has to sit above them. The :not() matters — the ornaments are
   themselves children of the copy column, and this rule outranks their own
   `position: absolute`, which quietly dropped them back into the flow. */
.panel__img { position: relative; z-index: 1; }
.panel__txt > *:not(.panel__orn) { position: relative; z-index: 1; }

.panel__txt { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 14px 0 0; flex: 1; min-width: 0; }
.panel__txt .body { max-width: 520px; }
.panel__txt .chips { margin-top: 8px; }
.panel__cta { align-self: flex-start; margin-top: 24px; }

.panel__img {
	width: 568px;
	flex: none;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px #D4D4D4;
}

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

/* ==========================================================================
   Reviews
   ========================================================================== */
.rev {
	width: 944.023px;
	flex: none;
	display: flex;
	gap: 33px;
	padding: 33px;
	border-radius: 22px;
	background: linear-gradient(119.932deg, #FBFBFB 0%, #F1F1F1 100%);
	box-shadow: inset 0 0 0 1px #D9D9D9;
}

.rev__ph { width: 222px; height: 270px; flex: none; border-radius: 19px; overflow: hidden; background: var(--elan-surface); }
.rev__ph img { width: 100%; height: 100%; object-fit: cover; }

.rev__body { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }

.stars { color: var(--elan-star); font-size: 20px; letter-spacing: 2px; line-height: 100%; margin: 0; }

.rev__q { font-size: var(--type-body); line-height: 150%; margin: 0; }
.rev__n { font-size: var(--type-small); line-height: 100%; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin: 0; }
.rev__r { font-size: var(--type-micro); line-height: 100%; color: var(--elan-ink-soft); margin: 6px 0 0; }

.dots { display: flex; gap: 6px; margin-top: 33px; }
.dots i, .dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--elan-dark-grey); padding: 0; }
.dots i.on, .dots button.on { background: var(--elan-green); }

/* ==========================================================================
   Promises / feature items
   ========================================================================== */
.promises { display: flex; flex-direction: column; gap: 33px; }

.promise { display: grid; grid-template-columns: 30px 1fr; gap: 14px 16px; align-items: start; }

/* Bold is declared, not inherited. The reference pages carry no heading reset, so
   these <h3>s pick up the browser's bold; tokens/base.css DOES reset headings to
   400, which silently flattened them here. Stating the weight makes the result the
   same in both. */
.promise__t {
	font-family: var(--font-sans);
	font-size: var(--type-lead);
	font-weight: 700;
	line-height: 100%;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	margin: 0;
	grid-column: 2;
}

.promise__b {
	font-size: var(--type-body);
	line-height: 150%;
	color: var(--elan-ink);
	margin: 0;
	grid-column: 2;
	padding-left: 16px;
	border-left: 1px solid var(--elan-border);
}

.promise .ico { color: var(--elan-green); margin-top: 2px; }

/* ==========================================================================
   Editorial split — "O nama" / "Zašto biljni proteini?"
   ========================================================================== */
.split { display: flex; gap: 64px; align-items: flex-start; }
.split__lead { width: 600px; flex: none; }
.split__rest { flex: 1; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-top: 6px; }

.split--media { margin-top: 64px; }
.split__media { width: 621px; height: 684px; flex: none; overflow: hidden; background: var(--elan-surface); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--round { width: 616px; height: 560px; border-radius: var(--radius-lg); }

/* Category editorial photography is supplied by the category editor and may use
   a different aspect ratio for each product family. Preserve the full photograph
   instead of forcing it through the generic 616 x 560 crop. */
.sec--why .split__media--round { width: 540px; height: auto; background: transparent; }
.sec--why .split__media--round img { height: auto; object-fit: contain; }
.sec--why .split--media { gap: 96px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta { position: relative; height: 799px; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__grad { position: absolute; inset: 0; background: var(--overlay-hero); }

/* Full-bleed photograph, framed copy — same arrangement as the hero. */
.cta__in {
	position: relative;
	z-index: 2;
	padding: 112px var(--page-gutter) 0;
	max-width: var(--page-width);
	margin-inline: auto;
	color: var(--elan-white);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cta__in > * { max-width: 760px; }

.cta__in .eyebrow { color: var(--elan-white); }
.cta__t { font-size: var(--type-display); line-height: 64px; }
.cta__in .lede { max-width: 600px; }
.cta__in .chips { margin-top: 8px; }
.cta__btn { align-self: flex-start; margin-top: 16px; }

/* ==========================================================================
   Blog / recipe cards
   ========================================================================== */
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-product-gap); }

.bcard {
	display: flex;
	flex-direction: column;
	background: #EFEFEF;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(24, 83, 75, .07);
	transition: transform var(--dur-base) var(--ease-brand), box-shadow var(--dur-base) var(--ease-brand);
}
.bcard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(33, 33, 33, .08); }
.bcard__img { height: 315px; overflow: hidden; background: var(--elan-surface); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-brand); }
.bcard:hover .bcard__img img { transform: scale(1.02); }
.bcard__in { padding: 48px 24px 64px; display: flex; flex-direction: column; gap: 28px; }
.bcard__t { font-family: var(--font-display); font-size: var(--type-h3); line-height: 130%; font-weight: 400; margin: 0; }
.bcard__t a { color: inherit; }

.readlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--type-micro);
	line-height: 100%;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--elan-ink);
	margin-top: 8px;
}

/* The section head that opens Blog / Recepti / Zadovoljni kupci: heading on the
   left, the "Pogledaj sve" button or the rail arrows on the right. */
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; }
.sechead__actions { display: flex; align-items: center; gap: 24px; }
.sechead__actions .arrows { display: none; }
.sechead--top { align-items: flex-start; }
.sechead--top .arrows { margin-top: 33px; }

/* The filter row: pills left, rail arrows right. */
.sechead--filters { align-items: center; margin-top: 23px; gap: 24px; }
.sechead--filters .pills { flex: 1; }

/* The rail starts on the content frame's left edge and runs off the right edge of
   the screen, so it is a sibling of .shell rather than a child and takes the
   frame inset as padding. */
.rail--bleed { padding-block: 47px 0; padding-inline: var(--frame-inset); }
.sec--products .rail { margin-top: 47px; }
.sec--catgrid .pills { margin-top: 24px; }

/* The category grid is the one 4-up that tightens its row gap from 48 to 24. */
.sec--catgrid .grid4 { margin-top: 33px; row-gap: 24px; }
.sec--panel .tabs { margin-top: 47px; }
.sec--panel .panels { margin-top: 33px; }
.sec--blog .bgrid,
.sec--recipes .bgrid { margin-top: 47px; }
.proc__rail { padding-block: 96px 0; padding-inline: var(--frame-inset); }
.proc__intro { max-width: 660px; }

/* The process rail hangs its arrows low, level with the end of the intro
   paragraph, rather than beside the heading as every other rail does. */
.sec--proc .arrows { margin-top: 140px; }

/* The FAQ column and the note under a split heading. */
.split__note { margin-top: 24px; max-width: 420px; }
.split__acc { flex: 1; border-top: 0; min-width: 0; }

/* The category / page banner's copy stack. */
.banner__title { margin-top: 30px; }
.banner__lede { margin-top: 36px; max-width: 540px; }
.banner__cta { margin-top: 44px; }
.banner__meta { margin-top: 16px; }
.banner--page { padding-bottom: 24px; }
.banner--page .banner__wash { height: 420px; }
.banner--page .banner__copy { padding-top: 40px; }

/* The shop landing has its own campaign-style desktop header. Product taxonomy
   and search archives keep the neutral page banner above. */
.shophero__art { display: none; }

@media (min-width: 768px) {
	.banner--shop {
		height: 456px;
		padding-bottom: 0;
		background: var(--elan-green);
		color: var(--elan-white);
	}

	.banner--shop .banner__wash { display: none; }
	.banner--shop .nav--dark,
	.banner--shop .nav--dark a { color: var(--elan-white); }
	.banner--shop .nav__logo { visibility: hidden; }
	.banner--shop .banner__copy { padding-top: 48px; padding-right: 54%; }
	.banner--shop .banner__copy .h1 { font-size: 68px; line-height: 100%; }
	.banner--shop .banner__lede { max-width: 500px; margin-top: 24px; }

	.shophero__art {
		display: block;
		position: absolute;
		z-index: 1;
		right: max(var(--page-gutter), calc((100% - var(--page-width)) / 2 + var(--page-gutter)));
		bottom: 0;
		width: 510px;
		height: 350px;
	}

	.shophero__product { position: absolute; width: auto; object-fit: contain; }
	/* Three source packshots include generous transparent canvases. Their drawn
	   subjects are enlarged and lowered here so the visible products—not their
	   PNG bounds—match the compact overlap in the reference. */
	.shophero__product--butter { left: 2px; bottom: -54px; z-index: 1; height: 390px; }
	.shophero__product--walnut { left: 51px; bottom: -52px; z-index: 3; height: 510px; }
	.shophero__product--protein { left: 220px; bottom: 11px; z-index: 2; height: 235px; }
	.shophero__product--almond { left: 269px; bottom: -55px; z-index: 4; height: 400px; }

	.banner--shop + .sec--catgrid .sechead--filters { margin-top: 0; }
}

/* ==========================================================================
   Editor prose — a page written in the block editor, set in the brand's type
   ========================================================================== */
.entry { max-width: 760px; }
.entry > * + * { margin-top: 24px; }
.entry p, .entry li { font-size: var(--type-body); line-height: 150%; }
.entry h2, .entry h3, .entry h4 { font-family: var(--font-display); font-weight: 400; }
.entry h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); margin-top: 48px; }
.entry h3 { font-size: var(--type-h3); line-height: 130%; margin-top: 33px; }
.entry h4 { font-size: var(--type-h4); line-height: 130%; margin-top: 24px; }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.entry img { border-radius: var(--radius-md); }
.entry blockquote {
	margin: 33px 0;
	padding-left: 24px;
	border-left: 1px solid var(--elan-border);
	font-size: var(--type-lead);
	line-height: 1.5;
}
.entry__hero { border-radius: var(--radius-md); overflow: hidden; background: var(--elan-surface); }
.entry__hero img { width: 100%; height: auto; }

/* WordPress's own pagination, kept to the brand's link style. */
.sec__more .nav-links { display: flex; gap: 14px; align-items: center; font-size: var(--type-small); }
.sec__more .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--radius-xs);
	color: var(--elan-ink);
}
.sec__more .page-numbers.current { background: var(--elan-green-tint); box-shadow: var(--ring-brand-half); color: var(--elan-green); }

/* ==========================================================================
   Accordion

   Drawn open in the exports. The rows toggle here — a real page needs the
   behaviour — but they render open with JS off so nothing is ever unreachable.
   ========================================================================== */
.acc { border-top: 1px solid var(--elan-border); }
.acc__row { padding: 20px 0 22px; border-bottom: 1px solid var(--elan-border); }

.acc__hd {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	text-align: left;
	padding: 0;
}

/* Bold declared for the same reason as .promise__t — see the note there. */
.acc__t {
	font-family: var(--font-sans);
	font-size: var(--type-lead);
	font-weight: 700;
	line-height: 100%;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	margin: 0;
}

.acc__x { width: 18px; height: 18px; flex: none; position: relative; margin-top: 2px; }

.acc__x::before, .acc__x::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: var(--elan-ink);
	transition: transform var(--dur-base) var(--ease-brand);
}

.acc__x::before { transform: rotate(45deg); }
.acc__x::after  { transform: rotate(-45deg); }

/* Collapsed: the X rotates back into a +. */
.acc__hd[aria-expanded="false"] .acc__x::before { transform: rotate(90deg); }
.acc__hd[aria-expanded="false"] .acc__x::after  { transform: none; }

.acc__b { font-size: var(--type-small); line-height: 150%; margin: 12px 0 0; max-width: 640px; }

.faq .acc__row { padding: 26px 0 30px; }

/* The FAQ question is the one place the brand sets Marcellus bold — the face has
   no bold cut, so this is the synthesised weight the export itself shows. */
.faq .acc__t {
	font-family: var(--font-display);
	font-size: var(--type-h2);
	font-weight: 700;
	line-height: 100%;
	text-transform: none;
	letter-spacing: 0;
}

.acc__facts { display: flex; gap: 33px; flex-wrap: wrap; margin-top: 8px; }

/* ==========================================================================
   Product detail
   ========================================================================== */
.pdp { display: flex; gap: 90px; padding-top: 91px; }

.gal { width: 530px; flex: none; margin-left: 46px; }

/* Same rule as the card well: the photograph fills the frame, at the source's
   own 4:5 crop, instead of being contained on a tinted panel. */
.gal__main {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	background: var(--elan-surface);
	overflow: hidden;
}

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

.gal__dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.gal__dots i, .gal__dots button { width: 44px; height: 3px; background: var(--elan-dark-grey); padding: 0; border-radius: 0; }
.gal__dots i.on, .gal__dots button.on { background: var(--elan-green); }

.pdp__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdp__title { font-family: var(--font-display); font-size: var(--type-display); line-height: 100%; font-weight: 400; margin: 22px 0 0; }
.pdp__desc { margin-top: 24px; max-width: 620px; }

.qty { display: flex; gap: 14px; align-items: center; margin-top: 33px; flex-wrap: wrap; }

.stepper {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 34px;
	padding: 0 14px;
	border-radius: var(--radius-xs);
	background: var(--elan-white);
	box-shadow: inset 0 0 0 1px var(--elan-border);
	font-size: var(--type-small);
}

.stepper button { padding: 0; line-height: 1; }
.stepper input {
	width: 3ch;
	border: 0;
	background: none;
	text-align: center;
	font: inherit;
	color: inherit;
	-moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.size {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 22px;
	border-radius: var(--radius-xs);
	background: var(--elan-surface);
	box-shadow: inset 0 0 0 1px var(--elan-border);
	font-size: var(--type-micro);
	color: var(--elan-ink-soft);
}

.size--on { background: var(--elan-green-tint); box-shadow: var(--ring-brand-half); color: var(--elan-green); }
.qty__sizes { display: inline-flex; gap: 10px; flex-wrap: wrap; }

.price--pdp { margin-top: 24px; }
.price--pdp b { font-size: 32px; }
.price--pdp s { font-size: var(--type-lead); }

.pdp__cta { display: flex; gap: 16px; margin-top: 33px; flex-wrap: wrap; }
.pdp__cta .btn { height: 52px; border-radius: var(--radius-xs); font-size: var(--type-body); padding: 0 33px; }

.pdp .acc { margin-top: 47px; }

.cats { display: flex; flex-direction: column; gap: 16px; margin-top: 33px; }
.cats__hd {
	font-size: var(--type-small);
	line-height: 100%;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--elan-ink);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--elan-border);
	margin: 0;
}
.cats__row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Category page process rail
   ========================================================================== */
.proc { background: #E4EAE9; }
.proc__rail { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.proc__rail::-webkit-scrollbar { display: none; }

.proc__step { width: 413px; flex: none; padding-right: 24px; }
.proc__n { display: flex; align-items: baseline; gap: 12px; font-size: var(--type-body); line-height: 100%; color: var(--elan-green); margin: 0; }
.proc__n b { font-weight: 700; }
.proc__n span { color: var(--elan-ink); font-size: var(--type-lead); }
.proc__line { position: relative; height: 1px; background: #C6CFCD; margin: 26px 0 33px; }
.proc__line i { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--elan-green); }
.proc__t { font-family: var(--font-display); font-size: var(--type-h2); line-height: 100%; font-weight: 400; margin: 0 0 16px; }
.proc__b { font-size: var(--type-small); line-height: 150%; margin: 0; max-width: 340px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ft { position: relative; background: var(--wash-footer); padding-top: 64px; overflow: hidden; }

/* The mint ramp fills the viewport; everything drawn on it holds the frame. The
   rule is a bare border, so it takes the inset as margin rather than padding —
   padding would stretch the border across the gutters too. */
.ft__rule { height: 0; border-top: .5px solid var(--elan-ink); margin: 0 var(--frame-inset) 64px; }

.ft__cols {
	display: flex;
	gap: 64px;
	max-width: var(--page-width);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	flex-wrap: wrap;
}

.ft__news { width: 400px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.ft__news h3 { font-family: var(--font-display); font-size: var(--type-h4); line-height: 100%; font-weight: 400; margin: 0; }

.ft__form { display: flex; gap: 24px; align-items: flex-end; margin-top: 8px; }

.ft__input {
	flex: 1;
	min-width: 0;
	border: 0;
	border-bottom: 1px solid var(--elan-ink-soft);
	background: none;
	padding: 8px 0;
	font-family: inherit;
	font-size: var(--type-body);
	color: var(--elan-ink);
}

.ft__input::placeholder { color: var(--elan-ink-soft); }
.ft__input:focus-visible { outline-offset: 4px; }

.ft__col { display: flex; flex-direction: column; gap: 14px; }
.ft__col h4 { font-family: var(--font-display); font-size: var(--type-h4); line-height: 100%; font-weight: 400; margin: 0 0 10px; }
.ft__col a, .ft__col p { font-size: var(--type-lead); line-height: 130%; margin: 0; color: var(--elan-ink); }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.ft__col--elan { width: 180px; }
.ft__col--shop { width: 220px; }
.ft__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ft__links a { font-size: var(--type-lead); line-height: 130%; color: var(--elan-ink); }
/* Scoped to .ft__col so it outranks the `.ft__col p` rule above, which would
   otherwise force this back to 18px with no top margin. */
.ft__col .ft__follow { margin-top: 24px; font-size: var(--type-small); }

.ft__social { display: flex; gap: 14px; color: var(--elan-green-600); margin-top: 6px; }
.ft__social a { color: inherit; }

.ft__pay { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.ft__pay img { height: 34px; width: auto; }

/* The oversized wordmark is the logo SVG at 1271px in --elan-green-400, cropped
   by a shorter window so its descender is cut exactly as in the export. */
.ft__markwrap { margin: 64px auto 0; width: 1271px; max-width: 100%; height: 400px; overflow: hidden; }
.ft__mark { display: block; width: 1271px; height: 440px; color: var(--elan-green-400); fill: currentColor; }

.ft__legal {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: var(--type-micro);
	line-height: 100%;
	color: var(--elan-ink);
	max-width: var(--page-width);
	margin: -56px auto 0;
	padding: 0 var(--page-gutter) 33px;
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   Product tile — additions to the reference component
   ========================================================================== */

/* The category line, above the name. The tile is the only place a shopper meets
   the taxonomy while browsing, so it is a link, not a label. */
.pcard__cat {
	margin: 16px 0 0;
	font-size: var(--type-micro);
	line-height: 100%;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--elan-green);
}

.pcard__cat a { color: inherit; }
.pcard__cat + .pcard__name { margin-top: 8px; }

/* Both hearts ship in the markup and CSS shows one. Rewriting the <use href> on
   click flashes while the sprite re-resolves; swapping which one is displayed does
   not, which keeps the optimistic toggle instant.

   Keyed off the behaviour hook rather than .pcard__heart, so the tile's icon button
   and the product page's "Dodaj u listu želja" button share one rule. */
[data-elan-wishlist] .pcard__heart-on,
[data-elan-wishlist][aria-pressed="true"] .pcard__heart-off { display: none; }
[data-elan-wishlist][aria-pressed="true"] .pcard__heart-on { display: block; }

/* The product page's wishlist button fills green once it is on, which is the only
   place in the system a ghost button ever changes colour. */
.btn--wish[aria-pressed="true"] { color: var(--elan-green); box-shadow: var(--ring-brand); }

/* ==========================================================================
   Asynchronous states

   Nothing spins. A control that is working goes quiet and stops accepting a
   second press; a list that is reloading fades. Anything more would be the kind
   of motion the brand rules out.
   ========================================================================== */
.btn.is-loading,
.btn[disabled] { opacity: .55; pointer-events: none; }

.rail.is-loading,
.grid4.is-loading {
	opacity: .4;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease-brand);
}

.sec__empty {
	margin-top: 33px;
	color: var(--elan-ink-soft);
}

/* ==========================================================================
   Filter row

   The pills are a real control now, so they need a real pressed state and, on a
   narrow screen, somewhere to go: they scroll horizontally rather than wrapping
   into three ragged rows above the grid.
   ========================================================================== */
.sechead--filters .pills {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pill { transition: background var(--dur-base) var(--ease-brand), box-shadow var(--dur-base) var(--ease-brand), color var(--dur-base) var(--ease-brand); }
.pill:hover { opacity: 1; box-shadow: var(--ring-brand); }

/* ==========================================================================
   404
   ========================================================================== */
.sec--404 { padding-block: 64px 0; }

.nf__search {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 620px;
}

.nf__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 33px; }
/* ==========================================================================
   Wishlist page
   ========================================================================== */
.wish__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 80px 0 40px;
	text-align: center;
}

.wish__empty .ico { width: 40px; height: 36px; color: var(--elan-green-400); margin-bottom: 6px; }
.wish__empty .body { max-width: 420px; color: var(--elan-ink-soft); }
.wish__empty .btn { margin-top: 18px; }
.wish__note { margin-top: 48px; }

/* The removal target is a bare wrapper, so it must not become a grid item with a
   life of its own — the tile inside is what the grid is sizing. */
[data-elan-wishlist-card] { display: contents; }
/* ==========================================================================
   Footer wordmark

   The mark was a fixed 1271px inside a wrapper that shrank with the viewport, so
   below the frame width it was left-aligned and its right edge was cut off. It is
   now fluid: the wrapper carries the crop as an aspect ratio and the mark simply
   fills it, which reproduces the reference's 400/440 crop at every width.
   ========================================================================== */
.ft__markwrap {
	margin: 64px auto 0;
	width: 100%;
	max-width: 1271px;
	height: auto;
	aspect-ratio: 1271 / 400;
	overflow: hidden;
}

.ft__mark {
	display: block;
	width: 100%;
	height: auto;
	/* Belt and braces with the viewBox in the markup: an <svg> with neither has no
	   intrinsic ratio and `height: auto` resolves to the 150px default. */
	aspect-ratio: 127 / 44;
	color: var(--elan-green-400);
	fill: currentColor;
}

/* The legal row sits over the foot of the mark. The overlap has to scale with it
   or a fixed -56px lands in the middle of the letterforms on a narrow screen. */
.ft__legal { margin-top: clamp(-56px, -3.9vw, -24px); }

/* Desktop footer: the Figma frame keeps a white upper band and contains the mint
   wash inside the rounded content frame. Mobile deliberately retains the
   established full-width treatment below. */
@media (min-width: 768px) {
	.ft { background: var(--elan-page); padding-bottom: 32px; }

	.ft::before {
		content: '';
		position: absolute;
		z-index: 0;
		left: var(--frame-inset);
		right: var(--frame-inset);
		top: 146px;
		bottom: 32px;
		background: var(--wash-footer);
		border-radius: 0 0 32px 32px;
	}

	.ft__rule,
	.ft__cols,
	.ft__markwrap,
	.ft__legal { position: relative; z-index: 1; }

	.ft__rule { margin-bottom: 64px; }
	.ft__cols { flex-wrap: nowrap; }
	.ft__markwrap {
		width: calc(100% - 2 * var(--frame-inset) - 64px);
		max-width: 1207px;
		margin-top: 44px;
		aspect-ratio: 1271 / 443;
		overflow: visible;
	}
	.ft__mark { width: 100%; height: auto; aspect-ratio: 1271 / 443; object-fit: contain; }
	.ft__legal {
		margin-top: -40px;
		padding-right: calc(var(--page-gutter) + 32px);
		padding-bottom: 48px;
		padding-left: calc(var(--page-gutter) + 32px);
	}
}

/* ==========================================================================
   Menu drawer

   ONE per document, rendered in footer.php so both the page header's burger and
   the condensed sticky bar's reach it. It lives OUTSIDE .elan-site because that
   element is `overflow: clip`, which crops a fixed child.
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 90; }

.drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(22, 22, 22, .45);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-brand);
}

.drawer--open .drawer__scrim { opacity: 1; }

.drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(392px, 88vw);
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px var(--page-gutter-mobile) 32px;
	background: var(--elan-white);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--dur-base) var(--ease-brand);
}

.drawer--open .drawer__panel { transform: none; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__logo { width: 88px; line-height: 0; color: var(--elan-green); }
.drawer__logo svg { width: 100%; height: auto; }
.drawer__close { display: flex; padding: 8px; margin-right: -8px; color: var(--elan-ink); }

.drawer__search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 14px;
	border-radius: var(--radius-sm);
	background: var(--elan-surface);
}

.drawer__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: var(--type-body);
	color: var(--elan-ink);
}

.drawer__search input::placeholder { color: var(--elan-ink-soft); }
.drawer__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.drawer__search button { display: flex; color: var(--elan-green); }
.drawer__search .ico-search { width: 20px; height: 20px; }

/* The drawer reuses the header's list markup verbatim, so everything the bar
   styles has to be undone here rather than the two carrying separate markup. */
.drawer__nav .nav__links {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	font-size: var(--type-h4);
	font-family: var(--font-display);
}

.drawer__nav .nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid var(--elan-border);
}

.drawer__nav .nav__item:last-child { border-bottom: 1px solid var(--elan-border); }

.drawer__nav .nav__links > .nav__item > a {
	flex: 1;
	padding: 15px 0;
	color: var(--elan-ink);
}

.drawer__nav .nav__links > .nav__item > a::after { content: none; }
.drawer__nav .nav__item--on > a { color: var(--elan-green); }

/* In the bar the chevron sits inside the link; in the drawer the link must stay
   a link, so the chevron moves to its own hit area beside it. */
.drawer__nav .nav__chev { display: none; }

.drawer__nav .nav__subtoggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	color: var(--elan-ink);
}

.drawer__nav .nav__subtoggle .ico { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-brand); }
.drawer__nav .nav__item--open .nav__subtoggle .ico { transform: rotate(180deg); }

.drawer__nav .nav__sub {
	position: static;
	width: 100%;
	flex-basis: 100%;
	min-width: 0;
	padding: 0 0 12px 14px;
	background: none;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
	display: none;
	font-family: var(--font-sans);
}

.drawer__nav .nav__item--open > .nav__sub { display: block; }
.drawer__nav .nav__sub .nav__item { border: 0; }
.drawer__nav .nav__sub a { padding: 9px 0; font-size: var(--type-body); white-space: normal; }
.drawer__nav .nav__sub a:hover { background: none; }

.drawer__utils { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }

.drawer__utils a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	color: var(--elan-ink);
	font-size: var(--type-body);
}

.drawer__utils .ico { width: 22px; height: 22px; color: var(--elan-green); }

/* The bubble is absolute against the icon in the bar; in a text row it belongs
   inline at the end. */
.drawer__utils .nav__count { position: static; margin-left: auto; }

.drawer__social { display: flex; gap: 18px; color: var(--elan-green-600); padding-top: 4px; }
.drawer__social a { color: inherit; }

/* Scroll lock. `position: fixed` on the body would lose the scroll offset; this
   keeps it and simply stops the page moving underneath the panel. */
body.elan-locked { overflow: hidden; }

/* ==========================================================================
   Toasts

   Every asynchronous action lands here — added to cart, wishlist on and off, and
   any error the server sends back — so an action never has to navigate to prove
   that it worked. Bottom-right on a desktop, full width along the bottom on a
   phone, above everything including the drawer.
   ========================================================================== */
.toasts {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	border-radius: var(--radius-md);
	background: var(--elan-green);
	color: var(--elan-white);
	box-shadow: 0 8px 28px rgba(22, 22, 22, .16);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand);
	pointer-events: auto;
}

.toast--in { opacity: 1; transform: none; }
.toast--out { opacity: 0; transform: translateY(6px); }

/* The clay of the discount medallion is the palette's only warning colour; an
   error toast borrows it rather than introducing a red the brand does not have. */
.toast--error { background: var(--elan-clay); }

.toast__ico { flex: none; margin-top: 1px; }
.ico-ui { width: 20px; height: 20px; }
.ico-chev { width: 12px; height: 12px; }

.toast__body { flex: 1; min-width: 0; }

.toast__msg {
	margin: 0;
	font-size: var(--type-small);
	line-height: 140%;
	color: inherit;
}

.toast__action {
	display: inline-block;
	margin-top: 8px;
	color: inherit;
	font-size: var(--type-micro);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.toast__close { flex: none; color: inherit; opacity: .7; padding: 2px; }
.toast__close:hover { opacity: 1; }
.toast__close .ico { width: 16px; height: 16px; }

/* ==========================================================================
   Sticky condensed bar

   A deliberate, client-approved deviation from the brand's "nothing is sticky"
   rule (approved 2026-08-28). It returns on scroll-up only, so it never covers
   what is being read. Do not revert it to match the static Figma file.
   ========================================================================== */
.stickybar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	background: var(--elan-page);
	border-bottom: 1px solid var(--elan-border);
	transform: translateY(-100%);
	visibility: hidden;
	transition:
		transform var(--dur-base) var(--ease-brand),
		visibility 0s linear var(--dur-base);
}

.stickybar--visible {
	transform: none;
	visibility: visible;
	transition: transform var(--dur-base) var(--ease-brand), visibility 0s;
}

/* The condensed bar changes HEIGHT and nothing else. It used to redeclare the
   link type at --type-small against the page bar's --type-lead, so scrolling
   swapped one menu for a visibly different one. */
.stickybar .nav { height: 76px; }
.stickybar .nav__logo { width: 104px; }
.stickybar .nav__utils { gap: 26px; }

/* The bar is fixed, so its dropdown and search panel must clear it rather than
   scroll with the page. */
.stickybar .topbar { position: static; }

/* Half the track is one full set of logos, so translating by exactly -50% lands
   the duplicate where the original started and the loop is seamless. */
@keyframes elan-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   >= 1200px is the reference desktop frame, unchanged.
   Below it the layout steps down. The reference never had to draw these two
   intermediate states; they exist only to carry the design across the gap.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Navbar: the two points where the link row meets the centred wordmark

   Measured, not guessed. With the links at full size the row reaches x=568 and
   the mark's left edge crosses it at about 1280; tightened, the row reaches x=463
   and the mark crosses that at about 1060. Hence 1340 and 1100.
   -------------------------------------------------------------------------- */
@media (max-width: 1339px) {
	.nav__links { gap: 24px; font-size: 16px; }
	.nav__logo { width: 112px; }
	.nav__utils { gap: 22px; }
}

@media (max-width: 1199px) {
	:root { --page-gutter: 40px; }

	/* Four 313px tiles need 1324px of content. Below the frame the row drops to
	   three, which keeps the tile close to its drawn width instead of squeezing
	   four into 190px and wrapping every product name onto three lines. */
	.grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.hero { height: auto; min-height: 720px; }
	.hero__bg, .hero__bg--video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	/* Below the frame width the copy uses whatever room there is, so the desktop
	   measures on the children are released too. */
	.hero__in { padding-top: 160px; padding-bottom: 160px; }
	.hero__in > * { max-width: none; }
	.hero-t { font-size: 64px; line-height: 62px; }

	.partners { gap: 40px; }
	.partners img { height: 32px; }

	/* The banner keeps its two-column composition down to 900: the photograph
	   stays absolute so it can bleed, just smaller and lower, and the copy keeps
	   the left half to itself. */
	.banner--category { height: auto; padding-bottom: 80px; }
	.banner--category .banner__art { top: 160px; width: 46%; max-width: 46%; max-height: 420px; }
	/* Held clear of the photograph with padding, never a max-width — a max-width
	   here outranks .shell's and re-centres the column on the viewport. */
	.banner--category .banner__copy { padding-top: 64px; padding-bottom: 40px; padding-right: 48%; }
	.banner--category .banner__title { max-width: none; font-size: 60px; line-height: 58px; }
	.banner__partners { position: static; padding: 40px 0 0; gap: 48px; }

	.split { gap: 40px; }
	.split__lead { width: 42%; }
	.split__media { width: 46%; height: 560px; }
	.split__media--round { width: 46%; height: 480px; }

	.panel { gap: 32px; }
	.panel__img { width: 42%; }

	/* The copy column narrows, so the drawings shrink with it. */
	.panel__orn { height: 68px; }

	.rev { width: min(720px, 86vw); }
	.rev__ph { width: 180px; height: 220px; }

	.cta { height: auto; }
	.cta__in { padding: 80px var(--page-gutter); }
	.cta__in > * { max-width: none; }
	.cta__t { font-size: 44px; line-height: 48px; }

	.bcard__img { height: 240px; }
	.bcard__in { padding: 32px 24px 40px; }

	.pdp { gap: 48px; padding-top: 48px; }
	.gal { width: 44%; margin-left: 0; }
	/* The gallery keeps its 4:5 crop at every size; only the radius changes. */
	.pdp__title { font-size: 44px; }

	/* The wordmark is fluid now; only its clearance changes here. */
	.ft__markwrap { margin-top: 48px; }
}

/* --------------------------------------------------------------------------
   Navbar collapse

   The bar centres its wordmark absolutely, so the links and the utilities each
   get half the row minus half the mark. Below ~1100 the link set no longer fits
   that half even when tightened, so the bar collapses to a burger there
   rather than at the 900 step the rest of the layout uses.
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
	.nav { height: 96px; }
	.burger { display: flex; }

	/* The wordmark leaves the centre and the link row goes with it: below this
	   width the row cannot hold five links AND clear a centred mark. */
	.nav__logo { position: static; transform: none; width: 104px; }
	.nav__nav { display: none; }

	.nav__utils { gap: 22px; }

	/* Search and the account move into the drawer, which has room for a real field
	   and a labelled row rather than two more glyphs squeezed under a 96px bar. */
	.nav__ic--search { display: none; }
	.nav__ic--account { display: none; }
	.nav__search { display: none; }

	.stickybar .nav { height: 68px; }
	.stickybar .nav__logo { width: 92px; }
}
@media (max-width: 899px) {
	:root { --page-gutter: 32px; }

	.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
	.bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.split, .split--media { flex-direction: column; gap: 32px; }
	.split__lead, .split__media, .split__media--round { width: 100%; }
	.split__media, .split__media--round { height: 420px; }

	.panel { flex-direction: column; }
	.panel__img { width: 100%; height: 280px; }

	/* Stacked, the copy runs the full width and there is nowhere for a drawing to
	   sit that is not underneath a line of text. */
	.panel__orn { display: none; }

	/* Below 900 the banner gives up its two columns: the photograph drops into
	   normal flow under the copy, which is why the markup places it last. */
	.banner--category .banner__art {
		position: static;
		width: 76%;
		max-width: 76%;
		max-height: none;
		margin: 8px auto 0;
	}

	.banner--category .banner__copy { padding-right: var(--page-gutter); padding-bottom: 0; }
	.banner--category .banner__title { font-size: 48px; line-height: 48px; }

	/* White copy over a photograph that is now cropped much tighter: the brand's
	   left-to-right ramp no longer covers where the text sits, so the CTA band
	   takes a top-down scrim the way the mobile hero does. */
	.cta__grad { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.35) 100%); }

	.pdp { flex-direction: column; }
	.gal { width: 100%; }

	.sechead { flex-direction: column; align-items: flex-start; gap: 24px; }

	/* The filter row stacks: the pills need the full width to wrap onto a second
	   line (flex-start would shrink-wrap them into one overflowing row), and the
	   arrows sit at the right as the mobile export draws them. */
	.sechead--filters { align-items: stretch; gap: 20px; }
	.sechead--filters .arrows { align-self: flex-end; }

	.ft__cols { gap: 40px; }
	.ft__news { width: 100%; }
	.ft__col--elan, .ft__col--shop { width: auto; min-width: 160px; }
}

/* ==========================================================================
   <= 767px — the reference's 390px `.pg--m` frame, ported verbatim
   ========================================================================== */
@media (max-width: 767px) {
	.shell { padding: 0 var(--page-gutter-mobile); }
	.sec { padding-block: 40px; }

	/* Nav: on mobile the reference lifts the bar OUT of the hero and draws it as
	   a white strip above it, in dark ink. */
	.topbar--over { position: static; background: var(--elan-white); }
	.topbar--over .nav--light, .topbar--over .nav--light a { color: var(--elan-ink); }

	/* The bar is no longer on the photograph, so the wordmark is no longer a knockout. */
	.topbar--over .nav--light .nav__logo { color: var(--elan-green); }

	.nav { height: 74px; padding: 0 var(--page-gutter-mobile); }
	.nav__logo { width: 74px; }
	.nav__utils { gap: 18px; }

	/* The mobile bar carries the cart and the burger only, as the export draws it.
	   Search and the wishlist live in the drawer rather than crowding a 390px row
	   until the cart falls off the end. */
	.nav__ic--wish { display: none; }

	.hero { min-height: 695px; }
	.hero__in { padding: 60px var(--page-gutter-mobile) 0; max-width: none; gap: 16px; }
	.hero-t { font-size: 30px; line-height: 40px; }
	.hero__title { margin-top: 10px; }
	.hero__eyebrow { font-size: 12px; line-height: 1.5; max-width: none; }
	.hero__lede { max-width: none; }
	.hero__actions { gap: 24px; margin-top: 16px; }
	.hero__seal { width: 70px; height: 70px; }

	/* The mobile hero's protection layer is a top-to-bottom ramp, not the
	   desktop's left-to-right one — the copy runs the full width. */
	.hero__grad { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.25) 100%); }

	/* The strip stays pinned to the FOOT of the hero, as it is on desktop. It was
	   briefly moved into the flow, which parked it directly under the CTA with the
	   rest of the hero photograph empty beneath it.

	   z-index 3 is load-bearing: .hero__grad sits at 2 so it can cover the video, so
	   anything at or below 2 is painted over and disappears. */
	.partners {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		gap: 16px;
		padding: 24px 0 20px;
		flex-wrap: wrap;
	}
	.partners img { height: 22px; }

	/* --------------------------------------------------------------------
	   Hero partner marquee

	   Four logos will not sit in a 390px row, and wrapping them onto two lines
	   pushes the strip up into the hero copy. The track carries the set twice
	   and travels exactly half its own width, so the loop has no seam.

	   Each logo gets a THIRD of the visible width as its slot, which is what
	   makes "three at a time" exact rather than a function of how wide each
	   mark happens to be.
	   -------------------------------------------------------------------- */
	.partners--marquee {
		display: block;
		overflow: hidden;
		padding: 24px 0 20px;
		gap: 0;
		/* Constant speed regardless of how many partners there are. */
		--partner-seconds: calc(var(--partner-count, 4) * 3s);
	}

	.partners--marquee .partners__track {
		display: flex;
		align-items: center;
		width: max-content;
		animation: elan-marquee var(--partner-seconds) linear infinite;
	}

	/* Inside the marquee the duplicate pass comes back — it is what the loop
	   travels into. */
	/* A THIRD of the strip, and the strip is full-bleed — so the divisor is the
	   viewport itself. Subtracting the page gutters first (they belong to the text
	   column, not to this strip) made each slot 119px in a 390px window, which fits
	   3.27 logos: three and a clipped sliver of a fourth. */
	.partners--marquee .partners__item,
	.partners--marquee .partners__item[aria-hidden="true"] {
		flex: 0 0 calc(100vw / 3);
		display: flex;
		align-items: center;
		justify-content: center;
		padding-inline: 8px;
	}

	.partners--marquee img { height: 22px; max-width: 100%; object-fit: contain; }

	.banner--category { padding-bottom: 0; }
	.banner--category .banner__wash { display: none; }
	.banner--category .banner__copy { padding-top: 32px; }
	.banner--category .banner__title {
		max-width: 260px;
		margin-top: 16px;
		font-size: 48px;
		line-height: 48px;
	}
	.banner--category .banner__lede { margin-top: 14px; }
	.banner--category .banner__cta { margin-top: 28px; }
	.banner--category .banner__art {
		width: 100%;
		max-width: 100%;
		margin-top: 24px;
	}
	.banner__partners { gap: 16px; padding-top: 48px; }
	.banner__partners img { height: 22px; }

	.h1 { font-size: 28px; line-height: 34px; }
	.h2 { font-size: var(--type-h4); line-height: 28px; }
	.lede { font-size: 13px; line-height: 1.5; }
	.body { font-size: 15px; }
	.eyebrow { font-size: var(--type-micro); }

	.btn { height: 38px; font-size: var(--type-small); padding: 0 18px; gap: 10px; }
	.btn--block { height: 32px; font-size: 10px; gap: 6px; }
	.arw { width: 32px; height: 32px; }
	.arw .ico-arrow { width: 14px; }
	.pill { height: 26px; padding: 0 12px; font-size: 10px; }
	.tab { height: 26px; padding: 0 14px; font-size: var(--type-micro); }

	/* Grid tiles shrink to a 163px two-up; rail tiles stay large and scroll. */
	.pcard { width: 163px; }
	.pcard__well { border-radius: 8px; }
	.pcard__name { font-size: var(--type-lead); margin-top: 12px; }
	.pcard__sub { font-size: 12px; margin-top: 6px; }
	.price { margin-top: 8px; }
	.price b { font-size: var(--type-small); }
	.price s { font-size: 9px; }
	.pcard .btn--block { margin-block-start: 10px; }
	.disc { width: 38px; height: 38px; top: 8px; left: 8px; font-size: 10px; }
	.pcard__heart { top: 8px; right: 8px; }
	.pcard__heart .ico { width: 16px; height: 15px; }

	.grid4 { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

	/* The full-bleed rails start at the mobile gutter, not the desktop one, or the
	   review and process cards sit 16px right of everything above them. */
	.rail--bleed { padding: 24px var(--page-gutter-mobile) 0; }
	.proc__rail { padding: 33px var(--page-gutter-mobile) 0; }

	.rail { gap: 20px; }
	.rail .pcard { width: 320px; }
	.rail .pcard__well { border-radius: var(--radius-md); }
	.rail .pcard__name { font-size: 28px; margin-top: 16px; }
	.rail .pcard__sub { font-size: 13px; margin-top: 8px; }
	.rail .price { margin-top: 14px; }
	.rail .price b { font-size: 20px; }
	.rail .price s { font-size: 11px; }
	.rail .btn--block { height: 44px; font-size: var(--type-small); margin-block-start: 14px; gap: 10px; }
	.rail .disc { width: 60px; height: 60px; font-size: var(--type-small); top: 14px; left: 14px; }
	.rail .pcard__heart { top: 14px; right: 14px; }
	.rail .pcard__heart .ico { width: 24px; height: 22px; }

	.panels { gap: 16px; }
	.panel { flex-direction: column; --panel-pad: 16px; padding: var(--panel-pad); border-radius: var(--radius-lg); gap: 16px; }
	.panel__txt { padding: 0; gap: 16px; }
	/* 250, not 150: at 150 the photograph was a letterbox strip and the produce in
	   it was unreadable. Client-specified. */
	.panel__img { width: 100%; height: 250px; }
	.chip { font-size: 11px; }
	.chip .ico-leaf, .chip .ico-ring { width: 16px; height: 16px; }
	.chips--row { flex-direction: column; gap: 10px; }

	.rev { width: 296px; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius-lg); }
	.rev__ph { width: 70px; height: 70px; border-radius: 50%; }
	.rev__q { font-size: 14px; }
	.rev__n { font-size: 10px; }
	.rev__r { font-size: 8px; }
	.rev__body { padding-top: 0; }

	.promise__t { font-size: var(--type-small); }
	.promise__b { font-size: var(--type-micro); }

	.split__media, .split__media--round { height: 260px; }
	.sec--why .split__media--round { width: 100%; height: auto; }

	.cta { min-height: 420px; }
	.cta__in { padding: 40px var(--page-gutter-mobile); }
	.cta__t { font-size: 28px; line-height: 34px; }

	.bgrid { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
	.bgrid::-webkit-scrollbar { display: none; }
	.bcard { width: 230px; flex: none; }
	.bcard__img { height: 150px; }
	.bcard__in { padding: 20px 16px; gap: 16px; }
	.bcard__t { font-size: var(--type-lead); }
	.sechead__actions { width: 100%; justify-content: space-between; }
	.sechead__actions .arrows { display: flex; }

	.acc__t { font-size: var(--type-micro); }
	.acc__b { font-size: 13px; max-width: none; }
	.faq .acc__t { font-size: var(--type-body); }
	.acc__facts { gap: 16px; }

	.pdp { flex-direction: column; gap: 24px; padding-top: 8px; }
	.gal { width: auto; margin-left: 0; }
	.gal__main { border-radius: var(--radius-md); }
	.pdp__title { font-size: var(--type-h2); line-height: 38px; }
	.price--pdp b { font-size: var(--type-h3); }
	.price--pdp s { font-size: var(--type-small); }
	.pdp__cta { gap: 10px; }
	.pdp__cta .btn { height: 38px; font-size: 10px; padding: 0 12px; flex: 1; }

	.proc__step { width: 170px; }
	.proc__t { font-size: var(--type-body); }
	.proc__b { font-size: 9px; }

	.ft__rule { margin: 0 var(--page-gutter-mobile) 40px; }
	/* The reference's mobile frame puts Elan and Prodavnica side by side and gives
	   the newsletter and Kontakt the full width. It does that with a wrapper div;
	   a grid gets the same result without a second markup shape to maintain. */
	.ft__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 33px;
		padding: 0 var(--page-gutter-mobile);
	}

	.ft__news { width: auto; grid-column: 1 / -1; }
	.ft__col--elan, .ft__col--shop { width: auto; min-width: 0; }
	.ft__cols > .ft__col:last-child { grid-column: 1 / -1; }
	.ft__form { gap: 16px; }
	.ft__markwrap { margin-top: 40px; }

	/* The wordmark is the LAST thing on the page, flush with the bottom edge. In
	   normal flow the legal lines overlapped it but still added their own height
	   below it, which left a 24px band of mint under the mark. Lifting the legal row
	   out of the flow puts it over the mark exactly as the frame draws it and lets
	   the mark end where the document ends. */
	.ft__legal {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 14px;
		margin: 0;
		padding: 0 var(--page-gutter-mobile);
		flex-direction: column;
		gap: 8px;
		font-size: 10px;
	}

	/* A 380px card floated in the corner of a 390px screen is the whole screen
	   with a ragged margin; on a phone the toast is a full-width bar instead. */
	.toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
	.drawer__panel { width: min(360px, 92vw); }
}

/* ==========================================================================
   Motion preferences, part two

   This has to come LAST. The marquee is declared inside the 767 media query, and
   an opt-out written further up the file loses to it on source order alone.

   A marquee is the one piece of motion here that starts by itself and never
   stops, so it is the one that must be stoppable. Stopped, the track falls back
   to the wrapped row the strip used before, with the duplicate set removed so no
   logo is drawn twice.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.partners--marquee { overflow: visible; }

	.partners--marquee .partners__track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	.partners--marquee .partners__item { flex: 0 0 auto; padding-inline: 0; }
	.partners--marquee .partners__item[aria-hidden="true"] { display: none; }
}

/* ========================================================================== 
   Blog and recipe archives / single entries
   Scoped to .journal so editorial templates cannot alter commerce pages.
   ========================================================================== */
.journal-hero,
.journal-single__head { position: relative; overflow: hidden; background: var(--elan-page); }
.journal-hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, var(--elan-surface-2) 0%, var(--elan-page) 100%); }
.journal-hero__in { position: relative; z-index: 1; }
.journal-hero__copy { padding-top: 72px; padding-bottom: 96px; max-width: var(--page-width); }
.journal-hero__title,
.journal-single__title { font-family: var(--font-display); font-weight: 400; color: var(--elan-ink); }
.journal-hero__title { max-width: 850px; margin-top: 24px; font-size: 72px; line-height: 1.04; }
.journal-hero__lede { max-width: 610px; margin-top: 28px; }
.journal-archive { padding-block: 96px 112px; }

.journal-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); min-height: 560px; background: var(--elan-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(24, 83, 75, .06); }
.journal-feature__image { display: block; min-height: 560px; overflow: hidden; }
.journal-feature__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-brand); }
.journal-feature__image:hover img { transform: scale(1.015); }
.journal-feature__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px; }
.journal-feature__title { margin: 24px 0; font-family: var(--font-display); font-size: 44px; line-height: 1.12; font-weight: 400; }
.journal-feature__title a { color: inherit; }
.journal-feature__copy .body { max-width: 470px; }
.journal-feature__copy .readlink { margin-top: 40px; }

.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.journal-grid .bcard { min-width: 0; }
.journal-grid .bcard__img { height: 300px; }
.journal-grid .bcard__in { flex: 1; padding: 36px 28px 44px; }
.journal-pagination { justify-content: center; }
.journal-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; margin: 0 5px; box-shadow: var(--ring-brand-half); color: var(--elan-green); }
.journal-pagination .current { background: var(--elan-green); color: var(--elan-white); }

.journal-single__intro { padding-top: 64px; padding-bottom: 88px; text-align: center; }
.journal-single__title { max-width: 1000px; margin: 24px auto 0; font-size: 68px; line-height: 1.08; }
.journal-single__lede { max-width: 720px; margin: 28px auto 0; }
.journal-single__meta { margin-top: 28px; color: var(--elan-ink-soft); }
.journal-single__media { margin-top: -1px; }
.journal-single__media img { display: block; width: 100%; height: min(680px, 50vw); object-fit: cover; border-radius: var(--radius-lg); }
.journal-single__body { padding-block: 88px 112px; }
.journal-entry { width: 100%; max-width: 760px; margin-inline: auto; }
.journal-entry > p:first-of-type { font-size: var(--type-lead); line-height: 1.6; }
.journal-entry ul,
.journal-entry ol { padding-left: 22px; }
.journal-entry li + li { margin-top: 10px; }
.journal-related { border-top: 1px solid var(--elan-border); }

.recipe-facts { display: flex; justify-content: center; gap: 48px; margin-top: 32px; }
.recipe-facts span { display: grid; gap: 8px; min-width: 120px; font-family: var(--font-display); font-size: var(--type-h4); }
.recipe-facts small { font-family: var(--font-sans); font-size: var(--type-micro); letter-spacing: var(--tracking-eyebrow); }
.recipe-layout { display: grid; grid-template-columns: 380px minmax(0, 760px); justify-content: space-between; gap: 96px; padding-block: 88px 112px; }
.recipe-ingredients { padding: 40px; background: var(--elan-green-tint); align-self: start; }
.recipe-ingredients .h2 { margin-top: 18px; }
.recipe-ingredients ul { list-style: none; padding: 0; margin: 32px 0 0; }
.recipe-ingredients li { padding: 14px 0; border-bottom: 1px solid rgba(24,83,75,.16); font-size: var(--type-body); line-height: 1.4; }
.recipe-method { margin: 0; }
.recipe-method > .eyebrow { margin-bottom: 24px; }
.recipe-tip { margin-top: 48px; padding: 28px; border: 1px solid var(--elan-green); }
.recipe-tip strong { display: block; margin-bottom: 10px; font-size: var(--type-small); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 1099px) {
	.journal-feature { grid-template-columns: 1fr 1fr; }
	.journal-feature__copy { padding: 44px; }
	.journal-feature__title { font-size: 36px; }
	.journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.recipe-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
}

@media (max-width: 767px) {
	.journal-hero__copy { padding-top: 40px; padding-bottom: 56px; }
	.journal-hero__title { margin-top: 16px; font-size: 42px; line-height: 1.08; }
	.journal-hero__lede { margin-top: 18px; }
	.journal-archive { padding-block: 40px 64px; }
	.journal-feature { display: flex; flex-direction: column; min-height: 0; }
	.journal-feature__image { min-height: 0; height: 280px; }
	.journal-feature__copy { padding: 28px 20px 36px; }
	.journal-feature__title { margin: 16px 0; font-size: 30px; }
	.journal-feature__copy .readlink { margin-top: 24px; }
	.journal-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; overflow: visible; }
	.journal-grid .bcard { width: auto; }
	.journal-grid .bcard__img { height: 230px; }
	.journal-grid .bcard__in { padding: 24px 20px 32px; }
	.journal-grid .bcard__t { font-size: 24px; }

	.journal-single__intro { padding-top: 40px; padding-bottom: 56px; text-align: left; }
	.journal-single__title { margin-top: 16px; font-size: 38px; line-height: 1.1; }
	.journal-single__lede { margin-top: 18px; }
	.journal-single__meta { margin-top: 20px; }
	.journal-single__media { padding: 0; }
	.journal-single__media img { height: 300px; border-radius: 0; }
	.journal-single__body { padding-block: 48px 64px; }
	.journal-entry > p:first-of-type { font-size: var(--type-body); }
	.journal-entry h2 { font-size: 28px; line-height: 1.2; }
	.recipe-facts { justify-content: flex-start; gap: 28px; }
	.recipe-facts span { min-width: 0; font-size: var(--type-lead); }
	.recipe-layout { display: flex; flex-direction: column; gap: 40px; padding-block: 48px 64px; }
	.recipe-ingredients { padding: 28px 20px; }
	.recipe-method { order: 2; }
}