/* Local potica study. All site navigation/footer styling remains shared. */
.potica-page { --potica-muted:color-mix(in srgb,var(--color-cream) 74%,var(--color-bg));--potica-halo:color-mix(in srgb,var(--color-gold) 11%,var(--color-bg)); }
.potica-page #main { overflow:clip; }
.potica-hero h1,.potica-hero h2,.potica-open h2,.potica-trust h2,.potica-travel h2,.potica-notes h2,.potica-origin h2,.potica-gift h2 { font-family:var(--font-sans);font-weight:500;text-transform:none;letter-spacing:-.055em; }
.potica-hero p,.potica-open p,.potica-notes p,.potica-origin p,.potica-gift p { font-family:var(--font-sans); }
.potica-skip { position:fixed;left:24px;top:-100px;z-index:99999;background:var(--color-cream);color:var(--color-bg);padding:16px 22px;border-radius:var(--radius-pill); }
.potica-skip:focus { top:95px; }

/* Loader (owner, v14): while the 3D loads, a white-marker sketch of the hero composition draws
   itself (an architect's line drawing made from the 3D scene: tools/build-potica-sketch.py; one
   still drawing, v15), the glass menu bar fills as the progress bar, and
   when the scene is ready the sketch fades into the 3D in the same place. The sketch box is the
   3D framing rectangle (--sk-* set by potica.js, rough defaults before it runs) grown by 1/0.96,
   the framing padding. The class is set by an inline script in <head> (never for reduced motion)
   and cleared by potica.js, or after 25 s whatever happens. --potica-progress 0..1 on <html>. */
.potica-loader { position:fixed;inset:0;z-index:99;background:var(--color-bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s cubic-bezier(.41,.19,.13,.95),visibility 0s linear .9s; }
.potica-sketch { position:absolute;left:var(--sk-l,36%);top:var(--sk-t,10%);width:var(--sk-w,63%);height:var(--sk-h,88%);transform:scale(1.1111); }   /* 1/0.9, the framing padding */
/* v23: real pen strokes (tools/build-potica-sketch-svg.py), each drawing itself in its slot (--d) */
.potica-sketch__svg { position:absolute;inset:0;width:100%;height:100%;color:var(--color-cream); }
.potica-sketch__svg--wide { display:none; }
@media(min-width:810px) { .potica-sketch__svg--narrow { display:none; } .potica-sketch__svg--wide { display:block; } }
.potica-sketch__svg path { stroke-dasharray:1 1.05;stroke-dashoffset:1.01;animation:potica-stroke .42s cubic-bezier(.45,.05,.3,1) var(--d,0s) forwards; }
@keyframes potica-stroke { to { stroke-dashoffset:0; } }
html.potica-loading .potica-loader { opacity:1;visibility:visible;pointer-events:auto;transition:none; }
@media(max-width:809.98px) { .potica-sketch { left:var(--sk-l,3%);top:var(--sk-t,9%);width:var(--sk-w,94%);height:var(--sk-h,62%); } }
html.potica-loading { overflow:hidden; }
html.potica-loading .site-nav > *:not(.potica-progress) { opacity:0!important;pointer-events:none; }
html.potica-loaded .site-nav > * { transition:opacity .5s ease .15s; }
.potica-progress { position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .5s ease; }
html.potica-loading .potica-progress { opacity:1;transition:none; }
/* the original fill (owner, 2026-10-08: "fix it back to the original"): the whole height of the pill, a straight edge, no squash */
.potica-progress__fill { position:absolute;left:0;top:0;height:100%;width:calc(var(--potica-progress,0) * 100%);background:rgba(239,231,210,.3); }

/* 3D boxes: one WebGL canvas moves between them; each keeps a 2D snapshot of its last pose. */
.potica-visual { position:relative;isolation:isolate; }
.potica-visual::before { content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 52%,var(--potica-halo),transparent 62%); }
.potica-visual::after { content:"";position:absolute;left:30%;right:30%;bottom:5%;height:4%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);z-index:-1; }
.potica-poster,.potica-snapshot,#potica-canvas { position:absolute;inset:0;width:100%;height:100%; }
.potica-poster { object-fit:contain; }
#potica-canvas { display:block;opacity:0;touch-action:pan-y; }
.potica-page[data-renderer="ready"] #potica-canvas { opacity:1; }
.potica-page[data-renderer="ready"] .potica-poster { visibility:hidden; }
.potica-visual.has-canvas .potica-snapshot { visibility:hidden; }
.potica-page[data-renderer="ready"] .potica-visual::before,.potica-page[data-renderer="ready"] .potica-visual::after { display:none; }

