/* ==========================================================================
   Albeena ("Včelí den"): the bee look of the template and the artifact components; loaded after
   albeena-shop.css (the template's own styles of the shop pages) and shared.css.
   The bee period of the visitor's clock sits on <html data-bee="dawn|day|dusk|night">
   (set by the early script in template-head.tpl, switchable in the bee bar) and
   data-bee-activity (0–8) says how many bees fly. Every colour that follows the
   period is a --bee-* token; content pages stay on a light "paper" in every period.
   ========================================================================== */

html[data-bee] {
    --bee-ink: #2e1a07;
    --bee-white: #fffdf7;
    /* tokens of the shop pages (albeena-shop.css): light-surface friendly in every period */
    --albeena-plum: #8f4e00;
    --albeena-plum-dark: #6b3a00;
    --albeena-gold: #d98a00;
    --albeena-gold-light: #ffc93c;
    --albeena-blush: #fff0c7;
    --albeena-cream: #fff6e0;
    --albeena-sage: #eef2d6;
    --albeena-leaf: #4f6b2f;
    --albeena-ink: #2e1a07;
    --albeena-muted: #6e5434;
    --albeena-line: #ebd49c;
    --albeena-display: 'Unbounded', 'Onest', system-ui, sans-serif;
}

html[data-bee="day"] {
    --bee-ground: #fffdf7; --bee-paper: #fffdf7; --bee-panel: #fff0c7; --bee-panel2: #f3e2b5; --bee-line: #ebd49c; --bee-lip: #d9b66a;
    --bee-honey: #ffb800; --bee-honeytext: #8f4e00; --bee-honeyline: #d98a00; --bee-text: #3a2208; --bee-muted: #6e5434; --bee-wax: #ffe08a;
    --bee-sky1: #bfe6f6; --bee-sky2: #d3eef9; --bee-sky3: #e6f6fc; --bee-hill1: #c5d98f; --bee-hill2: #9dc36f; --bee-hill3: #6e9f4e;
    --bee-orb: #ffc93c; --bee-starop: 0; --bee-veil: 0; --bee-glow: rgba(255, 170, 0, .45);
}
html[data-bee="dawn"] {
    --bee-ground: #fbeadd; --bee-paper: #fff6ee; --bee-panel: #f5d8c4; --bee-panel2: #eecbb2; --bee-line: #e2b89a; --bee-lip: #c9966f;
    --bee-honey: #ffbe45; --bee-honeytext: #8a4500; --bee-honeyline: #c98318; --bee-text: #3a2208; --bee-muted: #6e4e36; --bee-wax: #ffe2a4;
    --bee-sky1: #d7dcf2; --bee-sky2: #f7cdb4; --bee-sky3: #ffdfa6; --bee-hill1: #bcc893; --bee-hill2: #96ae73; --bee-hill3: #718e55;
    --bee-orb: #ffb866; --bee-starop: .35; --bee-veil: .08; --bee-glow: rgba(255, 190, 80, .45);
}
html[data-bee="dusk"] {
    --bee-ground: #f0be82; --bee-paper: #fbebd3; --bee-panel: #e8ac6c; --bee-panel2: #de9f5c; --bee-line: #cf8e4c; --bee-lip: #b5763a;
    --bee-honey: #ffaa2b; --bee-honeytext: #6e3300; --bee-honeyline: #a85a00; --bee-text: #2e1a07; --bee-muted: #553a20; --bee-wax: #ffd58a;
    --bee-sky1: #d7804a; --bee-sky2: #ec9e5e; --bee-sky3: #ffc57a; --bee-hill1: #b98a4a; --bee-hill2: #956b39; --bee-hill3: #704e2a;
    --bee-orb: #ff8e3a; --bee-starop: .25; --bee-veil: .15; --bee-glow: rgba(255, 140, 40, .5);
}
html[data-bee="night"] {
    --bee-ground: #7a4716; --bee-paper: #f4e4c6; --bee-panel: #683c12; --bee-panel2: #8a5520; --bee-line: #94602a; --bee-lip: #ad7334;
    --bee-honey: #f5b940; --bee-honeytext: #f2c877; --bee-honeyline: #e6b04a; --bee-text: #fff6e0; --bee-muted: #f3ddb5; --bee-wax: #e9cf8a;
    --bee-sky1: #3b2814; --bee-sky2: #4c341b; --bee-sky3: #5e4223; --bee-hill1: #4a351d; --bee-hill2: #3c2b17; --bee-hill3: #2f2112;
    --bee-orb: #fff3d1; --bee-starop: 1; --bee-veil: .45; --bee-glow: rgba(255, 200, 70, .45);
}

/* --- page ---------------------------------------------------------------- */
html[data-bee] body.albeena-body {
    background-color: var(--bee-ground) !important;
    color: var(--bee-ink);
    font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
html[data-bee] body.albeena-body h1,
html[data-bee] body.albeena-body h2,
html[data-bee] body.albeena-body h3,
html[data-bee] body.albeena-body .albeena-display {
    font-family: var(--albeena-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}
html[data-bee] body.albeena-body:not(.is-home) main#content {
    background: var(--bee-paper);
    color: var(--bee-ink);
}
/* --- bee bar ----------------------------------------------------------------- */
.albeena-beebar { background: var(--bee-panel); border-bottom: 1px solid var(--bee-line); color: var(--bee-text); }
.albeena-beebar-inner { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 10px; padding-top: 10px; }
.albeena-beebar-info { align-items: flex-start; display: flex; flex: 1 1 440px; gap: 12px; min-width: 0; }
.albeena-beebar-icon { color: var(--bee-honeytext); display: flex; margin-top: 2px; }
.albeena-beebar-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.albeena-beebar-phase { font-size: 13px; font-weight: 800; }
.albeena-beebar-muted { color: var(--bee-muted); font-weight: 600; }
/* The HTML compactor drops the spaces between neighbouring tags, so the gaps of the bee bar come from CSS. */
.albeena-beebar-phase [data-bee-text="phase"], .albeena-beebar-muted { margin-left: .3em; }
.albeena-beebar-fact { font-size: 14px; line-height: 1.45; margin: 0; }
.albeena-beebar-fact strong { color: var(--bee-honeytext); margin-right: .3em; }
.albeena-fact-text.is-changing { animation: albeena-fact-in .7s ease; }
.albeena-beebar-next { background: transparent; border: 0; color: var(--bee-text); cursor: pointer; font: inherit; font-weight: 800; margin-left: .35em; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.albeena-beebar-next:hover, .albeena-beebar-next:focus-visible { color: var(--bee-honeytext); }
.albeena-beebar-progress { background: var(--bee-line); border-radius: 2px; display: block; height: 2px; max-width: 460px; overflow: hidden; }
.albeena-beebar-progress > span { background: var(--bee-honeyline); display: block; height: 100%; width: 0; }
.albeena-beebar-progress > span.is-running { animation: albeena-fact-bar 12s linear forwards; }

.albeena-switch { align-items: center; background: var(--bee-ground); border: 2px solid var(--bee-line); border-radius: 999px; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 2px; padding: 3px; }
.albeena-switch button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--bee-text); cursor: pointer; display: flex; font: inherit; font-size: 13px; font-weight: 700; gap: 6px; min-height: 36px; padding: 0 12px; transition: background-color .3s ease, color .3s ease; white-space: nowrap; }
.albeena-switch button[aria-checked="true"] { background: var(--bee-honey); color: var(--bee-ink); }
.albeena-switch button:focus-visible { outline: 3px solid var(--bee-honeyline); outline-offset: 2px; }
.albeena-switch-bee { display: block; height: 17px; width: 24px; }

