/* ==========================================================================
   hebkazewa.cz – styly
   Návrh: Figma „zewa“ (desktop 1440 px, mobil 375 px). Všechny rozměry z návrhu
   jsou zapsané jako bezrozměrná čísla a násobí se jednotkou --u
   (1 px při šířce návrhu, proporcionálně jinde). Desktop: ≥ 1000 px, mobil: < 1000 px.
   ========================================================================== */

/* ---- Fonty (self-hosted, OFL) ---------------------------------------- */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/fredoka-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/fredoka-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/nunito-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/nunito-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito Fallback';font-weight:400;src:local('Arial'),local('Helvetica');size-adjust:100%;ascent-override:101%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:'Nunito Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica-Bold');size-adjust:97%;ascent-override:101%;descent-override:35%;line-gap-override:0%}

/* ---- Tokeny ------------------------------------------------------------ */
:root{
  --c-azure-24:#00507a;   /* Orient – nadpisy, tlačítka */
  --c-azure-44:#00a3e0;
  --c-orange-74:#ffd97a;
  --c-cyan-45:#00c2e8;    /* Robin's Egg Blue */
  --c-cyan-15:#1b3130;    /* Timber Green – patička */
  --c-grey-97:#f2fcff;
  --c-grey-96:#eaf8ff;
  --c-grey-97b:#f0fbff;
  --c-ice:#eaf9ff;
  --c-foot:#dbf6ff;
  --c-hero:#8f8167;       /* barva spodku fotky hera (fallback pod obrázkem) */
  --hero-fade:143,129,103; /* béžová ze spodku fotky hera (#8f8167) – přechod pod textem */
  --hero-ink:40,29,14;     /* teplá tmavá z fotky – aura za bílým textem v heru (čitelnost bez překryvu fotky) */
  --ff-body:'Nunito','Nunito Fallback','Segoe UI',Roboto,Arial,sans-serif;
  --ff-btn:'Fredoka',var(--ff-body);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--c-cyan-15);font-family:var(--ff-body);font-weight:400;line-height:1.25;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,svg,video{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--c-azure-24);outline-offset:3px;box-shadow:0 0 0 3px #fff;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--c-azure-24);color:#fff;font-weight:700}
.skip-link:focus{top:16px}