/* Section 1: hero. A pinned stage: the full-bleed 3D behind the title. Once the visitor scrolls
   in, the title and buttons leave in one transition (.is-scrolled, set by potica.js) while the
   potica comes out and the camera closes in. */
.potica-hero { position:relative;height:calc(100svh + 110svh); }
.potica-hero__stage { position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden; }
.potica-hero__copy { position:absolute;z-index:1;left:6.5%;top:52%;max-width:580px;transform:translateY(-50%);transition:opacity .6s cubic-bezier(.41,.19,.13,.95),transform .6s cubic-bezier(.41,.19,.13,.95),visibility 0s linear 0s; }
.potica-hero__stage.is-scrolled .potica-hero__copy { opacity:0;visibility:hidden;transform:translateY(calc(-50% - 40px));transition:opacity .6s cubic-bezier(.41,.19,.13,.95),transform .6s cubic-bezier(.41,.19,.13,.95),visibility 0s linear .6s; }
.potica-hero__why { position:absolute;z-index:1;left:50%;bottom:max(36px,5svh);width:min(620px,calc(100% - 48px));text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,24px);transition:opacity .6s cubic-bezier(.41,.19,.13,.95),transform .6s cubic-bezier(.41,.19,.13,.95),visibility 0s linear .6s; }
.potica-hero__stage.is-scrolled .potica-hero__why { opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .6s cubic-bezier(.41,.19,.13,.95) .25s,transform .6s cubic-bezier(.41,.19,.13,.95) .25s,visibility 0s; }
.potica-hero .potica-hero__why h2 { margin:0;font-size:clamp(38px,3.6vw,60px);line-height:1.04; }
.potica-hero .potica-hero__why p { margin:14px auto 0;max-width:520px;font-size:clamp(18px,1.35vw,22px);line-height:1.45;color:var(--potica-muted); }
.potica-hero .potica-lead { font:400 clamp(28px,2.5vw,42px)/1.2 var(--font-sans);letter-spacing:-.02em;text-transform:none;color:var(--color-cream);max-width:460px;margin:0 0 30px; }
.potica-lead__title { font-weight:500; }
.potica-lead__line { color:var(--potica-muted); }
/* Scroll cue (owner, v14/v15): once the hero is live it morphs in (blur, spacing and scale
   settle). The hand presses in (rays), stays pressed and slides up a little: a swipe, not a
   click; a slow loop with a long rest. On the first scroll the hand goes before the words. */