/* --- shared pieces ------------------------------------------------------------- */
.albeena-bee { display: block; height: 100%; overflow: visible; width: 100%; }
.albeena-wing { animation: albeena-flap .12s ease-in-out infinite alternate; transform-origin: 34px 22px; }
.albeena-wing ellipse { fill: #fff; fill-opacity: .9; stroke: var(--bee-ink); stroke-width: 2.6; }
.albeena-bee-sting { stroke: var(--bee-ink); stroke-linecap: round; stroke-width: 3.5; }
.albeena-bee-body { fill: #ffb800; stroke: var(--bee-ink); stroke-width: 3; }
.albeena-bee-stripes { fill: none; stroke: var(--bee-ink); stroke-width: 5; }
.albeena-bee-head { fill: var(--bee-ink); }
.albeena-bee-eye { fill: #fff; }
.albeena-bee-smile { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 1.6; }
.albeena-bee-antenna { fill: none; stroke: var(--bee-ink); stroke-linecap: round; stroke-width: 2.2; }
.albeena-bee-box { aspect-ratio: 70 / 50; display: block; width: 100%; }
.albeena-glow { filter: drop-shadow(0 0 10px var(--bee-glow)); }
html[data-bee="night"] .albeena-wing { animation-play-state: paused; }
html[data-bee="dusk"] .albeena-wing { animation-duration: .24s; }
html[data-bee="dawn"] .albeena-wing { animation-duration: .2s; }

.albeena-ph { display: none; }
html[data-bee="dawn"] .albeena-ph-dawn,
html[data-bee="day"] .albeena-ph-day,
html[data-bee="dusk"] .albeena-ph-dusk,
html[data-bee="night"] .albeena-ph-night { display: block; }

.albeena-chip { align-items: center; background: var(--bee-panel); border-radius: 999px; color: var(--bee-text); display: inline-flex; font-size: 14px; font-weight: 700; gap: 10px; padding: 8px 16px 8px 12px; }
.albeena-chip-icon { color: var(--bee-honeytext); display: flex; }
.albeena-meter { display: flex; gap: 2px; }
.albeena-meter .albeena-bee-box { opacity: .22; transition: opacity .6s ease; width: 20px; }
html[data-bee-activity="1"] .albeena-meter > :nth-child(-n+1),
html[data-bee-activity="2"] .albeena-meter > :nth-child(-n+1),
html[data-bee-activity="3"] .albeena-meter > :nth-child(-n+2),
html[data-bee-activity="4"] .albeena-meter > :nth-child(-n+3),
html[data-bee-activity="5"] .albeena-meter > :nth-child(-n+3),
html[data-bee-activity="6"] .albeena-meter > :nth-child(-n+4),
html[data-bee-activity="7"] .albeena-meter > :nth-child(-n+4),
html[data-bee-activity="8"] .albeena-meter > :nth-child(-n+5) { opacity: 1; }

.albeena-btn { align-items: center; border-radius: 999px; box-sizing: border-box; cursor: pointer; display: inline-flex; font-size: 17px; font-weight: 800; gap: 10px; justify-content: center; min-height: 56px; padding: 0 28px; text-decoration: none; transition: transform .2s ease, background-color .3s ease, color .3s ease; }
.albeena-btn:hover { text-decoration: none; transform: translateY(-3px); }
.albeena-btn-honey { background: var(--bee-honey); border: 0; color: var(--bee-ink); }
.albeena-btn-honey:hover, .albeena-btn-honey:focus { color: var(--bee-ink); }
.albeena-btn-outline { background: transparent; border: 2px solid currentColor; color: var(--bee-text); }
.albeena-btn-outline:hover, .albeena-btn-outline:focus { color: var(--bee-text); }
.albeena-btn:focus-visible { outline: 3px solid var(--bee-honeyline); outline-offset: 3px; }
.albeena-eyebrow { color: var(--bee-honeytext); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.albeena-eyebrow-pill { align-items: center; align-self: flex-start; border: 2px solid var(--bee-honeyline); border-radius: 999px; color: var(--bee-honeytext); display: inline-flex; font-size: 14px; font-weight: 700; gap: 10px; padding: 6px 16px 6px 8px; }
.albeena-heading { color: var(--bee-text); display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.albeena-heading-row { align-items: flex-end; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
html[data-bee] body.albeena-body .albeena-heading h2 { color: var(--bee-text); font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; margin: 0; }
.albeena-heading p { color: var(--bee-muted); font-size: 17px; line-height: 1.6; margin: 0; max-width: 560px; }
.albeena-link-arrow { color: var(--bee-honeytext); font-weight: 700; text-decoration: none; }
.albeena-link-arrow:hover { color: var(--bee-text); }

/* --- hive scene ----------------------------------------------------------------- */
.albeena-scene, .albeena-band-scene { background: var(--bee-sky1); overflow: hidden; position: relative; transition: background-color 1.2s ease; }
.albeena-scene { aspect-ratio: 1 / 1; border: 2px solid var(--bee-line); border-radius: 36px; }
.albeena-scene > *, .albeena-band-scene > * { position: absolute; }
.albeena-sky-band { left: 0; right: 0; transition: background-color 1.2s ease; }
.albeena-sky-band-2 { background: var(--bee-sky2); bottom: 0; height: 62%; }
.albeena-sky-band-3 { background: var(--bee-sky3); bottom: 0; height: 56%; }
.albeena-stars { inset: 0 0 52% 0; opacity: var(--bee-starop); transition: opacity 1.2s ease; }
.albeena-stars span { animation: albeena-twinkle 2.6s ease-in-out infinite alternate; background: #ffe9b0; border-radius: 50%; height: 4px; position: absolute; width: 4px; }
.albeena-cloud { animation: albeena-drift 100s linear infinite; left: -25%; transition: opacity 1.2s ease; }
.albeena-cloud svg { display: block; height: auto; width: 100%; }
.albeena-cloud path { fill: #fff; }
.albeena-cloud-1 { top: 8%; width: 18%; animation-delay: -25s; }
.albeena-cloud-2 { animation-delay: -60s; animation-duration: 130s; top: 20%; width: 13%; }
html[data-bee="night"] .albeena-cloud { opacity: .18; }
html[data-bee="dusk"] .albeena-cloud { opacity: .6; }
.albeena-arc { height: 100%; inset: 0; width: 100%; }
.albeena-arc path { fill: none; opacity: .7; stroke: var(--bee-honeyline); stroke-dasharray: 2 12; stroke-linecap: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.albeena-orb { height: 80px; left: 50%; margin: -40px 0 0 -40px; top: 10%; transition: left 1.2s ease, top 1.2s ease; width: 80px; }
.albeena-orb svg { display: block; height: 100%; width: 100%; }
.albeena-rays { animation: albeena-spin 40s linear infinite; transform-origin: 50px 50px; }
.albeena-rays path { stroke: var(--bee-orb); stroke-linecap: round; stroke-width: 6; }
.albeena-orb-body { fill: var(--bee-orb); stroke: var(--bee-ink); stroke-linejoin: round; stroke-width: 2.5; }
.albeena-face { fill: var(--bee-ink); }
.albeena-face-line { fill: none; stroke: var(--bee-ink); stroke-linecap: round; stroke-width: 2.5; }
.albeena-moon { display: none !important; }
html[data-bee="night"] .albeena-sun { display: none !important; }
html[data-bee="night"] .albeena-moon { display: block !important; }
.albeena-orb-time { background: var(--bee-ground); border-radius: 999px; color: var(--bee-text); font-size: 12px; font-weight: 700; left: 50%; padding: 3px 9px; position: absolute; top: 96%; transform: translateX(-50%); white-space: nowrap; }
.albeena-orb-time:empty { display: none; }
.albeena-hill { bottom: 44%; height: 12%; left: 0; width: 100%; }
.albeena-hill path { fill: var(--bee-hill2); transition: fill 1.2s ease; }
.albeena-ground { background: var(--bee-hill3); bottom: 0; height: 46%; left: 0; right: 0; transition: background-color 1.2s ease; }
.albeena-scene-flower { display: block; }
.albeena-flower { display: block; height: auto; overflow: visible; width: 100%; }
.albeena-flower-stem { fill: none; stroke: #4f7f3a; stroke-linecap: round; stroke-width: 4; }
.albeena-flower-leaf { fill: #5e9446; }
.albeena-petals { transform-box: fill-box; transform-origin: center; transition: transform 1.6s cubic-bezier(.3, 1.2, .5, 1); }
.albeena-petals ellipse { stroke: var(--bee-ink); stroke-width: 1.8; }
.albeena-flower-centre { stroke: var(--bee-ink); stroke-width: 2; }
.albeena-flower-daisy .albeena-petals ellipse { fill: #fff; }
.albeena-flower-daisy .albeena-flower-centre { fill: #ffb800; }
.albeena-flower-poppy .albeena-petals ellipse { fill: #e2483d; }
.albeena-flower-poppy .albeena-flower-centre { fill: #2e1a07; }
.albeena-flower-lavender .albeena-petals ellipse { fill: #9b7bd4; }
.albeena-flower-lavender .albeena-flower-centre { fill: #ffb800; }
.albeena-flower-sunflower .albeena-petals ellipse { fill: #ffc21a; }
.albeena-flower-sunflower .albeena-flower-centre { fill: #7a4716; }
.albeena-flower-cornflower .albeena-petals ellipse { fill: #3e6fd8; }
.albeena-flower-cornflower .albeena-flower-centre { fill: #fff6e0; }
html[data-bee="night"] .albeena-petals { transform: scale(.3); }
html[data-bee="dusk"] .albeena-petals { transform: scale(.72); }
html[data-bee="dawn"] .albeena-petals { transform: scale(.82); }
.albeena-roof path { fill: #c98b48; stroke: var(--bee-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.albeena-box { background: #3a2810; border: 10px solid #c98b48; border-radius: 6px; box-sizing: border-box; display: flex; gap: 6%; padding: 7% 6% 12%; }
.albeena-box-small { border-width: 6px; padding: 8px 8px 14px; }
.albeena-frame { background-color: var(--bee-wax); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34.64'%3E%3Cpath d='M10 0 L20 5.77 L20 17.32 L10 23.09 L0 17.32 L0 5.77 Z M10 23.09 L10 34.64 M0 17.32 L0 28.87 L10 34.64 L20 28.87 L20 17.32' fill='none' stroke='%23160F05' stroke-opacity='.3' stroke-width='1.6'/%3E%3C/svg%3E"); border: 4px solid #b9783a; flex: 1; transition: background-color 1.2s ease; }
.albeena-box-small .albeena-frame { border-width: 2px; }
.albeena-entrance { background: #160f05; border-radius: 4px; }
.albeena-board { background: #c98b48; border-radius: 2px; }
.albeena-scene-bee { display: none; pointer-events: none; }
.albeena-inside .albeena-scene-bee, .albeena-outside .albeena-scene-bee { position: absolute; }
.albeena-inside, .albeena-outside, .albeena-exits { inset: 0; pointer-events: none; }
.albeena-turn-0 { transform: rotate(-18deg); }
.albeena-turn-1 { transform: rotate(14deg) scaleX(-1); }
.albeena-turn-2 { transform: rotate(6deg); }
.albeena-turn-3 { transform: rotate(-8deg) scaleX(-1); }
.albeena-outside .albeena-scene-bee { animation: albeena-wander 7s ease-in-out infinite; }
.albeena-zz { animation: albeena-z 3.2s ease-in infinite; color: var(--bee-honeytext); display: none; font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; left: 70%; opacity: 0; position: absolute; top: -30%; }
html[data-bee="night"] .albeena-zz { display: block; }
/* inside: 8 asleep at night, otherwise 8 − activity but at least 2; outside = activity */
html[data-bee-activity="0"] .albeena-inside > :nth-child(-n+8),
html[data-bee-activity="1"] .albeena-inside > :nth-child(-n+7),
html[data-bee-activity="2"] .albeena-inside > :nth-child(-n+6),
html[data-bee-activity="3"] .albeena-inside > :nth-child(-n+5),
html[data-bee-activity="4"] .albeena-inside > :nth-child(-n+4),
html[data-bee-activity="5"] .albeena-inside > :nth-child(-n+3),
html[data-bee-activity="6"] .albeena-inside > :nth-child(-n+2),
html[data-bee-activity="7"] .albeena-inside > :nth-child(-n+2),
html[data-bee-activity="8"] .albeena-inside > :nth-child(-n+2),
html[data-bee-activity="1"] .albeena-outside > :nth-child(-n+1),
html[data-bee-activity="2"] .albeena-outside > :nth-child(-n+2),
html[data-bee-activity="3"] .albeena-outside > :nth-child(-n+3),
html[data-bee-activity="4"] .albeena-outside > :nth-child(-n+4),
html[data-bee-activity="5"] .albeena-outside > :nth-child(-n+5),
html[data-bee-activity="6"] .albeena-outside > :nth-child(-n+6),
html[data-bee-activity="7"] .albeena-outside > :nth-child(-n+7),
html[data-bee-activity="8"] .albeena-outside > :nth-child(-n+8) { display: block; }
.albeena-exit { animation: albeena-exit 5s ease-out infinite; display: none; opacity: 0; position: absolute; width: 5%; }
.albeena-band-scene .albeena-exit { width: 2.2%; }
html[data-bee-activity="1"] .albeena-exits > :nth-child(-n+1),
html[data-bee-activity="2"] .albeena-exits > :nth-child(-n+1),
html[data-bee-activity="3"] .albeena-exits > :nth-child(-n+2),
html[data-bee-activity="4"] .albeena-exits > :nth-child(-n+2),
html[data-bee-activity="5"] .albeena-exits > :nth-child(-n+3),
html[data-bee-activity="6"] .albeena-exits > :nth-child(-n+3),
html[data-bee-activity="7"] .albeena-exits > :nth-child(-n+4),
html[data-bee-activity="8"] .albeena-exits > :nth-child(-n+4) { display: block; }
html[data-bee="dusk"] .albeena-exit { animation-duration: 6s; animation-name: albeena-enter; }
.albeena-wake { display: none; }
html[data-bee="dawn"] .albeena-wake { display: block; }
.albeena-shiver { animation: albeena-shiver .45s ease-in-out infinite alternate; }
.albeena-veil { background: #1c1208; bottom: 0; height: 46%; left: 0; opacity: var(--bee-veil); pointer-events: none; right: 0; transition: opacity 1.2s ease; }
.albeena-scene-label { background: var(--bee-ground); border: 1px solid var(--bee-line); border-radius: 999px; color: var(--bee-text); font-size: 12px; font-weight: 800; padding: 4px 10px; }

/* --- homepage hero (G2: comb only around the picture) ------------------------- */
.albeena-hero { color: var(--bee-text); overflow: hidden; position: relative; }
.albeena-hero-comb { inset: 0; pointer-events: none; position: absolute; -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 66%); mask-image: linear-gradient(90deg, transparent 36%, #000 66%); }
.albeena-hero-comb::before { background: var(--bee-panel2); content: ''; inset: 0; position: absolute; transition: background-color .9s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97 M0 48 L0 80 L28 97 L56 80 L56 48' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 56px 97px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97 M0 48 L0 80 L28 97 L56 80 L56 48' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 56px 97px repeat; }
.albeena-rise { inset: 0; pointer-events: none; position: absolute; }
.albeena-rise span { animation: albeena-rise 10s linear infinite; background: var(--bee-honey); border-radius: 50%; bottom: -10px; height: 6px; opacity: 0; position: absolute; width: 6px; }
.albeena-rise span:nth-child(1) { animation-delay: -1s; left: 8%; }
.albeena-rise span:nth-child(2) { animation-delay: -6s; height: 4px; left: 19%; width: 4px; }
.albeena-rise span:nth-child(3) { animation-delay: -3.5s; left: 33%; }
.albeena-rise span:nth-child(4) { animation-delay: -8s; height: 5px; left: 47%; width: 5px; }
.albeena-rise span:nth-child(5) { animation-delay: -2s; height: 4px; left: 61%; width: 4px; }
.albeena-rise span:nth-child(6) { animation-delay: -5s; left: 74%; }
.albeena-rise span:nth-child(7) { animation-delay: -9s; height: 5px; left: 88%; width: 5px; }
html[data-bee="night"] .albeena-rise { display: none; }
.albeena-hero-grid { align-items: center; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); padding-bottom: clamp(48px, 6vw, 88px); padding-top: clamp(36px, 5vw, 72px); position: relative; }
.albeena-hero-text { display: flex; flex-direction: column; gap: 22px; }
html[data-bee] body.albeena-body .albeena-hero-title { color: var(--bee-text); font-size: clamp(34px, 4vw, 58px); font-weight: 800 !important; line-height: 1.08; margin: 0; }
.albeena-hero-title em { color: var(--bee-honeytext); font-style: normal; }
.albeena-hero-lead { color: var(--bee-muted); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; margin: 0; max-width: 520px; }
.albeena-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.albeena-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.albeena-hero-visual { display: flex; flex-direction: column; gap: 14px; justify-self: center; width: min(600px, 100%); }
.albeena-hive-status { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.albeena-hive-status p { background: var(--bee-panel); border-radius: 18px; color: var(--bee-text); font-size: 14px; line-height: 1.45; margin: 0; padding: 12px 16px; }
.albeena-hive-status strong { display: block; font-family: 'Unbounded', sans-serif; font-size: 13px; }

/* --- usp ------------------------------------------------------------------------ */

/* --- frames pulled from the hive --------------------------------------------------- */
.albeena-frames-section { background: var(--bee-panel); padding: clamp(56px, 6vw, 88px) 0 0; }
.albeena-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.albeena-slot { height: 380px; position: relative; }
.albeena-slot-bee { left: 50%; margin-left: -22px; opacity: 0; position: absolute; top: 70px; transform: translate(0, 30px) scale(.6); transition: all .55s cubic-bezier(.3, 1.6, .5, 1); width: 44px; z-index: 1; }
.albeena-frame-card { display: flex; flex-direction: column; height: 290px; left: 22px; position: absolute; right: 22px; text-decoration: none; top: 80px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); z-index: 2; }
.albeena-frame-card:hover, .albeena-frame-card:focus { text-decoration: none; }
.albeena-slot:hover .albeena-frame-card, .albeena-slot:focus-within .albeena-frame-card { transform: translateY(-56px); }
.albeena-slot:hover .albeena-slot-bee, .albeena-slot:focus-within .albeena-slot-bee { opacity: 1; transform: translate(30px, -40px) scale(1); }
.albeena-frame-top { background: #b9783a; border-radius: 6px; box-shadow: 0 3px 0 #7a4a1e; color: var(--bee-ink); font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 700; margin: 0 -14px; padding: 9px 4px; text-align: center; }
.albeena-frame-comb { background-color: var(--bee-wax); border: 8px solid #b9783a; border-top: 0; display: block; flex: 1; overflow: hidden; position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34.64'%3E%3Cpath d='M10 0 L20 5.77 L20 17.32 L10 23.09 L0 17.32 L0 5.77 Z M10 23.09 L10 34.64 M0 17.32 L0 28.87 L10 34.64 L20 28.87 L20 17.32' fill='none' stroke='%23160F05' stroke-opacity='.3' stroke-width='1.6'/%3E%3C/svg%3E"); }
.albeena-slot-box { background: var(--bee-line); border-top: 6px solid var(--bee-lip); bottom: 0; height: 158px; left: 0; position: absolute; right: 0; z-index: 3; }

/* --- product sections and cards ------------------------------------------------- */
.albeena-products { padding: clamp(56px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }
.albeena-products-new { background: var(--bee-panel); }
html[data-bee] .booknook-bestseller-badge { background: #2e1a07; color: #ffb800; }

/* --- tip of the bee ---------------------------------------------------------------- */
.albeena-tip { color: var(--bee-text); padding: clamp(56px, 6vw, 96px) 0; }
.albeena-tip-grid { align-items: center; display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.albeena-tip-visual { aspect-ratio: 1 / 1; justify-self: center; position: relative; width: min(520px, 100%); }
.albeena-tip-hex { aspect-ratio: .866 / 1; background: var(--bee-wax); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: background-color .9s ease; width: 70%; }
.albeena-tip-photo { background: #fff; border-radius: 28px; box-shadow: 0 18px 40px rgba(46, 26, 7, .18); display: block; left: 50%; overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 52%; }
.albeena-tip-photo img { aspect-ratio: 1 / 1; display: block; height: auto; object-fit: contain; padding: 10px; width: 100%; }
.albeena-tip-photo.is-cutout { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; width: 60%; }
.albeena-tip-photo.is-cutout img { filter: drop-shadow(0 22px 20px rgba(46, 26, 7, .3)); padding: 0; }
.albeena-tip-orbit { animation: albeena-spin 12s linear infinite; inset: 4%; pointer-events: none; position: absolute; }
.albeena-tip-orbit .albeena-bee-box { left: 50%; margin-left: -24px; position: absolute; top: -14px; width: 48px; }
.albeena-tip-body { display: flex; flex-direction: column; gap: 16px; }
html[data-bee] body.albeena-body .albeena-tip-body h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.12; margin: 0; }
.albeena-tip-body h2 a { color: var(--bee-text); text-decoration: none; }
.albeena-tip-body p { color: var(--bee-muted); font-size: 17px; line-height: 1.7; margin: 0; max-width: 520px; }
.albeena-tip-price { align-items: baseline; display: flex; gap: 12px; }
.albeena-tip-price strong { color: var(--bee-honeytext); font-family: 'Unbounded', sans-serif; font-size: 34px; }
.albeena-tip-price s { color: var(--bee-muted); }

/* --- waggle dance ------------------------------------------------------------------ */
.albeena-dance { background: var(--bee-panel); color: var(--bee-text); padding: clamp(64px, 7vw, 104px) 0; }
.albeena-dance-grid { align-items: center; display: grid; gap: 56px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.albeena-dance-stage { aspect-ratio: 1 / 1; justify-self: center; position: relative; width: min(460px, 100%); }
.albeena-dance-comb { background-color: var(--bee-ground); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97 M0 48 L0 80 L28 97 L56 80 L56 48' fill='none' stroke='%23b9783a' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E"); border: 2px solid var(--bee-line); border-radius: 50%; inset: 0; position: absolute; transition: background-color .9s ease; }
.albeena-dance-vertical { border-left: 2px dashed var(--bee-muted); bottom: 50%; left: 50%; opacity: .45; position: absolute; top: 9%; }
.albeena-dance-sun { align-items: center; color: var(--bee-honeytext); display: flex; flex-direction: column; font-size: 13px; font-weight: 700; gap: 4px; left: 50%; position: absolute; top: -6%; transform: translateX(-50%); }
.albeena-dance-sun-rays { stroke: #ffb800; stroke-linecap: round; stroke-width: 3; }
.albeena-dance-sun-body { fill: #ffb800; }
.albeena-dance-rot { inset: 12%; position: absolute; transform: rotate(var(--albeena-dance-rot, 40deg)); transition: transform .9s cubic-bezier(.3, 1.3, .5, 1); }
.albeena-dance-lines { height: 100%; inset: 0; overflow: visible; position: absolute; width: 100%; }
.albeena-dance-arrow { fill: none; stroke: var(--bee-honeyline); stroke-dasharray: 2 2; stroke-width: 1; }
.albeena-dance-trail { animation: albeena-march 1.2s linear infinite; fill: none; opacity: .75; stroke: var(--bee-text); stroke-dasharray: .2 2.2; stroke-linecap: round; stroke-width: .8; }
.albeena-dance-flower { align-items: center; background: #fff6e0; border-radius: 50%; display: flex; height: 32px; justify-content: center; left: 50%; margin-left: -16px; position: absolute; top: -8%; width: 32px; }
.albeena-dance-flower circle { fill: #ff8a1f; }
.albeena-dance-flower .albeena-dance-flower-centre { fill: #ffb800; stroke: #2e1a07; stroke-width: 1.5; }
.albeena-dancer { animation: albeena-dance var(--albeena-dance-dur, 9s) linear infinite; left: 50%; margin: -18px 0 0 -26px; position: absolute; top: 70%; width: 52px; }
.albeena-waggle { animation: albeena-waggle .13s ease-in-out infinite alternate; display: block; }
.albeena-dance-text { display: flex; flex-direction: column; gap: 18px; }
html[data-bee] body.albeena-body .albeena-dance-text h2 { color: var(--bee-text); font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; margin: 0; }
.albeena-dance-text > p { color: var(--bee-muted); font-size: 17px; line-height: 1.7; margin: 0; max-width: 540px; }
.albeena-dance-spots { border: 0; margin: 8px 0 0; padding: 0; }
.albeena-dance-spots legend { color: var(--bee-text); font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.albeena-dance-spots div { display: flex; flex-wrap: wrap; gap: 10px; }
.albeena-dance-spots button { background: transparent; border: 2px solid var(--bee-honeyline); border-radius: 999px; color: var(--bee-text); cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; min-height: 48px; padding: 0 20px; transition: background-color .3s ease, color .3s ease; }
.albeena-dance-spots button[aria-pressed="true"] { background: var(--bee-honey); border-color: var(--bee-honey); color: var(--bee-ink); }
.albeena-dance-spots button:focus-visible { outline: 3px solid var(--bee-honeyline); outline-offset: 2px; }
.albeena-dance-result { background: var(--bee-ground); border: 1px solid var(--bee-line); border-radius: 18px; color: var(--bee-text); font-size: 16px; line-height: 1.6; margin: 0; padding: 14px 18px; }

/* --- product detail band --------------------------------------------------------- */
.albeena-band { color: var(--bee-text); position: relative; }
.albeena-band-scene { height: 230px; }
.albeena-band-info { display: flex; flex-direction: column; gap: 8px; left: 30%; max-width: 640px; position: absolute; right: 3%; top: 14px; z-index: 2; }
.albeena-band-info .albeena-chip { align-self: flex-start; background: var(--bee-ground); border: 1px solid var(--bee-line); box-shadow: 0 2px 10px rgba(46, 26, 7, .1); font-size: 13px; }
.albeena-band-info .albeena-chip strong { margin-right: 2px; }
.albeena-band .albeena-orb { height: 56px; margin: -28px 0 0 -28px; width: 56px; }

/* --- product detail on paper --------------------------------------------------------- */

/* --- motion ---------------------------------------------------------------------------- */
@keyframes albeena-flap { from { transform: rotate(-14deg) scaleY(1); } to { transform: rotate(12deg) scaleY(.6); } }
@keyframes albeena-spin { to { transform: rotate(360deg); } }
@keyframes albeena-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes albeena-drift { from { left: -25%; } to { left: 105%; } }
@keyframes albeena-wander { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(26px, -18px); } 50% { transform: translate(4px, -34px); } 75% { transform: translate(-24px, -14px); } }
@keyframes albeena-z { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(20px, -40px) scale(1.15); } }
@keyframes albeena-exit { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(90px, -170px) scale(1); } }
@keyframes albeena-enter { 0% { opacity: 0; transform: translate(90px, -170px) scale(1); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
@keyframes albeena-shiver { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes albeena-rise { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translateY(-640px); } }
@keyframes albeena-fact-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes albeena-fact-bar { to { width: 100%; } }
@keyframes albeena-march { to { stroke-dashoffset: -2.4; } }
@keyframes albeena-waggle { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes albeena-dance {
    0% { left: 50%; top: 70%; transform: rotate(270deg); }
    18% { left: 50%; top: 30%; transform: rotate(270deg); }
    22% { left: 56%; top: 23%; transform: rotate(315deg); }
    26% { left: 64%; top: 22%; transform: rotate(360deg); }
    30% { left: 71%; top: 27%; transform: rotate(405deg); }
    34% { left: 74%; top: 38%; transform: rotate(450deg); }
    38% { left: 73%; top: 52%; transform: rotate(450deg); }
    42% { left: 69%; top: 64%; transform: rotate(495deg); }
    46% { left: 62%; top: 72%; transform: rotate(540deg); }
    50% { left: 50%; top: 70%; transform: rotate(630deg); }
    68% { left: 50%; top: 30%; transform: rotate(630deg); }
    72% { left: 44%; top: 23%; transform: rotate(585deg); }
    76% { left: 36%; top: 22%; transform: rotate(540deg); }
    80% { left: 29%; top: 27%; transform: rotate(495deg); }
    84% { left: 26%; top: 38%; transform: rotate(450deg); }
    88% { left: 27%; top: 52%; transform: rotate(450deg); }
    92% { left: 31%; top: 64%; transform: rotate(405deg); }
    96% { left: 38%; top: 72%; transform: rotate(360deg); }
    100% { left: 50%; top: 70%; transform: rotate(270deg); }
}

/* --- small screens --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .albeena-hero-comb { -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 72%); mask-image: linear-gradient(180deg, transparent 38%, #000 72%); }
    .albeena-band-info { left: 30%; }
    .albeena-band-where { display: none; }
}
@media (max-width: 575.98px) {
    .albeena-switch { flex: 1 1 100%; flex-wrap: nowrap; }
    .albeena-switch button { flex: 1 1 0; font-size: 12px; gap: 4px; justify-content: center; line-height: 1.15; min-width: 0; padding: 4px 6px; text-align: center; white-space: normal; }
    .albeena-switch button svg, .albeena-switch-bee { flex-shrink: 0; }
    .albeena-beebar-fact { font-size: 13px; }
    .albeena-slot { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
    .albeena-body *, .albeena-body *::before { animation: none !important; transition: none !important; }
    .albeena-exit, .albeena-rise span, .albeena-zz { display: none !important; }
}


/* ==========================================================================
   Artifact components of the standalone template: header, hero list, frame art,
   product cards, product detail (F3), newsletter "Medová pošta" and footer.
   ========================================================================== */

/* --- header ---------------------------------------------------------------- */
html[data-bee] .albeena-header { background: var(--bee-ground); border-bottom: 1px solid var(--bee-line); color: var(--bee-text); position: relative; z-index: 30; }
.albeena-ribbon { background: var(--bee-honey); color: var(--bee-ink); display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 700; gap: 4px 0; justify-content: center; padding: 9px 16px; text-align: center; }
.albeena-ribbon span + span::before { content: "·"; padding: 0 .5em; }
.albeena-header-row { align-items: center; display: flex; gap: 24px; min-height: 74px; padding-bottom: 12px; padding-top: 12px; }
.albeena-logo { align-items: center; display: inline-flex; flex-shrink: 0; }
.albeena-logo img { display: block; max-height: 56px; max-width: 220px; object-fit: contain; }
html[data-bee="night"] .albeena-logo img { background: #fff6e0; border-radius: 14px; padding: 4px 10px; }
.albeena-menu { align-items: center; display: flex; flex-grow: 1; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
.albeena-menu-item { position: relative; }
html[data-bee] .albeena-menu-link { color: var(--bee-text); display: inline-block; font-size: 15px; font-weight: 600; padding: 8px 0; text-decoration: none; white-space: nowrap; }
html[data-bee] .albeena-menu-link:hover,
html[data-bee] .albeena-menu-link:focus-visible,
html[data-bee] .albeena-menu-link[aria-current="page"] { color: var(--bee-honeytext); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.albeena-menu-item.has-subs > .albeena-menu-link::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; content: ""; display: inline-block; margin-left: 6px; vertical-align: middle; }
.albeena-menu-subs { background: var(--bee-paper); border: 1px solid var(--bee-line); border-radius: 18px; box-shadow: 0 14px 34px rgba(46, 26, 7, .14); display: none; flex-direction: column; left: 50%; min-width: 220px; padding: 10px; position: absolute; top: 100%; transform: translateX(-50%); z-index: 40; }
.albeena-menu-item.has-subs:hover > .albeena-menu-subs,
.albeena-menu-item.has-subs:focus-within > .albeena-menu-subs { display: flex; }
html[data-bee] .albeena-menu-subs a { border-radius: 12px; color: var(--bee-ink); font-size: 14px; font-weight: 600; padding: 8px 12px; text-decoration: none; }
html[data-bee] .albeena-menu-subs a:hover { background: var(--bee-wax); }
.albeena-header-actions { align-items: center; display: flex; flex-shrink: 0; gap: 8px; margin-left: auto; }
html[data-bee] .albeena-icon-btn { align-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--bee-text); cursor: pointer; display: inline-flex; height: 44px; justify-content: center; padding: 0; text-decoration: none; width: 44px; }
html[data-bee] .albeena-icon-btn:hover, html[data-bee] .albeena-icon-btn:focus-visible { background: var(--bee-panel); color: var(--bee-text); }
html[data-bee] .albeena-menu-toggle { display: none; }
html[data-bee] .albeena-cart-pill { align-items: center; background: var(--bee-honey); border-radius: 23px; color: var(--bee-ink); cursor: pointer; display: inline-flex; font-weight: 800; gap: 8px; height: 46px; padding: 0 18px 0 14px; transition: transform .2s ease; }
.albeena-cart-pill:hover { transform: translateY(-2px); }
.albeena-cart-count { align-items: center; background: var(--bee-ground); border-radius: 12px; color: var(--bee-honeytext); display: inline-flex; font-size: 13px; height: 24px; justify-content: center; min-width: 24px; padding: 0 6px; }
.albeena-cart-count.is-empty { display: none; }
.albeena-search-row { background: var(--bee-panel); border-top: 1px solid var(--bee-line); padding: 12px 0; }
.albeena-search { align-items: center; background: var(--bee-paper); border: 2px solid var(--bee-line); border-radius: 999px; display: flex; gap: 10px; margin: 0 auto; max-width: 760px; padding: 4px 4px 4px 18px; }
.albeena-search > svg { color: var(--bee-honeytext); flex-shrink: 0; }
.albeena-search-input { background: transparent; border: 0; color: var(--bee-ink); flex: 1; font: inherit; font-size: 16px; min-width: 0; outline: none; padding: 8px 0; }
.albeena-search-clear { background: transparent; border: 0; color: var(--bee-muted); cursor: pointer; padding: 6px; }
html[data-bee] .albeena-search-submit { background: var(--bee-honey); border: 0; border-radius: 999px; color: var(--bee-ink); cursor: pointer; font-weight: 800; padding: 10px 22px; }
.albeena-search-panel { background: var(--bee-paper); border-top: 1px solid var(--bee-line); box-shadow: 0 14px 34px rgba(46, 26, 7, .14); left: 0; position: absolute; right: 0; top: 100%; z-index: 35; }
.albeena-search-panel-inner { max-height: 70vh; overflow: auto; padding: 18px 0; }

/* --- hero list (homepage) ----------------------------------------------------- */
.albeena-hero-list { color: var(--bee-muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: 10px 22px; list-style: none; margin: 4px 0 0; padding: 0; }
.albeena-hero-list li { align-items: center; display: flex; gap: 8px; }
.albeena-hero-list svg { color: var(--bee-honeyline); flex-shrink: 0; }

/* --- frame art (homepage frames) ------------------------------------------------- */
.albeena-frame-art { background-color: var(--albeena-frame-color, var(--bee-wax)); background-image: inherit; display: block; inset: 0; position: absolute; }
.albeena-art { height: auto; left: 50%; position: absolute; top: 10%; transform: translateX(-50%); width: min(50%, 76px); }
.albeena-art-bottle { width: min(30%, 46px); }
.albeena-art-caps { width: min(44%, 66px); }

/* --- product card ------------------------------------------------------------- */
.albeena-card-col { display: flex; margin-bottom: 24px; }
html[data-bee] .albeena-pcard { background: var(--bee-paper); border: 2px solid var(--bee-line); border-radius: 28px; color: var(--bee-ink); display: flex; flex-direction: column; gap: 14px; padding: 16px; transition: transform .3s ease, border-color .3s ease; width: 100%; }
html[data-bee] .albeena-pcard:hover { border-color: var(--bee-honeyline); transform: translateY(-4px); }
.albeena-pcard-media { background: transparent !important; display: block; height: 240px; position: relative; }
.albeena-pcard-plate { background: var(--bee-wax); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: block; height: 226px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 196px; }
.albeena-pcard-photo { display: block; height: 100%; position: relative; z-index: 1; }
.albeena-pcard-photo.is-cutout img { display: block; filter: drop-shadow(0 12px 10px rgba(46, 26, 7, .25)); height: 100%; margin: 0 auto; max-width: 74%; object-fit: contain; padding: 16px 0 10px; transition: transform .3s ease; width: 100%; }
html[data-bee] .albeena-pcard:hover .albeena-pcard-photo.is-cutout img { transform: translateY(-4px) scale(1.03); }
.albeena-pcard-photo.is-photo { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); height: 226px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 196px; }
.albeena-pcard-photo.is-photo picture, .albeena-pcard-photo.is-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
.albeena-pcard-tag { background: var(--bee-honey); border-radius: 999px; color: var(--bee-ink); font-size: 12px; font-weight: 800; left: 0; padding: 5px 11px; position: absolute; top: 0; }
.albeena-pcard-body { display: flex; flex-direction: column; flex-grow: 1; gap: 6px; }
html[data-bee] .albeena-pcard-title { font-family: 'Unbounded', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.35; margin: 0; }
html[data-bee] .albeena-pcard-title a { color: var(--bee-ink); text-decoration: none; }
.albeena-pcard-sub { color: #6e5434; font-size: 14px; }
.albeena-pcard-sub.is-out { color: #a33a1e; }
.albeena-pcard-footer { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.albeena-pcard-price { display: flex; flex-direction: column; }
.albeena-pcard-price s { color: #8a7150; font-size: 13px; }
.albeena-pcard-price strong { color: #8f4e00; font-family: 'Unbounded', sans-serif; font-size: 21px; font-weight: 700; }
html[data-bee] .albeena-pcard-add { align-items: center; background: #ffb800; border: 0; border-radius: 50%; color: #2e1a07; cursor: pointer; display: flex; flex-shrink: 0; height: 50px; justify-content: center; padding: 0; width: 50px; }
html[data-bee] .albeena-pcard-add:hover { background: #f0a800; }

/* --- product detail (F3) ------------------------------------------------------- */
.albeena-pd { padding-bottom: 24px; padding-top: 18px; }
.albeena-pd-top { align-items: start; display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-top: 18px; }
.albeena-pd-gallery { align-items: center; display: flex; flex-direction: column; gap: 20px; }
.albeena-pd-hex { aspect-ratio: 1 / 1.08; max-width: 540px; position: relative; width: 100%; }
.albeena-pd-hex-inner { background-color: var(--bee-wax); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'%3E%3Cpath d='M14 0 L28 8 L28 24 L14 32 L0 24 L0 8 Z M14 32 L14 48.5 M0 24 L0 40 L14 48.5 L28 40 L28 24' fill='none' stroke='%232e1a07' stroke-opacity='.12' stroke-width='1.6'/%3E%3C/svg%3E"); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); height: 100%; left: 6.5%; overflow: hidden; position: absolute; top: 0; width: 87%; }
.albeena-pd-hex-level { animation: albeena-level 9s ease-in-out infinite; background: var(--bee-honey); bottom: 0; height: 14%; left: 0; opacity: .85; position: absolute; right: 0; }
.albeena-pd-photo { align-items: center; display: flex; inset: 0; justify-content: center; position: absolute; z-index: 1; }
/* a cut-out (ProductCutout) stands in front of the honeycomb; a photo without one fills the hexagon */
.albeena-pd-hex.has-cutout .albeena-pd-photo { padding: 7% 11% 5%; }
.albeena-pd-hex.has-cutout .albeena-pd-photo img { filter: drop-shadow(0 18px 16px rgba(46, 26, 7, .28)); height: 100%; object-fit: contain; width: 100%; }
.albeena-pd-hex:not(.has-cutout) .albeena-pd-photo { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); left: 6.5%; right: 6.5%; }
.albeena-pd-hex:not(.has-cutout) .albeena-pd-photo img { height: 100%; object-fit: cover; width: 100%; }
.albeena-pd-orbit { animation: albeena-orbit 14s linear infinite; inset: 2%; pointer-events: none; position: absolute; }
.albeena-pd-orbit .albeena-bee-box { left: 50%; margin-left: -28px; position: absolute; top: -18px; width: 56px; }
.albeena-pd-orbit-rev { animation-direction: reverse; animation-duration: 18s; inset: 14%; }
.albeena-pd-orbit-rev .albeena-bee-box { bottom: -14px; margin-left: -20px; top: auto; width: 40px; }
.albeena-pd-badges { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 0; top: 12%; }
.albeena-pd-badge { background: var(--bee-honey); border-radius: 999px; color: var(--bee-ink); font-size: 14px; font-weight: 800; padding: 8px 14px; }
.albeena-pd-thumbs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); max-width: 540px; width: 100%; }
.albeena-pd-thumb { aspect-ratio: 1; background: var(--bee-paper); border: 2px solid var(--bee-line); border-radius: 18px; cursor: pointer; overflow: hidden; padding: 6px; }
.albeena-pd-thumb.is-active { border-color: var(--bee-honeyline); }
.albeena-pd-thumb img { height: 100%; object-fit: contain; width: 100%; }
.albeena-pd-info { color: var(--bee-ink); display: flex; flex-direction: column; gap: 18px; }
.albeena-pd-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.albeena-pd-eyebrow { color: #8f4e00; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-bee] body.albeena-body .albeena-pd-title { color: var(--bee-ink); font-size: clamp(30px, 3.4vw, 50px) !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.albeena-pd-rating { align-items: center; display: flex; gap: 10px; }
.albeena-pd-lead { color: #6e5434; font-size: 17px; line-height: 1.7; }
.albeena-pd-lead p:last-child { margin-bottom: 0; }
.albeena-pd-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.albeena-pd-facts li { border: 1.5px solid #d98a00; border-radius: 999px; color: var(--bee-ink); font-size: 14px; padding: 6px 13px; }
.albeena-pd-facts strong { color: #8f4e00; }
.albeena-pd-price-row { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
/* the price first, a sale's former price struck through beside it, "s DPH" on its own line */
.albeena-pd-price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.albeena-pd-price strong { color: #8f4e00; font-family: 'Unbounded', sans-serif; font-size: 44px; font-weight: 800; line-height: 1.05; order: 1; }
.albeena-pd-price s { color: #8a7150; font-size: 20px; font-weight: 600; order: 2; }
.albeena-pd-price span { color: #6e5434; flex-basis: 100%; font-size: 15px; order: 3; }
.albeena-pd-stock { padding-bottom: 2px; }
.albeena-pd-stock .is-in { color: #3f6a26; font-weight: 700; }
.albeena-pd-stock .is-out { color: #a33a1e; font-weight: 700; }
.albeena-pd-variant-group { border: 0; margin: 0; padding: 0; }
.albeena-pd-variant-group legend { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding: 0; }
.albeena-hexbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.albeena-hexbtn { align-items: center; background: transparent; border: 0; color: var(--bee-ink); cursor: pointer; display: inline-flex; height: 104px; justify-content: center; padding: 0 18px; position: relative; width: 128px; }
.albeena-hexbtn-shape { fill: var(--bee-paper); height: 100%; inset: 0; position: absolute; stroke: #d98a00; stroke-linejoin: round; stroke-width: 2.5; transition: fill .2s ease; width: 100%; }
.albeena-hexbtn:hover .albeena-hexbtn-shape { fill: #fff0c7; }
.albeena-hexbtn.is-selected .albeena-hexbtn-shape { fill: #ffb800; }
.albeena-hexbtn.is-unavailable { opacity: .55; }
.albeena-hexbtn-text { align-items: center; display: flex; flex-direction: column; gap: 2px; position: relative; text-align: center; }
.albeena-hexbtn-text strong { font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; }
.albeena-hexbtn-text span { font-size: 12px; }
.albeena-pd-buy { align-items: stretch; display: flex; flex-wrap: wrap; gap: 12px; }
.albeena-pd-qty { align-items: center; border: 2px solid var(--bee-line); border-radius: 999px; display: flex; flex-wrap: nowrap; height: 62px; padding: 0 6px; width: auto; }
html[data-bee] .albeena-pd-qty-btn { align-items: center; background: #fff0c7; border-radius: 50%; color: var(--bee-ink); display: inline-flex; font-size: 24px; font-weight: 700; height: 48px; justify-content: center; text-decoration: none; width: 48px; }
.albeena-pd-qty-input { background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: 'Unbounded', sans-serif; font-size: 19px; font-weight: 700; text-align: center; width: 56px !important; }
.albeena-pd-add { display: flex; flex-grow: 1; min-width: 220px; }
html[data-bee] .albeena-pd-add .btn { align-items: center; background: #ffb800; border: 0; border-radius: 999px; color: #2e1a07; display: flex; font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; gap: 10px; height: 62px; justify-content: center; width: 100%; }
html[data-bee] .albeena-pd-add .btn:hover { background: #f0a800; }
.albeena-pd-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.albeena-pd-tile { align-items: center; background: #fff0c7; border: 1px solid #ebd49c; border-radius: 20px; color: var(--bee-ink); display: flex; font-size: 14px; gap: 12px; line-height: 1.4; padding: 12px 14px; }
.albeena-pd-tile svg { color: #d98a00; flex-shrink: 0; }
.albeena-pd-tile-icon { display: inline-flex; flex-shrink: 0; width: 34px; }
.albeena-pd-section { color: var(--bee-ink); margin-bottom: 0; margin-top: clamp(56px, 7vw, 96px); }
html[data-bee] body.albeena-body .albeena-pd-h2 { color: var(--bee-ink); font-size: clamp(26px, 3vw, 42px) !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 0 0 28px; }
.albeena-hextabs { display: flex; flex-wrap: wrap; gap: 8px; }
.albeena-hextab { align-items: center; background: transparent; border: 0; color: var(--bee-ink); cursor: pointer; display: inline-flex; font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; height: 84px; justify-content: center; padding: 0 22px; position: relative; width: 160px; }
.albeena-hextab-shape { fill: var(--bee-paper); height: 100%; inset: 0; position: absolute; stroke: #d98a00; stroke-linejoin: round; stroke-width: 2; width: 100%; }
.albeena-hextab[aria-selected="true"] .albeena-hextab-shape { fill: #ffb800; }
.albeena-hextab span { position: relative; }
.albeena-hexpanels { background: #fff0c7; border: 1px solid #ebd49c; border-radius: 28px; color: var(--bee-ink); font-size: 17px; line-height: 1.7; margin-top: 18px; padding: clamp(22px, 3vw, 40px); }
.albeena-hexpanel > :last-child { margin-bottom: 0; }
.albeena-hexpanel strong { color: #8f4e00; }
.albeena-pd-note { color: #6e5434; font-size: 14px; }
.albeena-pd-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 18px; }
.albeena-pd-stats div { border: 1px solid #ebd49c; border-radius: 20px; display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.albeena-pd-stats strong { font-family: 'Unbounded', sans-serif; font-size: 22px; }
.albeena-pd-table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.albeena-pd-table caption { caption-side: top; color: #8f4e00; font-weight: 700; padding: 0 0 8px; }
.albeena-pd-table th, .albeena-pd-table td { border-bottom: 1px solid #ebd49c; padding: 8px 4px; text-align: left; }
.albeena-pd-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.albeena-pd-card { border: 1px solid #ebd49c; border-radius: 20px; padding: 18px; }
.albeena-pd-card strong { font-family: 'Unbounded', sans-serif; font-size: 16px; }
.albeena-pd-card p { font-size: 16px; margin: 8px 0 0; }
.albeena-pd-origin-text { max-width: 720px; }
.albeena-pd-journey { padding-top: 56px; position: relative; }
.albeena-pd-journey-line { border-top: 2px dashed #6e5434; left: 10px; opacity: .4; position: absolute; right: 10px; top: 18px; }
.albeena-pd-journey-bee { animation: albeena-journey 9s ease-in-out infinite alternate; left: 0; position: absolute; top: -4px; width: 50px; }
.albeena-pd-journey ol { display: grid; font-size: 15px; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); list-style: none; margin: 0; padding: 0; }
.albeena-pd-journey li { display: flex; flex-direction: column; }
.albeena-pd-journey li strong { font-family: 'Unbounded', sans-serif; font-size: 15px; }
.albeena-pd-faq { border-bottom: 1px solid #ebd49c; padding: 12px 0; }
.albeena-pd-faq summary { cursor: pointer; font-weight: 700; }
.albeena-pd-faq p { margin: 8px 0 0; }
.albeena-pd-steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.albeena-pd-steps li { background: #fff0c7; border: 1px solid #ebd49c; border-radius: 28px; display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.albeena-pd-step-no { align-items: center; background: #ffb800; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); color: #2e1a07; display: flex; font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; height: 50px; justify-content: center; width: 56px; }
.albeena-pd-steps strong { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; }
.albeena-pd-steps span:not(.albeena-pd-step-no) { color: #6e5434; font-size: 16px; line-height: 1.6; }
.albeena-pd-notice { background: var(--bee-paper); border: 1px dashed #d98a00; border-radius: 18px; color: #6e5434; font-size: 15px; margin-top: 18px; padding: 14px 18px; }
.albeena-pd-reviews { display: grid; gap: 28px; grid-template-columns: minmax(240px, 320px) 1fr; }
.albeena-pd-reviews-summary { display: flex; flex-direction: column; gap: 10px; }
.albeena-pd-reviews-score strong { font-family: 'Unbounded', sans-serif; font-size: 44px; margin-right: 8px; }
.albeena-pd-reviews-heureka { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.albeena-pd-reviews-heureka img { height: 56px; width: auto; }
.albeena-pd-reviews-list { display: grid; gap: 14px; }
.albeena-pd-review { background: #fff0c7; border: 1px solid #ebd49c; border-radius: 22px; padding: 18px; }
.albeena-pd-review-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 6px; }
.albeena-pd-review p { margin: 0 0 6px; }
.albeena-pd-review-author { color: #6e5434; font-size: 14px; }
.albeena-rcards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
html[data-bee] .albeena-rcard { align-items: center; background: #fff0c7; border: 2px solid #ebd49c; border-radius: 26px; color: var(--bee-ink); display: flex; gap: 16px; padding: 14px 18px 14px 14px; text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
html[data-bee] .albeena-rcard:hover { border-color: #d98a00; transform: translateY(-3px); }
.albeena-rcard-media { flex-shrink: 0; height: 110px; position: relative; width: 96px; }
.albeena-rcard-plate { background: var(--bee-wax); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: block; inset: 0; position: absolute; }
.albeena-rcard-media img { height: 70px; left: 50%; mix-blend-mode: multiply; object-fit: contain; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 60px; }
.albeena-rcard-media img.is-cutout { filter: drop-shadow(0 6px 6px rgba(46, 26, 7, .25)); height: 88px; mix-blend-mode: normal; width: 72px; }
.albeena-rcard-text { display: flex; flex-direction: column; gap: 4px; }
.albeena-rcard-name { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; }
.albeena-rcard-price { color: #8f4e00; font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; }

/* --- newsletter "Medová pošta" ----------------------------------------------------- */
.albeena-newsletter-section { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.albeena-newsletter { align-items: center; background: var(--bee-honey); border-radius: 36px; color: var(--bee-ink); display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; overflow: hidden; padding: clamp(24px, 4vw, 48px); position: relative; }
.albeena-newsletter-comb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'%3E%3Cpath d='M14 0 L28 8 L28 24 L14 32 L0 24 L0 8 Z M14 32 L14 48.5 M0 24 L0 40 L14 48.5 L28 40 L28 24' fill='none' stroke='%232e1a07' stroke-opacity='.12' stroke-width='1.6'/%3E%3C/svg%3E"); inset: 0; pointer-events: none; position: absolute; }
.albeena-newsletter-intro { align-items: center; display: flex; gap: 18px; position: relative; }
.albeena-newsletter-bee { animation: albeena-bob 3s ease-in-out infinite; flex-shrink: 0; width: 78px; }
html[data-bee] body.albeena-body .albeena-newsletter h2 { color: var(--bee-ink); font-size: clamp(24px, 2.6vw, 34px) !important; font-weight: 800 !important; margin: 0; }
.albeena-newsletter p { font-size: 16px; line-height: 1.5; margin: 6px 0 0; }
.albeena-newsletter-form { flex-grow: 1; max-width: 520px; position: relative; }
.albeena-newsletter-form .newsletter-form { padding-top: 0 !important; }
.albeena-newsletter-form .input-group { display: flex; flex-wrap: wrap; gap: 10px; }
.albeena-newsletter-input { background: #fff6e0; border: 2px solid #2e1a07; border-radius: 999px !important; box-sizing: border-box; color: #2e1a07; flex: 1 1 200px; font: inherit; font-size: 17px; height: 56px; min-width: 200px; padding: 0 20px; }
.albeena-newsletter-submit { background: var(--bee-ground); border: 0; border-radius: 999px !important; color: var(--bee-honeytext); cursor: pointer; font-weight: 800; font-size: 17px; height: 56px; padding: 0 26px; }
html[data-bee="night"] .albeena-newsletter-submit { background: #2e1a07; color: #ffd27a; }
.albeena-newsletter-form .newsletter-form__note,
.albeena-newsletter-form .newsletter-form__note a,
.albeena-newsletter-form .newsletter-form__message { color: #2e1a07; font-size: 13px; margin: 8px 0 0; }

/* --- footer ------------------------------------------------------------------------ */
/* the footer follows the bee period (dark caramel at night, light text), so it never takes the paper colour */
html[data-bee] body.albeena-body footer.albeena-footer { background: var(--bee-ground); border-radius: 0; border-top: 4px solid var(--bee-honey); color: var(--bee-text); margin: 0; padding: 0; position: relative; }
.albeena-footer-comb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97 M0 48 L0 80 L28 97 L56 80 L56 48' fill='none' stroke='%23d9b66a' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E"); inset: 0; opacity: .7; pointer-events: none; position: absolute; }
.albeena-footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-bottom: 28px; padding-top: 56px; position: relative; }
.albeena-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.albeena-footer-name { color: var(--bee-honeytext); font-family: 'Unbounded', sans-serif; font-size: 26px; font-weight: 700; }
.albeena-footer-brand p { color: var(--bee-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.albeena-footer-col { display: flex; flex-direction: column; font-size: 15px; gap: 8px; }
.albeena-footer-col strong { color: var(--bee-honeytext); font-size: 15px; }
html[data-bee] .albeena-footer-col a, .albeena-footer-col span { color: var(--bee-text); text-decoration: none; }
html[data-bee] .albeena-footer-col a:hover { color: var(--bee-honeytext); text-decoration: underline; }
.albeena-footer-bottom { align-items: center; color: var(--bee-muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 12px 24px; justify-content: space-between; padding-bottom: 28px; position: relative; }
.albeena-footer-pay { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 10px; }
.albeena-footer-pay img { background: #fff; border-radius: 6px; height: 26px; padding: 2px 4px; width: auto; }

@keyframes albeena-level { 0%, 100% { height: 12%; } 50% { height: 17%; } }
@keyframes albeena-orbit { to { transform: rotate(360deg); } }
@keyframes albeena-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes albeena-journey { from { left: 0; } to { left: calc(100% - 50px); } }

@media (max-width: 1199.98px) {
    .albeena-menu { display: none; }
    html[data-bee] .albeena-menu-toggle { display: inline-flex; }
    .albeena-header-row { min-height: 64px; }
}
@media (max-width: 575.98px) {
    .albeena-cart-label { display: none; }
    .albeena-cart-pill { padding: 0 12px; }
    .albeena-logo img { max-height: 44px; max-width: 150px; }
    .albeena-pd-top { grid-template-columns: 1fr; }
    .albeena-pd-reviews { grid-template-columns: 1fr; }
    .albeena-hextab { height: 64px; padding: 0 12px; width: calc(50% - 4px); }
    .albeena-pd-price strong { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .albeena-pd-orbit, .albeena-pd-hex-level, .albeena-newsletter-bee, .albeena-pd-journey-bee { animation: none; }
}

/* --- category toolbar: sort pills in the honey look ------------------------------------------------- */
html[data-bee] .booknook-sort-label { color: #6e5434; }
html[data-bee] .booknook-sort-options { background: #fff6e0; border: 2px solid #ebd49c; }
html[data-bee] .booknook-sort-option { color: #6e5434; }
html[data-bee] .booknook-sort-option:hover, html[data-bee] .booknook-sort-option:focus-visible { color: #8f4e00; }
html[data-bee] .booknook-sort-option.active { background: #ffb800; box-shadow: 0 2px 0 #2e1a07; color: #2e1a07; }