/* ---- Stránka a jednotka --u ------------------------------------------- */
.page{position:relative;width:100%;overflow-x:clip;container-type:inline-size;background:#fff;isolation:isolate}
.page>*{
  --u:min(calc(100vw / 1440), 1px);
  --cw:1440;
  /* hero */
  --hero-pt:509; --hero-pb:197; --hero-radius:0;
  --logo-l:93; --logo-t:31; --logo-w:297; --logo-h:232;
  --h1-size:83.524; --h1-lh:90.205; --h1-w:1199; --h1-sx:0;
  --sub-mt:15.6; --sub-w:947; --sub-size:30.372; --sub-lh:45.558; --sub-sx:0;
  --usp-mt:35.7; --usp-icon:36; --usp-igap:14; --usp-size:25; --usp-h:36; --usp-gap:65; --usp-sx:-11.5; --usp-color:#fff; --usp-row-gap:0;
  /* karusel */
  --cards-mt:-150; --card-w:280.377; --card-h:300; --card-gap:25.2; --card-edge:114; --card-r:28.353;
  --card-pt:25.202; --card-px:22.052; --card-pb:28.353; --media-h:177;
  --name-mt:9.451; --name-pt:1.284; --name-size:19.689; --name-lh:24.62;
  --card-sh-y:15.752; --card-sh-b:37.804; --card-inset:1.575; --media-sh-y:9.451; --media-sh-b:15.752;
  --nav-mt:31; --nav-pad:10; --nav-gap:10; --arrow-pad:10; --arrow:30; --dots-gap:12.5; --dot:15; --dot-on:20;
  --hint-mt:0; --hint-size:25; --hint-lh:32; --hint-sx:-1;
  /* prodejci */
  --ret-pt:38; --h2-size:54.472; --h2-lh:70.814; --h2-w:1013.6; --h2-sx:12.8;
  --line-mt:68.2; --line-sx:12.8; --grid-mt:68; --rcard-w:472.529; --rcard-h:140.988;
  --grid-gap-x:31; --grid-gap-y:31; --grid-pl:244.3; --rcard-r:26.435; --rcard-bw:2.203;
  --rcard-py:33.044; --rcard-px:28.638; --rcard-sh-y:13.218; --rcard-sh-b:17.623;
  --btn-py:22.029; --btn-px:26.435; --btn-size:24.232; --btn-ls:.4406;
  /* patičky */
  --fb-mt:155; --fb-py:64; --fb-px:16; --fl-pt:24; --fl-px:16; --fl-pb:174;
}
@supports (width:1cqw){.page>*{--u:min(calc(100cqw / 1440), 1px)}}
.container{position:relative;width:calc(var(--cw) * var(--u));margin-inline:auto}

/* ---- Dekorace (rotované obrázky: vnější box = bounding box, vnitřní prvek otočený kolem středu) */
.deco{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none;
  left:calc(var(--dl) * var(--u));top:calc(var(--dt) * var(--u));width:calc(var(--dw) * var(--u));height:calc(var(--dh) * var(--u))}
.deco__in{position:relative;flex:none;overflow:hidden;width:calc(var(--iw) * var(--u));height:calc(var(--ih) * var(--u));transform:rotate(var(--rot,0deg))}
.deco__in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.deco--cloud .deco__in img{width:95.36%;height:91.09%;object-fit:fill}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;z-index:1}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#8f8167;border-radius:0 0 calc(var(--hero-radius) * var(--u)) calc(var(--hero-radius) * var(--u))}
.hero__bg picture,.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}  /* ukotveno nahoru: na širokých/vyšších plochách se ořezává jen plochý spodek fotky, ne hlava */
.hero__overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--hero-fade),0) 0%,rgba(var(--hero-fade),0) 38%,rgba(var(--hero-fade),.35) 56%,rgba(var(--hero-fade),.6) 72%,rgba(var(--hero-fade),.85) 88%,rgb(var(--hero-fade)) 100%)}
.hero__top{position:absolute;top:0;left:0;right:0;height:100%;z-index:3;pointer-events:none}
.hero__logo{position:absolute;pointer-events:auto;left:calc(var(--logo-l) * var(--u));top:calc(var(--logo-t) * var(--u));width:calc(var(--logo-w) * var(--u));height:calc(var(--logo-h) * var(--u));border-radius:12px}
.hero__logo img{width:100%;height:100%;object-fit:cover}
.hero__content{position:relative;z-index:2;padding-top:calc(var(--hero-pt) * var(--u));padding-bottom:calc(var(--hero-pb) * var(--u));text-align:center}
.hero__title{width:max-content;max-width:100%;margin-inline:auto;font-weight:700;color:#fff;white-space:nowrap;
  font-size:calc(var(--h1-size) * var(--u));line-height:calc(var(--h1-lh) * var(--u));
  transform:translateX(calc(var(--h1-sx) * var(--u)));
  text-shadow:0 0 calc(2 * var(--u)) rgba(var(--hero-ink),.65),0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(var(--hero-ink),.6),
    0 0 calc(36 * var(--u)) rgba(var(--hero-ink),.65),0 0 calc(84 * var(--u)) rgba(var(--hero-ink),.5)}
.hero__title-accent{color:var(--c-ice)}
.hero__subtitle{width:max-content;max-width:100%;margin:calc(var(--sub-mt) * var(--u)) auto 0;color:#fff;white-space:nowrap;
  text-shadow:0 0 calc(2 * var(--u)) rgba(var(--hero-ink),.7),0 calc(1 * var(--u)) calc(5 * var(--u)) rgba(var(--hero-ink),.65),0 0 calc(26 * var(--u)) rgba(var(--hero-ink),.65),0 0 calc(58 * var(--u)) rgba(var(--hero-ink),.45);
  font-size:calc(var(--sub-size) * var(--u));line-height:calc(var(--sub-lh) * var(--u));transform:translateX(calc(var(--sub-sx) * var(--u)))}