.potica-scroll { display:inline-flex;align-items:center;gap:14px;min-height:56px;margin-top:10px;color:var(--color-cream);font:400 18px/1.2 var(--font-sans);letter-spacing:.01em;text-decoration:none;opacity:0;filter:blur(10px);transform:translateY(10px) scale(.92);transition:opacity .9s cubic-bezier(.41,.19,.13,.95),filter .9s cubic-bezier(.41,.19,.13,.95),transform .9s cubic-bezier(.41,.19,.13,.95),letter-spacing .9s cubic-bezier(.41,.19,.13,.95); }
.potica-hero__stage.is-live .potica-scroll { opacity:1;filter:blur(0);transform:none;letter-spacing:0; }
.potica-hand { width:40px;height:48px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.potica-hand__hand { transform-box:fill-box;transform-origin:30% 10%;animation:potica-swipe 4.8s cubic-bezier(.45,.05,.3,1) infinite; }
.potica-hand__rays { opacity:0;animation:potica-rays 4.8s ease-out infinite; }
@keyframes potica-swipe {   /* the hand is there from the start: rest, press and hold, slide up, let go, back */
  0%,12% { transform:translateY(8px) scale(1); }
  20%,28% { transform:translateY(8px) scale(.86); }
  52% { transform:translateY(-4px) scale(.86); }
  60% { transform:translateY(-4px) scale(1); }
  78%,100% { transform:translateY(8px) scale(1); } }
@keyframes potica-rays { 0%,18% { opacity:0; } 22% { opacity:1; } 34%,100% { opacity:0; } }
.potica-scroll__hand { transition:opacity .25s ease; }
.potica-hero__stage.is-hand-gone .potica-scroll__hand { opacity:0; }
.potica-visual--hero { position:absolute;inset:0;z-index:0; }   /* full hero behind the title; the scene frames itself to the right */
.potica-visual--hero .potica-poster { left:42%;width:58%; }   /* still view: the composition beside the title */
.potica-page .cta-pill { display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:56px;padding:16px 34px;font:500 19px/1.2 var(--font-sans);letter-spacing:0;text-transform:none;background:var(--color-cream);color:var(--color-bg); }
.potica-page .cta-pill svg,.potica-text-link svg { width:24px;height:24px;flex:none; }

/* Section 2: the sealed jar, centred and large. The visitor pulls the tongue; then the stage
   pins while scrolling plays the rest (rubber off, pour, cut in mid-air, onto the plate).
   The canvas fills the whole stage so nothing is ever cut off by a box edge. */
.potica-open { position:relative;height:calc(100svh + 60svh); }   /* the scroll raises the camera to the lid; then it all plays by itself (potica.js TRAVEL_SVH = 60) */
.potica-open__stage { position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden; }
.potica-visual--open { position:absolute;inset:0; }
.potica-open__copy { position:absolute;left:50%;top:max(92px,9.5svh);transform:translateX(-50%);width:min(640px,calc(100% - 48px));text-align:center;z-index:2;pointer-events:none;display:grid; }
.potica-open__text { grid-area:1/1; }
/* the read-more buttons in the stage copy (the copy itself lets clicks through to the 3D) */
.potica-page .potica-copy-btn { pointer-events:auto;min-height:44px;margin-top:18px;padding:10px 24px;font-size:16px;gap:0; }
.potica-open .potica-caption__text { margin:12px auto 0;max-width:520px;font:400 clamp(18px,1.4vw,22px)/1.45 var(--font-sans);color:var(--potica-muted); }
.potica-open h2 { font-size:clamp(48px,5vw,84px);line-height:1.02; }
.potica-open p { font-size:clamp(19px,1.45vw,24px);line-height:1.45;color:var(--potica-muted);margin:18px auto 0;max-width:520px; }
/* The play control under the stage (owner, 2026-10-05; css/components/playnav.css), centred;
   js/potica.js shows it (with its own intro) once the camera has reached the lid. */
.potica-steps { position:absolute;left:50%;bottom:max(24px,3.5svh);z-index:3;transform:translateX(-50%);display:grid;place-items:center; }
.potica-steps[hidden] { display:none; }

/* flag icons in the travel line */
.potica-flag { display:inline-block;width:1.05em;height:auto;vertical-align:-.08em;margin:0 .12em 0 .02em;border-radius:3px; }

/* Captions on the stage, by the story position (potica.js sets data-text). */
.potica-caption { position:absolute;left:50%;z-index:2;width:min(640px,calc(100% - 48px));margin:0;text-align:center;transform:translateX(-50%);pointer-events:none; }
.potica-caption[data-text="on"] { pointer-events:auto; }

/* Stage text transitions (owner, 2026-10-05: "the text animations should be different when
   transitioning"). Every stage text block has data-text before | on | after (js/potica.js
   textState). Arriving, its words (.potica-word, split by potica.js) rise into place out of a
   soft blur one after another and the rest of the block (paragraph, button) follows; leaving, it
   lifts away blurred, quickly, BEFORE the next text arrives, so two texts never cross-fade in one
   place. Going back (a dot, scrolling up), a text comes back down from where it left. --d is
   each part's delay in reading order. Text only: nothing here filters the canvas. */
.potica-word { display:inline-block; }
.potica-page:not(.is-still) [data-text] .potica-anim { transition:opacity .26s cubic-bezier(.5,0,.75,0),transform .3s cubic-bezier(.5,0,.75,0),filter .26s cubic-bezier(.5,0,.75,0); }
.potica-page:not(.is-still) [data-text="before"] .potica-anim { opacity:0;transform:translateY(.55em);filter:blur(8px); }
.potica-page:not(.is-still) [data-text="after"] .potica-anim { opacity:0;transform:translateY(-.35em);filter:blur(6px); }
.potica-page:not(.is-still) [data-text="on"] .potica-anim { transition:opacity .5s ease calc(.3s + var(--d,0s)),transform .9s cubic-bezier(.16,1,.3,1) calc(.3s + var(--d,0s)),filter .55s ease calc(.3s + var(--d,0s)); }
.potica-page:not(.is-still) [data-text="before"],.potica-page:not(.is-still) [data-text="after"] { visibility:hidden;transition:visibility 0s linear .32s; }
.potica-page:not(.is-still) [data-text="on"] { visibility:visible; }
.potica-open .potica-caption--flip,.potica-open .potica-caption--cut { top:max(92px,9.5svh);max-width:none;margin:0;font:500 clamp(36px,3.6vw,60px)/1.08 var(--font-sans);letter-spacing:-.04em;color:var(--color-cream); }
.potica-caption--chef { top:max(92px,9.5svh); }
.potica-open .potica-caption__lead { margin:0;max-width:none;font:500 clamp(40px,4.2vw,68px)/1.04 var(--font-sans);letter-spacing:-.045em;color:var(--color-cream); }
.potica-open .potica-caption__name { margin:14px 0 0;max-width:none;font:500 21px/1.3 var(--font-sans);color:var(--color-cream); }
.potica-open .potica-caption__award { margin:4px 0 10px;max-width:none;font:400 18px/1.3 var(--font-sans);color:var(--potica-muted); }
.potica-open .potica-caption--home { bottom:calc(max(24px,3.5svh) + 80px);max-width:none;margin:0;font:400 clamp(24px,2.1vw,34px)/1.25 var(--font-sans);color:var(--color-cream); }

/* Scroll nudge in the open section: the hero's hand, no words, when the visitor has stopped. */
.potica-nudge { position:absolute;left:50%;bottom:calc(max(24px,3.5svh) + 4px);z-index:3;transform:translateX(-50%);color:var(--color-cream);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s; }
.potica-nudge.is-on { opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s; }
.potica-nudge .potica-hand { width:48px;height:58px; }

/* Read more (owner, v17): a full-screen page like the team bios on /about-us/ (components.css
   .bio: the photo with the title set over it on one side, the text on the other, "Nazaj" at the
   top right; phones stack them), opened in a modal dialog so the 3D story waits underneath. */
.potica-more { position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--color-bg);color:var(--color-cream);overflow:auto;overscroll-behavior:contain; }
.potica-more[open] { animation:potica-more-in .45s cubic-bezier(.41,.19,.13,.95); }
@keyframes potica-more-in { from { opacity:0; } }
.potica-more::backdrop { background:var(--color-bg); }
.potica-more .potica-bio { position:absolute;z-index:auto; }
.potica-more .bio__name { font-family:var(--font-sans);font-weight:500;text-transform:none;letter-spacing:-.03em;line-height:1; }   /* no serif here (owner) */
.potica-more__close { position:fixed;top:24px;right:24px;z-index:200;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(239,231,210,.18);border-radius:50%;background:rgba(10,10,10,.72);color:var(--color-cream);cursor:pointer; }
.potica-more__close svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }
.potica-more .bio__copy strong { font-weight:500;color:var(--color-gold); }
.potica-more__art { display:block;width:100%;max-width:560px;height:auto;margin:14px 0 8px; }
@media(max-width:809px) {
  .potica-more .potica-bio { position:static; }
  .potica-more .bio__media { aspect-ratio:1;max-height:none; }   /* square: more room for the text */
}
@media(prefers-reduced-motion:reduce) { .potica-more[open] { animation:none; } }
html.potica-modal { overflow:hidden; }