.usp{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:calc(var(--usp-mt) * var(--u));
  column-gap:calc(var(--usp-gap) * var(--u));row-gap:calc(var(--usp-row-gap) * var(--u));transform:translateX(calc(var(--usp-sx) * var(--u)))}
.usp__item{display:flex;align-items:center;gap:calc(var(--usp-igap) * var(--u));height:calc(var(--usp-h) * var(--u));color:var(--usp-color);font-weight:700;font-size:calc(var(--usp-size) * var(--u));line-height:1.2;white-space:nowrap;
  text-shadow:0 0 calc(2 * var(--u)) rgba(var(--hero-ink),.7),0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(var(--hero-ink),.65),0 0 calc(22 * var(--u)) rgba(var(--hero-ink),.65),0 0 calc(48 * var(--u)) rgba(var(--hero-ink),.45)}
.usp__item svg{width:calc(var(--usp-icon) * var(--u));height:calc(var(--usp-icon) * var(--u));flex:none;filter:drop-shadow(0 0 calc(3 * var(--u)) rgba(var(--hero-ink),.7)) drop-shadow(0 0 calc(16 * var(--u)) rgba(var(--hero-ink),.55))}

/* ==========================================================================
   KARUSEL PRODUKTŮ
   ========================================================================== */
.range{position:relative;z-index:3;margin-top:calc(var(--cards-mt) * var(--u))}
.carousel{position:relative;display:flow-root}  /* flow-root: záporný margin scrolleru nekolabuje se sekcí */
.carousel__track{position:relative;display:flex;gap:calc(var(--card-gap) * var(--u));overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  --edge:calc((100% - var(--cw) * var(--u)) / 2 + var(--card-edge) * var(--u));
  padding-inline:var(--edge);scroll-padding-inline:var(--edge);
  padding-block:calc(60 * var(--u));margin-block:calc(-60 * var(--u))}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track.is-dragging{scroll-snap-type:none;user-select:none;-webkit-user-select:none}  /* tažení myší: snap až po dojetí (JS) */
.carousel__track.is-dragging .product-card{pointer-events:none}  /* během tažení bez hoveru a kliku na kartách */
.product-card{position:relative;flex:none;scroll-snap-align:start;width:calc(var(--card-w) * var(--u));height:calc(var(--card-h) * var(--u));
  padding:calc(var(--card-pt) * var(--u)) calc(var(--card-px) * var(--u)) calc(var(--card-pb) * var(--u));
  border-radius:calc(var(--card-r) * var(--u));background:linear-gradient(180deg,#fff 0%,var(--c-grey-97) 100%);
  box-shadow:0 calc(var(--card-sh-y) * var(--u)) calc(var(--card-sh-b) * var(--u)) rgba(0,60,90,.16),inset 0 0 0 calc(var(--card-inset) * var(--u)) rgba(255,255,255,.6);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.product-card__link{display:block;height:100%;color:inherit;text-decoration:none}
.product-card__link::after{content:"";position:absolute;inset:0;border-radius:calc(var(--card-r) * var(--u))}  /* klikací je celá karta včetně paddingu */
.product-card__link:focus-visible{outline:none;box-shadow:none}
.product-card__link:focus-visible::after{outline:3px solid var(--c-azure-24);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.product-card__media{position:relative;height:calc(var(--media-h) * var(--u))}
.product-card__media img{position:absolute;left:-5%;top:0;width:110%;height:100%;object-fit:contain;
  filter:drop-shadow(0 calc(var(--media-sh-y) * var(--u)) calc(var(--media-sh-b) * var(--u)) rgba(0,60,90,.18));transition:transform .45s var(--ease)}
.product-card__name{display:flex;align-items:center;justify-content:center;min-height:calc(2 * var(--name-lh) * var(--u));margin-top:calc(var(--name-mt) * var(--u));padding-top:calc(var(--name-pt) * var(--u));
  text-align:center;color:var(--c-azure-24);font-weight:700;font-size:calc(var(--name-size) * var(--u));line-height:calc(var(--name-lh) * var(--u));text-wrap:balance}
.carousel__nav{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;width:max-content;margin:calc(var(--nav-mt) * var(--u)) auto 0;gap:calc(var(--nav-gap) * var(--u));padding:calc(var(--nav-pad) * var(--u))}
.carousel__nav[hidden]{display:none}
.carousel__arrow{display:flex;padding:calc(var(--arrow-pad) * var(--u));color:#767676;border-radius:50%;transition:color .25s var(--ease),transform .25s var(--ease),opacity .25s}
.carousel__arrow svg{width:calc(var(--arrow) * var(--u));height:calc(var(--arrow) * var(--u))}
.carousel__arrow[aria-disabled="true"]{opacity:.35;cursor:default}
.carousel__dots{display:flex;align-items:center;gap:max(calc(var(--dots-gap) * var(--u)), calc(24.5px - var(--dot) * var(--u)));padding:calc(var(--nav-pad) * var(--u))}
.carousel__dot{position:relative;flex:none;width:calc(var(--dot) * var(--u));height:calc(var(--dot) * var(--u));border-radius:50%;background:rgba(153,153,153,.5);transition:width .3s var(--ease),height .3s var(--ease),background-color .3s var(--ease)}
.carousel__dot::before{content:"";position:absolute;inset:-6px}  /* větší dotyková plocha */
.carousel__dot.is-active{width:calc(var(--dot-on) * var(--u));height:calc(var(--dot-on) * var(--u));background:var(--c-azure-44)}
@media (forced-colors:active){.carousel__dot{border:2px solid ButtonText;background:Canvas}.carousel__dot.is-active{background:Highlight;border-color:Highlight}}
.carousel__hint{width:max-content;margin:calc(var(--hint-mt) * var(--u)) auto 0;color:var(--c-cyan-45);font-weight:700;font-size:calc(var(--hint-size) * var(--u));line-height:calc(var(--hint-lh) * var(--u));transform:translateX(calc(var(--hint-sx) * var(--u)))}

/* ==========================================================================
   PRODEJCI
   ========================================================================== */
.retailers{position:relative;z-index:2;padding-top:calc(var(--ret-pt) * var(--u))}
.retailers__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.deco--jasmine{--dl:1028;--dt:355;--dw:753.027;--dh:753.027;--iw:548.761;--ih:548.761;--rot:-31deg}
.deco--texture{--dl:-142;--dt:346;--dw:1717.641;--dh:845.687;--iw:1663.245;--ih:705.619;--rot:-4.92deg}
.deco--daisy{--dl:-322;--dt:-70;--dw:521.223;--dh:521.223;--iw:518.568;--ih:518.568;--rot:-.29deg}
.deco--lavender{--dl:-322;--dt:534;--dw:640.431;--dh:640.431;--iw:475.138;--ih:475.138;--rot:-27.38deg}
.retailers__content{position:relative;z-index:1}
.retailers__title{width:max-content;max-width:100%;margin-inline:auto;text-align:center;color:var(--c-azure-24);font-weight:700;white-space:nowrap;
  font-size:calc(var(--h2-size) * var(--u));line-height:calc(var(--h2-lh) * var(--u));transform:translateX(calc(var(--h2-sx) * var(--u)))}
.retailers__line{width:calc(129.119 * var(--u));height:calc(8.07 * var(--u));margin:calc(var(--line-mt) * var(--u)) auto 0;border-radius:calc(8.07 * var(--u));
  background:linear-gradient(90deg,var(--c-azure-44) 0%,var(--c-orange-74) 100%);transform:translateX(calc(var(--line-sx) * var(--u)))}
.retailers__grid{display:grid;margin-top:calc(var(--grid-mt) * var(--u));padding-left:calc(var(--grid-pl) * var(--u));
  grid-template-columns:repeat(2,calc(var(--rcard-w) * var(--u)));grid-template-rows:repeat(4,calc(var(--rcard-h) * var(--u)));
  column-gap:calc(var(--grid-gap-x) * var(--u));row-gap:calc(var(--grid-gap-y) * var(--u));justify-content:start}
/* Pořadí podle klienta (pure players → řetězce a drogerie → rozvoz): Rohlík, Košík, Alza, Tesco, dm, Rossmann, Teta, Wolt – 8 karet, 2 sloupce × 4 řádky. */
.retailer-card{display:flex;align-items:center;justify-content:space-between;height:calc(var(--rcard-h) * var(--u));
  padding:calc((var(--rcard-py) - var(--rcard-bw)) * var(--u)) calc((var(--rcard-px) - var(--rcard-bw)) * var(--u));background:#fff;
  border:calc(var(--rcard-bw) * var(--u)) solid rgba(0,120,170,.14);border-radius:calc(var(--rcard-r) * var(--u));
  box-shadow:0 calc(var(--rcard-sh-y) * var(--u)) calc(var(--rcard-sh-b) * var(--u)) rgba(0,80,120,.06);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.retailer-card__logo{flex:none;width:calc(var(--lw) * var(--u));height:calc(var(--lh) * var(--u));object-fit:cover}
.retailer-card--tesco{--lw:213.842;--lh:112.267}
.retailer-card--dm{--lw:109.546;--lh:75.313}
.retailer-card--rohlik{--lw:171.114;--lh:117.245}
.retailer-card--alza{--lw:186;--lh:57}
.retailer-card--rossmann{--lw:197;--lh:111}
.retailer-card--kosik{--lw:213.758;--lh:114.513}
.retailer-card--wolt{--lw:127.77;--lh:127.77}
.retailer-card--teta{--lw:159.25;--lh:112}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;
  padding:calc(var(--btn-py) * var(--u)) calc(var(--btn-px) * var(--u));border-radius:999px;background:var(--c-azure-24);color:#fff;
  font-family:var(--ff-btn);font-weight:700;font-size:calc(var(--btn-size) * var(--u));letter-spacing:calc(var(--btn-ls) * var(--u));line-height:1.2;white-space:nowrap;
  transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);opacity:0}
.btn:active,.btn:hover:active{transform:scale(.97)}

/* ==========================================================================
   PATIČKY
   ========================================================================== */
.footer{position:relative;z-index:2;background:#fff}
.footer__brand{position:relative;overflow:clip;margin-top:calc(var(--fb-mt) * var(--u));color:#fff;
  background:linear-gradient(180deg,#0066b2 0%,#056bb5 25%,#147cc1 51%,#43b1e4 100%)}
.footer__brand .container{display:flex;align-items:center;justify-content:flex-end;gap:calc(32 * var(--u));padding:calc(var(--fb-py) * var(--u)) calc(var(--fb-px) * var(--u));z-index:1}
.deco--footer-cloud{--dl:580;--dt:-130;--dw:809.57;--dh:581.513;--iw:807.5;--ih:578.5;--rot:-.21deg;z-index:0}
.footer__contact{flex:1 0 0;min-width:1px;font-size:calc(20 * var(--u));line-height:calc(32 * var(--u))}
.footer__contact a{position:relative;display:inline-block}
.footer__social{display:flex;flex-direction:column;gap:calc(16 * var(--u));align-items:flex-start}
.footer__social h3{font-weight:700;font-size:calc(20 * var(--u));line-height:calc(24 * var(--u));white-space:nowrap}
.footer__icons{display:flex;justify-content:center;gap:calc(8 * var(--u));width:100%}
.footer__icons a{display:flex;flex-direction:column;align-items:center;width:calc(75 * var(--u));min-width:calc(64 * var(--u));padding:calc(10 * var(--u)) calc(4 * var(--u)) 0;border-radius:12px}
.footer__icons svg{width:calc(47 * var(--u));height:calc(47 * var(--u));transition:transform .3s var(--ease)}
.footer__legal{position:relative;padding:calc(var(--fl-pt) * var(--u)) 0 calc(var(--fl-pb) * var(--u));color:var(--c-cyan-15);
  background:linear-gradient(180deg,#fff 0%,var(--c-foot) 75.962%);border-radius:calc(33 * var(--u)) calc(33 * var(--u)) 0 0}
.footer__legal .container{display:flex;flex-direction:column;gap:calc(32 * var(--u));padding-inline:calc(var(--fl-px) * var(--u))}
.footer__nav{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:calc(16 * var(--u)) calc(32 * var(--u))}
.footer__meta{display:flex;align-items:center;flex-wrap:wrap;gap:calc(20 * var(--u));font-size:max(11px, calc(14 * var(--u)));line-height:max(11px, calc(14 * var(--u)));letter-spacing:calc(1.1 * var(--u))}
.footer__country{display:flex;align-items:center;gap:calc(8 * var(--u));font-weight:700;white-space:nowrap}
.footer__country svg{width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;flex:none}
.footer__links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 calc(16 * var(--u));margin-right:calc(-4 * var(--u))}
.footer__links a,.footer__links button{display:block;padding:calc(4 * var(--u));font-weight:700;font-size:max(11px, calc(14 * var(--u)));line-height:max(11px, calc(14 * var(--u)));letter-spacing:calc(1.1 * var(--u));white-space:nowrap}
.footer__about{position:relative;min-height:calc(131 * var(--u));padding-left:calc(152 * var(--u))}
.footer__essity{position:absolute;left:0;top:calc(50.48 * var(--u));width:calc(116 * var(--u));height:calc(30 * var(--u))}
.footer__essity img{width:100%;height:100%;object-fit:contain}
.footer__text{margin-top:calc(-1.43 * var(--u));font-size:max(11px, calc(14 * var(--u)));line-height:max(17px, calc(21.84 * var(--u)));letter-spacing:calc(1.1 * var(--u))}
.footer__text a{font-weight:700}
.link-underline{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .3s var(--ease)}

/* ==========================================================================
   MOBIL (< 1000 px) – hodnoty z frame 375w
   ========================================================================== */
@media (max-width:999.98px){
  .page{background:linear-gradient(180deg,var(--c-grey-96) 0%,#fff 38%,#fff 100%)}
  .page>*{
    --u:min(calc(100vw / 375), 1.35px);
    --cw:375;
    --hero-pt:357; --hero-pb:31; --hero-radius:36.821;
    --logo-l:23; --logo-t:36; --logo-w:167; --logo-h:130;
    --h1-size:45.5; --h1-lh:45.5; --h1-w:328.737; --h1-sx:-2.1;
    --sub-mt:19; --sub-w:356; --sub-size:21.2; --sub-lh:27; --sub-sx:-3.8;
    --usp-mt:36; --usp-icon:21.95; --usp-igap:7.317; --usp-size:15.243; --usp-h:24.389; --usp-gap:34.8; --usp-sx:0; --usp-color:var(--c-grey-97b); --usp-row-gap:12.6;
    --cards-mt:19; --card-w:122.353; --card-h:131; --card-gap:11; --card-edge:33; --card-r:12.373;
    --card-pt:10.998; --card-px:9.623; --card-pb:12.373; --media-h:77.24;
    --name-mt:4.124; --name-pt:.56; --name-size:8.592; --name-lh:10.744;
    --card-sh-y:6.874; --card-sh-b:16.497; --card-inset:.687; --media-sh-y:4.124; --media-sh-b:6.874;
    --nav-mt:10; --nav-pad:8.188; --nav-gap:8.188; --arrow-pad:8.188; --arrow:24.564; --dots-gap:10.235; --dot:12.282; --dot-on:16.376;
    --hint-mt:-8; --hint-size:16; --hint-lh:19; --hint-sx:2.5;
    --ret-pt:37; --h2-size:35.438; --h2-lh:46.069; --h2-w:310; --h2-sx:0;
    --line-mt:31.4; --line-sx:-3.9; --grid-mt:42; --rcard-w:331.309; --rcard-h:98.852;
    --grid-gap-x:0; --grid-gap-y:21.75; --grid-pl:19.7; --rcard-r:18.535; --rcard-bw:1.545;
    --rcard-py:23.169; --rcard-px:20.08; --rcard-sh-y:9.267; --rcard-sh-b:12.357;
    --btn-py:15.446; --btn-px:18.535; --btn-size:16.99; --btn-ls:.3089;
    --fb-mt:80; --fb-py:40; --fb-px:20; --fl-pt:24; --fl-px:20; --fl-pb:56;
  }
  @supports (width:1cqw){.page>*{--u:min(calc(100cqw / 375), 1.35px)}}
  .hero__title{width:calc(var(--h1-w) * var(--u));white-space:normal;text-wrap:balance}
  .hero__subtitle{width:calc(var(--sub-w) * var(--u));white-space:normal}
  .usp{width:calc(var(--cw) * var(--u));margin-inline:auto}
  .usp__item:nth-child(2){order:-1;flex-basis:100%;justify-content:center}  /* AquaTube sám na 1. řádku, zbylé dvě USP na 2. řádku */
  .deco--jasmine{--dl:213;--dt:-39.5;--dw:334.443;--dh:334.443;--iw:243.722;--ih:243.722}
  .deco--daisy{--dl:-118;--dt:72.5;--dw:185.242;--dh:185.242;--iw:184.299;--ih:184.299}
  .deco--texture{--dl:-392;--dt:399.5;--dw:857.069;--dh:375.927;--iw:833.936;--ih:305.52}
  .deco--texture .deco__in img{object-position:bottom}
  .deco--lavender{display:none}
  .retailers__title{width:calc(var(--h2-w) * var(--u));white-space:normal;text-wrap:pretty}
  .retailers__grid{grid-template-columns:calc(var(--rcard-w) * var(--u));grid-template-rows:none}
  .retailers__grid>li{grid-area:auto}
  .retailer-card--tesco{--lw:149.933;--lh:78.715}
  .retailer-card--dm{--lw:76.807;--lh:52.805}
  .retailer-card--rohlik{--lw:119.975;--lh:82.205}
  .retailer-card--alza{--lw:145;--lh:44}
  .retailer-card--rossmann{--lw:143;--lh:80}
  .retailer-card--kosik{--lw:149.874;--lh:80.29}
  .retailer-card--wolt{--lw:89.585;--lh:89.585}
  .retailer-card--teta{--lw:111.9;--lh:78.7}
  .footer__brand .container{flex-direction:column;align-items:flex-start;gap:calc(28 * var(--u))}
  .deco--footer-cloud{--dl:130;--dt:-70;--dw:360;--dh:258.6;--iw:359;--ih:257.2}
  .footer__contact{flex:none}
  .footer__icons{justify-content:flex-start}
  .footer__icons a{align-items:flex-start;padding-left:0;width:auto;min-width:0;margin-right:calc(24 * var(--u))}
  .footer__nav{flex-direction:column}
  .footer__links{justify-content:flex-start;margin-right:0;gap:calc(4 * var(--u)) calc(12 * var(--u));margin-left:calc(-4 * var(--u))}
  .footer__about{min-height:0;padding-left:0}
  .footer__essity{position:static;display:block;margin-bottom:calc(16 * var(--u))}
  .footer__text{margin-top:0}
}
@media (max-width:999.98px) and (min-width:506px){
  .hero__bg{border-radius:0}
}
@media (max-width:999.98px) and (min-width:600px){
  .hero__bg img{object-position:40% 0}  /* tablet: desktopová (šířková) fotka, postava vpravo od loga */
}

/* ==========================================================================
   EFEKTY: hover, animace (jen když uživatel nepreferuje omezený pohyb)
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .hero__logo{transition:transform .35s var(--ease)}
  .hero__logo:hover{transform:scale(1.03)}
  .product-card:hover{transform:translateY(calc(-6 * var(--u)));box-shadow:0 calc(24 * var(--u)) calc(44 * var(--u)) rgba(0,60,90,.22),inset 0 0 0 calc(var(--card-inset) * var(--u)) rgba(255,255,255,.6)}
  .product-card:has(.product-card__link:focus-visible){transform:translateY(calc(-6 * var(--u)));box-shadow:0 calc(24 * var(--u)) calc(44 * var(--u)) rgba(0,60,90,.22),inset 0 0 0 calc(var(--card-inset) * var(--u)) rgba(255,255,255,.6)}
  .product-card:hover .product-card__media img{transform:scale(1.04)}
  .product-card:has(.product-card__link:focus-visible) .product-card__media img{transform:scale(1.04)}
  .carousel__arrow:not([aria-disabled="true"]):hover{color:var(--c-azure-44);transform:scale(1.12)}
  .carousel__dot:not(.is-active):hover{background:var(--c-azure-44)}
  .carousel__track{cursor:grab}
  .carousel__track.is-dragging{cursor:grabbing}
  .retailer-card:hover{transform:translateY(calc(-4 * var(--u)));border-color:rgba(0,163,224,.45);box-shadow:0 calc(22 * var(--u)) calc(30 * var(--u)) rgba(0,80,120,.12)}
  .btn:hover{background:#0066b2;transform:scale(1.03);box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,163,224,.35)}
  .btn:focus-visible:hover{box-shadow:0 0 0 3px #fff,0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,163,224,.35)}
  .btn:hover::after{animation:btn-shine .8s var(--ease) forwards}
  .footer__icons a:hover svg{transform:scale(1.12)}
  .link-underline:hover{background-size:100% 1px}
}
@keyframes btn-shine{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}
@keyframes fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade-up-x{from{opacity:0;transform:translate(calc(var(--h1-sx) * var(--u)),22px)}to{opacity:1;transform:translateX(calc(var(--h1-sx) * var(--u)))}}
@keyframes fade-up-sub{from{opacity:0;transform:translate(calc(var(--sub-sx) * var(--u)),22px)}to{opacity:1;transform:translateX(calc(var(--sub-sx) * var(--u)))}}
@keyframes fade-up-usp{from{opacity:0;transform:translate(calc(var(--usp-sx) * var(--u)),18px)}to{opacity:1;transform:translateX(calc(var(--usp-sx) * var(--u)))}}
@media screen and (prefers-reduced-motion:no-preference){
  .hero__logo{animation:fade-up .7s var(--ease) backwards}
  .hero__title{animation:fade-up-x .8s var(--ease) .1s both}
  .hero__subtitle{animation:fade-up-sub .8s var(--ease) .22s both}
  .usp{animation:fade-up-usp .8s var(--ease) .34s both}
  .reveal{opacity:0;transform:translateY(26px)}
  .reveal.is-visible{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
  .retailers__title.reveal{transform:translate(calc(var(--h2-sx) * var(--u)),26px)}
  .retailers__title.reveal.is-visible{transform:translateX(calc(var(--h2-sx) * var(--u)))}
  .retailers__line.reveal{transform:translateX(calc(var(--line-sx) * var(--u))) scaleX(0);transform-origin:left center;opacity:1}
  .retailers__line.reveal.is-visible{transform:translateX(calc(var(--line-sx) * var(--u))) scaleX(1)}
  .retailers__grid>li:nth-child(1){--i:0}.retailers__grid>li:nth-child(2){--i:1}.retailers__grid>li:nth-child(3){--i:2}.retailers__grid>li:nth-child(4){--i:3}
  .retailers__grid>li:nth-child(5){--i:4}.retailers__grid>li:nth-child(6){--i:5}.retailers__grid>li:nth-child(7){--i:6}.retailers__grid>li:nth-child(8){--i:7}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- Tisk -------------------------------------------------------------- */
@media print{
  .deco,.carousel__nav,.carousel__hint,.skip-link{display:none!important}
  .page,.hero,.footer__brand,.footer__legal{background:#fff!important;color:#000!important}
  .hero__title,.hero__subtitle,.usp__item{color:#000;text-shadow:none}
  .btn::after{display:none}
  .btn[href]::before{content:" (" attr(href) ")";font-size:.7em;font-weight:400;position:static;background:none}
  .carousel__track{flex-wrap:wrap;overflow:visible}
}