/* FAQ: ingredients and nutrition per 100 g */
.potica-nutrition { width:100%;max-width:520px;margin:0 0 28px;border-collapse:collapse;font:400 18px/1.4 var(--font-sans);color:var(--potica-muted); }
.potica-nutrition caption { text-align:left;padding:0 0 8px;font-weight:500;color:var(--color-cream); }
.potica-nutrition th,.potica-nutrition td { padding:7px 0;border-bottom:1px solid var(--color-border-hover);text-align:left;font-weight:400; }
.potica-nutrition td { text-align:right;color:var(--color-cream); }
.potica-nutrition .is-sub th { padding-left:18px; }
.potica-faq details strong { color:var(--color-cream);font-weight:500; }

/* The other two chapters stay as plain text (no 3D). */
.potica-notes { max-width:var(--container-max);margin:auto;padding:90px var(--container-px) 40px;display:grid;grid-template-columns:1fr 1fr;gap:64px; }
.potica-notes h2 { font-size:clamp(44px,4.8vw,78px);line-height:1.04; }
.potica-notes p { font-size:clamp(20px,1.6vw,25px);line-height:1.5;color:var(--potica-muted);margin:24px 0 0;max-width:520px; }

.potica-origin { max-width:var(--container-max);padding:130px var(--container-px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,6vw,96px); }   /* two columns on wide screens (owner, 2026-09-29) */
.potica-origin__photo { width:100%; }
.potica-origin__photo img { display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 62%;border-radius:var(--radius-lg); }
.potica-origin h2 { font-size:clamp(44px,4.8vw,78px);line-height:1.04; }
.potica-origin p,.potica-gift p { font-size:clamp(20px,1.7vw,26px);line-height:1.5;color:var(--potica-muted);margin:28px 0;max-width:650px; }
.potica-text-link { display:inline-flex;align-items:center;gap:22px;min-height:48px;font:500 19px var(--font-sans);color:var(--color-cream);text-decoration:underline;text-underline-offset:6px; }
.potica-gift { scroll-margin-top:110px;padding:100px var(--container-px) 120px;max-width:var(--container-max);margin:auto;border-top:1px solid var(--color-border-hover); }
.potica-gift h2 { font-size:clamp(54px,7.2vw,110px);line-height:1;word-spacing:.12em; }
.potica-gift__actions { display:flex;gap:32px;flex-wrap:wrap;align-items:center;margin:34px 0 24px; }
.potica-gift .potica-gift__note { font-size:18px; }
.potica-faq-section { max-width:var(--container-max);margin:auto;padding:0 var(--container-px) 120px; }
.potica-faq { margin:0 auto;max-width:900px; }
.potica-faq-section p { font-family:var(--font-sans);line-height:1.5;color:var(--potica-muted); }
.potica-trust { max-width:var(--container-max);margin:auto;padding:100px var(--container-px) 110px;display:grid;gap:88px;justify-items:center;text-align:center; }
.potica-trust h2 { margin:0;max-width:860px;font:500 clamp(34px,3.6vw,58px)/1.08 var(--font-sans);letter-spacing:-.045em; }
.potica-trust p { margin:24px auto 0;max-width:720px;font:400 clamp(19px,1.5vw,24px)/1.5 var(--font-sans);color:var(--potica-muted); }
.potica-trust .potica-trust__label { margin:0;font:500 15px/1.2 var(--font-semi-condensed);letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold); }
.potica-trust .potica-trust__text { margin-top:40px; }
.potica-trust__text strong { font-weight:600;color:var(--color-cream); }
.potica-trust__logos { list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px 72px; }
.potica-trust__logos img { display:block;width:auto;opacity:.86; }
.potica-trust__logos li:nth-child(1) img { height:26px; }
.potica-trust__logos li:nth-child(2) img { height:46px; }
.potica-trust__logos li:nth-child(3) img { height:38px; }
/* Where it has travelled (owner, 2026-09-29): a giant black globe spinning in deep space
   (js/potica-globe.js) with the countries lit and their flags pinned on. A deep blue glow behind
   it, stars over that, and a vignette fading the corners and edges back to the page's black.
   Gradients and images only: no filters, nothing over the canvas but the flags. */
.potica-travel { --space-deep:#0f275a;--space-mid:#08172f;--space-far:#040a17;position:relative;isolation:isolate;overflow:hidden;padding:130px var(--container-px) 60px;text-align:center;background:radial-gradient(ellipse 70% 56% at 50% 61%,var(--space-deep) 0%,var(--space-mid) 38%,var(--space-far) 66%,var(--color-bg) 100%); }
.potica-travel__space { position:absolute;inset:0;pointer-events:none; }
.potica-travel__space::before,.potica-travel__space::after { content:"";position:absolute;inset:0;background:center/cover no-repeat; }
.potica-travel.is-near .potica-travel__space::before { background-image:url(/images/potica/v25/globe-stars.webp?v=20261008-potica-v30b); }
.potica-travel.is-near .potica-travel__space::after { background-image:url(/images/potica/v25/globe-stars-twinkle.webp?v=20261008-potica-v30b);animation:potica-twinkle 4.8s ease-in-out infinite alternate; }
@keyframes potica-twinkle { from { opacity:.15; } to { opacity:1; } }
.potica-travel::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--color-bg),transparent 17%,transparent 80%,var(--color-bg)),radial-gradient(ellipse 72% 66% at 50% 58%,transparent 48%,var(--color-bg) 100%); }
.potica-travel__copy,.potica-globe { position:relative;z-index:1; }
.potica-travel__copy { max-width:860px;margin:0 auto; }
.potica-travel h2 { margin:0;font:500 clamp(34px,3.6vw,58px)/1.08 var(--font-sans);letter-spacing:-.045em; }
.potica-travel p { margin:24px auto 0;max-width:720px;font:400 clamp(19px,1.5vw,24px)/1.5 var(--font-sans);color:var(--color-cream); }
.potica-globe { width:min(1040px,94vw,130svh);aspect-ratio:1;margin:-24px auto 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab; }
.potica-globe.is-dragging { cursor:grabbing; }
.potica-globe__poster,.potica-globe__canvas { -webkit-user-drag:none;user-select:none;pointer-events:none;position:absolute;inset:0;display:block;width:100%;height:100%; }
.potica-globe__canvas { opacity:0;transition:opacity .6s ease; }
.potica-travel.is-live .potica-globe__canvas { opacity:1; }
.potica-travel.is-live .potica-globe__poster { opacity:0;transition:opacity 0s linear .7s; }   /* gone once the canvas covers it */
.potica-globe__pin { position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;will-change:transform,opacity; }
.potica-globe__pin img { position:absolute;left:0;bottom:15px;width:34px;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;transform:translateX(-50%);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.55); }   /* the flag svgs are 16x16 boxes round a 4:3 flag: crop to the flag, no frame   /* max-width: the pin itself is 0 wide 
.potica-globe__pin::before { content:"";position:absolute;left:-.75px;bottom:0;width:1.5px;height:15px;background:linear-gradient(var(--color-cream),var(--color-gold)); }   /* the stem */
.potica-globe__pin::after { content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--color-gold);box-shadow:0 0 12px 2px color-mix(in srgb,var(--color-gold) 55%,transparent); }   /* the spot */
.potica-globe__ring { position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--color-gold);opacity:0;animation:potica-ping 2.8s ease-out infinite; }
@keyframes potica-ping { from { transform:scale(.25);opacity:.9; } to { transform:scale(1.35);opacity:0; } }
.potica-faq details { border-top:1px solid var(--color-border-hover); }   /* lines between, none after the last */
.potica-faq summary { list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font:400 23px/1.3 var(--font-sans);padding:24px 0;cursor:pointer; }
.potica-faq summary::-webkit-details-marker { display:none; }
.potica-faq summary svg { width:24px;height:24px;flex:none;transition:transform var(--dur-fast); }
.potica-faq details[open] summary svg { transform:rotate(180deg); }
.potica-faq details p { margin:0 0 28px;max-width:760px;font-size:20px; }
.potica-page a:focus-visible,.potica-page button:focus-visible,.potica-page summary:focus-visible { outline:2px solid var(--color-gold);outline-offset:5px; }
.potica-page.has-potica-reveals [data-potica-reveal] { opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out-quart),transform var(--dur-slow) var(--ease-out-quart); }
.potica-page.has-potica-reveals [data-potica-reveal].is-visible { opacity:1;transform:none; }
@media(hover:hover) and (pointer:fine) {
  .potica-text-link:hover { color:var(--color-gold); }
}
@media(min-width:810px) {
  /* wide screens: the "why" text takes the title's place beside the potica (v22) */
  .potica-hero__why { left:6.5%;top:52%;bottom:auto;width:min(520px,36%);text-align:left;transform:translateY(calc(-50% + 24px)); }
  .potica-hero__stage.is-scrolled .potica-hero__why { transform:translateY(-50%); }
  .potica-hero .potica-hero__why p { margin-left:0; }
  .potica-scroll { gap:20px;font-size:24px; }
  .potica-scroll .potica-hand { width:56px;height:67px; }
}
@media(max-width:999px) {
  .potica-hero__copy { left:5%; }
  .potica-open h2 { font-size:clamp(48px,6.5vw,68px); }
}
@media(max-width:809.98px) {
  /* phones: the 3D composition centred and large, the line and the button below it */
  .potica-hero__copy { left:24px;right:24px;top:auto;bottom:max(40px,5svh);max-width:none;transform:none;display:flex;flex-direction:column;align-items:center;text-align:center; }
  .potica-hero__stage.is-scrolled .potica-hero__copy { transform:translateY(24px); }
  .potica-hero .potica-lead { font-size:23px;line-height:1.28;max-width:330px;margin:0 0 10px; }
  .potica-scroll { font-size:17px;margin-top:14px; }
  .potica-open .potica-caption--flip,.potica-open .potica-caption--cut { top:max(88px,10svh);font-size:clamp(30px,8vw,42px); }
  .potica-caption--chef { top:max(84px,10svh); }
  .potica-open .potica-caption__lead { font-size:clamp(34px,9vw,46px); }
  .potica-open .potica-caption__name { font-size:18px;margin-top:10px; }
  .potica-open .potica-caption__award { font-size:15px;margin-bottom:6px; }
  .potica-open .potica-caption--home { font-size:21px;bottom:calc(max(24px,3.5svh) + 72px); }
  .potica-visual--hero .potica-poster { left:0;width:100%;top:7%;height:66%; }
  .potica-open__copy { top:max(88px,10svh);width:calc(100% - 40px); }
  .potica-open h2 { font-size:clamp(42px,11vw,64px); }
  .potica-open p { font-size:18px;line-height:1.4;margin-top:12px; }
  .potica-notes { grid-template-columns:1fr;gap:44px;padding:64px 24px 24px; }
  .potica-notes h2 { font-size:clamp(40px,10.5vw,56px); }
  .potica-notes p { font-size:19px;margin-top:16px; }
  .potica-origin { padding:70px 24px;gap:40px;display:flex;flex-direction:column;align-items:center;text-align:center; }   /* phones: the photo full width above the copy */
  .potica-origin__photo { width:calc(100vw - 32px);max-width:none; }
  .potica-origin__photo img { aspect-ratio:auto; }
  .potica-origin p { margin-left:auto;margin-right:auto; }
  .potica-origin h2 { font-size:48px; }
  .potica-origin p,.potica-gift p { font-size:20px;margin:22px 0; }
  .potica-gift { padding:64px 24px 80px; }
  .potica-gift h2 { font-size:clamp(44px,11.5vw,72px); }
  .potica-gift > [data-potica-reveal] { text-align:center; }
  .potica-gift__actions { gap:18px;justify-content:center; }
  .potica-trust { padding:64px 24px 80px;gap:64px; }
  .potica-travel { padding:84px 24px 36px; }
  .potica-globe { width:128vw;margin:-6px calc(50% - 64vw) 0; }   /* a little wider than the screen: giant */
  .potica-globe__pin img { width:26px;bottom:12px;border-radius:3px; }
  .potica-globe__pin::before { height:12px; }
  .potica-trust__logos { gap:32px 44px;margin-top:36px; }
  .potica-hero .potica-hero__why h2 { font-size:clamp(34px,9vw,44px); }
  .potica-hero .potica-hero__why p { font-size:17px;margin-top:10px; }
  .potica-gift .cta-pill { font-size:18px; }
  .potica-faq-section { padding:0 24px 80px; }
  .potica-faq summary { font-size:21px; }
}
/* Still view (reduced motion, short landscape, the manual toggle or a WebGL fallback): posters. */
.potica-page.is-still #potica-canvas,.potica-page.is-still .potica-snapshot,.potica-page.is-still .potica-steps { display:none; }
.potica-page.is-still .potica-open,html:not(.js) .potica-open,.potica-page.is-still .potica-hero,html:not(.js) .potica-hero { height:auto; }
.potica-page.is-still .potica-hero__stage,html:not(.js) .potica-hero__stage { position:relative;height:max(100svh,640px); }
.potica-page.is-still .potica-open__stage,html:not(.js) .potica-open__stage { position:relative;height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:100px var(--container-px) 40px; }
.potica-page.is-still .potica-open__copy,html:not(.js) .potica-open__copy { order:-1; }   /* heading, the jar and its back texts, then the captions */
.potica-page.is-still .potica-visual--open,html:not(.js) .potica-visual--open { position:relative;inset:auto;width:100%;max-width:900px;height:min(66svh,640px);min-height:380px;margin-top:18px; }
.potica-page.is-still .potica-open__copy,html:not(.js) .potica-open__copy { position:relative;left:auto;top:auto;transform:none;opacity:1!important;gap:36px; }
.potica-page.is-still .potica-open__text,html:not(.js) .potica-open__text { grid-area:auto;opacity:1;transform:none; }
/* the hero's "why in glass" block needs the scroll; the still view shows it with the other texts */
.potica-open__text--glass { display:none; }
.potica-page.is-still .potica-open__text--glass,html:not(.js) .potica-open__text--glass { display:block; }
.potica-page.is-still .potica-hero__why,html:not(.js) .potica-hero__why { display:none; }
.potica-page.is-still .potica-poster { visibility:visible; }
.potica-page.is-still .potica-visual--open,html:not(.js) .potica-visual--open { height:auto;min-height:0; }
.potica-page.is-still .potica-visual--open .potica-poster,html:not(.js) .potica-visual--open .potica-poster { position:relative;height:min(66svh,640px); }
.potica-page.is-still .potica-caption,html:not(.js) .potica-caption { position:relative;left:auto;top:auto;bottom:auto;transform:none;opacity:1;visibility:visible;width:auto;margin:32px auto 0; }
.potica-page.is-still .potica-nudge,html:not(.js) .potica-nudge { display:none; }
.potica-page.is-still .potica-visual::before,.potica-page.is-still .potica-visual::after { display:block; }
@media(prefers-reduced-motion:reduce) {
  .potica-page [data-potica-reveal] { opacity:1!important;transform:none!important;transition:none!important; }
  .potica-open__text,.potica-caption,.potica-nudge,.potica-steps *,.potica-anim { transition:none!important; }
  .potica-hero__copy { transition:none!important; }
  .potica-scroll { opacity:1;filter:none;transform:none;transition:none; }
  .potica-hand__hand,.potica-hand__rays { animation:none; }
  .potica-travel__space::after,.potica-globe__ring { animation:none; }
  .potica-globe__ring { display:none; }
}
/* Without JavaScript the posters and all copy remain. */
html:not(.js) .potica-scroll { opacity:1;filter:none;transform:none; }
html:not(.js) #potica-canvas,html:not(.js) .potica-snapshot,html:not(.js) .potica-steps { display:none; }