/* WERSJA PLIKU v.251 */
 /* main.css */

:root{
  --bg:#f7f4ee;
  --card:#ffffff;
  --text:#141414;
  --muted:#6a6a6a;
  --line:rgba(17,24,39,.08);
  --brand:#0c6b3e;
  --accent:#e53935;
  --shadow: 0 14px 40px rgba(15, 23, 42, .08);
  --r:18px;
  --r2:26px;

  /* CENTRALNY SYSTEM KOLORÓW ARBUZIKA */
  --arbuzik-yellow:#ffde00;
  --arbuzik-yellow-rgb:255,222,0;
  --arbuzik-yellow-deep:#ffd400;
  --arbuzik-yellow-deep-rgb:255,212,0;
  --arbuzik-yellow-soft:#ffe24a;
  --arbuzik-yellow-soft-rgb:255,226,74;
  --arbuzik-yellow-shadow:rgba(var(--arbuzik-yellow-rgb),.12);
  --arbuzik-yellow-glow:rgba(var(--arbuzik-yellow-rgb),.18);
  --arbuzik-yellow-line:rgba(var(--arbuzik-yellow-rgb),.9);

  --seed-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2812%2C107%2C62%2C0.10%29%27%20stroke-width%3D%272%27%3E%3Cellipse%20cx%3D%2720%27%20cy%3D%2726%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%28-18%2020%2026%29%27/%3E%3Cellipse%20cx%3D%2760%27%20cy%3D%2718%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%2822%2060%2018%29%27/%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%2728%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%28-8%20110%2028%29%27/%3E%3Cellipse%20cx%3D%27140%27%20cy%3D%2764%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%2818%20140%2064%29%27/%3E%3Cellipse%20cx%3D%2798%27%20cy%3D%2778%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%2828%2098%2078%29%27/%3E%3Cellipse%20cx%3D%2740%27%20cy%3D%2778%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%28-30%2040%2078%29%27/%3E%3Cellipse%20cx%3D%2718%27%20cy%3D%27120%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%2818%2018%20120%29%27/%3E%3Cellipse%20cx%3D%2772%27%20cy%3D%27128%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%28-12%2072%20128%29%27/%3E%3Cellipse%20cx%3D%27128%27%20cy%3D%27122%27%20rx%3D%275%27%20ry%3D%279%27%20transform%3D%27rotate%2825%20128%20122%29%27/%3E%3C/g%3E%3Cg%20fill%3D%27rgba%28255%2C212%2C0%2C0.05%29%27%3E%3Ccircle%20cx%3D%27118%27%20cy%3D%2752%27%20r%3D%274%27/%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2754%27%20r%3D%273.5%27/%3E%3Ccircle%20cx%3D%2782%27%20cy%3D%2744%27%20r%3D%273%27/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}
/* modal hidden must win */
[hidden] { display: none !important; }

html,body{height:100%}
body{
  margin:0;
  padding:0;
  min-height:100dvh;
  background:#0b6b2d;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);

  /* Tło „pestki” + delikatne światło marki */
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 14% 0%, rgba(12,107,62,.06), transparent 60%),
    radial-gradient(900px 460px at 92% 10%, rgba(229,57,53,.05), transparent 58%),
    var(--seed-pattern);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 160px 160px;
  background-attachment: scroll, scroll, fixed;
}  
  
 /* Tło „zielone z kropkami”    */
/* background-color: #2d7a1f;
background-image: radial-gradient(
  circle, rgba(245,200,66,0.45) 2px,
  transparent 2px);
background-size: 22px 22px;
  }   */
  
a{color:inherit;text-decoration:none}
.wrap{width:min(1140px, 92vw); margin:0 auto}

/* === BRAND / LOGO (FINAL) === */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:110px;
  font-weight:900;
  letter-spacing:.2px;
}

.brand__logo,
.brand img{
  height:106px !important;
  width:auto !important;
  max-width:150px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}

@media (max-width: 980px){
  .brand__logo,
  .brand img{
    height:28px !important;
    max-width:60px;
  }
}

.hdr__auth {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  z-index: 9999;
}
.modal__box {
  background: #fff;
  padding: 24px;
  border-radius: 18px;
  width: 100%;
  max-width: 360px;
  display: grid;
  gap: 12px;
}

.hdr{
  position:sticky; top:0; z-index:50;
  background: rgba(251,250,246,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex; align-items:center; gap:18px; padding:10px 0}
.nav{display:flex; gap:8px; margin-left:10px}
.nav a{padding:10px 12px; border-radius:14px; color:rgba(0,0,0,.78)}
.nav a:hover{background:rgba(0,0,0,.05)}
.hdr__cta{margin-left:auto; display:flex; gap:10px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:750;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px)}
.btn--solid{
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(9,85,49,1));
  color:#fff;
  box-shadow: var(--shadow);
}
.btn--ghost{
  background: transparent;
  border-color: rgba(0,0,0,.16);
}
.btn--outline{
  background: #fff;
  border-color: rgba(0,0,0,.16);
}

.burger{
  display:none;
  margin-left:auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.16);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}

.mnav{display:none; border-top:1px solid var(--line)}
.mnav__in{padding:12px 0}
.mnav a{display:block; padding:12px 0; color:rgba(0,0,0,.78)}
.mnav__cta{display:flex; gap:10px; flex-wrap:wrap; padding:10px 0}

/* =========================
   HERO / SEKCJE (home)
   ========================= */

.hero{
  position:relative;
  padding:40px 0 10px;
  }

/* Miękkie przejścia między sekcjami na stronie głównej (bez zwykłej linii) */
.hero + .hero{
  margin-top: 0;
}
/* RESET starego przejścia między sekcjami */
.hero + .hero::before{ display:none !important; content:none !important; }
.hero > .wrap{ position:relative; z-index:1; }

.hero__grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:16px;
  background: linear-gradient(180deg, rgba(12,107,62,.10), rgba(255,255,255,.8));
  border:1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero__copy{padding:34px}
.hero h1{margin:0 0 10px; font-size:46px; line-height:1.04}
.hero p{margin:0 0 18px; color:var(--muted); font-size:16px; max-width:52ch}
.hero__btns{display:flex; gap:10px; flex-wrap:wrap}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pill{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

.hero__img{
  min-height:340px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.0), rgba(0,0,0,.04)),
    url("/assets/img/arbuzik_9.png");
  background-size: cover;
  background-position: center;
  position:relative;
}
.hero__imgOverlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:18px;
}
.badge{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:12px 14px;
}
.badge__top{font-size:12px; color:var(--muted); font-weight:800}
.badge__main{font-size:16px; font-weight:900; margin-top:2px}
.badge__sub{font-size:12px; color:var(--muted); margin-top:2px}

/* ========================= */

.sec{padding:26px 0}
.sec__hd{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px}
.sec__hd p{margin:0}
.sec__hd h2{margin:0; font-size:22px}
.muted{color:var(--muted)}
.small{font-size:12px}

.grid{display:grid; gap:14px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:16px;
}
.card h3{margin:0 0 6px}
.card p{margin:0}

.card--prod{position:relative; overflow:hidden}
.tag{
  position:absolute; top:14px; right:14px;
  background: rgba(12,107,62,.12);
  border:1px solid rgba(12,107,62,.18);
  color: rgba(12,107,62,1);
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}
.price{margin:12px 0 10px; font-weight:950; font-size:18px}

.map{padding:0; overflow:hidden}
.map__box{padding:18px}

.form{display:grid; gap:10px}
label{display:grid; gap:6px; font-weight:800}
input,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  outline:none;
  font: inherit;
}
input:focus,textarea:focus{border-color: rgba(12,107,62,.6); box-shadow: 0 0 0 4px rgba(12,107,62,.10)}
.stack{display:grid; gap:10px; margin-top:10px}

.ftr{
  margin-top:40px;
  background:#fff;
  border-top:1px solid var(--line);
}
.ftr__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:18px;
  padding:28px 0;
}
.ftr__brand{font-weight:950; font-size:18px}
.ftr__title{font-weight:950; margin-bottom:10px}
.ftr a{display:block; padding:6px 0; color:var(--muted)}
.ftr a:hover{color:var(--arbuzik-yellow)}
.ftr__bottom{border-top:1px solid var(--line); padding:14px 0}

/* ===== HEADER polish ===== */
.hdr__in{ gap:14px; padding:12px 0; }

.brand{ min-height:44px; }
.brand__logo{
  height:40px !important;
  max-width:110px;
  border-radius:12px;
  object-fit:contain;
}

.btn--sm{ padding:8px 12px; border-radius:12px; font-weight:850; }

.btn--chip{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(12,107,62,.10);
  border:1px solid rgba(12,107,62,.18);
  color: rgba(12,107,62,1);
  font-weight:900;
}

.auth{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:16px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
}

.auth__hello{ display:flex; flex-direction:column; line-height:1.05; }
.auth__label{ font-size:11px; color:var(--muted); font-weight:900; }
.auth__name{ font-size:13px; font-weight:950; }

.hdr__auth{ margin-left:auto; }

/* wylogowany: .auth wrapper w headerze — bez własnego tła (przycisk Zaloguj ma swoje) */
.hdr__auth .auth {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hdr__cta{ margin-left:0; gap:10px; }

.nav a{
  padding:9px 10px;
  border-radius:12px;
  font-weight:800;
}

/* mobile: auth zostaje widoczne */
@media (max-width: 980px){
  .nav{display:none}
  .hdr__cta{display:none}
  .burger{display:inline-flex}
  .hdr__auth{ margin-left:auto; }
  .brand__logo{ height:34px !important; }
}

/* =========================
   RESPONSYWKA OGÓLNA
   ========================= */
@media (max-width: 980px){
  .nav,.hdr__cta{display:none}
  .burger{display:inline-flex}
  .hero__grid{grid-template-columns:1fr}
  .hero__img{min-height:220px}
  .hero h1{font-size:34px}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 560px){
  .ftr__grid{grid-template-columns:1fr}
}

/* ===== HEADER: stabilizacja + burger kreski ===== */
.hdr__spacer{ flex: 1; }

.hdr__right{
  display:flex;
  align-items:center;
  gap:10px;
  position: relative;
  z-index: 1000;
}

.brand{ min-height:36px; display:flex; align-items:center; }
.brand__logo, .brand img{
  height:84px !important;   /*moje logo */
  width:auto !important;
  max-width:250px;
  object-fit:contain;
  border-radius:10px;
  display:block;
}

.burger{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  cursor:pointer;

  -webkit-appearance: none;
  appearance: none;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  position:relative;
}

.burger::before{
  content:"";
  position:absolute;
  left:12px; right:12px;
  top:14px;
  height:2px;
  background: rgba(0,0,0,.72);
  box-shadow: 0 7px 0 rgba(0,0,0,.72), 0 14px 0 rgba(0,0,0,.72);
  border-radius:2px;
}

.mnav{ pointer-events: none; }
.mnav[style*="display: block"]{ pointer-events: auto; }

@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .brand__logo, .brand img{ height:68px !important; max-width:160px; }
}

.hdr{ position: sticky; top:0; z-index: 9999; }
.hdr *{ pointer-events: auto; }
.hdr__auth{ position: relative; z-index: 10000; }

/* === O NAS: typografia + “żywy” layout === */
.onas { gap: 18px; }
.onas__card{
  position: relative;
  overflow: hidden;
  padding: 18px 18px 14px;
}

.onas__card::before{
  content:"";
  position:absolute;
  right:-32px;
  top:-32px;
  width:180px;
  height:180px;
  opacity:.12;
  transform: rotate(40deg);
  background:
     radial-gradient(800px 300px at 10% 10%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(700px 300px at 90% 20%, rgba(132,204,22,.10), transparent 60%),
    linear-gradient(180deg, #f7f9f5 0%, #f1f4ef 100%);
  filter: blur(.2px);
  pointer-events:none;
}

.onas__head{ margin-bottom: 10px; }
.onas__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.2px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 10px;
}

.onas__lead{
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(0,0,0,.72);
}

.onas__body p{
  margin: 10px 0;
  line-height: 1.75;
  color: rgba(0,0,0,.74);
}

.onas__quote{
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(34,197,94,.65);
  background: rgba(34,197,94,.07);
  border-radius: 12px;
  font-style: italic;
  color: rgba(0,0,0,.72);
}

.onas__divider{
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0));
}

.onas__note{
  margin-top: 12px;
  padding-top: 8px;
  color: rgba(0,0,0,.70);
}

.onas__footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.chip{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12.5px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);
}

@media (max-width: 860px){
  .onas__card{ padding: 16px; }
  .onas__lead{ font-size: 15px; }
}

/* =========================
   BOXIKI: KAFLE Z TŁEM (home + /boxiki)
   ========================= */

.card--bg{
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: var(--r2);
  min-height: 190px; /* default */
}

.card--bg .card__bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  z-index:0;
}

.card--bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.00) 0%,
      rgba(0,0,0,.18) 55%,
      rgba(0,0,0,.32) 100%
    );
  z-index:1;
}

.card--bg .card__content{
  position: relative;
  z-index:2;
  height: 100%;
  padding: 16px 16px 14px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.card--bg .tag{
  position: static;
  align-self: flex-start;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  font-weight: 900;
}

.card--bg .card__title{
  margin-top: 2px;
  font-weight: 950;
  font-size: 18px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  max-width: 85%;
}

.card--bg .card__desc{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.86);
  text-shadow: 0 2px 12px rgba(0,0,0,.40);
  max-width: 85%;
}

.card--bg .card__bottom{
  margin-top: auto;
  display:flex;
  align-items: center;
  
  gap: 12px;
}

/* ukrycie czarnych cen (kolory cenówek poniżej - tylko podmienić) */
/********* .card--bg .card__price{
  display:flex !important;
  padding:4px 6px;
  border-radius:999px;
 background: linear-gradient(135deg, #fff8dd, #ffe8a3);
border: 1px solid #c89b1c55;
color: #8a6a00;
  font-weight:800;
  font-size: 12px;
   content:"zł";
   opacity:.7;
  
  
}
*********/
/*********  
RED COLOR CENY NA BOXIKU
background: linear-gradient(135deg, #ffecec, #ffd1d1);
border: 1px solid #b4231855;
color: #b42318;

GREEN COLOR
background: linear-gradient(135deg, #e9f7f0, #cdeee0);
border: 1px solid #0c6b3e55;
color: #0c6b3e;

YELLOW COLOR
background: linear-gradient(135deg, #fff8dd, #ffe8a3);
border: 1px solid #c89b1c55;
color: #8a6a00;
***********/

.card--bg .card__price{
  display:flex !important;
  
  justify-content: flex-left;
  gap:6px;
  padding:4px 6px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.4px;
  white-space:nowrap;
  transition: all .25s ease;
  background: linear-gradient(135deg,#e9f7f0,#cdeee0);
  border:1px solid rgba(12,107,62,.35);
  color:#0c6b3e;
  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 1px rgba(255,255,255,.4);
 
  
}
.card__price:hover{
  transform: translateY(-1px) scale(1.03);
}

/* ZIELONY – fresh / eco */
.price--green{
  background: linear-gradient(135deg,#e9f7f0,#cdeee0);
  border:1px solid rgba(12,107,62,.35);
  color:#0c6b3e;
}

/* ŻÓŁTY – start / basic */
.price--yellow{
  background: linear-gradient(135deg,#fff8dd,#ffe8a3);
  border:1px solid rgba(200,155,28,.45);
  color:#8a6a00;
}

/* CZERWONY – hit / premium */
.price--red{
  background: linear-gradient(135deg,#ffecec,#ffd1d1);
  border:1px solid rgba(180,35,24,.45);
  color:#b42318;
}

/* STICKER – hit / sticker */
.price--sticker{
  transform: rotate(-2deg);
}
.price--sticker:hover{
  transform: rotate(-2deg) scale(1.05);
}

/* WOOD – hit ARBUZIK / wood */
.price--wood{
  background:
    linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.05) 0,
      rgba(0,0,0,.05) 2px,
      transparent 2px,
      transparent 6px
    );
  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 1px rgba(255,255,255,.4);
}

.card--bg .btn--order{
  display:flex !important;
  justify-content: flex-end;
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* pkt 4: mobile – stabilne wysokości i typografia */
@media (max-width: 980px){
  .card--bg{ min-height: 180px; }
  .card--bg .card__title{ font-size: 17px; max-width: 92%; }
  .card--bg .card__desc{ max-width: 92%; }
}

@media (max-width: 560px){
  .card--bg{ min-height: 170px; }
  .card--bg .card__content{ padding: 12px; }
  .card--bg .card__title{ font-size: 16px; }
  .card--bg .card__desc{ font-size: 12.5px; }
}

/* =========================================
   MOBILE FIX: nic nie może wystawać w bok
   ========================================= */
html{
  max-width: 100%;
  /* overflow-x:hidden na html łamie position:fixed na iOS — używamy clip */
}
body{
  max-width: 100%;
  overflow-x: clip;
}

/* czasem overflow robi flex + długie rzeczy */
.hdr, .hdr *{
  max-width: 100%;
}

/* =========================================
   MOBILE FIX: nagłówek nie może puchnąć
   ========================================= */

/* NA TELEFONIE chowamy ten “duży” przycisk w prawym rogu headera
   (Zamów box / Koszyk). Masz go już w burger-menu, więc nic nie tracisz. */
@media (max-width: 980px){
  .hdr__right > a.btn.btn--solid{
    display:none !important;
  }

  /* prawy kontener ma się nie rozpychać */
  .hdr__right{
    gap:8px !important;
    min-width: 0;
  }

  /* auth ma być kompaktowy */
  .auth{
    padding:5px 6px !important;
    gap:8px !important;
    border-radius:14px !important;
    min-width: 0;
  }
  .auth__hello{
    min-width:0;
  }
  .auth__label{
    display:none !important;
  }
  .auth__name{
    max-width: 120px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:12px !important;
  }

  /* przyciski faktycznie mniejsze */
  .btn{
    padding:8px 11px !important;
    border-radius:12px !important;
  }
  .btn--sm{
    padding:7px 10px !important;
    border-radius:12px !important;
    font-weight:900 !important;
    font-size:12px !important;
  }
  .btn--chip{
    padding:7px 10px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:900 !important;
  }

  /* na bardzo małych ekranach chowamy “Zamówienia” w auth (zostaje w menu) */
  @media (max-width: 420px){
    .auth__orders{
      display:none !important;
    }
  }
}

/* =========================================
   BONUS: boxiki card--bg nie mogą rozpychać
   ========================================= */
.card--bg,
.card--bg .card__content,
.card--bg .card__title,
.card--bg .card__desc{
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* =========================
   FONT (Space Grotesk)
   ========================= */
body{
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
}

/* =========================
   AUTH: brak overflow na mobile
   - na mobile chowamy auth w headerze
   - pokazujemy auth w burgerze (#authBoxMobile)
   ========================= */
.auth{
  max-width: 100%;
  min-width: 0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.auth__hello{ min-width: 0; }
.auth__name{
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mnav__cta{
  display:flex;
  flex-direction: column;
  gap:10px;
}

#authBoxMobile .auth{
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
}

#authBoxMobile .btn{
  white-space: nowrap;
}

@media (max-width: 980px){
  /* panel auth znika z topbara */
  .hdr__auth{ display:none !important; }

  /* a pojawia się w burgerze */
  #authBoxMobile{ display:block; }
}

@media (min-width: 981px){
  /* na desktop nie pokazujemy auth w burgerze */
  #authBoxMobile{ display:none; }
}

/* =========================
   BURGER: ładniejszy + animacja X
   ========================= */
.burger{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(12,107,62,.22);
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(12,107,62,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  position: relative;
  cursor:pointer;

  -webkit-appearance:none;
  appearance:none;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
}

.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  height:2px;
  background: rgba(12,107,62,.92);
  border-radius: 999px;
  transition: transform .18s ease, top .18s ease, bottom .18s ease, opacity .18s ease;
  box-shadow: 0 10px 0 rgba(12,107,62,.92);
}

/* trzeci pasek robimy shadowem w ::before */
.burger::before{
  top:15px;
}
.burger::after{
  bottom:15px;
  opacity:0; /* bo 3 linia jest shadowem (czytelniej i stabilniej) */
}

/* OPEN => X */
.burger.is-open::before{
  top:22px;
  transform: rotate(45deg);
  box-shadow: none;
}
.burger.is-open::after{
  opacity:1;
  bottom:auto;
  top:22px;
  transform: rotate(-45deg);
}

/* mnav: nie łapie klików gdy schowany */
.mnav{ pointer-events: none; }
.mnav[style*="display: block"]{ pointer-events: auto; }

/* =========================
   GDZIE JESTEŚMY (MAPA) — sekcja premium
   ========================= */
.loc__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
}
@media (max-width: 980px){
  .loc__grid{ grid-template-columns: 1fr; }
}

.loc__card,
.loc__mapCard{
  position: relative;
  overflow: hidden;
}

/* delikatna “żywa” poświata */
.loc__card::before,
.loc__mapCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 10% 0%, rgba(12,107,62,.14), transparent 60%),
    radial-gradient(520px 240px at 90% 10%, rgba(229,57,53,.10), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.loc__card > * ,
.loc__mapCard > *{ position:relative; z-index:1; }

.loc__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 10px;
}
.loc__title{
  font-weight: 950;
  font-size: 22px;
  letter-spacing: .2px;
  margin-bottom: 2px;
}
.loc__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.08);
  font-weight: 900;
  font-size: 12px;
}

.loc__rows{
  display:grid;
  gap:10px;
  margin-top: 8px;
}
.loc__row{
  display:grid;
  grid-template-columns: 30px 1fr;
  gap:10px;
  padding:10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(17,24,39,.06);
}
.loc__ico{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(12,107,62,.08);
  border: 1px solid rgba(12,107,62,.10);
  font-size: 15px;
}
.loc__label{
  font-size: 11px;
  color: rgba(0,0,0,.55);
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 2px;
}
.loc__val{
  font-weight: 850;
}
.loc__val a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(var(--arbuzik-yellow-deep-rgb),.9);
}

.loc__actions{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  margin-top: 12px;
}
.loc__note{
  margin-top: 8px;
  min-height: 18px;
}

/* MAP CARD */
.loc__mapTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 10px;
}
.loc__mapTitle{
  font-weight: 950;
  font-size: 16px;
  margin-bottom: 2px;
}
.loc__mapPills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.loc__mapWrap{
  position: relative;
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  background: #fff;
  min-height: 320px;
}
.loc__iframe{
  width: 100%;
  height: 320px;
  border:0;
  filter: saturate(.95) contrast(1.05) grayscale(.12);
  transform: scale(1.01);
}
@media (max-width: 980px){
  .loc__iframe{ height: 280px; }
  .loc__mapWrap{ min-height: 280px; }
}

.loc__mapOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.20) 100%),
    radial-gradient(260px 160px at 12% 8%, rgba(var(--arbuzik-yellow-deep-rgb),.18), transparent 65%);
}
.loc__spark{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(360px 180px at 80% 20%, rgba(12,107,62,.14), transparent 60%),
    radial-gradient(360px 180px at 20% 85%, rgba(229,57,53,.10), transparent 60%);
  opacity:.75;
  animation: locGlow 6.5s ease-in-out infinite;
}
@keyframes locGlow{
  0%,100%{ transform: translateY(0); opacity:.65; }
  50%{ transform: translateY(-6px); opacity:.85; }
}

.loc__pin{
  position:absolute;
  left: 55%;
  top: 52%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(229,57,53,1);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 2px rgba(255,255,255,.35);
  transform: translate(-50%, -70%);
}
.loc__pin span{
  position:absolute;
  inset:-18px;
  border-radius: 999px;
  background: rgba(229,57,53,.18);
  border: 1px solid rgba(229,57,53,.22);
  animation: locPulse 1.7s ease-out infinite;
}
@keyframes locPulse{
  0%{ transform: scale(.35); opacity:.9; }
  100%{ transform: scale(1.25); opacity:0; }
}

.loc__mapCta{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 36px rgba(15,23,42,.18);
  font-weight: 950;
}

/* subtelny “tilt” (JS ustawia --rx/--ry) */
[data-tilt]{
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
[data-tilt]:hover{
  box-shadow: 0 22px 70px rgba(15,23,42,.14);
}

 /* PODKREŚLENIE TYTUŁÓW SEKCJI NA ŻÓŁTO */
/* nagłówek sekcji */
.secTitle{
  position:relative;
  margin:0;
  font-weight:900;
  line-height:1.15;
}

.secTitle > span{
  position:relative;
  display:inline-block;   /* ważne: żeby liczyło szerokość tekstu */
  z-index:1;
  padding-right:14px;     /* miejsce na „ogonek” */
}

/* linia pod tekstem */
.secTitle > span::after{
  content:"";
  position:absolute;
  left:-6px;
  right:6px;              /* zamiast width:110% -> bardziej stabilne */
  bottom:-6px;
  height:10px;            /* tu kontrolujesz grubość */
  background: var(--arbuzik-yellow);
  border-radius:999px;
  z-index:-1;
}

/* =========================
   STATUS BADGE (klient + admin)
   ========================= */
.statusPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.75);
}

.st-new{ background: rgba(var(--arbuzik-yellow-deep-rgb),.20); border-color: rgba(var(--arbuzik-yellow-deep-rgb),.32); color: #8a6a00; }
.st-accepted{ background: rgba(12,107,62,.14); border-color: rgba(12,107,62,.24); color: #0c6b3e; }
.st-preparing{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.24); color: #1d4ed8; }
.st-ready{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.26); color: #15803d; }
.st-completed{ background: rgba(148,163,184,.20); border-color: rgba(148,163,184,.30); color: #334155; }
.st-canceled{ background: rgba(229,57,53,.16); border-color: rgba(229,57,53,.26); color: #b42318; }

/* =========================================================
   STANDARD HOVER: zielone przyciski (btn--solid) -> żółty tekst
   Dotyczy m.in.: "Zamów box", "Wyślij", "Wyznacz trasę", "Zamów" itd.
   ========================================================= */
.btn--solid:hover,
.btn--solid:focus-visible{
  color: var(--arbuzik-yellow);
}

/* jeśli w przycisku są ikonki SVG, też mają łapać żółty */
.btn--solid:hover svg,
.btn--solid:focus-visible svg{
  fill: currentColor;
  stroke: currentColor;
}

/* =========================================================
        TIP NA /BOXIKI/ - IKONKA TIP
   ========================================================= */
.arbuzik-tip{
  width:62px;
  height:auto;
  flex-shrink:0;
  border-radius:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

    /* =========================================================
         Oferta boxików — PRO hover + spotlight (bez rozmycia)
      =========================================================*/
/* =========================================================
   Oferta boxików — STABILNA wersja (bez rozjazdów)
=========================================================*/

.offerPanel{ margin-top:14px; }

.offerGrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){
  .offerGrid{ grid-template-columns: 1fr; }
}

.offerList{
  position:relative;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(17,24,39,.10);
  border-radius:16px;
  padding:10px;
  overflow:hidden;
}

.offerItem{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap:2px 10px;
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background: transparent;
  color: inherit;
  cursor:pointer;
  transition: transform .25s ease;
  font-size:16px;
}
.offerItem:hover{ transform: translateY(-2px); }

.offerName{ font-weight:1000; }
.offerMeta{ grid-column:1 / -1; color:#6a6a6a; font-size:12px; }

.offerPrice{
  align-self:start;
  justify-self:end;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.16);
  color: rgba(12,107,62,1);
  white-space:nowrap;
  font-size:14px;
}

/* ===== LEWY KURSOR (Apple style Y axis) ===== */
.offerCursor{
  position:absolute;
  left:10px;
  right:10px;
  top:0px;
  height:54px;
  border-radius:14px;
  background: rgba(12,107,62,.10);
  border:1px solid rgba(12,107,62,.18);
  box-shadow: 0 10px 30px rgba(5, 23, 42, .10);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.2,.9,.2,1),
              height .45s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  opacity:0;
}
.offerList.is-ready .offerCursor{ opacity:1; }

/* ===== PRAWA STRONA ===== */

.offerImageWrap{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 40px rgba(13, 23, 42, .10);
  background:#fff;
}

.offerImage{
  display:block;
  width:100%;
  height:100%;
}

/* SPOTLIGHT — wyliczany dynamicznie JS (bez sztywnych 5 kolumn) */
.offerSpotlight{
  position:absolute;
  top:0;
  bottom:0;
  left:5px;
  width:0;
  border-radius:6px;
  background: rgba(255, 214, 0, .18);
  box-shadow: inset 0 0 0 2px rgba(255, 214, 0, .65);
  transform: translateX(0);
  transition: transform .55s cubic-bezier(.2,.9,.2,1),
              width .55s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  opacity:0;
}
.offerImageWrap.is-ready .offerSpotlight{ opacity:1; }

.offerEdge{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 420px at 20% 10%, rgba(12,107,62,.06), transparent 60%),
              radial-gradient(800px 420px at 90% 10%, rgba(229,57,53,.05), transparent 58%);
  mix-blend-mode: multiply;
}

/* FIX: oferta abonamentowa ma mieć ten sam font co reszta */
#offerPanel,
#offerPanel *{
  font-family: inherit !important;
  
}

/* */
/* main.css — DODANE: linklike dla resetu hasła */

.logPanel{
  
   background-image:
    radial-gradient(1100px 520px at 14% 0%, rgba(12,107,62,.06), transparent 60%),
    radial-gradient(900px 460px at 92% 10%, rgba(229,57,53,.05), transparent 58%),
    var(--seed-pattern);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 160px 160px;
  background-attachment: scroll, scroll, fixed;
  }

.linklike{
  display:inline-flex;
  margin-top:8px;
  font-weight:900;
  font-size:12px;
  color: rgba(12,107,62,1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(var(--arbuzik-yellow-deep-rgb),.9);
}
.linklike:hover{ opacity:.9; }

/*
/* Login modal tabs: żółte podkreślenie aktywnej zakładki */
.authTabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 10px;}
.authTabs .btn{position:relative;}
.authTabs .btn.is-active{box-shadow: inset 0px 0px 50px rgba(var(--arbuzik-yellow-deep-rgb),.95); border-color: rgba(12,107,62,.25);}

/* ===== Dzisiaj wjechało — upgrade UI (v.008) ===== */
#todayCards.today{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.today__card{
  width: 100%;
  min-height: 172px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
  transition: transform .14s ease, box-shadow .14s ease;
}
.today__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0px 30px rgba(0,0,0,.10);
}
.today__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.today__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  background: rgba(12,107,62,.10);
  border:1px solid rgba(12,107,62,.16);
}
.today__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  color:#0c6b3e;
  background: rgba(var(--arbuzik-yellow-deep-rgb),.22);
  border:1px solid rgba(var(--arbuzik-yellow-deep-rgb),.55);
  white-space:nowrap;
}
.today__name{
  margin-top:12px;
  font-weight:900;
  font-size:18px;
  line-height:1.18;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: 44px;
}
.today__meta{
  margin-top:10px;
  font-size:14px;
  color: rgba(0,0,0,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* skeleton */
.is-skeleton .today__badge,
.is-skeleton .today__name,
.is-skeleton .today__meta{ color: transparent; }
.skel{
  display:block;
  border-radius:12px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.11) 40%, rgba(0,0,0,.06) 80%);
  background-size: 240% 100%;
  animation: skel 1.1s ease-in-out infinite;
}
.skel--icon{ width:42px; height:42px; border-radius:14px; }
.skel--badge{ width: 96px; height: 28px; border-radius: 999px; }
.skel--title{ width: 76%; height: 18px; margin-top: 14px; }
.skel--meta{ width: 58%; height: 14px; margin-top: 12px; opacity: .9; }
@keyframes skel{ 0%{ background-position: 100% 0; } 100%{ background-position: 0 0; } }

@media (max-width: 900px){
  #todayCards.today{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 560px){
  #todayCards.today{ grid-template-columns: 1fr; }
}

/* ===== Dzisiaj wjechało — overlay (v.010) ===== */
.today__card--bg{
  background-size: 102% auto !important;
  background-position: center 22% !important;
  background-repeat: no-repeat;
}

.today__card--bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.14) 100%);
  pointer-events:none;
}

.today__overlay{
  position: relative;
  z-index: 2;
  margin: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px 12px 10px;
  backdrop-filter: blur(0px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.today__card{
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
}

.skel--overlay{
  width: 100%;
  height: 84px;
  border-radius: 16px;
}

/* ===============================
   HERO FULL WIDTH FIX
   =============================== */

.hero--full {
  width: 100%;
  min-height: 100dvh;
  padding-left: 0;
  padding-right: 0;
}

.hero__grid--full {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero__grid--full .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HERO — mobile stacking fix */
@media (max-width: 900px) {
  .hero--full .hero__grid--full {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
    align-items: stretch;
  }

  .hero--full .hero__img { order: 1; }
  .hero--full .hero__copy { order: 2; }

  .hero--full .hero__img {
    width: 100%;
    min-height: 240px;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
  }

  .hero--full .hero__copy {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 820px) {
  .hero--full .hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hero--full .hero__btns .btn {
    flex: 1 1 auto;
    min-width: 48%;
  }

  .hero--full .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .hero--full .hero__copy{
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero--full .hero__btns,
  .hero--full .pills{
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero--full .hero__grid--full{
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================
   ARBUZIK HERO / HEADER REDESIGN v.099
   ========================================================= */

:root{
  --hero-green:#066b33;
  --hero-green-dark:#055528;
  --hero-red:#ef2424;
  --hero-yellow:var(--arbuzik-yellow);
}

body{
  background: linear-gradient(180deg, #faf7f1 0%, #f6f1e8 100%) !important;
}

.hdr{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: linear-gradient(180deg, rgba(4,95,46,.92), rgba(4,95,46,.86)) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}

.hdr__in{
  width:min(1240px,94vw) !important;
  padding: 10px 0 !important;
  gap: 18px !important;
}

.nav a{
  color: rgba(255,255,255,.96) !important;
  font-weight: 900 !important;
}
.nav a:hover{ color:#fff !important; }

.hdr .btn--ghost{
  background: rgba(255,255,255,.92) !important;
  border-color: transparent !important;
  color: #b11d1d !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  font-weight: 900 !important;
}

.hdr .btn--solid{
  background: linear-gradient(180deg, #ffffff, #f3f3f3) !important;
  color: #cf2a25 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  font-weight: 900 !important;
}

.hdr .burger{
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(255,255,255,.15) !important;
}
.hdr .burger::before,
.hdr .burger::after{
  background: var(--hero-green) !important;
  box-shadow: 0 10px 0 var(--hero-green) !important;
}

.hero--full{
  padding: 0 0 28px !important;
  margin-top: -92px !important;
}

.hero--full .hero__grid--full{
  position: relative !important;
  min-height: 640px !important;
  grid-template-columns: 1.02fr .98fr !important;
  align-items: stretch !important;
  border-radius: 0 0 42px 42px !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: 0 34px 80px rgba(6,38,18,.18) !important;
  background:
    radial-gradient(900px 340px at 8% 24%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 280px at 84% 8%, rgba(255,255,255,.10), transparent 56%),
    linear-gradient(180deg, var(--hero-green) 0%, #0a7a3b 100%) !important;
}

.hero--full .hero__grid--full::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 24%, rgba(var(--arbuzik-yellow-deep-rgb),.90) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 50% 50%, rgba(var(--arbuzik-yellow-deep-rgb),.70) 0 1.5px, transparent 2.5px) 12px 8px/18px 18px;
  width: 38%;
  height: 54%;
  left: 54%;
  top: 9%;
  opacity: .85;
  mask-image: radial-gradient(circle at center, #000 34%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 74%);
  pointer-events:none;
  z-index:1;
}

.hero--full .hero__grid--full::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 180px;
  background:
    radial-gradient(120% 120px at 30% 0%, transparent 58%, #f7f4ee 59%),
    radial-gradient(120% 120px at 78% -8%, transparent 58%, #f7f4ee 59%);
  pointer-events:none;
  z-index:2;
}

.hero--full .hero__copy{
  position: relative !important;
  z-index: 4 !important;
  padding: 168px 0 170px clamp(24px,6vw,72px) !important;
  max-width: 640px !important;
}

.hero--full .hero__copy::before,
.hero--full .hero__copy::after{
  content:"";
  position:absolute;
  right:-40vw;
  border-radius:999px;
  transform: rotate(-8deg);
  z-index:-1;
}

.hero--full .hero__copy::before{
  width: 1050px;
  height: 170px;
  bottom: 128px;
  background: linear-gradient(180deg, #ffe100, #ffd000);
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
}

.hero--full .hero__copy::after{
  width: 1200px;
  height: 205px;
  bottom: 36px;
  background: linear-gradient(180deg, #f5312a, #e31c1c);
}

.hero--full h1{
  color:#fff !important;
  font-size: clamp(42px, 5.6vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 18px !important;
  text-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.hero--full p{
  color: rgba(255,255,255,.88) !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  max-width: 520px !important;
  margin-bottom: 24px !important;
}

.hero--full .hero__btns{
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.hero--full .hero__btns .btn{
  min-height: 56px;
  padding: 14px 22px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.hero--full .hero__btns .btn--solid{
  background: linear-gradient(180deg, var(--arbuzik-yellow-deep), #f6c900) !important;
  color: #141414 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.20) !important;
}

.hero--full .hero__btns .btn--outline{
  background: rgba(255,255,255,.96) !important;
  color: #d42a25 !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.16) !important;
}

.hero--full .pills{
  gap:10px !important;
}

.hero--full .pill{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(4px);
  font-weight: 800 !important;
}

.hero--full .hero__img{
  min-height: 640px !important;
  position: relative !important;
  z-index: 4 !important;
  background:
    url('/assets/img/hero-arbuzik-watermelon.png') center right/cover no-repeat !important;
}

.hero--full .hero__img::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6,107,51,.18) 0%, rgba(6,107,51,0) 22%),
    radial-gradient(520px 240px at 82% 8%, rgba(255,255,255,.12), transparent 60%);
}

.hero--full .hero__imgOverlay{
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding: 24px !important;
}

.hero--full .badge{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: 0 20px 34px rgba(0,0,0,.14) !important;
}

.hero + .hero{
  margin-top: 18px !important;
}

@media (max-width: 980px){
  .hero--full{
    margin-top: -74px !important;
  }

  .hero--full .hero__grid--full{
    grid-template-columns: 1fr !important;
    min-height: unset !important;
    border-radius: 0 0 28px 28px !important;
  }

  .hero--full .hero__grid--full::before{
    width: 56%;
    height: 28%;
    left: 38%;
    top: 10%;
    opacity: .72;
  }

  .hero--full .hero__grid--full::after{
    height: 110px;
  }

  .hero--full .hero__copy{
    order: 1 !important;
    padding: 120px 16px 24px 16px !important;
    max-width: none !important;
  }

  .hero--full .hero__copy::before{
    width: 760px;
    height: 90px;
    bottom: -8px;
    right: -260px;
  }

  .hero--full .hero__copy::after{
    width: 860px;
    height: 112px;
    bottom: -52px;
    right: -300px;
  }

  .hero--full .hero__img{
    order: 2 !important;
    min-height: 360px !important;
    background-position: center center !important;
  }

  .hero--full h1{
    font-size: clamp(34px, 10vw, 52px) !important;
  }

  .hero--full .hero__btns .btn{
    min-width: calc(50% - 7px);
  }
}

@media (max-width: 640px){
  .hdr__in{
    width:min(96vw, 96vw) !important;
  }

  .hero--full .hero__copy{
    padding-top: 112px !important;
  }

  .hero--full .hero__img{
    min-height: 290px !important;
  }

  .hero--full .hero__btns{
    display:grid !important;
    grid-template-columns:1fr 1fr;
  }

  .hero--full .hero__btns .btn{
    min-width: 0;
    width:100%;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .hero--full .badge{
    transform: scale(.94);
    transform-origin: left bottom;
  }
}

/* =========================================================
   ARBUZIK FOOTER GRAND FINALE PATCH ONLY v.4444
   Doklej ten blok na SAM KONIEC aktualnego main.css
   ========================================================= */

.ftr{
  position: relative;
  margin-top: 56px !important;
  color: #fff;
  background:
    radial-gradient(900px 320px at 12% 10%, rgba(var(--arbuzik-yellow-deep-rgb),.18), transparent 58%),
    radial-gradient(700px 260px at 82% 14%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, #0a6e36 0%, #07582b 100%) !important;
  border-top: 0 !important;
  overflow: hidden;
}

.ftr::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 170px;
  background:
    radial-gradient(120% 120px at 22% 100%, #f7f4ee 58%, transparent 59%),
    radial-gradient(120% 120px at 72% 100%, #f7f4ee 58%, transparent 59%);
  pointer-events:none;
  z-index:1;
}

.ftr::after{
  content:"";
  position:absolute;
  right: -90px;
  top: 40px;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(var(--arbuzik-yellow-deep-rgb),.95) 0 3px, transparent 4px) 0 0 / 20px 20px,
    radial-gradient(circle at center, rgba(var(--arbuzik-yellow-deep-rgb),.65) 0 2px, transparent 3px) 10px 10px / 20px 20px;
  opacity: .18;
  pointer-events:none;
  z-index:1;
  filter: blur(.1px);
}

.ftr .wrap{
  position: relative;
  z-index: 2;
}

.ftr__grid{
  position: relative;
  grid-template-columns: 1.2fr .72fr 1.22fr .86fr !important;
  gap: 22px !important;
  padding: 118px 0 30px !important;
}

.ftr__grid > div{
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(5px);
}

.ftr__grid > div:first-child{
  background:
    radial-gradient(280px 110px at 18% 0%, rgba(var(--arbuzik-yellow-deep-rgb),.14), transparent 60%),
    rgba(255,255,255,.08);
}

.ftr__brand{
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  text-decoration: none;
}

.ftr__brandLogo{
  display: block;
  height: 88px;
  width: auto;
  max-width: min(100%, 210px);
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.16));
}

.ftr__title{
  color: #fff !important;
  font-size: 15px;
  font-weight: 950 !important;
  margin-bottom: 12px !important;
  letter-spacing: .01em;
}

.ftr__contact{
  display:grid;
  gap: 10px;
}

.ftr__line{
  display:grid;
  grid-template-columns: 22px 1fr;
  align-items:start;
  column-gap: 10px;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}

.ftr__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  min-width:22px;
  transform: translateY(1px);
}

.ftr__text{
  min-width:0;
}

.ftr__label{
  display:block;
  font-weight: 800;
}

.ftr__subline{
  display:block;
}

.ftr__contact a{
  display:inline !important;
  padding:0 !important;
}

.ftr__contact a:hover{
  transform:none !important;
}

@media (min-width: 981px){
  .ftr__contact .ftr__line{
    grid-template-columns: 24px minmax(0,1fr);
  }
}

.ftr p,
.ftr .muted,
.ftr .small,
.ftr__bottom .badge__sub{
  color: rgba(255,255,255,.84) !important;
}

.ftr a{
  color: rgba(255,255,255,.88) !important;
  padding: 8px 0 !important;
  border-radius: 10px;
  transition: transform .14s ease, color .14s ease, opacity .14s ease;
}

.ftr a:hover{
  color: var(--arbuzik-yellow) !important;
  transform: translateX(2px);
}

.ftr__bottom{
  position: relative;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding: 18px 0 26px !important;
  text-align: center;
}

.ftr__bottom::before{
  content:"";
  position:absolute;
  left:50%;
  top:-1px;
  transform: translateX(-50%);
  width: 180px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--arbuzik-yellow-deep), #f02d25, var(--arbuzik-yellow-deep));
}

@media (max-width: 980px){
  .ftr{
    margin-top: 40px !important;
  }

  .ftr::before{
    height: 110px;
  }

  .ftr__grid{
    grid-template-columns: 1fr 1fr !important;
    padding: 86px 0 22px !important;
    gap: 14px !important;
  }

  .ftr__grid > div{
    border-radius: 18px;
    padding: 16px 14px;
  }

   .ftr__brandLogo{
    height: 50px;
    max-width: 190px;
  }
}

@media (max-width: 560px){
  .ftr__grid{
    grid-template-columns: 1fr !important;
    padding-top: 74px !important;
  }

  .ftr__grid > div{
    padding: 14px 14px 12px;
  }

  .ftr__brandLogo{
    height: 66px;
    max-width: 180px;
  }

  .ftr__bottom{
    padding-bottom: 20px !important;
  }
}

/* =========================================================
   ARBUZIK BUTTONS PREMIUM TARGET PATCH v.4445
   Tylko wybrane przyciski:
   - Zaloguj
   - Zamów box / Zamów boxik
   - Nawiguj do sklepu
   - Zobacz boxiki
   ========================================================= */

:root{
  --arb-red-logo:#cf2227;
  --arb-red-logo-hover:#e53935;
  --arb-green-logo:#075a33;
  --arb-yellow-btn:var(--arbuzik-yellow);
  --arb-yellow-btn-2:var(--arbuzik-yellow);
}

/* wspólna baza premium + shine tylko dla wybranych przycisków */
.hdr__auth #loginBtn.btn--ghost,
.hdr__right > a.btn.btn--solid[href="/boxiki/"],
.mnav__cta > a.btn.btn--solid[href="/boxiki/"],
.hero--full .hero__btns a.btn.btn--solid[href="#mapa"],
.hero--full .hero__btns a.btn.btn--solid[href="/boxiki/"]{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease !important;
}

.hdr__auth #loginBtn.btn--ghost::before,
.hdr__right > a.btn.btn--solid[href="/boxiki/"]::before,
.mnav__cta > a.btn.btn--solid[href="/boxiki/"]::before,
.hero--full .hero__btns a.btn.btn--solid[href="#mapa"]::before,
.hero--full .hero__btns a.btn.btn--solid[href="/boxiki/"]::before{
  content:"";
  position:absolute;
  top:-140%;
  left:-38%;
  width:34%;
  height:380%;
  transform: rotate(24deg) translateX(-220%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,.12) 65%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index:2;
  transition: transform .72s ease;
}

.hdr__auth #loginBtn.btn--ghost:hover::before,
.hdr__right > a.btn.btn--solid[href="/boxiki/"]:hover::before,
.mnav__cta > a.btn.btn--solid[href="/boxiki/"]:hover::before,
.hero--full .hero__btns a.btn.btn--solid[href="#mapa"]:hover::before,
.hero--full .hero__btns a.btn.btn--solid[href="/boxiki/"]:hover::before{
  transform: rotate(24deg) translateX(540%);
}

/* 1. Zaloguj */
.hdr__auth #loginBtn.btn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,247,247,.94)) !important;
  color: var(--arb-red-logo) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 15px !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.hdr__auth #loginBtn.btn--ghost:hover{
  background: linear-gradient(180deg, #ffffff, #f5f5f5) !important;
  color: var(--arb-red-logo-hover) !important;
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

/* 2. Zamów box / Zamów boxik */
.hdr__right > a.btn.btn--solid[href="/boxiki/"],
.mnav__cta > a.btn.btn--solid[href="/boxiki/"]{
  background: linear-gradient(135deg, var(--arb-yellow-btn), var(--arb-yellow-btn-2)) !important;
  color: var(--arb-green-logo) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 15px !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
  font-weight: 900 !important;
}

.hdr__right > a.btn.btn--solid[href="/boxiki/"]:hover,
.mnav__cta > a.btn.btn--solid[href="/boxiki/"]:hover{
  background: linear-gradient(135deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
  color: var(--arb-red-logo) !important;
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* 3. Nawiguj do sklepu */
.hero--full .hero__btns a.btn.btn--solid[href="#mapa"]{
  background: linear-gradient(135deg, var(--arb-yellow-btn), var(--arb-yellow-btn-2)) !important;
  color: var(--arb-green-logo) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.hero--full .hero__btns a.btn.btn--solid[href="#mapa"]:hover{
  background: linear-gradient(135deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
  color: var(--arb-green-logo) !important;
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}

/* 4. Zobacz boxiki — ma być identyczny jak Nawiguj do sklepu */
.hero--full .hero__btns a.btn.btn--solid[href="/boxiki/"]{
  background: linear-gradient(135deg, var(--arb-yellow-btn), var(--arb-yellow-btn-2)) !important;
  color: var(--arb-green-logo) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.hero--full .hero__btns a.btn.btn--solid[href="/boxiki/"]:hover{
  background: linear-gradient(135deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
  color: var(--arb-green-logo) !important;
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}

/* trochę subtelniejszy shine na mobile */
@media (max-width: 980px){
  .hdr__auth #loginBtn.btn--ghost::before,
  .hdr__right > a.btn.btn--solid[href="/boxiki/"]::before,
  .mnav__cta > a.btn.btn--solid[href="/boxiki/"]::before,
  .hero--full .hero__btns a.btn.btn--solid[href="#mapa"]::before,
  .hero--full .hero__btns a.btn.btn--outline[href="/boxiki/"]::before{
    opacity: .75;
  }
}

/* =========================================================
   BOXIKI HEADER BUTTON SYNC v.022
   Spójność z przyciskami strony głównej
   ========================================================= */

/* Koszyk – taki sam styl jak "Zamów box" */
.hdr__right > a.btn.btn--solid[href="#zamow"],
.mnav__cta > a.btn.btn--solid[href="#zamow"]{
  background: linear-gradient(135deg, var(--arbuzik-yellow-deep), #f3c600) !important;
  color: #0c6b3e !important;
  border-radius: 15px !important;
  font-weight: 900 !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
  position: relative;
  overflow: hidden;
}

/* hover */
.hdr__right > a.btn.btn--solid[href="#zamow"]:hover,
.mnav__cta > a.btn.btn--solid[href="#zamow"]:hover{
  background: linear-gradient(135deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
  color: #cf2227 !important;
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* shine animation */
.hdr__right > a.btn.btn--solid[href="#zamow"]::before,
.mnav__cta > a.btn.btn--solid[href="#zamow"]::before{
  content:"";
  position:absolute;
  top:-140%;
  left:-40%;
  width:30%;
  height:380%;
  transform: rotate(25deg) translateX(-220%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.15) 40%,
    rgba(255,255,255,.6) 50%,
    rgba(255,255,255,.15) 60%,
    rgba(255,255,255,0) 100%
  );
  transition: transform .7s ease;
}

.hdr__right > a.btn.btn--solid[href="#zamow"]:hover::before,
.mnav__cta > a.btn.btn--solid[href="#zamow"]:hover::before{
  transform: rotate(25deg) translateX(520%);
}

/* =========================================================
   BOXIKI HERO BG INTEGRATION v.024
   ========================================================= */

#abonament{
  padding-top: 18px !important;
}
#abonament > .wrap{
  width:min(1320px, 96vw) !important;
}
#abonament > .wrap > .card{
  position: relative;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 0 34px 34px !important;
  box-shadow: 0 28px 70px rgba(6,38,18,.16) !important;
}
#abonament > .wrap > .card > div{
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(320px, 660px) minmax(320px, 660px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 44px) !important;
  min-height: 760px;
  padding: 154px 24px 138px !important;
  background:
    radial-gradient(900px 320px at 72% 18%, rgba(var(--arbuzik-yellow-deep-rgb),.30), transparent 58%),
    radial-gradient(700px 280px at 12% 14%, rgba(255,255,255,.12), transparent 56%),
    url('/assets/img/arbuzik_boxiki_hero1.png') center center / cover no-repeat !important;
  isolation: isolate;
  transition: background-position .9s ease;
}
#abonament > .wrap > .card > div::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 76px;
  background:
    radial-gradient(120% 95px at 26% 0%, transparent 58%, #f7f4ee 59%),
    radial-gradient(120% 95px at 74% 0%, transparent 58%, #f7f4ee 59%);
  pointer-events:none;
  z-index:1;
}
#abonament > .wrap > .card > div > div:first-child,
#abonament > .wrap > .card > div > div:last-child{
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 660px;
  padding: 18px !important;
  border-left: 0 !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(6px);
}
#abonament > .wrap > .card > div > div:first-child{
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 620px;
  padding: 18px 20px 18px !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(7,64,31,.24), rgba(7,64,31,.16)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(7px);
}
#abonament > .wrap > .card > div > div:first-child h2{
  color:#fff !important;
  font-size: clamp(38px, 4.2vw, 62px) !important;
  line-height:.98 !important;
  letter-spacing:-.03em !important;
  margin-bottom:14px !important;
  max-width: 11ch;
  text-shadow: 0 8px 20px rgba(0,0,0,.22);
}
#abonament > .wrap > .card > div > div:first-child .muted,
#abonament > .wrap > .card > div > div:first-child p,
#abonament > .wrap > .card > div > div:first-child .small{
  color: rgba(255,255,255,.92) !important;
}
#abonament > .wrap > .card > div > div:first-child .grid.grid--3 > .card{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.08) !important;
}
#abonament > .wrap > .card > div > div:first-child .grid.grid--3 > .card .muted,
#abonament > .wrap > .card > div > div:first-child .grid.grid--3 > .card .small{
  color: rgba(0,0,0,.64) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--solid{
  background: linear-gradient(135deg, #0b7d3b, #0c6b3e) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--outline{
  background: rgba(255,255,255,.96) !important;
  color:#cf2227 !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.16) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--ghost{
  background: rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
#abonament > .wrap > .card > div > div:last-child{
  align-self: start;
  margin-top: 6px;
  padding: 18px !important;
  border-left: 0 !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(6px);
}
#abonament > .wrap > .card > div > div:last-child > .card,
#abonament > .wrap > .card > div > div:last-child .grid.grid--2 > .card{
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: none !important;
}
#abonament > .wrap > .card > div > div:last-child > .card:first-child{
  background: linear-gradient(180deg, rgba(12,107,62,.10), rgba(255,255,255,.98)) !important;
}

@media (max-width: 1260px){
  .offerNeeds{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .needCard--visual, .needCard__content{ min-height: 260px; }
}
@media (max-width: 1100px){
  #abonament.sec{ margin-top: -78px !important; }
  #abonament > .wrap > .card > div{
    grid-template-columns: minmax(0, 760px) !important;
    justify-content: center !important;
    min-height: unset;
    padding: 124px 16px 94px !important;
  }
  #abonament > .wrap > .card::before{
    width: 760px;
    height: 96px;
    bottom: 92px;
    right: -240px;
  }
  #abonament > .wrap > .card::after{
    width: 860px;
    height: 118px;
    bottom: 24px;
    right: -260px;
  }
  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    max-width: 760px;
  }
  #abonament > .wrap > .card > div > div:first-child h2{
    max-width: none;
    font-size: clamp(34px, 10vw, 52px) !important;
  }
}
@media (max-width: 980px){
  #abonament > .wrap{
    width:min(96vw, 96vw) !important;
  }
  #abonament > .wrap > .card{
    border-radius: 0 0 26px 26px !important;
  }
  #abonament > .wrap > .card > div{
    padding: 88px 12px 72px !important;
    gap: 12px !important;
    background-position: 42% center !important;
  }
  #abonament > .wrap > .card > div > div:first-child{
    padding: 14px 14px 16px !important;
    border-radius: 22px !important;
  }
  #abonament > .wrap > .card > div > div:last-child{
    padding: 12px !important;
    border-radius: 22px !important;
  }
  #abonament > .wrap > .card > div::before{
    height: 52px;
  }
}

/* =========================================================
   BOXIKI HERO FULLWIDTH PREMIUM v.026
   ========================================================= */

#abonament.sec{
  position: relative;
  padding: 0 !important;
  margin-top: -92px !important;
  z-index: 1;
}
#abonament > .wrap{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
#abonament > .wrap > .card{
  position: relative;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 0 34px 34px !important;
  box-shadow: 0 34px 80px rgba(6,38,18,.18) !important;
  background: transparent !important;
  perspective: 1200px;
}
#abonament > .wrap > .card > div{
  position: relative;
  display: grid !important;
  grid-template-columns: 1.02fr .98fr !important;
  align-items: stretch !important;
  gap: 18px !important;
  min-height: 760px;
  padding: 154px clamp(18px,3vw,38px) 138px !important;
  background:
    radial-gradient(900px 320px at 72% 18%, rgba(var(--arbuzik-yellow-deep-rgb),.30), transparent 58%),
    radial-gradient(700px 280px at 12% 14%, rgba(255,255,255,.12), transparent 56%),
    url('/assets/img/arbuzik_boxiki_hero1.png') center center / cover no-repeat !important;
  isolation: isolate;
  transition: background-position .9s ease;
}
#abonament > .wrap > .card:hover > div{
  background-position: center 47% !important;
}
#abonament > .wrap > .card > div::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,107,51,.04) 0%, rgba(6,107,51,0) 28%),
    radial-gradient(360px 180px at 78% 22%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
#abonament > .wrap > .card > div::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 188px;
  z-index:1;
  background:
    radial-gradient(120% 120px at 30% 0%, transparent 58%, #f7f4ee 59%),
    radial-gradient(120% 120px at 78% -10%, transparent 58%, #f7f4ee 59%);
  pointer-events:none;
}
#abonament > .wrap > .card::before,
#abonament > .wrap > .card::after{
  content:"";
  position:absolute;
  right:-24vw;
  border-radius:999px;
  transform: rotate(-7deg);
  pointer-events:none;
  z-index:2;
}
#abonament > .wrap > .card::before{
  width: 1120px;
  height: 150px;
  bottom: 128px;
  background: linear-gradient(180deg, #ffe100, #ffd000);
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
}
#abonament > .wrap > .card::after{
  width: 1260px;
  height: 196px;
  bottom: 28px;
  background: linear-gradient(180deg, #ff2a25, #ef1e1e);
}
#abonament > .wrap > .card > div > div:first-child,
#abonament > .wrap > .card > div > div:last-child{
  position: relative;
  z-index: 4;
}
#abonament > .wrap > .card > div > div:first-child{
  align-self: end;
  max-width: 640px;
  margin-left: clamp(6px, 2.2vw, 34px);
  padding: 18px 20px 18px !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(7,64,31,.24), rgba(7,64,31,.16)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(7px);
}
#abonament > .wrap > .card > div > div:first-child h2{
  color:#fff !important;
  font-size: clamp(42px, 5.6vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 16px !important;
  max-width: 11ch;
  text-shadow: 0 8px 20px rgba(0,0,0,.16);
}
#abonament > .wrap > .card > div > div:first-child p,
#abonament > .wrap > .card > div > div:first-child .muted,
#abonament > .wrap > .card > div > div:first-child .small{
  color: rgba(255,255,255,.92) !important;
}
#abonament > .wrap > .card > div > div:first-child .grid.grid--3{
  grid-template-columns: repeat(3,1fr) !important;
  gap: 10px !important;
}
#abonament > .wrap > .card > div > div:first-child .grid.grid--3 > .card{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(255,255,255,.54) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.08) !important;
}
#abonament > .wrap > .card > div > div:first-child .grid.grid--3 > .card .muted,
#abonament > .wrap > .card > div > div:first-child .grid.grid--3 > .card .small{
  color: rgba(0,0,0,.62) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--solid{
  background: linear-gradient(135deg, #0b7d3b, #0c6b3e) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--solid:hover{
  color: var(--arbuzik-yellow) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--outline{
  background: rgba(255,255,255,.96) !important;
  color:#cf2227 !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.16) !important;
}
#abonament > .wrap > .card > div > div:first-child .btn--ghost{
  background: rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.20) !important;
}
#abonament > .wrap > .card > div > div:last-child{
  align-self: start;
  max-width: 690px;
  justify-self: end;
  margin-right: clamp(6px, 2.2vw, 34px);
  padding: 18px !important;
  border-left: 0 !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(6px);
}
#abonament > .wrap > .card > div > div:last-child > .card,
#abonament > .wrap > .card > div > div:last-child .grid.grid--2 > .card{
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: none !important;
}
#abonament > .wrap > .card > div > div:last-child > .card:first-child{
  background: linear-gradient(180deg, rgba(12,107,62,.10), rgba(255,255,255,.98)) !important;
}
@media (max-width: 1100px){
  #abonament.sec{ margin-top: -78px !important; }
  #abonament > .wrap > .card > div{
    grid-template-columns: 1fr !important;
    min-height: unset;
    padding: 124px 16px 94px !important;
  }
  #abonament > .wrap > .card::before{
    width: 760px;
    height: 96px;
    bottom: 92px;
    right: -240px;
  }
  #abonament > .wrap > .card::after{
    width: 860px;
    height: 118px;
    bottom: 24px;
    right: -260px;
  }
  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  #abonament > .wrap > .card > div > div:first-child h2{
    max-width: none;
    font-size: clamp(34px, 10vw, 52px) !important;
  }
}
@media (max-width: 980px){
  #abonament > .wrap > .card{
    border-radius: 0 0 26px 26px !important;
  }
  #abonament > .wrap > .card > div{
    padding: 112px 12px 84px !important;
    gap: 12px !important;
  }
  #abonament > .wrap > .card > div::after{
    height: 112px;
  }
  #abonament > .wrap > .card > div > div:first-child{
    padding: 14px 14px 16px !important;
    border-radius: 22px !important;
  }
  #abonament > .wrap > .card > div > div:last-child{
    padding: 12px !important;
    border-radius: 22px !important;
  }
}
@media (max-width: 640px){
  #abonament.sec{ margin-top: -70px !important; }
  #abonament > .wrap > .card > div{
    padding: 104px 12px 72px !important;
    background-position: 52% center !important;
  }
  #abonament > .wrap > .card::before{
    width: 620px;
    height: 82px;
    bottom: 78px;
    right: -230px;
  }
  #abonament > .wrap > .card::after{
    width: 680px;
    height: 96px;
    bottom: 18px;
    right: -230px;
  }
  #abonament > .wrap > .card > div > div:first-child .grid.grid--3{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   BOXIKI HERO WIDTH CORRECTION v.028
   - tylko hero full width
   - sekcje poniżej wracają do standardowej szerokości wrap
   ========================================================= */

#abonament .bxPanel,
#abonament + div[style="height:14px"],
#boxiki + section.sec > .wrap,
section.sec#zamow > .wrap,
section.sec#moje > .wrap,
#abonament ~ section.sec > .wrap{
  width: min(1140px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1140px !important;
}

#abonament .bxPanel .grid,
#abonament .offerGrid,
#abonament ~ section.sec .grid{
  width: 100% !important;
}

@media (max-width: 980px){
  #abonament .bxPanel,
  #abonament + div[style="height:14px"],
  #boxiki + section.sec > .wrap,
  section.sec#zamow > .wrap,
  section.sec#moje > .wrap,
  #abonament ~ section.sec > .wrap{
    width: min(92vw, 1140px) !important;
    max-width: 92vw !important;
  }
}

/* =========================================================
   BOXIKI SECTIONS WIDTH FIX v.030
   - hero zostaje full width
   - od "Jak to działa?" w dół wraca normalny kontener
   ========================================================= */

/* tylko hero ma pełną szerokość */
#abonament > .wrap{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* przerwy i panele wewnątrz sekcji abonamentu od "Jak to działa?" w dół */
#abonament > .wrap > div[style*="height:14px"],
#abonament > .wrap > .bxPanel{
  width: min(1140px, 92vw) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* wszystkie sekcje po kotwicy #boxiki */
#boxiki + section.sec > .wrap,
section.sec#zamow > .wrap,
section.sec#moje > .wrap{
  width: min(1140px, 92vw) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* same siatki mają wypełniać tylko kontener, nie viewport */
#abonament > .wrap > .bxPanel .grid,
#abonament > .wrap > .bxPanel .offerGrid,
#boxiki + section.sec .grid,
section.sec#zamow .grid,
section.sec#moje .grid{
  width: 100% !important;
  max-width: 100% !important;
}

/* bezpieczeństwo: sekcja abonamentu poniżej hero nie może rozciągać treści */
#abonament > .wrap > .bxPanel,
#abonament > .wrap > div[style*="height:14px"]{
  display: block;
  box-sizing: border-box;
}

/* mobile */
@media (max-width: 980px){
  #abonament > .wrap > div[style*="height:14px"],
  #abonament > .wrap > .bxPanel,
  #boxiki + section.sec > .wrap,
  section.sec#zamow > .wrap,
  section.sec#moje > .wrap{
    width: min(92vw, 1140px) !important;
    max-width: 92vw !important;
  }
}

/* =========================================================
   BOXIKI HERO PANELS CENTER FIX v.032
   - tylko dwa panele w hero
   - szerokość jak inne sekcje
   - obok siebie
   ========================================================= */

/* hero nadal full width, ale kontener na dwa panele ma szerokość jak wrap */
#abonament > .wrap > .card > div{
  grid-template-columns: minmax(0, 660px) minmax(0, 660px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: 28px !important;
  padding-left: max(24px, calc((100vw - min(1140px, 92vw)) / 2)) !important;
  padding-right: max(24px, calc((100vw - min(1140px, 92vw)) / 2)) !important;
}

/* lewy panel */
#abonament > .wrap > .card > div > div:first-child{
  width: 100% !important;
  max-width: 660px !important;
  justify-self: end !important;
  align-self: start !important;
  margin-left: 0 !important;
}

/* prawy panel */
#abonament > .wrap > .card > div > div:last-child{
  width: 100% !important;
  max-width: 660px !important;
  justify-self: start !important;
  align-self: start !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

/* tablet / mobile bez zmian funkcjonalnych */
@media (max-width: 1100px){
  #abonament > .wrap > .card > div{
    grid-template-columns: minmax(0, 760px) !important;
    justify-content: center !important;
  }

  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    max-width: 760px !important;
    justify-self: center !important;
  }
}

/* =========================================================
   BOXIKI HERO HEIGHT MATCH HOMEPAGE v.036
   - zmniejsza wysokość layoutu Boxików do skali strony głównej
   - bez ruszania reszty sekcji
   ========================================================= */

#abonament.sec{
  margin-top: -92px !important;
}

#abonament > .wrap > .card{
  border-radius: 0 0 34px 34px !important;
}

#abonament > .wrap > .card > div{
  min-height: 610px !important;
  padding-top: 88px !important;
  padding-bottom: 56px !important;
  gap: 24px !important;
}

/* same panele trochę ciaśniej jak na homepage */
#abonament > .wrap > .card > div > div:first-child{
  max-width: 520px !important;
  padding: 14px 16px 14px !important;
  border-radius: 24px !important;
}

#abonament > .wrap > .card > div > div:last-child{
  max-width: 520px !important;
  padding: 14px !important;
  border-radius: 24px !important;
}

/* nagłówek po lewej trochę mniejszy */
#abonament > .wrap > .card > div > div:first-child h2{
  font-size: clamp(34px, 4.6vw, 58px) !important;
  margin-bottom: 10px !important;
}

/* dolne domknięcie hero dużo płytsze */
#abonament > .wrap > .card::before{
  width: 980px !important;
  height: 120px !important;
  bottom: 86px !important;
}

#abonament > .wrap > .card::after{
  width: 1100px !important;
  height: 150px !important;
  bottom: 10px !important;
}

#abonament > .wrap > .card > div::after{
  height: 116px !important;
}

/* sekcje pod hero podciągnięte bliżej jak na homepage */
#abonament > .wrap > div[style*="height:14px"]{
  height: 6px !important;
}

#abonament > .wrap > .bxPanel:first-of-type{
  margin-top: 0 !important;
}

@media (max-width: 1100px){
  #abonament.sec{
    margin-top: -78px !important;
  }

  #abonament > .wrap > .card > div{
    min-height: unset !important;
    padding-top: 96px !important;
    padding-bottom: 52px !important;
  }
}

@media (max-width: 980px){
  #abonament > .wrap > .card{
    border-radius: 0 0 26px 26px !important;
  }

  #abonament > .wrap > .card > div{
    padding-top: 92px !important;
    padding-bottom: 48px !important;
    gap: 12px !important;
  }

  #abonament > .wrap > .card::before{
    width: 700px !important;
    height: 78px !important;
    bottom: 62px !important;
  }

  #abonament > .wrap > .card::after{
    width: 780px !important;
    height: 96px !important;
    bottom: 8px !important;
  }

  #abonament > .wrap > .card > div::after{
    height: 82px !important;
  }

  #abonament > .wrap > div[style*="height:14px"]{
    height: 4px !important;
  }
}

/* =========================================================
   BOXIKI HERO ALIGNMENT FIX v.037
   - hero skala bliżej homepage
   - panele z odstępem od górnego baru
   ========================================================= */

#abonament.sec{
  margin-top: -92px !important;
}

#abonament > .wrap > .card{
  border-radius: 0 0 34px 34px !important;
}

#abonament > .wrap > .card > div{
  min-height: 640px !important;
  padding-top: 128px !important;
  padding-bottom: 78px !important;
  gap: 26px !important;
  grid-template-columns: minmax(0, 500px) minmax(0, 500px) !important;
  justify-content: center !important;
  align-items: start !important;
}

#abonament > .wrap > .card > div > div:first-child,
#abonament > .wrap > .card > div > div:last-child{
  margin-top: 22px !important;
}

#abonament > .wrap > .card > div > div:first-child{
  max-width: 500px !important;
  width: 100% !important;
  justify-self: end !important;
  align-self: start !important;
  padding: 14px 16px 14px !important;
  border-radius: 24px !important;
}

#abonament > .wrap > .card > div > div:last-child{
  max-width: 500px !important;
  width: 100% !important;
  justify-self: start !important;
  align-self: start !important;
  padding: 14px !important;
  border-radius: 24px !important;
}

#abonament > .wrap > .card > div > div:first-child h2{
  font-size: clamp(34px, 4.6vw, 58px) !important;
  margin-bottom: 10px !important;
}

#abonament > .wrap > .card::before{
  width: 980px !important;
  height: 116px !important;
  bottom: 84px !important;
}
#abonament > .wrap > .card::after{
  width: 1080px !important;
  height: 144px !important;
  bottom: 8px !important;
}
#abonament > .wrap > .card > div::after{
  height: 104px !important;
}

#abonament > .wrap > div[style*="height:14px"]{
  height: 2px !important;
}

@media (max-width: 1100px){
  #abonament.sec{
    margin-top: -78px !important;
  }
  #abonament > .wrap > .card > div{
    grid-template-columns: minmax(0, 760px) !important;
    min-height: unset !important;
    padding-top: 112px !important;
    padding-bottom: 56px !important;
    justify-content: center !important;
  }
  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    max-width: 760px !important;
    justify-self: center !important;
    margin-top: 12px !important;
  }
}

@media (max-width: 980px){
  #abonament > .wrap > .card{
    border-radius: 0 0 26px 26px !important;
  }
  #abonament > .wrap > .card > div{
    padding-top: 98px !important;
    padding-bottom: 46px !important;
    gap: 12px !important;
  }
  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    margin-top: 8px !important;
  }
  #abonament > .wrap > .card::before{
    width: 700px !important;
    height: 76px !important;
    bottom: 58px !important;
  }
  #abonament > .wrap > .card::after{
    width: 780px !important;
    height: 90px !important;
    bottom: 8px !important;
  }
  #abonament > .wrap > .card > div::after{
    height: 72px !important;
  }
}

/* =========================================================
   BOXIKI HERO FINAL HEIGHT+OFFSET FIX v.038
   - hero krótszy
   - panele nie dotykają górnego baru
   - bez ruszania sekcji poniżej
   ========================================================= */

#abonament > .wrap > .card > div{
  min-height: 500px !important;
  padding-top: 92px !important;
  padding-bottom: 24px !important;
  grid-template-columns: minmax(0, 760px) minmax(0, 760px) !important;
  gap: 24px !important;
  align-items: start !important;
}

#abonament > .wrap > .card > div > div:first-child,
#abonament > .wrap > .card > div > div:last-child{
  margin-top: 18px !important;
}

#abonament > .wrap > .card > div > div:first-child{
  max-width: 760px !important;
  width: 100% !important;
  justify-self: end !important;
  align-self: start !important;
}

#abonament > .wrap > .card > div > div:last-child{
  max-width: 760px !important;
  width: 100% !important;
  justify-self: start !important;
  align-self: start !important;
  margin-right: 0 !important;
}

#abonament > .wrap > .card::before{
  width: 940px !important;
  height: 108px !important;
  bottom: 70px !important;
}

#abonament > .wrap > .card::after{
  width: 1040px !important;
  height: 132px !important;
  bottom: 4px !important;
}

#abonament > .wrap > .card > div::after{
  height: 88px !important;
}

#abonament > .wrap > div[style*="height:14px"]{
  height: 0 !important;
}

@media (max-width: 1100px){
  #abonament > .wrap > .card > div{
    min-height: unset !important;
    grid-template-columns: minmax(0, 760px) !important;
    padding-top: 92px !important;
    padding-bottom: 24px !important;
  }

  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    max-width: 760px !important;
    justify-self: center !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 980px){
  #abonament > .wrap > .card > div{
    padding-top: 92px !important;
    padding-bottom: 34px !important;
    gap: 12px !important;
  }

  #abonament > .wrap > .card > div > div:first-child,
  #abonament > .wrap > .card > div > div:last-child{
    margin-top: 6px !important;
  }

  #abonament > .wrap > .card::before{
    width: 650px !important;
    height: 68px !important;
    bottom: 48px !important;
  }

  #abonament > .wrap > .card::after{
    width: 730px !important;
    height: 82px !important;
    bottom: 4px !important;
  }

  #abonament > .wrap > .card > div::after{
    height: 62px !important;
  }
}

/* =========================================================
   IOS SAFE AREA FINAL FIX v.041
   - ten blok ma być na samym końcu pliku
   ========================================================= */

html, body{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  /* overflow-x:hidden na html łamie position:fixed na iOS — clip jest bezpieczny */
  overflow-x: clip !important;
  background: #0c6b3e !important;
}

body{
  min-height: 100dvh !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-right: env(safe-area-inset-right) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  padding-left: env(safe-area-inset-left) !important;
}

/* właściwa treść strony dostaje jasne tło,
   ale samo body zostaje zielone, żeby iPhone nie pokazywał jasnych pasów */
main,
.page,
.site,
.app{
  background: linear-gradient(180deg, #faf7f1 0%, #f6f1e8 100%);
}

/* =========================================================
   HERO SPACING FIX v.053
   - usuwa ogromne odstępy pod sekcją główną
   - pełna wysokość tylko dla hero full-width
   ========================================================= */

.hero{
  min-height: auto !important;
}

.hero--full{
  min-height: 100dvh !important;
}

/* =========================================================
   GLOBAL SECTION SPACING v.054
   wyrównanie odstępów między sekcjami
   ========================================================= */

section{
  margin-top:10px !important;
  margin-bottom:10px !important;
}

.hero + section{
  margin-top:10px !important;
}


/* =========================================================
   CLEAN SPACING + DESKTOP HERO FIX v.058
   - porządkuje odstępy między sekcjami
   - usuwa dużą przerwę między hero a "Dzisiaj wjechało" na desktop
   - mobile zostaje praktycznie bez zmian
   ========================================================= */

/* globalne odstępy sekcji */
main > section{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* hero ma nie dokładać dodatkowej pustej przestrzeni */
.hero,
.hero--full{
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}

/* sekcja zaraz po hero */
.hero + section{
  margin-top: 10px !important;
}

/* desktop homepage: krótszy hero, bez ogromnej dziury pod layoutem */
@media (min-width: 981px){
  .hero--full{
    padding-bottom: 8px !important;
  }

  .hero--full .hero__grid--full{
    min-height: 560px !important;
  }

  .hero--full .hero__grid--full::after{
    height: 108px !important;
  }

  .hero--full .hero__copy{
    padding-top: 152px !important;
    padding-bottom: 88px !important;
  }

  .hero--full .hero__copy::before{
    bottom: 72px !important;
  }

  .hero--full .hero__copy::after{
    bottom: -6px !important;
  }

  .hero--full .hero__img{
    min-height: 560px !important;
  }
}


/* =========================================================
   DESKTOP HERO GAP FIX v.059
   - usuwa pustą przestrzeń między layoutem a sekcją "Dzisiaj wjechało"
   - tylko desktop
   ========================================================= */

@media (min-width: 981px){
  .hero{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
  }

  .hero--full{
    min-height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero--full .hero__grid--full{
    min-height: 0 !important;
  }

  .hero + section,
  .hero--full + section{
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
}

/* =========================================================
   BACK TO TOP + ARBUZIK CURSOR v.062
   - przycisk powrotu do góry
   - kursor arbuzikowy na desktop
   ========================================================= */

:root{
  --toTop-size: 68px;
  --toTop-bottom: 28px;
  --toTop-right: 22px;
}

@media (pointer:fine){
  html, body{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cg transform='translate(14 17) rotate(-18) translate(-14 -17)'%3E%3Cpath d='M14 1C20.2 7.2 24.2 14.1 24.2 20c0 7-4.6 12-10.2 12S3.8 27 3.8 20C3.8 14.1 7.8 7.2 14 1Z' fill='%231a1f27' stroke='%23ffd400' stroke-width='2.2'/%3E%3Cpath d='M14 3.9c5.1 5.3 8.1 10.9 8.1 15.8 0 5.8-3.6 9.9-8.1 9.9s-8.1-4.1-8.1-9.9c0-4.9 3-10.5 8.1-15.8Z' fill='%230c6b3e'/%3E%3Cpath d='M14 6.8c3.9 4.4 6.1 8.8 6.1 12.7 0 4.3-2.5 7.6-6.1 7.6s-6.1-3.3-6.1-7.6c0-3.9 2.2-8.3 6.1-12.7Z' fill='%231b1f24'/%3E%3Cpath d='M14 9.4c2.4 2.9 3.8 5.8 3.8 8.8 0 2.8-1.5 5.1-3.8 5.1s-3.8-2.3-3.8-5.1c0-3 1.4-5.9 3.8-8.8Z' fill='%232d3640'/%3E%3Cpath d='M14 1.8l3.4 5.5H10.6L14 1.8Z' fill='%23ef2424' stroke='%23ffd400' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 10 2, auto;
  }

  a,
  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .burger,
  .offerItem,
  .abzNav,
  .abzDot{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 30 36'%3E%3Cg transform='translate(15 18) rotate(-14) translate(-15 -18)'%3E%3Cpath d='M15 1.5C21.6 8.2 25.8 15.6 25.8 21.8 25.8 29.1 20.9 34 15 34S4.2 29.1 4.2 21.8C4.2 15.6 8.4 8.2 15 1.5Z' fill='%23131a22' stroke='%23ffd400' stroke-width='2.4'/%3E%3Cpath d='M15 4.2c5.2 5.5 8.3 11.2 8.3 16.4 0 5.9-3.7 10-8.3 10s-8.3-4.1-8.3-10c0-5.2 3.1-10.9 8.3-16.4Z' fill='%230b7d3b'/%3E%3Cpath d='M15 7c4 4.5 6.3 9.1 6.3 13.1 0 4.6-2.7 8-6.3 8s-6.3-3.4-6.3-8c0-4 2.3-8.6 6.3-13.1Z' fill='%23181c22'/%3E%3Cpath d='M15 1.9l3.7 5.9H11.3L15 1.9Z' fill='%23ef2424' stroke='%23ffd400' stroke-width='1.15'/%3E%3C/g%3E%3C/svg%3E") 11 2, pointer;
  }
}


}

/* ════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON — ARBUZIK v.068
   stabilizacja pozycji + płynne pojawianie
════════════════════════════════════════════ */

#arbuzik-top{
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
  inset: auto !important;
  z-index: 10030 !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(18px) scale(.88) !important;
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .32s cubic-bezier(.22,.9,.24,1.02) !important;
  will-change: opacity, transform;
}

#arbuzik-top.visible{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

#arbuzik-top .btn-ring-wrap{
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.22,.9,.24,1.02);
}

#arbuzik-top:hover .btn-ring-wrap{
  transform: translateY(-3px) scale(1.06);
}

#arbuzik-top .ring-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}

#arbuzik-top .ring-track{
  fill: none;
  stroke: rgba(var(--arbuzik-yellow-rgb),.24);
  stroke-width: 5;
}

#arbuzik-top .ring-progress{
  fill: none;
  stroke: var(--arbuzik-yellow);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 238;
  stroke-dashoffset: 238;
  transition: stroke-dashoffset .12s linear;
  filter: drop-shadow(0 0 5px rgba(var(--arbuzik-yellow-rgb),.6));
}

#arbuzik-top .btn-melon{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  transition: filter .28s ease, box-shadow .28s ease;
}

#arbuzik-top .btn-melon svg{
  width: 100%;
  height: 100%;
  display: block;
}

#arbuzik-top .melon-arrow{
  transition: transform .22s ease;
}

#arbuzik-top:hover .melon-arrow{
  animation: arbArrow .65s ease infinite;
}

@keyframes arbArrow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

#arbuzik-top.clicked .btn-melon{
  filter: brightness(1.08) saturate(1.08);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.92),
    0 0 20px 6px rgba(var(--arbuzik-yellow-rgb),.7),
    0 0 38px 10px rgba(45,184,112,.32);
}

#arbuzik-top.clicked .ring-progress{
  stroke: #fff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.92));
}

#arbuzik-top .arb-ripple-container{
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
  border-radius: 50%;
}

#arbuzik-top .arb-ripple{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  transform: scale(0);
  animation: arbRipple .65s ease-out forwards;
  pointer-events: none;
}

@keyframes arbRipple{
  to{
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (hover:hover) and (pointer:fine){
  #arbuzik-top::before{
    content: "Wróć na górę";
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #0c6b3e;
    color: var(--arbuzik-yellow);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 900;
    padding: .30rem .80rem;
    border-radius: 30px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
    letter-spacing: .04em;
  }

  #arbuzik-top:hover::before{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@media (max-width: 768px){
  #arbuzik-top{
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  #arbuzik-top .btn-ring-wrap{
    width: 62px;
    height: 62px;
  }
}


/* =========================================================
   HOME SECTIONS VISUAL UPGRADE — v.070
   Kierunek: spójność z hero + czytelniejsze tytuły + pełniejsze tła
   ========================================================= */

main{ overflow:hidden; }
main > .hero:not(.hero--full){
  isolation:isolate;
  padding: 58px 0 34px;
}

main > .hero:not(.hero--full)::before{
  content:"";
  position:absolute;
  z-index:0;
  inset: 8px clamp(10px, 2.3vw, 24px) 0;
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 22px 48px rgba(8, 36, 20, .14);
}

main > .hero:not(.hero--full) > .wrap{
  position:relative;
  z-index:1;
  padding: 28px clamp(18px, 2.9vw, 30px) 30px;
}

/* wspólne tło sekcji: brandowe, ale z różną siłą per sekcja */
#nowosci::before,
#oferta::before,
#boxiki-slider::before,
#boxiki::before,
#onas::before,
#mapa::before,
#kontakt::before{
  background:
    radial-gradient(circle at 79% 13%, rgba(var(--arbuzik-yellow-rgb),.28) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(420px 210px at 78% 14%, rgba(var(--arbuzik-yellow-rgb),.18), transparent 58%),
    linear-gradient(171deg, rgba(var(--arbuzik-yellow-rgb),.94) 0 7%, transparent 7.3% 100%),
    linear-gradient(10deg, rgba(239,46,40,.92) 0 9%, transparent 9.3% 100%),
    linear-gradient(180deg, #13884a 0%, #0d733f 30%, #f8f4ec 30.5%, #f8f4ec 100%);
}

/* mocne wejście zaraz po hero */
#nowosci::before{
  background:
    radial-gradient(circle at 82% 16%, rgba(var(--arbuzik-yellow-rgb),.34) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(460px 230px at 80% 16%, rgba(var(--arbuzik-yellow-rgb),.24), transparent 58%),
    radial-gradient(420px 200px at 14% 100%, rgba(12,107,62,.16), transparent 65%),
    linear-gradient(171deg, rgba(var(--arbuzik-yellow-rgb),.96) 0 8%, transparent 8.3% 100%),
    linear-gradient(10deg, rgba(239,46,40,.93) 0 10%, transparent 10.3% 100%),
    linear-gradient(180deg, #138c4d 0%, #0e7440 40%, #edf5eb 40.5%, #f8f4ec 100%);
}

/* oferta dostaje lżejszy, ale widoczny pas hero */
#oferta::before{
  background:
    radial-gradient(circle at 78% 15%, rgba(var(--arbuzik-yellow-rgb),.25) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(380px 190px at 78% 15%, rgba(var(--arbuzik-yellow-rgb),.17), transparent 56%),
    linear-gradient(175deg, rgba(var(--arbuzik-yellow-rgb),.88) 0 6%, transparent 6.3% 100%),
    linear-gradient(7deg, rgba(239,46,40,.84) 0 7%, transparent 7.3% 100%),
    linear-gradient(180deg, #127f45 0%, #0d713f 24%, #f3f6ed 24.5%, #f8f4ec 100%);
}

/* slider abonamentowy bardziej premium, ale dalej spójny z hero */
#boxiki-slider::before{
  background:
    radial-gradient(circle at 79% 13%, rgba(var(--arbuzik-yellow-rgb),.28) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(430px 190px at 79% 14%, rgba(var(--arbuzik-yellow-rgb),.18), transparent 58%),
    linear-gradient(171deg, rgba(var(--arbuzik-yellow-rgb),.92) 0 7%, transparent 7.3% 100%),
    linear-gradient(10deg, rgba(239,46,40,.92) 0 9%, transparent 9.3% 100%),
    linear-gradient(180deg, #13884a 0%, #0d733f 32%, #eef4eb 32.5%, #f8f4ec 100%);
}

/* mocniejsza sekcja boxików kartowych */
#boxiki::before{
  background:
    radial-gradient(circle at 79% 13%, rgba(var(--arbuzik-yellow-rgb),.24) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(420px 180px at 78% 14%, rgba(var(--arbuzik-yellow-rgb),.17), transparent 58%),
    linear-gradient(180deg, rgba(var(--arbuzik-yellow-rgb),.09), rgba(var(--arbuzik-yellow-rgb),0) 40%),
    linear-gradient(180deg, #128246 0%, #0d733f 0%, #11713d 100%);
}

/* o nas dostaje własny brandowy pas, ale bardziej editorial niż krzykliwy */
#onas::before{
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--arbuzik-yellow-rgb),.18) 0 2px, transparent 3px) 0 0/20px 20px,
    radial-gradient(360px 180px at 22% 14%, rgba(var(--arbuzik-yellow-rgb),.12), transparent 56%),
    radial-gradient(460px 220px at 100% 100%, rgba(12,107,62,.12), transparent 64%),
    linear-gradient(173deg, rgba(var(--arbuzik-yellow-rgb),.84) 0 5.5%, transparent 5.8% 100%),
    linear-gradient(8deg, rgba(239,46,40,.78) 0 6.5%, transparent 6.8% 100%),
    linear-gradient(180deg, #127b43 0%, #0d6f3d 25%, #eef5ea 25.5%, #f8f4ec 100%);
}

/* sekcje użytkowe dostają trochę więcej jasnej powierzchni, ale nadal z hero-motywem */
#mapa::before,
#kontakt::before{
  background:
    radial-gradient(circle at 84% 14%, rgba(var(--arbuzik-yellow-rgb),.22) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(360px 170px at 82% 14%, rgba(var(--arbuzik-yellow-rgb),.16), transparent 56%),
    linear-gradient(173deg, rgba(var(--arbuzik-yellow-rgb),.92) 0 6%, transparent 6.3% 100%),
    linear-gradient(8deg, rgba(239,46,40,.88) 0 7%, transparent 7.3% 100%),
    linear-gradient(180deg, #127842 0%, #0d6e3d 24%, #f8f4ec 24.5%, #f8f4ec 100%);
}



/* dodatkowe akcenty, żeby różnice były faktycznie widoczne na stronie */
#nowosci > .wrap,
#oferta > .wrap,
#onas > .wrap,
#mapa > .wrap,
#kontakt > .wrap{
  border-radius: 28px;
}

#nowosci > .wrap{
  background:
    linear-gradient(180deg, rgba(19,128,69,.10) 0%, rgba(19,128,69,0) 42%),
    radial-gradient(260px 120px at 86% 12%, rgba(var(--arbuzik-yellow-rgb),.10), transparent 60%);
}

#oferta > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%);
}

#onas > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 36%),
    radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%);
}

#mapa > .wrap,
#kontakt > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.05) 0%, rgba(18,123,67,0) 28%);
}

#nowosci .sec__hd,
#oferta .sec__hd,
#boxiki-slider .sec__hd,
#boxiki .sec__hd,
#onas .sec__hd,
#mapa .sec__hd,
#kontakt .sec__hd{
  margin-bottom: 18px;
}

/* jeden spójny kolor tytułów sekcji */
#nowosci .secTitle,
#oferta .secTitle,
#boxiki-slider .secTitle,
#boxiki .secTitle,
#onas .secTitle,
#mapa .secTitle,
#kontakt .secTitle{
  color:#104929;
  font-size: clamp(28px, 3.4vw, 40px);
  text-shadow: none;
}

#nowosci .sec__hd .muted,
#oferta .sec__hd .muted,
#boxiki-slider .sec__hd .muted,
#boxiki .sec__hd .muted,
#onas .sec__hd .muted,
#mapa .sec__hd .muted,
#kontakt .sec__hd .muted{
  color: rgba(16,62,39,.74);
}

#nowosci .secTitle::before,
#oferta .secTitle::before,
#boxiki-slider .secTitle::before,
#boxiki .secTitle::before,
#onas .secTitle::before,
#mapa .secTitle::before,
#kontakt .secTitle::before{
  display:block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:#0d6b3b;
}
#nowosci .secTitle::before{ content:"Świeża dostawa"; }
#oferta .secTitle::before{ content:"Codziennie w Arbuziku"; }
#boxiki-slider .secTitle::before{ content:"Wygoda bez kompromisów"; }
#boxiki .secTitle::before{ content:"Boxiki na dziś i na tydzień"; }
#onas .secTitle::before{ content:"Lokalny sklep, któremu się ufa"; }
#mapa .secTitle::before{ content:"Blisko, wygodnie, po drodze"; }
#kontakt .secTitle::before{ content:"Napisz lub zadzwoń"; }

#nowosci .secTitle > span::after,
#oferta .secTitle > span::after,
#boxiki-slider .secTitle > span::after,
#boxiki .secTitle > span::after,
#onas .secTitle > span::after,
#mapa .secTitle > span::after,
#kontakt .secTitle > span::after{
  background: var(--arbuzik-yellow);
  height: 11px;
  bottom: -7px;
  left: -8px;
  right: 4px;
  opacity: .98;
}

#nowosci #todayCards,
#oferta .grid,
#boxiki .grid,
#onas .grid,
#kontakt .grid,
#mapa .loc__grid{
  position:relative;
  z-index:1;
}

#nowosci .today__card,
#oferta .card,
#boxiki .card,
#onas .onas__card,
#mapa .loc__card,
#mapa .loc__mapCard,
#kontakt .card,
#boxiki-slider .abzSlider{
  border-radius: 24px;
  border: 1px solid rgba(10, 40, 24, .08);
  box-shadow: 0 18px 36px rgba(8, 34, 20, .16);
}

#nowosci .today__card,
#oferta .card,
#boxiki .card,
#onas .onas__card,
#mapa .loc__card,
#mapa .loc__mapCard,
#kontakt .card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,247,240,.96));
}

#oferta .grid{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
#oferta .card{
  position:relative;
  overflow:hidden;
  min-height: 220px;
  padding: 24px 20px 20px;
}
#oferta .card::before{
  content:"";
  position:absolute;
  inset:auto -42px -42px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--arbuzik-yellow-rgb),.20) 0%, rgba(var(--arbuzik-yellow-rgb),0) 68%);
}
#oferta .card::after{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width: 58px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--arbuzik-yellow), #ffd13a);
  box-shadow: 0 0 0 4px rgba(var(--arbuzik-yellow-rgb),.12);
}
#oferta .card h3{
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.08;
  color:#0b4f2d;
}
#oferta .card .muted{
  color: rgba(16,62,39,.72);
  line-height: 1.55;
}

#nowosci .today__card{
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,246,238,.94));
  border-color: rgba(18,82,46,.10);
  box-shadow: 0 18px 34px rgba(9,44,24,.18);
}
#nowosci .today__overlay{
  background: rgba(255,255,255,.90);
  border-radius: 18px;
}
#nowosci .today__badge{
  background: rgba(var(--arbuzik-yellow-rgb),.26);
  border-color: rgba(var(--arbuzik-yellow-rgb),.44);
  color: #0c6b3e;
}

#boxiki-slider .abzSlider{
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,247,240,.97));
}
#boxiki-slider .abzSlider::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(320px 160px at 12% 100%, rgba(229,57,53,.10), transparent 60%),
    radial-gradient(280px 140px at 90% 0%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%);
}

#boxiki .wrap{ padding-bottom: 34px; }
#boxiki .secTitle,
#boxiki .sec__hd .muted,
#boxiki .secTitle::before{ color:#fff; }
#boxiki .card--bg{
  min-height: 240px;
  border-radius: 26px;
  overflow:hidden;
}
#boxiki .card--bg::after{
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.20) 56%, rgba(0,0,0,.42) 100%);
}
#boxiki .card--bg .card__content{ padding: 18px; }
#boxiki .card--bg .card__title{ font-size: 24px; line-height: 1.06; }
#boxiki .card--bg .tag{
  background: rgba(255,255,255,.82);
  color:#0b5d34;
  border-color: rgba(255,255,255,.48);
}

#onas .onas{ gap: 18px; }
#onas .onas__card{
  padding: 24px 22px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,245,236,.96));
  border-color: rgba(18,82,46,.10);
  box-shadow: 0 18px 36px rgba(9,44,24,.14);
}
#onas .onas__card::before{
  width: 220px;
  height: 220px;
  opacity: .22;
  background:
    radial-gradient(circle at 40% 36%, rgba(var(--arbuzik-yellow-rgb),.34) 0%, rgba(var(--arbuzik-yellow-rgb),0) 55%),
    radial-gradient(circle at 70% 68%, rgba(12,107,62,.18) 0%, rgba(12,107,62,0) 58%);
}
#onas .onas__badge{
  background: rgba(12,107,62,.08);
  border-color: rgba(12,107,62,.14);
  color:#0b5d34;
}
#onas .onas__lead,
#onas .onas__body p,
#onas .onas__note,
#onas .onas__quote,
#onas .chip{ color: rgba(16,62,39,.76); }

#mapa .loc__card,
#mapa .loc__mapCard,
#kontakt .card{
  border-color: rgba(18,82,46,.10);
  box-shadow: 0 18px 34px rgba(9,44,24,.14);
}

#mapa .loc__badge{
  background: rgba(var(--arbuzik-yellow-rgb),.18);
  color:#0c6b3e;
  border:1px solid rgba(var(--arbuzik-yellow-rgb),.36);
}
#mapa .loc__mapWrap{ border-radius: 22px; overflow:hidden; }
#kontakt .form label{ color:#0f3f28; font-weight:700; }
#kontakt .form input,
#kontakt .form textarea{ background:#fffdfa; }

/* footer też domknięty bardziej w języku hero */
.ftr{
  background:
    radial-gradient(circle at 88% 72%, rgba(var(--arbuzik-yellow-deep-rgb),.22) 0 3px, transparent 4px) 0 0 / 20px 20px,
    radial-gradient(760px 280px at 22% 12%, rgba(var(--arbuzik-yellow-deep-rgb),.16), transparent 56%),
    linear-gradient(171deg, rgba(var(--arbuzik-yellow-deep-rgb),.96) 0 6%, transparent 6.3% 100%),
    linear-gradient(8deg, rgba(239,46,40,.92) 0 8%, transparent 8.3% 100%),
    linear-gradient(180deg, #0a7137 0%, #07582b 100%) !important;
}

@media (max-width: 960px){
  main > .hero:not(.hero--full){ padding: 52px 0 28px; }
  main > .hero:not(.hero--full) > .wrap{ padding: 22px 18px 24px; }
  #oferta .grid{ grid-template-columns: 1fr; }
  #oferta .card{ min-height: 190px; }
}

@media (max-width: 640px){
  main > .hero:not(.hero--full)::before{
    inset: 8px 10px 0;
    border-radius: 26px;
  }
  main > .hero:not(.hero--full) > .wrap{ padding: 20px 14px 22px; }
  #nowosci .secTitle,
  #oferta .secTitle,
  #boxiki-slider .secTitle,
  #boxiki .secTitle,
  #onas .secTitle,
  #mapa .secTitle,
  #kontakt .secTitle{ font-size: 32px; }
  #oferta .card,
  #nowosci .today__card,
  #boxiki .card--bg,
  #onas .onas__card,
  #mapa .loc__card,
  #mapa .loc__mapCard,
  #kontakt .card,
  #boxiki-slider .abzSlider{ border-radius: 22px; }
}

/* WERSJA PLIKU v.073 */
/* BOXIKI W ABONAMENCIE — mocniejsze tło sekcji w stylu hero */

#boxiki-slider{
  position: relative;
  isolation: isolate;
  padding: 62px 0 42px;
}

#boxiki-slider::before{
  content:"";
  position:absolute;
  z-index:0;
  inset: 8px clamp(10px, 2.3vw, 24px) 0;
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 22px 48px rgba(8, 36, 20, .14);
  background:
    radial-gradient(circle at 82% 16%, rgba(var(--arbuzik-yellow-rgb),.30) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(430px 220px at 82% 16%, rgba(var(--arbuzik-yellow-rgb),.20), transparent 58%),
    linear-gradient(172deg, rgba(var(--arbuzik-yellow-rgb),.95) 0 7%, transparent 7.3% 100%),
    linear-gradient(8deg, rgba(239,46,40,.90) 0 9%, transparent 9.3% 100%),
    linear-gradient(180deg, #13884a 0%, #0d733f 34%, #f5f6ef 34.5%, #f8f4ec 100%);
}

#boxiki-slider > .wrap{
  position: relative;
  z-index: 1;
  padding: 28px clamp(18px, 2.9vw, 30px) 30px;
}

#boxiki-slider .secTitle{
  color:#104929;
}

#boxiki-slider .sec__hd .muted{
  color: rgba(16,62,39,.78);
}

#boxiki-slider .abzSlider{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(10,40,24,.08);
  box-shadow: 0 18px 36px rgba(8,34,20,.16);
  background:
    radial-gradient(320px 160px at 12% 100%, rgba(229,57,53,.10), transparent 60%),
    radial-gradient(280px 140px at 90% 0%, rgba(var(--arbuzik-yellow-rgb),.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(250,247,240,.97));
}

/* WERSJA PLIKU v.076 */
/* BOXIKI W ABONAMENCIE — lżejsze tło sekcyjne jak Oferta / Dzisiaj wjechało */
#boxiki-slider{
  position: relative;
  isolation: isolate;
  padding: 58px 0 34px !important;
}

#boxiki-slider::before{
  content:"";
  position:absolute;
  z-index:0;
  inset: 8px clamp(10px, 2.3vw, 24px) 0 !important;
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 22px 48px rgba(8, 36, 20, .14);
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%),
    linear-gradient(180deg, #f3f6ed 0%, #f8f4ec 100%) !important;
}

#boxiki-slider > .wrap{
  position: relative;
  z-index: 1;
  padding: 28px clamp(18px, 2.9vw, 30px) 30px !important;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%) !important;
}

#boxiki-slider .secTitle{
  color:#104929 !important;
}

#boxiki-slider .sec__hd .muted{
  color: rgba(16,62,39,.74) !important;
}

#boxiki-slider .abzSlider{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(10,40,24,.08);
  box-shadow: 0 18px 36px rgba(8,34,20,.16);
  background:
    radial-gradient(320px 160px at 12% 100%, rgba(229,57,53,.06), transparent 60%),
    radial-gradient(280px 140px at 90% 0%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,240,.98)) !important;
}

@media (max-width: 640px){
  #boxiki-slider{ padding: 52px 0 28px !important; }
  #boxiki-slider::before{ inset: 8px 10px 0 !important; border-radius: 26px; }
  #boxiki-slider > .wrap{ padding: 20px 14px 22px !important; }
}


/* =========================================================
   BOXIKI PAGE SECTION POLISH v.079
   - sekcje poniżej hero w tym samym języku co homepage
   ========================================================= */
body[data-page="boxiki"] main > section.sec:not(#abonament){
  padding: 26px 0 !important;
}

body[data-page="boxiki"] #abonament .bxPanel,
body[data-page="boxiki"] #boxiki > .wrap,
body[data-page="boxiki"] #zamow > .wrap,
body[data-page="boxiki"] #moje > .wrap{
  position: relative;
  z-index: 1;
  padding: 26px clamp(18px, 2.8vw, 30px) 28px;
  border-radius: 30px;
  border: 1px solid rgba(10,40,24,.08);
  box-shadow: 0 18px 36px rgba(8,34,20,.12);
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,236,.96));
}

body[data-page="boxiki"] #offerPanel{
  background:
    linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,236,.96));
}

body[data-page="boxiki"] #zamow > .wrap,
body[data-page="boxiki"] #moje > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.05) 0%, rgba(18,123,67,0) 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,236,.96));
}

body[data-page="boxiki"] #abonament .bxPanel .sec__hd,
body[data-page="boxiki"] #boxiki .sec__hd,
body[data-page="boxiki"] #zamow .sec__hd,
body[data-page="boxiki"] #moje .sec__hd{
  margin-bottom: 18px;
}

body[data-page="boxiki"] #abonament .secTitle,
body[data-page="boxiki"] #boxiki .secTitle,
body[data-page="boxiki"] #zamow .secTitle,
body[data-page="boxiki"] #moje .secTitle{
  color: #104929;
  font-size: clamp(28px, 3.4vw, 40px);
  text-shadow: none;
}

body[data-page="boxiki"] #abonament .sec__hd .muted,
body[data-page="boxiki"] #boxiki .sec__hd .muted,
body[data-page="boxiki"] #zamow .sec__hd .muted,
body[data-page="boxiki"] #moje .sec__hd .muted{
  color: rgba(16,62,39,.74);
}

body[data-page="boxiki"] #jakto.secTitle::before,
body[data-page="boxiki"] #faq.secTitle::before{ display:none; }

body[data-page="boxiki"] #jakto.secTitle,
body[data-page="boxiki"] #faq.secTitle{ color:#104929; }

body[data-page="boxiki"] #jakto,
body[data-page="boxiki"] #faq{ scroll-margin-top: 100px; }

body[data-page="boxiki"] #jakto.secTitle > span::after,
body[data-page="boxiki"] #faq.secTitle > span::after{ background: var(--arbuzik-yellow); }

body[data-page="boxiki"] #abonament .secTitle::before,
body[data-page="boxiki"] #boxiki .secTitle::before,
body[data-page="boxiki"] #zamow .secTitle::before,
body[data-page="boxiki"] #moje .secTitle::before{
  display:block;
  margin-bottom:12px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#0d6b3b;
}

body[data-page="boxiki"] #jakto .secTitle::before{ content:"Abonament bez kombinowania"; }
body[data-page="boxiki"] #abonament .bxPanel:nth-of-type(2) .secTitle::before{ content:"Porównanie wariantów"; }
body[data-page="boxiki"] #offerPanel .secTitle::before{ content:"Dopasuj boxik do siebie"; }
body[data-page="boxiki"] #faq .secTitle::before{ content:"Ważne odpowiedzi"; }
body[data-page="boxiki"] #boxiki .secTitle::before{ content:"Na dziś i na tydzień"; }
body[data-page="boxiki"] #zamow .secTitle::before{ content:"Finalizacja zamówienia"; }
body[data-page="boxiki"] #moje .secTitle::before{ content:"Twoja historia"; }

body[data-page="boxiki"] #abonament .bxPanel .card,
body[data-page="boxiki"] #zamow .card,
body[data-page="boxiki"] #moje .card{
  border-radius: 24px;
  border: 1px solid rgba(10, 40, 24, .08);
  box-shadow: 0 18px 36px rgba(8,34,20,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,247,240,.96));
}

body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--2,
body[data-page="boxiki"] #zamow .grid,
body[data-page="boxiki"] #moje .grid{
  position: relative;
  z-index: 1;
}

body[data-page="boxiki"] #jakto + .grid .card,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4 .card{
  position: relative;
  overflow: hidden;
  padding: 20px 18px 18px;
}

body[data-page="boxiki"] #jakto + .grid .card::after,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4 .card::after,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--2 .card::after,
body[data-page="boxiki"] #zamow .card::after,
body[data-page="boxiki"] #moje .card::after{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width:58px;
  height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--arbuzik-yellow), #ffd13a);
  box-shadow: 0 0 0 4px rgba(var(--arbuzik-yellow-rgb),.12);
}

body[data-page="boxiki"] #jakto + .grid .card h3,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4 .card h3,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--2 .card h3,
body[data-page="boxiki"] #zamow .card h3,
body[data-page="boxiki"] #moje .card h3{
  margin-top: 18px;
  color:#0b4f2d;
}

body[data-page="boxiki"] #boxiki > .wrap{
  padding-bottom: 34px;
}

body[data-page="boxiki"] #boxiki .secTitle,
body[data-page="boxiki"] #boxiki .sec__hd .muted,
body[data-page="boxiki"] #boxiki .secTitle::before{
  color:#fff;
}

body[data-page="boxiki"] #boxiki .card--bg{
  min-height: 240px;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(10,40,24,.08);
  box-shadow: 0 18px 36px rgba(8,34,20,.16);
}

body[data-page="boxiki"] #boxiki .card--bg::after{
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.20) 56%, rgba(0,0,0,.42) 100%);
}

body[data-page="boxiki"] #boxiki .card--bg .tag{
  background: rgba(255,255,255,.82);
  color:#0b5d34;
  border-color: rgba(255,255,255,.48);
}

@media (max-width: 960px){
  body[data-page="boxiki"] main > section.sec:not(#abonament){ padding: 22px 0 !important; }
  body[data-page="boxiki"] #abonament .bxPanel,
  body[data-page="boxiki"] #boxiki > .wrap,
  body[data-page="boxiki"] #zamow > .wrap,
  body[data-page="boxiki"] #moje > .wrap{
    padding: 22px 18px 24px;
    border-radius: 24px;
  }
  body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4{ grid-template-columns: 1fr !important; }
}


/* WERSJA PLIKU v.079 */
/* BOXIKI PAGE — final polish: hero-style cards section + bez żółtych kresek w panelach */

/* usuń krótkie żółte kreski z paneli na /boxiki/ */
body[data-page="boxiki"] #jakto + .grid .card::after,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4 .card::after,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--2 .card::after,
body[data-page="boxiki"] #zamow .card::after,
body[data-page="boxiki"] #moje .card::after,
body[data-page="boxiki"] #faq .card::after,
body[data-page="boxiki"] #offerPanel .card::after{
  display:none !important;
  content:none !important;
}

body[data-page="boxiki"] #jakto + .grid .card h3,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4 .card h3,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--2 .card h3,
body[data-page="boxiki"] #zamow .card h3,
body[data-page="boxiki"] #moje .card h3,
body[data-page="boxiki"] #faq .card h3{
  margin-top:0 !important;
}

/* sekcja Boxiki Arbuzika na /boxiki/ ma wyglądać jak na homepage */
body[data-page="boxiki"] section#boxiki{
  position:relative;
  isolation:isolate;
  padding: 34px 0 30px !important;
}

body[data-page="boxiki"] section#boxiki::before{
  content:"";
  position:absolute;
  z-index:0;
  inset: 0 clamp(10px, 2.3vw, 24px) 0;
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 22px 48px rgba(8,36,20,.14);
  background:
    radial-gradient(circle at 79% 13%, rgba(var(--arbuzik-yellow-rgb),.24) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(420px 180px at 78% 14%, rgba(var(--arbuzik-yellow-rgb),.17), transparent 58%),
    linear-gradient(180deg, rgba(var(--arbuzik-yellow-rgb),.09), rgba(var(--arbuzik-yellow-rgb),0) 40%),
    linear-gradient(180deg, #128246 0%, #0d733f 0%, #11713d 100%);
}

body[data-page="boxiki"] section#boxiki > .wrap{
  position:relative;
  z-index:1;
  padding: 26px clamp(18px, 2.8vw, 30px) 30px;
  border-radius: 30px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="boxiki"] section#boxiki .sec__hd{
  margin-bottom:18px;
}

body[data-page="boxiki"] section#boxiki .secTitle,
body[data-page="boxiki"] section#boxiki .sec__hd .muted,
body[data-page="boxiki"] section#boxiki .secTitle::before{
  color:#fff !important;
}

body[data-page="boxiki"] section#boxiki .secTitle > span::after{
  background: var(--arbuzik-yellow);
}

body[data-page="boxiki"] section#boxiki .grid{
  position:relative;
  z-index:1;
}

body[data-page="boxiki"] section#boxiki .card--bg{
  min-height:240px;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 36px rgba(8,34,20,.16);
}

body[data-page="boxiki"] section#boxiki .card--bg::after{
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.20) 56%, rgba(0,0,0,.42) 100%);
}

body[data-page="boxiki"] section#boxiki .card--bg .tag{
  background: rgba(255,255,255,.82);
  color:#0b5d34;
  border-color: rgba(255,255,255,.48);
}

/* zachowaj spokojniejszy styl sekcji abonamentu */
body[data-page="boxiki"] #abonament .bxPanel{
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,236,.96)) !important;
}

@media (max-width: 960px){
  body[data-page="boxiki"] section#boxiki{ padding: 24px 0 22px !important; }
  body[data-page="boxiki"] section#boxiki::before{ inset: 0 10px 0; border-radius:24px; }
  body[data-page="boxiki"] section#boxiki > .wrap{ padding: 22px 18px 24px; border-radius:24px; }
}


/* WERSJA PLIKU v.080 */
/* BOXIKI PAGE — sekcyjne wrapy lżejsze jak na homepage */
body[data-page="boxiki"] #abonament .bxPanel,
body[data-page="boxiki"] #zamow > .wrap,
body[data-page="boxiki"] #moje > .wrap{
  border: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,0) 26%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.06), transparent 60%) !important;
}

body[data-page="boxiki"] #abonament .bxPanel{
  border-radius: 28px !important;
  padding: 22px clamp(18px, 2.8vw, 30px) 24px !important;
}

body[data-page="boxiki"] #zamow > .wrap,
body[data-page="boxiki"] #moje > .wrap{
  border-radius: 28px !important;
  padding: 24px clamp(18px, 2.8vw, 30px) 26px !important;
}

body[data-page="boxiki"] #abonament .bxPanel .sec__hd,
body[data-page="boxiki"] #zamow .sec__hd,
body[data-page="boxiki"] #moje .sec__hd{
  margin-bottom: 14px !important;
}

body[data-page="boxiki"] #abonament .bxPanel .grid.grid--4,
body[data-page="boxiki"] #abonament .bxPanel .grid.grid--2,
body[data-page="boxiki"] #zamow .grid,
body[data-page="boxiki"] #moje .grid{
  gap: 14px;
}

@media (max-width: 900px){
  body[data-page="boxiki"] #abonament .bxPanel,
  body[data-page="boxiki"] #zamow > .wrap,
  body[data-page="boxiki"] #moje > .wrap{
    padding: 18px 14px 20px !important;
  }
}

/* =========================================================
   SOCIAL MEDIA PREMIUM v.090
   ========================================================= */

.social{
  position: relative;
  padding: 38px 0 10px !important;
  margin-top: 8px !important;
}

.social .wrap{
  position: relative;
  z-index: 1;
}

.social__panel{
  position: relative;
  overflow: hidden;
  padding: 34px 24px 36px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(380px 180px at 18% 100%, rgba(229,57,53,.08), transparent 62%),
    radial-gradient(280px 140px at 82% 8%, rgba(var(--arbuzik-yellow-rgb),.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,240,.98));
  border: 1px solid rgba(10,40,24,.08);
  box-shadow: 0 20px 42px rgba(8,34,20,.14);
}

.social__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 16%, rgba(var(--arbuzik-yellow-rgb),.18) 0 2px, transparent 3px) 0 0/18px 18px;
  opacity:.42;
}

.social__eyebrow{
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0d6b3b;
}

.social__title{
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.02;
  font-weight: 950;
  color: #104929;
}

.social__desc{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 26px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(16,62,39,.76);
}

.social__icons{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap: 18px;
  margin-bottom: 22px;
}

.social__icon{
  position: relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  width: 126px;
  min-height: 126px;
  padding: 18px 12px 16px;
  border-radius: 28px;
  text-decoration:none !important;
  color:#fff !important;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 16px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.social__icon::before{
  content:"";
  position:absolute;
  top:-140%;
  left:-38%;
  width:34%;
  height:380%;
  transform: rotate(24deg) translateX(-220%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,.12) 65%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index:2;
  transition: transform .72s ease;
}

.social__icon:hover::before{
  transform: rotate(24deg) translateX(540%);
}

.social__icon:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 24px 44px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.social__icon svg{
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  display:block;
}

.social__label{
  position: relative;
  z-index: 1;
  display:block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
}

.social__soon{
  position: relative;
  z-index: 1;
  display:inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
}

.social__ig{
  background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #8134af);
}

.social__fb{
  background: linear-gradient(135deg, #1877f2, #0b57d0);
}

.social__tt{
  background: linear-gradient(135deg, #121212, #000000);
}

.social__icon--disabled{
  opacity: .88;
}

.social__icon--disabled:hover{
  transform: translateY(-3px) scale(1.01);
}

.social__sub{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(16,62,39,.72);
}

@media (max-width: 760px){
  .social{
    padding: 24px 0 6px !important;
  }

  .social__panel{
    padding: 24px 16px 26px;
    border-radius: 24px;
  }

  .social__title{
    font-size: 34px;
  }

  .social__desc{
    font-size: 16px;
    margin-bottom: 20px;
  }

  .social__icons{
    gap: 12px;
  }

  .social__icon{
    width: calc(33.333% - 8px);
    min-width: 96px;
    min-height: 104px;
    border-radius: 22px;
    padding: 16px 10px 14px;
  }

  .social__icon svg{
    width: 32px;
    height: 32px;
  }

  .social__label{
    font-size: 13px;
  }

  .social__sub{
    font-size: 14px;
  }
}

@media (max-width: 560px){
  .social__icons{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .social__icon{
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   AUTH MODAL ARBUZIK PREMIUM v.093
   działa na stronie głównej i na boxikach
   ========================================================= */

.modal{
  padding: 18px;
  background: rgba(6, 33, 18, .58);
  backdrop-filter: blur(8px) saturate(120%);
}

.modal__box.logPanel{
  position: relative;
  width: min(100%, 430px);
  max-width: 430px;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.42);
  background:
    radial-gradient(340px 180px at 88% -8%, rgba(var(--arbuzik-yellow-rgb),.16), transparent 55%),
    radial-gradient(280px 180px at -8% 112%, rgba(229,57,53,.10), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,245,238,.985));
  box-shadow:
    0 34px 80px rgba(7, 40, 22, .30),
    0 10px 22px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.modal__box.logPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 84% 14%, rgba(var(--arbuzik-yellow-rgb),.22) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 14% 84%, rgba(12,107,62,.08) 0 1.6px, transparent 2.6px) 0 0/22px 22px;
  opacity:.36;
}


.logPanel__header{
  position: relative;
  z-index: 1;
  padding: 0 22px 18px;
  text-align: center;
}

.logPanel__headerBg{
  position:absolute;
  left:0;
  top:0;
  right:0;
  height: 146px;
  border-radius: 28px 28px 30px 30px;
  background:
    radial-gradient(220px 90px at 18% 8%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #11824a 0%, #0c6b3e 58%, #095730 100%);
  overflow:hidden;
}

.logPanel__headerBg::before{
  content:"";
  position:absolute;
  left:-5%;
  right:32%;
  bottom: 14px;
  height: 16px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--arbuzik-yellow-deep), var(--arbuzik-yellow));
  transform: rotate(-5deg);
}

.logPanel__headerBg::after{
  content:"";
  position:absolute;
  right:-7%;
  bottom: 0;
  width: 42%;
  height: 68px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #d92f2f, #bb1f24);
  transform: rotate(-5deg);
}

.logPanel__brand{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  margin: 10px 0 10px;
}

.logPanel__logo{
  display:block;
  height: 72px;
  width:auto;
  max-width: 198px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
}

.logPanel__title{
  position: relative;
  z-index: 1;
  margin: 2px 0 8px;
  font-size: 24px;
  line-height: 1.06;
  font-weight: 950;
  color: #113d25;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.logPanel__lead{
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 31ch;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(18,62,37,.78);
}

.authTabs{
  position: relative;
  z-index: 1;
  display:flex !important;
  justify-content:center;
  gap:8px !important;
  flex-wrap:wrap;
  padding: 2px 22px 0;
  margin: 0;
}

.authTabs .btn{
  min-width: 128px;
  min-height: 42px;
  border-radius: 999px !important;
  border: 1px solid rgba(12,107,62,.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,242,235,.98)) !important;
  color: #123e25 !important;
  font-weight: 950 !important;
  box-shadow:
    0 8px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.52);
}

.authTabs .btn.is-active{
  background: linear-gradient(180deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
  color: #123e25 !important;
  border-color: rgba(var(--arbuzik-yellow-deep-rgb),.95) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}

.logPanel__body{
  position: relative;
  z-index: 1;
  display:grid;
  gap: 12px;
  padding: 16px 22px 0;
}

.authField{
  position: relative;
}

.authField::before{
  content:"";
  position:absolute;
  left: 16px;
  top: 25px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: .62;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.authField--name::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230c6b3e' d='M12 12a4.2 4.2 0 1 0 0-8.4a4.2 4.2 0 0 0 0 8.4Zm0 2.1c-4.22 0-7.65 2.23-7.65 4.98c0 .55.45 1 1 1h13.3a1 1 0 0 0 1-1c0-2.75-3.43-4.98-7.65-4.98Z'/%3E%3C/svg%3E");
}

.authField--email::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230c6b3e' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Zm1.88-.44l6.12 4.74l6.12-4.74A.7.7 0 0 0 17.5 5h-11a.7.7 0 0 0-.62 1.06Zm12.32 2.18l-5.59 4.33a1 1 0 0 1-1.22 0L5.8 8.24V17.5c0 .39.31.7.7.7h11a.7.7 0 0 0 .7-.7V8.24Z'/%3E%3C/svg%3E");
}

.authField--pass::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230c6b3e' d='M12 2.9a4.7 4.7 0 0 0-4.7 4.7V10H6.4A2.4 2.4 0 0 0 4 12.4v6.2A2.4 2.4 0 0 0 6.4 21h11.2a2.4 2.4 0 0 0 2.4-2.4v-6.2A2.4 2.4 0 0 0 17.6 10h-.9V7.6A4.7 4.7 0 0 0 12 2.9Zm-2.9 4.7a2.9 2.9 0 0 1 5.8 0V10H9.1V7.6Z'/%3E%3C/svg%3E");
}

.authField--stack{
  display:grid;
  gap:8px;
}

#regName,
#loginEmail,
#loginPass{
  width: 100%;
  min-height: 52px;
  padding: 14px 16px 14px 46px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(12,107,62,.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,245,239,.99));
  box-shadow:
    0 8px 16px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.72);
  color: #173922;
  font-size: 15px;
  font-weight: 700;
}

#regName::placeholder,
#loginEmail::placeholder,
#loginPass::placeholder{
  color: rgba(23,57,34,.46);
}

#regName:focus,
#loginEmail:focus,
#loginPass:focus{
  border-color: rgba(12,107,62,.58) !important;
  box-shadow:
    0 0 0 4px rgba(12,107,62,.10),
    0 10px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.linklike{
  display:inline-block;
  margin-top: 0 !important;
  padding-left: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: #0c6b3e;
  text-decoration-color: rgba(var(--arbuzik-yellow-deep-rgb),.95);
}

.logPanel__actions{
  position: relative;
  z-index: 1;
  gap: 10px;
  padding: 18px 22px 8px;
  margin-top: 2px;
}

#doLogin.btn.btn--solid{
  min-height: 54px;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(120px 56px at 88% 50%, rgba(var(--arbuzik-yellow-rgb),.30), transparent 60%),
    linear-gradient(180deg, #0f7b45 0%, #0c6b3e 58%, #0a5e36 100%) !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 950 !important;
  letter-spacing: .01em;
  box-shadow:
    0 16px 30px rgba(7,59,34,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#doLogin.btn.btn--solid:hover{
  transform: translateY(-2px);
  box-shadow:
    0 20px 34px rgba(7,59,34,.32),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#closeLogin.btn.btn--ghost{
  min-height: 44px;
  border-radius: 999px !important;
  border: 1px solid rgba(12,107,62,.12) !important;
  background: rgba(255,255,255,.76) !important;
  color: rgba(17,61,37,.78) !important;
  font-weight: 900 !important;
}

#closeLogin.btn.btn--ghost:hover{
  background: rgba(255,255,255,.94) !important;
}

#loginErr,
#loginInfo{
  position: relative;
  z-index: 1;
  min-height: 18px;
  margin: 0;
  padding: 0 22px 8px;
  text-align: center;
}

#loginErr{
  color: #b52323;
  font-weight: 800;
}

#loginInfo{
  padding-bottom: 22px;
  color: rgba(12,107,62,.86);
  font-weight: 700;
}

@media (max-width: 560px){
  .modal{
    padding: 10px;
    align-items: end;
  }

  .modal__box.logPanel{
    width: 100%;
    max-width: none;
    border-radius: 24px;
  }

  .logPanel__header{
  padding: 0 18px 14px;
}

.logPanel__headerBg{
  height: 134px;
  border-radius: 24px 24px 26px 26px;
}

.logPanel__logo{
  height: 64px;
  max-width: 176px;
}

  .logPanel__title{
    font-size: 20px;
  }

  .authTabs{
    padding: 2px 18px 0;
  }

  .authTabs .btn{
    min-width: 0;
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .logPanel__body,
  .logPanel__actions,
  #loginErr,
  #loginInfo{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================
   MOBILE BURGER MENU PREMIUM v.094
   tylko mobile, desktop bez zmian
   ========================================================= */

@media (max-width: 980px){

  /* całe rozwinięte menu */
  .mnav{
    background:
      radial-gradient(260px 160px at 84% 18%, rgba(var(--arbuzik-yellow-rgb),.14), transparent 60%),
      linear-gradient(180deg, rgba(6,104,58,.985), rgba(4,95,53,.985)) !important;
    backdrop-filter: blur(10px) saturate(118%);
    border-top: 1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }

  .mnav .wrap.mnav__in{
    display: grid;
    gap: 12px;
    padding: 18px 0 24px !important;
  }

  /* linki menu – koniec z czarnym tekstem */
  .mnav__in > a{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 18px 0 46px !important;
    border-radius: 18px;
    text-decoration: none !important;
    color: #fff9ef !important;
    font-size: 19px !important;
    line-height: 1.15;
    font-weight: 900 !important;
    letter-spacing: -.01em;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 10px 20px rgba(0,0,0,.14);
  }

  .mnav__in > a::before{
    content:"";
    position:absolute;
    left:16px;
    top:50%;
    width:12px;
    height:12px;
    border-radius:999px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep));
    box-shadow:
      0 0 0 3px rgba(var(--arbuzik-yellow-deep-rgb),.16),
      inset 0 1px 0 rgba(255,255,255,.45);
  }

  .mnav__in > a:active{
    transform: translateY(1px);
  }

  /* dolna strefa CTA — flex column (auth w wierszu, Zamów boxik na dole) */
  .mnav__cta{
    display:flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 10px;
  }

  /* lewa kolumna – login / auth */
  #authBoxMobile{
    min-width: 0;
    display:block;
  }

  /* gdy user jest zalogowany i wpada .auth */
  #authBoxMobile .auth{
    width: 100% !important;
    min-height: 80px;
    padding: 10px 12px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,245,240,.90)) !important;
    border: 1px solid rgba(12,107,62,.14) !important;
    box-shadow:
      0 14px 24px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  #authBoxMobile .auth__hello{
    min-width: 0;
    flex: 1 1 auto;
  }

  #authBoxMobile .auth__label{
    display:none !important;
  }

  #authBoxMobile .auth__name{
    max-width: 90px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#123e25 !important;
    font-size:15px !important;
    font-weight:950 !important;
  }

  /* prawa część auth – zaloguj / wyloguj */
  #authBoxMobile .btn,
  #authBoxMobile .btn--ghost,
  #authBoxMobile > .btn,
  #authBoxMobile > button{
    min-height: 46px;
    padding: 0 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    white-space: nowrap;
  }

  #authBoxMobile .btn--ghost,
  #authBoxMobile > .btn,
  #authBoxMobile > button{
    background: linear-gradient(180deg, #ffffff, #f6f6f6) !important;
    color: #c92d2d !important;
    border: 1px solid rgba(229,57,53,.14) !important;
    box-shadow:
      0 8px 18px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  /* gdy user nie jest zalogowany — .auth wrapper bez tła, przycisk na całą szerokość */
  #authBoxMobile .auth {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  #authBoxMobile .auth > button[data-login],
  #authBoxMobile .auth .btn--ghost {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* prawy duży żółty box button */
  .mnav__cta > a.btn.btn--solid{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height: 80px;
    padding: 12px 16px !important;
    border-radius: 22px !important;
    text-align:center;
    font-size: 19px !important;
    line-height: 1.05;
    font-weight: 950 !important;
    letter-spacing: -.01em;
    background:
      radial-gradient(100px 56px at 86% 50%, rgba(255,255,255,.18), transparent 55%),
      linear-gradient(135deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
    color: #0c6b3e !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
      0 18px 30px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.34) !important;
  }

  .mnav__cta > a.btn.btn--solid:active{
    transform: translateY(1px);
  }
}

/* ciaśniejsze telefony */
@media (max-width: 560px){

  .mnav .wrap.mnav__in{
    gap: 10px;
    padding: 14px 0 20px !important;
  }

  .mnav__in > a{
    min-height: 54px;
    padding: 0 16px 0 42px !important;
    font-size: 17px !important;
    border-radius: 16px;
  }

  .mnav__in > a::before{
    left: 14px;
    width: 10px;
    height: 10px;
  }

  .mnav__cta{
    gap: 8px !important;
  }

  #authBoxMobile .auth{
    min-height: 74px;
    border-radius: 20px !important;
    padding: 9px 10px !important;
  }

  #authBoxMobile .auth__name{
    max-width: 78px;
    font-size: 14px !important;
  }

  #authBoxMobile .btn,
  #authBoxMobile .btn--ghost,
  #authBoxMobile > .btn,
  #authBoxMobile > button{
    min-height: 42px;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 15px !important;
  }

  #authBoxMobile > .btn,
  #authBoxMobile > button{
    min-height: 74px;
    border-radius: 20px !important;
  }

  .mnav__cta > a.btn.btn--solid{
    min-height: 74px;
    font-size: 17px !important;
    border-radius: 20px !important;
    padding: 10px 14px !important;
  }
}

/* =========================================================
   RESET PASSWORD PAGE PREMIUM v.096
   ========================================================= */

.reset-body{
  background: linear-gradient(180deg, #faf7f1 0%, #f6f1e8 100%) !important;
}

.resetHdr{
  position: sticky;
  top: 0;
  z-index: 20;
}

.resetHdr__back{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,247,247,.94)) !important;
  color: #c92d2d !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  font-weight: 900 !important;
}

.resetMain{
  min-height: calc(100dvh - 220px);
}

.resetHero{
  position: relative;
  padding: 42px 0 22px;
}

.resetHero::before{
  content:"";
  position:absolute;
  inset: 8px clamp(10px, 2.3vw, 24px) 0;
  border-radius: 34px;
  z-index:0;
  box-shadow: 0 22px 48px rgba(8, 36, 20, .14);
  background:
    radial-gradient(circle at 82% 16%, rgba(var(--arbuzik-yellow-rgb),.30) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(430px 220px at 82% 16%, rgba(var(--arbuzik-yellow-rgb),.20), transparent 58%),
    linear-gradient(172deg, rgba(var(--arbuzik-yellow-rgb),.95) 0 7%, transparent 7.3% 100%),
    linear-gradient(8deg, rgba(239,46,40,.90) 0 9%, transparent 9.3% 100%),
    linear-gradient(180deg, #13884a 0%, #0d733f 34%, #f5f6ef 34.5%, #f8f4ec 100%);
}

.resetHero__wrap{
  position: relative;
  z-index:1;
  display:flex;
  justify-content:center;
  padding: 26px clamp(18px, 2.9vw, 30px) 30px;
}

.resetCard{
  width: min(100%, 620px);
  overflow:hidden;
  border-radius: 30px;
  border: 1px solid rgba(10,40,24,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,247,240,.98));
  box-shadow: 0 22px 46px rgba(8,34,20,.16);
}

.resetCard__hero{
  position: relative;
  height: 146px;
}

.resetCard__heroBg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(220px 90px at 18% 8%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #11824a 0%, #0c6b3e 58%, #095730 100%);
}

.resetCard__heroBg::before{
  content:"";
  position:absolute;
  left:-5%;
  right:32%;
  bottom: 16px;
  height: 16px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--arbuzik-yellow-deep), var(--arbuzik-yellow));
  transform: rotate(-5deg);
}

.resetCard__heroBg::after{
  content:"";
  position:absolute;
  right:-7%;
  bottom: 0;
  width: 42%;
  height: 72px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #d92f2f, #bb1f24);
  transform: rotate(-5deg);
}

.resetCard__brand{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: 14px;
}

.resetCard__logo{
  height: 76px;
  width:auto;
  max-width: 210px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
}

.resetCard__body{
  position:relative;
  padding: 26px 28px 30px;
  background:
    radial-gradient(circle at 84% 14%, rgba(var(--arbuzik-yellow-rgb),.12) 0 2px, transparent 3px) 0 0/18px 18px,
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,246,238,.98));
}

.resetCard__eyebrow{
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0d6b3b;
}

.resetCard__title{
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.02;
  font-weight: 950;
  color: #104929;
}

.resetCard__lead{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.58;
  color: rgba(16,62,39,.76);
}

.resetCard__chips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

.resetChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  background: rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.14);
  color:#0b5d34;
}

.resetForm{
  gap: 14px;
}

.resetForm label{
  color:#123e25;
  font-size:14px;
  font-weight:900;
}

.resetForm input{
  min-height: 56px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(12,107,62,.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,245,239,.99));
  box-shadow:
    0 8px 16px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.72);
  color: #173922;
  font-size: 15px;
  font-weight: 700;
}

.resetForm input::placeholder{
  color: rgba(23,57,34,.46);
}

.resetForm input:focus{
  border-color: rgba(12,107,62,.58) !important;
  box-shadow:
    0 0 0 4px rgba(12,107,62,.10),
    0 10px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}

#btnSet.btn.btn--solid{
  min-height: 56px;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(120px 56px at 88% 50%, rgba(var(--arbuzik-yellow-rgb),.30), transparent 60%),
    linear-gradient(180deg, #0f7b45 0%, #0c6b3e 58%, #0a5e36 100%) !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 950 !important;
  letter-spacing: .01em;
  box-shadow:
    0 16px 30px rgba(7,59,34,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#btnSet.btn.btn--solid:hover{
  transform: translateY(-2px);
  box-shadow:
    0 20px 34px rgba(7,59,34,.32),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#resetMsg{
  min-height: 22px !important;
  margin: 0;
  text-align:center;
  color: rgba(12,107,62,.88);
  font-weight: 800;
}

.resetFooter{
  margin-top: 24px !important;
}

@media (max-width: 760px){
  .resetHero{
    padding: 28px 0 16px;
  }

  .resetHero::before{
    inset: 8px 10px 0;
    border-radius: 26px;
  }

  .resetHero__wrap{
    padding: 18px 14px 20px;
  }

  .resetCard{
    border-radius: 24px;
  }

  .resetCard__hero{
    height: 132px;
  }

  .resetCard__logo{
    height: 66px;
    max-width: 184px;
  }

  .resetCard__body{
    padding: 22px 18px 22px;
  }

  .resetCard__title{
    font-size: 32px;
  }

  .resetCard__lead{
    font-size: 15px;
  }
}

/* ================================
   ARBUZIK AUTH BUTTON HOVER
================================ */

.authModal .btn,
.authModal button,
.resetPanel button {
  transition: all .18s ease;
}

.authModal .btn:hover,
.authModal button:hover,
.resetPanel button:hover {
  color: var(--arbuzik-yellow); /* żółty Arbuzika */
}

/* ================================
   PASSWORD TOGGLE
================================ */

.passwordField{
  position:relative;
}

.passwordToggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:18px;
  opacity:.6;
  transition:opacity .15s ease;
}

.passwordToggle:hover{
  opacity:1;
}

/* =========================================================
   AUTH / RESET PASSWORD TOGGLE + BUTTON HOVER v.098
   ========================================================= */

#loginModal #doLogin.btn.btn--solid:hover,
#loginModal #doLogin.btn.btn--solid:focus-visible,
#btnSet.btn.btn--solid:hover,
#btnSet.btn.btn--solid:focus-visible{
  color: var(--arbuzik-yellow) !important;
}

.passwordField{
  position: relative;
}

.passwordField .passwordToggle{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(12,107,62,.78);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.passwordField .passwordToggle:hover{
  color: rgba(12,107,62,1);
  opacity: 1;
  transform: translateY(-50%);
}

.passwordField .passwordToggle:focus-visible{
  outline: 2px solid rgba(var(--arbuzik-yellow-deep-rgb),.85);
  outline-offset: 2px;
  border-radius: 999px;
}

.passwordField--auth #loginPass{
  padding-right: 54px !important;
}

.passwordField--reset input{
  padding-right: 54px !important;
}

/* zachowaj oryginalny układ reset form */
.resetForm .passwordField{
  margin-top: 6px;
}


/* =========================================================
   AUTH PASSWORD FIX v.099
   - przywrócenie kłódki
   - ukrycie natywnego oka przeglądarki
   - tylko jedno własne oko po prawej
   ========================================================= */
.authField--pass::before{
  z-index: 4;
}

.authField--pass .passwordField{
  position: relative;
}

.authField--pass .passwordField input,
.passwordField--reset input{
  position: relative;
  z-index: 1;
}

.passwordField .passwordToggle{
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
}

/* Edge / IE native reveal */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
  display:none;
  width:0;
  height:0;
}

/* niektóre przeglądarki webkit potrafią dokładać własne kontrolki */


/* =========================================================
   AUTH PASSWORD FIELD SAFARI FIX v.100
   - jedna ikona oka
   - przywrócona kłódka
   - placeholder i focus działają na Safari / iOS
   ========================================================= */

/* wrapper pola hasła w loginie i resecie */
.passwordField{
  position: relative;
  width: 100%;
}

/* inputy haseł: zachowaj wygląd Arbuzika, ale z miejscem na oko */
.passwordField > input,
.passwordField--reset > input{
  width: 100%;
  min-height: 52px;
  padding-right: 48px !important;
  -webkit-appearance: none;
  appearance: none;
}

/* login modal: input dalej musi mieć standardowe paddingi Arbuzika */
.authField.authField--pass.passwordField > input,
.authField.authField--pass .passwordField > input{
  padding-left: 46px !important;
  padding-right: 48px !important;
}

/* kłódka ma być nad inputem i nie może blokować kliknięcia */
.authField--pass::before{
  z-index: 2;
  pointer-events: none;
}

/* oko tylko jedno, po prawej */
.passwordToggle{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(12,107,62,.70);
  font-size: 16px;
  line-height: 1;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
}

.passwordToggle:hover,
.passwordToggle:focus-visible{
  color: rgba(12,107,62,1);
  outline: none;
}

/* wyczyść stare pseudo-ikony w CSS, żeby nie dublować oka */
.passwordToggle::before,
.passwordToggle::after{
  content: none !important;
}

/* Safari / Edge: wyłącz natywne ikonki/reveal w password input */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
  display: none;
}


/* placeholder w Safari */
#loginPass::placeholder,
#newPass::placeholder,
#newPass2::placeholder{
  color: rgba(23,57,34,.46) !important;
  opacity: 1 !important;
}

#loginPass::-webkit-input-placeholder,
#newPass::-webkit-input-placeholder,
#newPass2::-webkit-input-placeholder{
  color: rgba(23,57,34,.46) !important;
  opacity: 1 !important;
}

/* reset page: te same proporcje i ikona kłódki */
.passwordField--reset.authField > input{
  padding-left: 46px !important;
  padding-right: 48px !important;
}


/* =========================================================
   AUTH PASSWORD SAFARI FINAL FIX v.101
   - Safari/iOS używa text input + maskowania CSS
   - placeholder widoczny od razu
   - klik w pole działa bez klikania w oko
   - oko wycentrowane pionowo
   ========================================================= */
.passwordField{
  position: relative;
}

.passwordField > input{
  position: relative;
  z-index: 1;
}

.passwordToggle{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 4 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* natywne kontrolki webkit wyłączone */

/* Safari/iOS: maskowanie bez type=password */
input.pw-safari-fix{
  -webkit-appearance: none !important;
  appearance: none !important;
}

input.pw-safari-fix.pw-masked{
  -webkit-text-security: disc;
}

/* placeholder ma być zawsze widoczny */
input.pw-safari-fix::placeholder,
input.pw-safari-fix::-webkit-input-placeholder,
#loginPass::placeholder,
#loginPass::-webkit-input-placeholder,
#newPass::placeholder,
#newPass::-webkit-input-placeholder,
#newPass2::placeholder,
#newPass2::-webkit-input-placeholder{
  color: rgba(23,57,34,.46) !important;
  opacity: 1 !important;
}


/* =========================================================
   AUTH PASSWORD CLEAN FIX v.103
   - bez obejść Safari z text-security
   - jedno oko, kłódka zostaje
   - input działa normalnie na iOS/macOS/Windows
   ========================================================= */
.passwordField{
  position: relative !important;
}

.authField.authField--pass.passwordField{
  position: relative !important;
}

.authField.authField--pass.passwordField > input,
.passwordField.passwordField--reset > input{
  position: relative;
  z-index: 1;
  padding-right: 50px !important;
}

.passwordToggle{
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 3 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #0c6b3e !important;
  opacity: .72;
  cursor: pointer;
  touch-action: manipulation;
}

.passwordToggle:hover,
.passwordToggle:focus-visible{
  opacity: 1;
  outline: none;
}

.passwordToggle::-moz-focus-inner{
  border: 0;
  padding: 0;
}

/* nie chowamy globalnych kontrolek webkit dla wszystkich inputów */
input::-ms-reveal,
input::-ms-clear{
  display: none;
}

#loginPass::placeholder,
#loginPass::-webkit-input-placeholder,
#newPass::placeholder,
#newPass::-webkit-input-placeholder,
#newPass2::placeholder,
#newPass2::-webkit-input-placeholder,
#loginEmail::placeholder,
#loginEmail::-webkit-input-placeholder{
  color: rgba(23,57,34,.46) !important;
  opacity: 1 !important;
}

.passwordField{
  position: relative;
  width: 100%;
}

.passwordField .passwordToggle{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}


/* =========================================================
   BOXIKI — JAK TO DZIAŁA lifestyle cards v.107
   ========================================================= */
body[data-page="boxiki"] .howWorks{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

body[data-page="boxiki"] .howCard{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  min-height:330px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  border:1px solid rgba(10,40,24,.08);
  box-shadow: 0 18px 40px rgba(8,34,20,.10);
  display:flex;
  flex-direction:column;
}

body[data-page="boxiki"] .howCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(340px 120px at 10% 0%, rgba(12,107,62,.06), transparent 58%),
    radial-gradient(260px 100px at 90% 100%, rgba(229,57,53,.04), transparent 58%);
  pointer-events:none;
}

body[data-page="boxiki"] .howCard__media{
  position:relative;
  height:154px;
  background-size:cover;
  background-position:center;
  border-radius:24px 24px 18px 18px;
  overflow:hidden;
}

body[data-page="boxiki"] .howCard__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.12) 100%);
}

body[data-page="boxiki"] .howCard__body{
  position:relative;
  z-index:1;
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

body[data-page="boxiki"] .howCard__step{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-weight:1000;
  font-size:18px;
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
  border:2px solid rgba(255,255,255,.72);
  margin-top:-38px;
}

body[data-page="boxiki"] .howCard--1 .howCard__step{ background:linear-gradient(180deg,#0c8b48,#075a33); }
body[data-page="boxiki"] .howCard--2 .howCard__step{ background:linear-gradient(180deg,#ffd93a,#f0b900); color:#0b4f2d; }
body[data-page="boxiki"] .howCard--3 .howCard__step{ background:linear-gradient(180deg,#ef4b3d,#cf2227); }
body[data-page="boxiki"] .howCard--4 .howCard__step{ background:linear-gradient(180deg,#f7b500,#e0a100); color:#0b4f2d; }

body[data-page="boxiki"] .howCard__title{
  margin:0;
  color:#0b4f2d;
  font-size:28px;
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:1000;
  max-width:10ch;
}

body[data-page="boxiki"] .howCard__text{
  margin:0;
  color:rgba(20,20,20,.72);
  font-size:14px;
  line-height:1.56;
  max-width:34ch;
}

@media (max-width: 1200px){
  body[data-page="boxiki"] .howWorks{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  body[data-page="boxiki"] .howCard{
    min-height:340px;
  }
}

@media (max-width: 680px){
  body[data-page="boxiki"] .howWorks{
    grid-template-columns:1fr;
    gap:14px;
  }
  body[data-page="boxiki"] .howCard{
    min-height:unset;
  }
  body[data-page="boxiki"] .howCard__media{
    height:178px;
  }
  body[data-page="boxiki"] .howCard__title{
    font-size:24px;
    max-width:none;
  }
}

/* =========================================================
   LEGAL / TEXT TEMPLATE PAGE v.113
   - szablon pod podstrony tekstowe: regulamin, polityka, cookies
   ========================================================= */
.legalMain{
  background: linear-gradient(180deg, #faf7f1 0%, #f6f1e8 100%);
}

.legalPage{
  position: relative;
  padding: 42px 0 24px;
}

.legalPage::before{
  content:"";
  position:absolute;
  inset: 8px clamp(10px, 2.3vw, 24px) 0;
  border-radius: 34px;
  box-shadow: 0 22px 48px rgba(8,36,20,.14);
  background:
    radial-gradient(circle at 82% 14%, rgba(var(--arbuzik-yellow-rgb),.24) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(420px 180px at 78% 14%, rgba(var(--arbuzik-yellow-rgb),.16), transparent 58%),
    linear-gradient(173deg, rgba(var(--arbuzik-yellow-rgb),.92) 0 6%, transparent 6.3% 100%),
    linear-gradient(8deg, rgba(239,46,40,.88) 0 7%, transparent 7.3% 100%),
    linear-gradient(180deg, #127842 0%, #0d6e3d 24%, #f8f4ec 24.5%, #f8f4ec 100%);
  z-index:0;
}

.legalPage > .wrap{
  position: relative;
  z-index:1;
  padding: 28px clamp(18px,2.9vw,30px) 30px;
}

.legalShell{
  display:grid;
  gap: 18px;
}

.legalTop{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items:end;
}

.legalEyebrow{
  display:inline-flex;
  margin-bottom:12px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#0d6b3b;
}

.legalTitle{
  margin:0;
  color:#104929;
  font-size: clamp(32px, 4vw, 46px);
  line-height:1.04;
}

.legalTitle > span{
  position:relative;
  display:inline-block;
  padding-right:14px;
}

.legalTitle > span::after{
  content:"";
  position:absolute;
  left:-8px;
  right:4px;
  bottom:-7px;
  height:11px;
  border-radius:999px;
  background: var(--arbuzik-yellow);
  z-index:-1;
}

.legalLead{
  margin:16px 0 0;
  max-width:72ch;
  color: rgba(16,62,39,.76);
  line-height:1.7;
  font-size:16px;
}

.legalMeta{
  min-width: 280px;
  align-self:start;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,247,240,.96));
  border:1px solid rgba(18,82,46,.10);
  border-radius: 22px;
  box-shadow: 0 18px 36px rgba(9,44,24,.14);
  padding: 16px 18px;
  display:grid;
  gap:10px;
  color: rgba(16,62,39,.76);
}

.legalLayout{
  display:grid;
  grid-template-columns: 300px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.legalToc,
.legalContent{
  border-radius:24px;
  border:1px solid rgba(18,82,46,.10);
  box-shadow: 0 18px 36px rgba(9,44,24,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,247,240,.96));
}

.legalToc{
  position: sticky;
  top: 104px;
  padding:18px;
}

.legalToc__title{
  font-size:15px;
  font-weight:950;
  color:#0b5d34;
  margin-bottom:12px;
}

.legalToc a{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  color: rgba(16,62,39,.78);
  font-weight:700;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.legalToc a:hover{
  background: rgba(var(--arbuzik-yellow-rgb),.18);
  color:#0b5d34;
  transform: translateX(2px);
}

.legalContent{
  padding: 22px 24px;
}

.legalSection + .legalSection{
  margin-top: 26px;
  padding-top: 22px;
  border-top:1px solid rgba(17,24,39,.08);
}

.legalSection h2{
  margin:0 0 12px;
  color:#104929;
  font-size: 24px;
  line-height:1.15;
}

.legalSection p{
  margin: 0 0 12px;
  color: rgba(16,62,39,.78);
  line-height: 1.75;
  font-size: 15.5px;
}

.legalSection ul{
  margin: 0 0 12px 0;
  padding-left: 20px;
  color: rgba(16,62,39,.78);
}

.legalSection li{
  margin-bottom: 8px;
  line-height:1.65;
}

.legalNote{
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(var(--arbuzik-yellow-rgb),.14);
  border: 1px solid rgba(var(--arbuzik-yellow-rgb),.34);
  color:#5a4800;
  line-height:1.65;
  font-size:14px;
}

@media (max-width: 980px){
  .legalTop{
    grid-template-columns: 1fr;
  }

  .legalMeta{
    min-width: 0;
  }

  .legalLayout{
    grid-template-columns: 1fr;
  }

  .legalToc{
    position: static;
  }
}

@media (max-width: 640px){
  .legalPage{
    padding-top: 32px;
  }

  .legalPage::before{
    inset: 8px 10px 0;
    border-radius: 26px;
  }

  .legalPage > .wrap{
    padding: 20px 14px 22px;
  }

  .legalContent{
    padding: 18px 16px;
  }

  .legalSection h2{
    font-size: 22px;
  }

  .legalSection p,
  .legalSection li{
    font-size: 15px;
  }
}


/* ════════════════════════════════════════════
   AUTH HEADER — WARIANT 8 (v.117)
   ikona user + "zalogowany jako" + imię
   + koszyk Zamówienia + link Wyloguj
════════════════════════════════════════════ */

/* Wrapper — zastępuje stare .auth tło w headerze */
.hdr .auth--v8 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Blok: ikona + imię */
.auth__userblock {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Okrągła ikona user */
.auth__usericon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffde00;
}

/* Separtor pionowy */
.auth__sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}

/* Etykieta + imię */
.hdr .auth--v8 .auth__hello {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.hdr .auth--v8 .auth__label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  line-height: 1;
}
.hdr .auth--v8 .auth__name {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Przycisk Zamówienia */
.auth__orders--v8 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
  font-family: inherit;
}
.auth__orders--v8 svg {
  color: #ffde00;
  flex-shrink: 0;
}
.auth__orders--v8:hover {
  background: rgba(255,255,255,.17);
  color: #ffde00 !important;
}
.auth__orders--v8:hover svg {
  color: #ffde00 !important;
}

/* Link Wyloguj */
.auth__logout--v8 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
  font-family: inherit;
}
.auth__logout--v8 svg {
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.auth__logout--v8:hover {
  color: rgba(255,255,255,.85) !important;
}
.auth__logout--v8:hover svg {
  color: rgba(255,255,255,.55) !important;
}

/* ── MOBILE: auth--v8 w burgerze ── */

/* ZMIANA LAYOUTU .mnav__cta:
   - auth--v8 + "Zamów boxik" ułożone pionowo (column)
   - auth--v8 zajmuje 1 wiersz poziomy (ikona + imię + zamówienia + wyloguj)
   - "Zamów boxik" na dole, pełna szerokość */
@media (max-width: 980px) {

  /* ── mnav__cta: kolumna zamiast gridu ── */
  .mnav__cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* auth zajmuje cały wiersz */
  #authBoxMobile {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* ── auth--v8: jeden poziomy wiersz ── */
  #authBoxMobile .auth--v8 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,245,240,.90)) !important;
    border: 1px solid rgba(12,107,62,.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.10),
                inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  /* ikona user — zielona w burgerze */
  #authBoxMobile .auth__usericon {
    width: 28px !important;
    height: 28px !important;
    background: rgba(6,107,51,.12) !important;
    border-color: rgba(6,107,51,.2) !important;
    color: #066b33 !important;
    flex-shrink: 0 !important;
  }

  /* blok hello (etykieta + imię) */
  #authBoxMobile .auth__userblock {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  #authBoxMobile .auth--v8 .auth__label {
    font-size: 9px !important;
    color: rgba(0,0,0,.38) !important;
  }

  #authBoxMobile .auth--v8 .auth__name {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #123e25 !important;
    max-width: 80px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* separator pionowy — widoczny w poziomym wierszu */
  #authBoxMobile .auth__sep {
    display: block !important;
    width: 1px !important;
    height: 18px !important;
    background: rgba(12,107,62,.18) !important;
    flex-shrink: 0 !important;
  }

  /* Zamówienia — elastyczne, zajmuje dostępne miejsce */
  #authBoxMobile .auth__orders--v8 {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    background: rgba(6,107,51,.10) !important;
    border: 1px solid rgba(6,107,51,.16) !important;
    border-radius: 11px !important;
    color: #075a33 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  #authBoxMobile .auth__orders--v8 svg {
    color: #066b33 !important;
    flex-shrink: 0 !important;
  }

  /* Wyloguj — dyskretny link na końcu */
  #authBoxMobile .auth__logout--v8 {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    color: rgba(0,0,0,.38) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 2px !important;
    white-space: nowrap !important;
  }
  #authBoxMobile .auth__logout--v8 svg {
    color: rgba(0,0,0,.28) !important;
    flex-shrink: 0 !important;
  }

  /* ── Zamów boxik: pełna szerokość, na dole ── */
  .mnav__cta > a.btn.btn--solid[href="/boxiki/"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    border-radius: 18px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    background:
      radial-gradient(100px 56px at 86% 50%, rgba(255,255,255,.18), transparent 55%),
      linear-gradient(135deg, var(--arbuzik-yellow-soft), var(--arbuzik-yellow-deep)) !important;
    color: #0c6b3e !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
      0 12px 24px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.34) !important;
    letter-spacing: -.01em !important;
  }
}

/* ── ciaśniejsze telefony ≤ 560px ── */
@media (max-width: 560px) {
  #authBoxMobile .auth--v8 {
    padding: 8px 10px !important;
    border-radius: 15px !important;
    gap: 6px !important;
  }
  #authBoxMobile .auth--v8 .auth__name {
    max-width: 65px !important;
    font-size: 12px !important;
  }
  #authBoxMobile .auth__orders--v8 {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  #authBoxMobile .auth__logout--v8 {
    font-size: 10px !important;
  }
  .mnav__cta > a.btn.btn--solid[href="/boxiki/"] {
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: 15px !important;
  }
}

/* ════════════════════════════════════════════
   AUTH v8 — efekt pędzla na Wyloguj + badge
════════════════════════════════════════════ */

/* Wyloguj: pozycja relative żeby ::after działał */
.auth__logout--v8 {
  position: relative;
}

/* żółty pędzel pod "Wyloguj" — cienki, proporcjonalny */
.auth__logout--v8::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--arbuzik-yellow);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.auth__logout--v8:hover::after {
  transform: scaleX(1);
}

/* badge licznika zamówień */
.auth__orders--v8 {
  position: relative;
}
.auth__order-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  border: 2px solid rgba(4,95,46,.95);
  pointer-events: none;
  z-index: 2;
  animation: badgePop .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#authBoxMobile .auth__order-badge {
  border-color: rgba(239,245,240,.95);
}


/* =========================================================
   HOME — OFERTA ARBUZIKA / merged section v.124
   ========================================================= */
.offerHub .wrap{ position:relative; }
.offerHub__shell{
  position: relative;
  background:
    radial-gradient(880px 320px at 82% 14%, rgba(var(--arbuzik-yellow-rgb),.12), transparent 58%),
    radial-gradient(720px 260px at 12% 0%, rgba(12,107,62,.05), transparent 56%),
    var(--seed-pattern),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.96));
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 30px;
  padding: 24px;
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
  overflow: hidden;
}
.offerHub__head{ margin-bottom: 14px; }
.offerHub{ margin-top: 10px !important; }
.offerHub .sec__hd{ margin-bottom: 16px; }
.offerHub__part + .offerHub__part{ margin-top: 8px; }
.offerHub__intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}
.offerHub__title{
  margin:0;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height:1.12;
  font-weight: 1000;
  color: var(--brand);
}
.offerHub__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(var(--arbuzik-yellow-deep-rgb),.20);
  border: 1px solid rgba(var(--arbuzik-yellow-deep-rgb),.48);
  color: #8a6a00;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.offerHub__divider{
  height:1px;
  margin: 22px 0;
  background: linear-gradient(90deg, transparent, rgba(17,24,39,.10), transparent);
}
.offerHub__filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 18px;
}
.offerHub__chip{
  appearance:none;
  cursor:pointer;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid rgba(12,107,62,.14);
  background: rgba(255,255,255,.86);
  color: #0c6b3e;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.offerHub__chip.is-active{
  background: rgba(12,107,62,.10);
  border-color: rgba(12,107,62,.22);
}
.offerHub__chip--warm{
  color:#8a6a00;
  border-color: rgba(var(--arbuzik-yellow-deep-rgb),.40);
  background: rgba(var(--arbuzik-yellow-deep-rgb),.16);
}
.offerHub__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.offerCard{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height: 330px;
  padding: 14px 14px 16px;
  border-radius: 24px;
  border:1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.offerCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(15,23,42,.10);
}
.offerCard__media{
  position:relative;
  min-height: 104px;
  border-radius: 18px;
  margin-bottom: 14px;
  overflow:hidden;
}
.offerCard__media::before,
.offerCard__media::after{
  content:none;
}
.offerCard__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 10px;
}
.offerCard__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  color:#0c6b3e;
  background: rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.14);
}
.offerCard__badge--warm{
  color:#8a6a00;
  background: rgba(var(--arbuzik-yellow-deep-rgb),.16);
  border-color: rgba(var(--arbuzik-yellow-deep-rgb),.38);
}
.offerCard h4,
.needCard h4{
  margin:0;
  font-size: 22px;
  line-height:1.1;
}
.offerCard p,
.needCard p{
  margin: 10px 0 0;
  color: rgba(0,0,0,.64);
}
.offerCard__link{
  margin-top:auto;
  padding-top: 14px;
  font-weight: 900;
  color: #0c6b3e;
  text-decoration: none;
}
.offerCard__link:hover{ text-decoration: underline; }

.offerHub__status{
  margin: 0 0 14px;
  color: rgba(0,0,0,.58);
  font-size: 14px;
}
.offerHub__status.is-hidden{ display:none; }
.offerCard__media.has-image{
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.05);
}
.offerCard__meta{
  margin: 10px 0 0;
  color: rgba(0,0,0,.52);
  font-size: 13px;
  line-height: 1.45;
}
.offerCard__linkRow{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top: 14px;
}
.offerCard__when{
  color: rgba(0,0,0,.5);
  font-size: 12px;
  font-weight: 800;
}
.offerCard--empty{
  min-height: 220px;
  justify-content:center;
}
.offerCard--green .offerCard__media{ background: linear-gradient(135deg, rgba(223,236,217,.95), rgba(203,229,198,.92)); }
.offerCard--gold .offerCard__media{ background: linear-gradient(135deg, rgba(248,236,214,.96), rgba(245,223,171,.94)); }
.offerCard--leaf .offerCard__media{ background: linear-gradient(135deg, rgba(228,238,225,.96), rgba(206,230,201,.92)); }
.offerCard--rose .offerCard__media{ background: linear-gradient(135deg, rgba(242,226,230,.96), rgba(233,205,212,.94)); }
.offerNeeds{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.offerNeeds--visual{
  align-items: stretch;
}
.needCard{
  background: rgba(255,255,255,.94);
  border:1px solid rgba(17,24,39,.08);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  transition: transform .16s ease, box-shadow .16s ease;
}
.needCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,23,42,.08);
}
.needCard__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.14);
  color:#0c6b3e;
  font-size: 11px;
  font-weight: 900;
  line-height:1;
}

.needCard--visual{
  position: relative;
  display:flex;
  min-height: 270px;
  padding: 0;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  border-radius: 24px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
  background: linear-gradient(180deg, rgba(8,48,22,.16), rgba(8,48,22,.04));
}
.needCard--visual::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--need-bg);
  background-size: cover;
  background-position: center;
  filter: brightness(1.08) saturate(1.06) contrast(1.02);
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.needCard--visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.12) 0 2px, transparent 3px) 9px 10px/18px 18px,
    radial-gradient(220px 130px at 18% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(18,127,69,.46) 0%, rgba(18,127,69,.22) 14%, rgba(18,127,69,0) 30%),
    linear-gradient(0deg, rgba(18,127,69,.34) 0%, rgba(18,127,69,.12) 16%, rgba(18,127,69,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.46) 100%);
}
.needCard--gold::after{
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.12) 0 2px, transparent 3px) 9px 10px/18px 18px,
    radial-gradient(220px 130px at 18% 10%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(243,182,12,.52) 0%, rgba(243,182,12,.24) 14%, rgba(243,182,12,0) 30%),
    linear-gradient(0deg, rgba(243,182,12,.36) 0%, rgba(243,182,12,.14) 16%, rgba(243,182,12,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.42) 100%);
}
.needCard--red::after{
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.12) 0 2px, transparent 3px) 9px 10px/18px 18px,
    radial-gradient(220px 130px at 18% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(229,57,53,.54) 0%, rgba(229,57,53,.24) 14%, rgba(229,57,53,0) 30%),
    linear-gradient(0deg, rgba(255,110,42,.34) 0%, rgba(255,110,42,.12) 16%, rgba(255,110,42,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.46) 100%);
}
.needCard--berry::after{
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.12) 0 2px, transparent 3px) 9px 10px/18px 18px,
    radial-gradient(220px 130px at 18% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(232,40,87,.54) 0%, rgba(232,40,87,.24) 14%, rgba(232,40,87,0) 30%),
    linear-gradient(0deg, rgba(255,120,62,.32) 0%, rgba(255,120,62,.12) 16%, rgba(255,120,62,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.46) 100%);
}
.needCard--premium::after{
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.12) 0 2px, transparent 3px) 9px 10px/18px 18px,
    radial-gradient(220px 130px at 18% 10%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(9,94,52,.54) 0%, rgba(9,94,52,.24) 14%, rgba(9,94,52,0) 30%),
    linear-gradient(0deg, rgba(28,132,83,.34) 0%, rgba(28,132,83,.12) 16%, rgba(28,132,83,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.46) 100%);
}
.needCard--visual:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 42px rgba(15,23,42,.16);
}
.needCard--visual:hover::before{
  transform: scale(1.06);
  filter: brightness(1.12) saturate(1.08) contrast(1.03);
}
.needCard__content{
  position: relative;
  z-index: 2;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 16px 14px 14px;
  min-height: 270px;
}
.needCard__badge{
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.88);
  color:#0c6b3e;
  border:1px solid rgba(255,255,255,.68);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  font-size: 11px;
  font-weight: 900;
  line-height:1;
}
.needCard--gold .needCard__badge{ color:#8a6a00; }
.needCard--red .needCard__badge,
.needCard--berry .needCard__badge{ color:#b42318; }
.needCard--premium .needCard__badge{ color:#0c6b3e; background: rgba(12,65,36,.74); border-color: rgba(255,255,255,.18); }
.needCard--visual h4{
  margin:0;
  font-size: clamp(18px, 2vw, 23px);
  line-height:1.04;
  color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.28);
}
.needCard--visual p{
  margin: 8px 0 0;
  color: rgba(255,255,255,.94);
  font-size: 13px;
  line-height:1.32;
  text-shadow: 0 2px 10px rgba(0,0,0,.24);
}
.needCard__meta{
  margin-top: 12px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.24);
}
.needCard__cta{
  margin-top: auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
  border:1px solid rgba(255,255,255,.68);
  color:#ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  text-shadow: 0 1px 8px rgba(0,0,0,.34);
}
.needCard__cta span{ transform: translateY(-.5px); }
@media (max-width: 1100px){
  .offerHub__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .offerHub__shell{ padding: 20px; border-radius: 28px; }
  .offerHub__intro{ flex-direction:column; }
  .offerNeeds{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 640px){
  .offerHub__shell{ padding: 16px; border-radius: 24px; }
  .offerHub__grid,
  .offerNeeds{ grid-template-columns: 1fr; }
  .offerCard{ min-height: auto; }
}


/* =========================================================
   MAPA LOKALNOŚCI — Arbuzik v.127
   ========================================================= */
.localMap .wrap{ position:relative; }
.localMap__shell{
  position:relative;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(880px 320px at 82% 14%, rgba(var(--arbuzik-yellow-rgb),.12), transparent 58%),
    radial-gradient(720px 260px at 12% 0%, rgba(12,107,62,.05), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.96));
  border:1px solid rgba(17,24,39,.08);
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
}
.localMap__head{ margin-bottom: 14px; }
.localMap .sec__hd{ margin-bottom: 16px; }
.localMap__grid{
  display:grid;
  grid-template-columns: minmax(320px, .95fr) minmax(320px, 1.05fr);
  gap: 16px;
  align-items: stretch;
}
.localMap__panel{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.08);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}
.localMap__panelTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.localMap__title{ margin:0 0 4px; font-size: clamp(18px, 2vw, 24px); color: var(--brand); }
.localMap__status{ font-size: 12px; color: var(--muted); font-weight: 800; white-space: nowrap; }
.localMap__canvas{
  position:relative;
  min-height: 290px;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.08);
  background: linear-gradient(180deg, #f4f6f1, #edf2ec);
}
.localMap__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.localMap__region,
.localMap__roads{ display:none; }
.localMap__canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(29deg, transparent 47%, rgba(255,255,255,.85) 47.6%, rgba(255,255,255,.85) 48.6%, transparent 49%) ,
    linear-gradient(8deg, transparent 48%, rgba(255,255,255,.72) 48.6%, rgba(255,255,255,.72) 49.4%, transparent 50%),
    radial-gradient(280px 120px at 22% 88%, rgba(12,107,62,.06), transparent 60%);
  mix-blend-mode: screen;
}
.localMap__pins{ position:absolute; inset:0; }
.localPin{
  position:absolute;
  transform: translate(-50%, -86%);
  border:0;
  background: transparent;
  padding:0;
  cursor:pointer;
  z-index: 2;
}
.localPin__dot{
  position:relative;
  width: 20px; height: 20px; border-radius: 999px;
  background: #ef2424;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 2px rgba(255,255,255,.28);
}
.localPin__dot::after{
  content:""; position:absolute; left:50%; top:100%; transform: translateX(-50%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:10px solid #ef2424;
}
.localPin__label{
  position:absolute; left: 24px; top: -6px;
  display:none;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.08);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 900; color: var(--brand); white-space: nowrap;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.localPin.is-center .localPin__dot{ background: var(--brand); width:24px; height:24px; }
.localPin.is-center .localPin__dot::after{ border-top-color: var(--brand); }
.localPin.is-active .localPin__dot{ transform: scale(1.08); }
.localPin.is-active .localPin__label, .localPin:hover .localPin__label{ display:block; }
.localMap__centerBadge{
  position:absolute; left: 14px; bottom: 14px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.96); border:1px solid rgba(17,24,39,.08);
  font-size: 12px; font-weight: 900; color: var(--brand);
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
  z-index: 2;
}
.localMap__legend{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
.localMap__cards{ display:grid; gap: 12px; }
.localItem{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: stretch;
  width:100%; text-align:left;
  border:1px solid rgba(17,24,39,.08);
  border-radius: 20px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.localItem:hover, .localItem.is-active{
  transform: translateY(-1px);
  border-color: rgba(12,107,62,.18);
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
}
.localItem__media{
  width: 86px; height: 86px; border-radius: 16px; overflow:hidden;
  background: linear-gradient(135deg, rgba(223,236,217,.95), rgba(203,229,198,.92));
  background-size: cover; background-position: center;
}
.localItem__city{ font-size: 12px; font-weight: 900; color: var(--brand); margin-bottom: 4px; }
.localItem__product{ font-size: 18px; font-weight: 900; line-height: 1.08; margin-bottom: 4px; }
.localItem__source{ color: var(--muted); font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
.localItem__meta{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.localItem__when{ font-size: 12px; color: #8a8a8a; font-weight: 800; }
.localItem__link{ font-size: 14px; font-weight: 900; color: var(--brand); }
.localMap__empty{
  border-radius: 18px; padding: 18px; border:1px dashed rgba(17,24,39,.14);
  color: var(--muted); background: rgba(255,255,255,.76);
}
@media (max-width: 980px){
  .offerHub__shell,
  .localMap__shell{ padding: 0; border-radius: 0; }
  .localMap__grid{ grid-template-columns: 1fr; }
  .localMap__panelTop{ flex-direction:column; }
}
@media (max-width: 640px){
  .offerHub__shell,
  .localMap__shell{ padding: 0; border-radius: 0; }
  .localItem{ grid-template-columns: 72px 1fr; }
  .localItem__media{ width:72px; height:72px; }
  .localItem__product{ font-size: 18px; }
  .localMap__canvas{ min-height: 250px; }
}


/* =========================================================
   OFERTA + MAPA ALIGN FIX v.129
   ========================================================= */
.offerHub .wrap,
.localMap .wrap{ position:relative; }
.localMap__grid{ align-items:start; }
.localMap__panel--map{ min-height: 100%; }
.localMap__panel--list{ min-height: 100%; }


/* =========================================================
   OFERTA + MAPA — align polish v.130
   ========================================================= */
.offerHub,
.localMap{ margin-top:10px !important; }

/* korzystaj z istniejącego layoutu sekcji jak na reszcie homepage */
.offerHub__shell,
.localMap__shell{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* nagłówki sekcji jak w innych blokach */
.offerHub__head,
.localMap__head{
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.offerHub__head > .muted,
.localMap__head > .muted{
  margin: 0;
  max-width: 46ch;
  text-align: right;
}

/* lokalność dostaje identyczne proporcje i tytuł jak reszta sekcji */
#lokalnosc::before{
  background:none !important;
}
#lokalnosc > .wrap{
  border-radius:28px;
  background:transparent !important;
}
#lokalnosc .secTitle,
#lokalnosc .sec__hd .muted{
  color:#104929;
}
#lokalnosc .secTitle > span::after{ background: var(--arbuzik-yellow); }

/* zawartość sekcji bez dodatkowego zwężania */
.offerHub__part{ margin: 0; }
.offerHub__part + .offerHub__part{ margin-top: 0; }
.offerHub__divider{ margin: 18px 0; }

.localMap__grid{ align-items: start; }
.localMap__panel{
  min-width: 0;
}
.localMap__panel--map,
.localMap__panel--list{
  min-height: 100%;
}
.localMap__panelTop > div .muted{
  margin:0;
}

/* mapa bardziej czytelna i spójna */
.localMap__canvas{
  min-height: 250px;
  background: linear-gradient(180deg, #edf3ec, #e5ece4);
}
.localMap__svg{
  display:block;
  width:100%;
  height:auto;
}
.localMap__svg text{
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.localMap__legend{
  min-height: 0;
  margin-top: 10px;
}

/* szerokości i rytm jak reszta strony */
.offerHub .sec__hd,
.localMap .sec__hd{
  margin-bottom: 16px;
}
.offerHub__title,
.localMap__title{
  font-size: clamp(20px, 2.05vw, 30px);
}

.localMap__head .secTitle{
  font-size: clamp(22px, 2.45vw, 38px);
}

@media (max-width: 980px){
  .offerHub__head,
  .localMap__head{
    align-items:flex-start;
  }
  .offerHub__head > .muted,
  .localMap__head > .muted{
    max-width: none;
    text-align: left;
  }
}


/* =========================================================
   HOME POLISH v.131
   - nav hover = yellow text only
   - more breathing room in Oferta
   - better filter chips
   - richer local map styling
   ========================================================= */

.nav a,
.auth__logout--v8{
  text-decoration: none !important;
}
.nav a::after,
.nav a::before,
.auth__logout--v8::after,
.auth__logout--v8::before{
  content: none !important;
  display: none !important;
}
.nav a:hover,
.nav a:focus-visible,
.auth__logout--v8:hover,
.auth__logout--v8:focus-visible{
  color: var(--arbuzik-yellow) !important;
  background: transparent !important;
}

.offerHub__head{
  margin-bottom: 28px;
}
.offerHub__part:first-of-type .offerHub__intro{
  margin-top: 6px;
}

.offerHub__filters{
  gap: 12px;
  margin-bottom: 20px;
}
.offerHub__chip{
  position: relative;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(12,107,62,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,244,.96));
  color: #0c6b3e;
  box-shadow: 0 10px 22px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.84);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.offerHub__chip:hover{
  transform: translateY(-1px);
  border-color: rgba(12,107,62,.24);
  box-shadow: 0 14px 26px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.92);
}
.offerHub__chip.is-active{
  background: linear-gradient(135deg, rgba(12,107,62,.14), rgba(12,107,62,.08));
  border-color: rgba(12,107,62,.28);
  color: #0a5b35;
}
.offerHub__chip--warm{
  background: linear-gradient(180deg, rgba(255,246,213,.98), rgba(255,239,183,.96));
  border-color: rgba(var(--arbuzik-yellow-deep-rgb),.44);
  color: #8a6a00;
}
.offerHub__chip--warm.is-active{
  background: linear-gradient(135deg, rgba(var(--arbuzik-yellow-deep-rgb),.24), rgba(var(--arbuzik-yellow-deep-rgb),.16));
  border-color: rgba(var(--arbuzik-yellow-deep-rgb),.62);
}

.localMap__canvas{
  min-height: 270px;
  background:
    radial-gradient(440px 180px at 18% 88%, rgba(12,107,62,.05), transparent 60%),
    linear-gradient(180deg, #eef3ef, #e5ece5);
}
.localMap__canvas::after{
  background:
    linear-gradient(29deg, transparent 47%, rgba(255,255,255,.88) 47.6%, rgba(255,255,255,.88) 48.6%, transparent 49%),
    linear-gradient(8deg, transparent 48%, rgba(255,255,255,.74) 48.6%, rgba(255,255,255,.74) 49.4%, transparent 50%),
    radial-gradient(280px 120px at 22% 88%, rgba(12,107,62,.06), transparent 60%),
    radial-gradient(160px 100px at 82% 18%, rgba(var(--arbuzik-yellow-rgb),.16), transparent 64%);
}
.localPin__dot{
  width: 18px;
  height: 18px;
}
.localPin.is-center .localPin__dot{
  width: 22px;
  height: 22px;
}
.localPin__label{
  top: -10px;
}

@media (max-width: 980px){
  .offerHub__head{ margin-bottom: 22px; }
  .offerHub__filters{ gap: 10px; }
  .offerHub__chip{ padding: 11px 14px; border-radius: 14px; }
}


/* =========================================================
   HOME + BOXIKI POLISH v.132
   - boxiki nav like homepage
   - one title in local map section
   - customer-facing descriptions
   - denser, calmer map drawing
   ========================================================= */
.localMap__head > .muted,
.offerHub__head > .muted{
  max-width: 48ch;
  line-height: 1.45;
}
.localMap__head .secTitle > span{
  padding-right: 0;
}
.localMap__head{
  margin-bottom: 18px;
}
.localMap__panelTop{
  gap: 14px;
}
.localMap__title{
  font-size: clamp(18px, 1.9vw, 28px);
}
.localMap__canvas{
  overflow: hidden;
}
.localMap__svg text{
  letter-spacing: .01em;
}
@media (max-width: 980px){
  .localMap__head,
  .offerHub__head{
    align-items:flex-start;
  }
  .localMap__head > .muted,
  .offerHub__head > .muted{
    text-align:left;
    max-width:none;
  }
}


/* =========================================================
   KUP WEDŁUG POTRZEB — readability fix v.134
   ========================================================= */
.offerHub__part--needs .offerHub__intro{
  margin-bottom: 14px;
}
.offerNeeds--visual{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.needCard--visual{
  min-height: 300px;
  border-radius: 24px;
}
.needCard--visual::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.36) 56%, rgba(0,0,0,.74) 100%),
    radial-gradient(220px 120px at 14% 10%, rgba(255,255,255,.10), transparent 62%);
}
.needCard__content{
  min-height: 300px;
  padding: 18px 16px 16px;
}
.needCard__content::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  height: 56%;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,22,14,0) 0%, rgba(8,22,14,.18) 20%, rgba(8,22,14,.50) 48%, rgba(8,22,14,.82) 100%);
  z-index:-1;
}
.needCard__badge{
  max-width: calc(100% - 28px);
  padding: 7px 11px;
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.needCard--visual h4{
  max-width: 11ch;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.needCard--visual p{
  margin-top: 7px;
  max-width: 18ch;
  font-size: 12px;
  line-height: 1.28;
}
.needCard__meta{
  margin-top: 10px;
  max-width: 18ch;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,.96);
}
.needCard__cta{
  margin-top: 14px;
  padding: 9px 14px;
  font-size: 11px;
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
}
@media (max-width: 1240px){
  .needCard--visual{ min-height: 286px; }
  .needCard__content{ min-height: 286px; padding: 16px 14px 14px; }
  .needCard--visual h4{ font-size: clamp(15px, 1.7vw, 19px); max-width: 10ch; }
  .needCard--visual p{ font-size: 11px; max-width: 16ch; }
  .needCard__meta{ font-size: 10px; max-width: 16ch; }
  .needCard__badge{ font-size: 9.5px; padding: 7px 10px; }
}
@media (max-width: 900px){
  .offerNeeds--visual{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .needCard--visual, .needCard__content{ min-height: 300px; }
  .needCard--visual h4{ font-size: 22px; max-width: 12ch; }
  .needCard--visual p{ font-size: 13px; max-width: 22ch; }
  .needCard__meta{ font-size: 12px; max-width: 22ch; }
}
@media (max-width: 640px){
  .offerNeeds--visual{ grid-template-columns: 1fr; }
  .needCard--visual, .needCard__content{ min-height: 280px; }
}

/* OBRAZ – lekko jaśniejszy */
.needCard img {
  filter: brightness(1.08) contrast(1.05);
}

/* OVERLAY – dużo lżejszy */
.needCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.0) 100%
  );
  z-index: 1;
}
.needCard:hover img {
  filter: brightness(1.15) contrast(1.08) saturate(1.05);
}

/* =========================================================
   KUP WEDŁUG POTRZEB — COLOR TINT BOOST v.139
   mocniej widoczny kolor każdego kafla, bez ruszania zdjęć
   ========================================================= */
.offerNeeds--visual .needCard--visual::before{
  filter: brightness(1.12) saturate(1.08) contrast(1.03) !important;
}
.offerNeeds--visual .needCard--visual::after{
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.20) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.10) 0 2px, transparent 3px) 9px 10px/18px 18px,
    radial-gradient(220px 120px at 16% 10%, rgba(255,255,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.42) 100%),
    linear-gradient(135deg, rgba(18,127,69,.40), rgba(18,127,69,.10)) !important;
}


/* =========================================================
   KUP WEDŁUG POTRZEB — TOP/BOTTOM COLOR ONLY FIX v.142
   kolor wyłącznie u góry i u dołu kafla, środek pozostaje czystszy
   ========================================================= */
.offerNeeds--visual .needCard--visual::after{
  background:
    linear-gradient(180deg, rgba(18,127,69,.48) 0%, rgba(18,127,69,.24) 10%, rgba(18,127,69,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(18,127,69,.34) 0%, rgba(18,127,69,.16) 10%, rgba(18,127,69,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--gold::after,
.offerNeeds--visual .needCard--gold::after{
  background:
    linear-gradient(180deg, rgba(243,182,12,.56) 0%, rgba(243,182,12,.26) 10%, rgba(243,182,12,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(243,182,12,.38) 0%, rgba(243,182,12,.16) 10%, rgba(243,182,12,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.46) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--red::after,
.offerNeeds--visual .needCard--red::after{
  background:
    linear-gradient(180deg, rgba(229,57,53,.58) 0%, rgba(229,57,53,.28) 10%, rgba(229,57,53,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(255,110,42,.38) 0%, rgba(255,110,42,.16) 10%, rgba(255,110,42,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--berry::after,
.offerNeeds--visual .needCard--berry::after{
  background:
    linear-gradient(180deg, rgba(232,40,87,.58) 0%, rgba(232,40,87,.28) 10%, rgba(232,40,87,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(255,120,62,.34) 0%, rgba(255,120,62,.14) 10%, rgba(255,120,62,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--premium::after,
.offerNeeds--visual .needCard--premium::after{
  background:
    linear-gradient(180deg, rgba(9,94,52,.56) 0%, rgba(9,94,52,.26) 10%, rgba(9,94,52,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(28,132,83,.38) 0%, rgba(28,132,83,.16) 10%, rgba(28,132,83,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}


/* =========================================================
   KUP WEDŁUG POTRZEB — kolorowe tło za panelami v.143
   Efekt: pionowe kolorowe "plamy" góra i dół za każdym panelem
   ========================================================= */

/* Wrapper sekcji needs dostaje position:relative + overflow:visible */
.offerHub__part--needs{
  position: relative;
}

/* Sam grid needs dostaje position:relative */
.offerNeeds--visual{
  position: relative;
  z-index: 1;
}

/* Arbuzikowe glow tylko poza panelem — góra + dół */
.needCard--visual{
  --shadow-top: rgba(6,107,51,.38);
  --shadow-bot: rgba(6,107,51,.30);
  box-shadow:
    0 -18px 26px -14px var(--shadow-top),
    0  18px 26px -14px var(--shadow-bot),
    0  18px 34px rgba(15,23,42,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Arbuzikowe kolory per wariant */
.needCard--gold{
  --shadow-top: rgba(255,222,0,.48);
  --shadow-bot: rgba(255,222,0,.34);
}
.needCard--red{
  --shadow-top: rgba(239,36,36,.46);
  --shadow-bot: rgba(239,36,36,.34);
}
.needCard--berry{
  --shadow-top: rgba(239,36,36,.42);
  --shadow-bot: rgba(255,222,0,.28);
}
.needCard--premium{
  --shadow-top: rgba(6,107,51,.40);
  --shadow-bot: rgba(6,107,51,.32);
}

/* Hover — trochę mocniej, ale dalej tylko góra/dół */
.needCard--visual:hover{
  box-shadow:
    0 -24px 34px -14px var(--shadow-top),
    0  24px 34px -14px var(--shadow-bot),
    0  24px 42px rgba(15,23,42,.16);
}

/* Tło sekcji needs */
.offerHub__part--needs{
  background: transparent;
}

/* Na mobile — zmniejsz shadow żeby nie wychodził za ekran */
@media (max-width: 900px){
  .needCard--visual{
    box-shadow:
      0 -12px 18px -12px var(--shadow-top),
      0  12px 18px -12px var(--shadow-bot),
      0  10px 20px rgba(15,23,42,.10);
  }
  .needCard--visual:hover{
    box-shadow:
      0 -16px 24px -12px var(--shadow-top),
      0  16px 24px -12px var(--shadow-bot),
      0  16px 28px rgba(15,23,42,.14);
  }
}


/* =========================================================
   KUP WEDŁUG POTRZEB — ARBUZIK GLOW COLORS FINAL v.147
   tylko glow w kolorach marki:
   green:#066b33; yellow:#ffde00; red:#ef2424;
   ========================================================= */
.offerNeeds--visual .needCard--visual{
  --shadow-top: rgba(6,107,51,.46) !important;
  --shadow-bot: rgba(6,107,51,.36) !important;
  box-shadow:
    0 -18px 26px -14px var(--shadow-top),
    0  18px 26px -14px var(--shadow-bot),
    0  18px 34px rgba(15,23,42,.12) !important;
}
.offerNeeds--visual .needCard--visual:hover{
  box-shadow:
    0 -24px 34px -14px var(--shadow-top),
    0  24px 34px -14px var(--shadow-bot),
    0  24px 42px rgba(15,23,42,.16) !important;
}

/* warianty paneli */
.offerNeeds--visual .needCard--visual.needCard--gold{
  --shadow-top: rgba(255,222,0,.62) !important;
  --shadow-bot: rgba(255,222,0,.44) !important;
}
.offerNeeds--visual .needCard--visual.needCard--red{
  --shadow-top: rgba(239,36,36,.58) !important;
  --shadow-bot: rgba(239,36,36,.42) !important;
}
.offerNeeds--visual .needCard--visual.needCard--berry{
  --shadow-top: rgba(239,36,36,.52) !important;
  --shadow-bot: rgba(255,222,0,.34) !important;
}
.offerNeeds--visual .needCard--visual.needCard--premium{
  --shadow-top: rgba(6,107,51,.52) !important;
  --shadow-bot: rgba(6,107,51,.40) !important;
}

/* żadnych obcych tintów w glow poza kolorami Arbuzika */
.offerNeeds--visual .needCard--visual::after{
  background:
    linear-gradient(180deg, rgba(6,107,51,.34) 0%, rgba(6,107,51,.12) 10%, rgba(6,107,51,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(6,107,51,.24) 0%, rgba(6,107,51,.08) 10%, rgba(6,107,51,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--gold::after{
  background:
    linear-gradient(180deg, rgba(255,222,0,.38) 0%, rgba(255,222,0,.14) 10%, rgba(255,222,0,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(255,222,0,.26) 0%, rgba(255,222,0,.10) 10%, rgba(255,222,0,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.46) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--red::after{
  background:
    linear-gradient(180deg, rgba(239,36,36,.38) 0%, rgba(239,36,36,.14) 10%, rgba(239,36,36,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(239,36,36,.26) 0%, rgba(239,36,36,.10) 10%, rgba(239,36,36,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--berry::after{
  background:
    linear-gradient(180deg, rgba(239,36,36,.36) 0%, rgba(239,36,36,.14) 10%, rgba(239,36,36,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(255,222,0,.22) 0%, rgba(255,222,0,.08) 10%, rgba(255,222,0,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}
.offerNeeds--visual .needCard--visual.needCard--premium::after{
  background:
    linear-gradient(180deg, rgba(6,107,51,.40) 0%, rgba(6,107,51,.16) 10%, rgba(6,107,51,0) 24%) top/100% 34% no-repeat,
    linear-gradient(0deg, rgba(6,107,51,.28) 0%, rgba(6,107,51,.10) 10%, rgba(6,107,51,0) 24%) bottom/100% 34% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.48) 100%) !important;
}


/* =========================================================
   OFERTA ARBUZIKA — CTA / KOSZYK v.148
   ========================================================= */
.offerCard__ctaBtn,
.today__ctaBtn,
.needCard.is-buyable{ cursor:pointer; }
.today__actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.today__price{
  display:inline-flex;
  align-items:center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
  border:1px solid rgba(255,255,255,.62);
  color:#0b5d34;
  font-size:13px;
  font-weight:1000;
  opacity:1;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.today__ctaBtn,
.offerCard__ctaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height: 42px;
  padding: 10px 16px;
  border:none;
  border-radius: 999px;
  background: linear-gradient(180deg, #0c7a42, #066b33);
  color:#fff;
  font-weight:900;
  font-size:13px;
  letter-spacing:.01em;
  box-shadow: 0 14px 30px rgba(6,107,51,.22);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.today__ctaBtn:hover,
.offerCard__ctaBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(6,107,51,.28);
  color: var(--arbuzik-yellow);
}
.today__ctaBtn.is-added,
.offerCard__ctaBtn.is-added,
.needCard__cta.is-added{
  background: linear-gradient(180deg, #ffea54, #ffde00);
  color:#15351f;
  box-shadow: 0 14px 30px rgba(255,222,0,.22);
}
.offerCard__linkRow{ align-items:center; }
.offerCard__ctaWrap{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top: 14px;
}
.offerCard__price{
  color: rgba(0,0,0,.64);
  font-size: 12px;
  font-weight: 900;
}
.needCard.is-buyable .needCard__cta{
  background: linear-gradient(180deg, rgba(10,107,54,.72), rgba(6,107,51,.88));
  border-color: rgba(255,255,255,.26);
  color:#ffffff;
}
.needCard.is-buyable:hover .needCard__cta{
  background: linear-gradient(180deg, #0e8e46, #066b33);
  color: var(--arbuzik-yellow);
}
.arbToast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 250px;
  max-width: min(92vw, 380px);
  padding: 14px 16px;
  border-radius: 18px;
  border:1px solid rgba(6,107,51,.14);
  background: rgba(255,255,255,.96);
  color:#16341e;
  box-shadow: 0 20px 42px rgba(15,23,42,.18);
  transform: translateY(12px);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(10px);
}
.arbToast.is-visible{ opacity:1; transform: translateY(0); }
.arbToast__dot{
  width:10px; height:10px; border-radius:999px; flex:0 0 10px;
  background:#066b33; box-shadow:0 0 0 6px rgba(6,107,51,.10);
}
.arbToast__text{ font-size:14px; font-weight:800; line-height:1.35; }
@media (max-width: 640px){
  .today__actions,
  .offerCard__ctaWrap{ flex-direction:column; align-items:stretch; }
  .today__ctaBtn,
  .offerCard__ctaBtn{ width:100%; }
  .today__price,
  .offerCard__price{ text-align:left; }
}


/* =========================================================
   HERO BOX TYGODNIA LIVE PANEL v.153
   dynamiczny panel w hero: żywe kolory + rotacja + CTA
   ========================================================= */
.hero--full .hero__imgOverlay{
  overflow: visible;
}

.heroSpot{
  --spot-accent: #ffde00;
  --spot-accent-2: #ef2424;
  --spot-glow: rgba(255, 222, 0, .42);
  position: relative;
  width: min(334px, calc(100vw - 38px));
  min-height: 170px;
  height: 170px;
  margin-bottom: 32px;
  padding: 12px 14px 12px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  background:
    radial-gradient(150px 90px at 104% -6%, rgba(255,255,255,.86), transparent 48%),
    radial-gradient(150px 120px at -14% 112%, rgba(255,255,255,.30), transparent 56%),
    linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,250,232,.97) 48%, rgba(247,255,245,.95) 100%) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.48) inset,
    0 0 0 10px rgba(255,255,255,.10),
    0 0 34px var(--spot-glow);
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(8px);
}

.heroSpot::before{
  content:"";
  position:absolute;
  inset:auto -28px -34px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--spot-accent), var(--spot-accent-2));
  opacity:.22;
  filter: blur(8px);
  z-index:0;
  animation: heroSpotGlow 5.2s ease-in-out infinite;
}

.heroSpot::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 8px;
  background: linear-gradient(90deg, var(--spot-accent), var(--spot-accent-2), #ffde00, var(--spot-accent));
  box-shadow: 0 0 24px var(--spot-glow);
  z-index:1;
}

.heroSpot__media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.heroSpot__media::before{
  content:"";
  position:absolute;
  right:10px;
  top:12px;
  width: 92px;
  height: 68px;
  border-radius: 22px;
  background: var(--hero-spot-bg, linear-gradient(135deg, rgba(6,107,51,.14), rgba(255,255,255,0)));
  background-size: cover;
  background-position: center;
  opacity: .88;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  border: 2px solid rgba(255,255,255,.72);
  transform: rotate(8deg);
}

.heroSpot__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 52%, rgba(255,255,255,.74) 68%, rgba(255,255,255,.14) 100%),
    radial-gradient(180px 100px at 18% 18%, rgba(255,255,255,.46), transparent 70%);
}

.heroSpot__label,
.heroSpot__title,
.heroSpot__copy,
.heroSpot__actions,
.heroSpot__dots{
  position:relative;
  z-index:2;
}

.heroSpot__label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--spot-accent) 80%, white), #fff1a6);
  color:#084625;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

.heroSpot__label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.24);
}

.heroSpot__title{
  margin-top:10px;
  font-size: clamp(17px, 1.9vw, 27px);
  line-height:1.02;
  font-weight:1000;
  color:#0a6c37;
  letter-spacing:-.03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.52);
  max-width: calc(100% - 98px);
}

.heroSpot__copy{
  margin-top:6px;
  max-width: calc(100% - 98px);
  min-height: 36px;
  font-size:12px;
  line-height:1.42;
  color:#466351;
  font-weight:700;
}

.heroSpot__actions{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.heroSpot__price{
  display:inline-flex;
  align-items:center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fbfff1, #eaf8d9);
  border:1px solid rgba(6,107,51,.14);
  color:#0a6c37;
  font-size:15px;
  font-weight:1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.heroSpot__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:1000;
  font-size:13px;
  color:#fff !important;
  background: linear-gradient(135deg, #0d8f46, #0a6b36);
  box-shadow: 0 14px 24px rgba(6,107,51,.24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, color .18s ease;
}

.heroSpot__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(6,107,51,.28);
  filter: saturate(1.08);
  color: var(--arbuzik-yellow) !important;
}

.heroSpot__cta::after{
  content:"→";
  margin-left:7px;
  font-size:14px;
}

.heroSpot__dots{
  margin-top:10px;
  display:flex;
  gap:6px;
}

.heroSpot__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background: rgba(6,107,51,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .18s ease, background .18s ease, width .18s ease;
}

.heroSpot__dot.is-active{
  width:26px;
  background: linear-gradient(90deg, var(--spot-accent), var(--spot-accent-2));
}

.heroSpot.is-entering{
  animation: heroSpotSwap .36s ease;
}

.heroSpot--green{ --spot-accent:#8be35a; --spot-accent-2:#00a64f; --spot-glow:rgba(44,182,72,.28); }
.heroSpot--gold{ --spot-accent:#ffde00; --spot-accent-2:#ff9b00; --spot-glow:rgba(255,222,0,.34); }
.heroSpot--red{ --spot-accent:#ff5c5c; --spot-accent-2:#ef2424; --spot-glow:rgba(239,36,36,.26); }
.heroSpot--mix{ --spot-accent:#ffde00; --spot-accent-2:#ef2424; --spot-glow:rgba(255,168,0,.30); }

@keyframes heroSpotSwap{
  from{ transform: translateY(8px) scale(.98); opacity:.68; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

@keyframes heroSpotGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.16; }
  50%{ transform: translate3d(-8px,4px,0) scale(1.08); opacity:.24; }
}

@media (max-width: 980px){
  .heroSpot{
    width:min(330px, calc(100vw - 34px));
    min-height: 166px;
    height: 166px;
    margin-bottom: 24px;
  }
}

@media (max-width: 640px){
  .hero--full .hero__imgOverlay{
    padding: 14px !important;
  }

  .heroSpot{
    width:min(312px, calc(100vw - 28px));
    min-height: 162px;
    height: 162px;
    margin-bottom: 18px;
    padding: 12px 12px 10px !important;
    border-radius: 20px !important;
  }

  .heroSpot__media::before{
    display:none;
  }

  .heroSpot__media::after{
    background:
      linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 100%),
      radial-gradient(160px 90px at 18% 18%, rgba(255,255,255,.34), transparent 70%);
  }

  .heroSpot__title{
    max-width: 100%;
    font-size: 17px;
  }

  .heroSpot__copy{
    max-width: 100%;
    min-height: 34px;
    font-size:12px;
    line-height: 1.35;
  }

  .heroSpot__actions{
    gap: 8px;
  }

  .heroSpot__cta{
    min-height: 34px;
    padding: 0 12px;
    font-size:12px;
  }

  .heroSpot__price{
    min-height: 32px;
    padding: 0 9px;
    font-size:12px;
  }

  .heroSpot__dots{
    margin-top: 8px;
  }
}


/* =========================================================
   HERO SPOT CONTROL + REORDER v.153
   ========================================================= */
.myorder-rebuy{
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #0d8f46, #0a6b36) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(6,107,51,.18) !important;
}
.myorder-rebuy:hover,
.myorder-rebuy:focus-visible{
  color: var(--arbuzik-yellow) !important;
  transform: translateY(-1px);
}
.myorder-rebuy:disabled{
  opacity: .68;
  cursor: wait;
}
.cartFlash{
  animation: cartFlashPulse 1.1s ease;
}
@keyframes cartFlashPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,222,0,0); }
  20%{ box-shadow: 0 0 0 6px rgba(255,222,0,.22); }
  100%{ box-shadow: 0 0 0 0 rgba(255,222,0,0); }
}


/* =========================================================
   HERO SPOT PETARDA + PLANER TYGODNIA v.157
   ========================================================= */
.hero--full .hero__img{ overflow: visible; }
.heroSpot{
  --spot-accent:#ef2424;
  --spot-accent-2:#ef2424;
  --spot-ring:rgba(239,36,36,.34);
  width:min(360px, calc(100vw - 34px));
  min-height:198px;
  height:auto;
  margin-bottom:12px;
  padding:14px 14px 14px !important;
  border-radius:24px !important;
  border:2px solid rgba(255,255,255,.92) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,252,252,.98) 100%) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.22), 0 0 0 6px rgba(255,255,255,.12), 0 0 0 14px var(--spot-ring), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.heroSpot::before{
  inset:auto -18px -24px auto;
  width:150px;height:150px;
  background:radial-gradient(circle at 30% 30%, var(--spot-accent), #ffffff 76%);
  opacity:.38;filter:blur(7px);
}
.heroSpot::after{
  height:11px;
  background:var(--spot-accent);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 0 24px var(--spot-ring);
}
.heroSpot__label{
  padding:7px 12px;
  background:var(--spot-accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.heroSpot__label::before{ background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18);}
.heroSpot__title{ color:#0a6c37; max-width: calc(100% - 102px);}
.heroSpot__copy{ max-width: calc(100% - 102px); min-height: 40px; color:#305241; }
.heroSpot__media::before{ right:10px; top:16px; width:86px; height:64px; opacity:.96; border:3px solid rgba(255,255,255,.82);}
.heroSpot__media::after{ background:linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 54%, rgba(255,255,255,.70) 72%, rgba(255,255,255,.05) 100%); }
.heroSpot__actions{ padding-top:8px; }
.heroSpot__price{ background:#f5fff0; border:1px solid rgba(6,107,51,.16); font-size:15px; }
.heroSpot__cta{ background:#0c8a43; color:#fff !important; }
.heroSpot__cta:hover{ background:#066b33; color:var(--arbuzik-yellow) !important; }
.heroSpot__dots{ margin-top:10px; min-height:10px; }
.heroSpot__dot{ background:rgba(6,107,51,.16); }
.heroSpot__dot.is-active{ background:var(--spot-accent); }
.heroSpot--green{ --spot-accent:#34b84f; --spot-accent-2:#34b84f; --spot-ring:rgba(52,184,79,.30); }
.heroSpot--gold{ --spot-accent:#ffde00; --spot-accent-2:#ffde00; --spot-ring:rgba(255,222,0,.34); }
.heroSpot--red{ --spot-accent:#ef2424; --spot-accent-2:#ef2424; --spot-ring:rgba(239,36,36,.32); }
.heroSpot--mix{ --spot-accent:#ef2424; --spot-accent-2:#ef2424; --spot-ring:rgba(239,36,36,.30); }

.today__price, .offerCard__price{
  color:#0a6c37 !important;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  padding:7px 10px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.offerCard__price{ font-size:13px; }
.needCard__cta{ color:#ffffff !important; text-shadow:0 1px 1px rgba(0,0,0,.18); }

.plannerWeek{ padding-top: 24px; }
.plannerWeek__shell{
  background:linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,.035) 100%);
  border:1px solid rgba(12,107,62,.08);
  border-radius:32px;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  padding:24px;
}
#planer-tygodnia > .wrap{
  width:min(1140px, 92vw) !important;
  margin:0 auto;
}
.plannerWeek__grid{ display:grid; grid-template-columns: 300px minmax(0,1fr); gap:18px; align-items:stretch; }
.plannerWeek__sidebar{ display:grid; gap:12px; }
.plannerWeek__tab{
  appearance:none; border:none; cursor:pointer; text-align:left; font:inherit;
  padding:18px 18px 16px; border-radius:24px; background:#fff;
  border:1px solid rgba(12,107,62,.10); box-shadow:0 12px 30px rgba(15,23,42,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.plannerWeek__tab:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(15,23,42,.10);}
.plannerWeek__tab.is-active{ border-color:rgba(239,36,36,.34); box-shadow:0 20px 38px rgba(239,36,36,.12), inset 0 0 0 2px rgba(255,222,0,.34);}
.plannerWeek__tabEyebrow{ display:inline-flex; margin-bottom:8px; padding:6px 10px; border-radius:999px; background:rgba(255,222,0,.22); color:#755d00; font-size:11px; font-weight:900; }
.plannerWeek__tab strong{ display:block; font-size:20px; color:#0a6c37; }
.plannerWeek__tab small{ display:block; margin-top:6px; color:#5d6d63; font-size:13px; line-height:1.45; }
.plannerWeek__panel{
  position:relative; overflow:hidden; border-radius:28px; padding:22px;
  background:radial-gradient(520px 220px at 100% 0%, rgba(255,222,0,.16), transparent 58%), linear-gradient(180deg, rgba(12,107,62,.07), rgba(255,255,255,.98));
  border:1px solid rgba(12,107,62,.08);
}
.plannerWeek__panel::before{ content:""; position:absolute; inset:auto -40px -50px auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(239,36,36,.16), transparent 68%);}
.plannerWeek__hero{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; position:relative; z-index:1;}
.plannerWeek__eyebrow{ display:inline-flex; padding:7px 11px; border-radius:999px; background:#ef2424; color:#fff; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.plannerWeek__hero h3{ margin:10px 0 8px; font-size:34px; line-height:1.02; color:#0a6c37; }
.plannerWeek__hero p{ margin:0; max-width:52ch; color:#4d6157; font-size:15px; line-height:1.58; }
.plannerWeek__summary{
  min-width:190px;
  padding:16px 18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,222,0,.85) 0 2px, transparent 3px) 0 0/20px 20px,
    linear-gradient(180deg, #118242 0%, #0c6b3e 100%);
  border:1px solid rgba(12,107,62,.16);
  box-shadow:0 12px 24px rgba(15,23,42,.10);
}
.plannerWeek__sumLabel{
  display:block;
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.plannerWeek__summary strong{
  display:block;
  margin-top:6px;
  font-size:34px;
  color:#ffde00;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.16);
}
.plannerWeek__summary small{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-top:8px;
  color:#fff;
  font-size:13px;
}
.plannerWeek__summary small b{
  font-size:16px;
  line-height:1.05;
  color:#fff;
}
.plannerWeek__items{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.plannerWeek__item{ position:relative; min-height:178px; padding:16px 16px 42px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,246,.92)); border:1px solid rgba(12,107,62,.10); box-shadow:0 12px 28px rgba(15,23,42,.06); overflow:hidden; isolation:isolate; background-image:var(--planner-item-bg); background-size:cover; background-position:center; }
.plannerWeek__item::before{ content:none; }
.plannerWeek__itemShade{ display:none; }
.plannerWeek__item--dark::before{ content:none; }
.plannerWeek__itemTop, .plannerWeek__itemBottom, .plannerWeek__itemPrice{ position:relative; z-index:1; }
.plannerWeek__itemTop{ display:block; padding-right:40px; }
.plannerWeek__itemBottom{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  z-index:3;
}
.plannerWeek__item h4{ margin:0; font-size:17px; line-height:1.06; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.42); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; }
.plannerWeek__itemMeta{ margin-top:6px; color:rgba(255,255,255,.96); font-size:12px; line-height:1.3; min-height:32px; max-width:none; font-weight:700; text-shadow:0 2px 12px rgba(0,0,0,.38); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.plannerWeek__itemPrice{
  display:inline-flex;
  margin-top:0;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(12,107,62,.14);
  font-size:12px;
  font-weight:900;
  color:#0a6c37;
  box-shadow:0 8px 18px rgba(12,107,62,.08);
  white-space:nowrap;
}
.plannerWeek__itemQty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#0a6c37;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 18px rgba(15,23,42,.12);
  border:1px solid rgba(12,107,62,.12);
}
.plannerWeek__itemRemove{position:absolute; top:10px; right:10px; left:auto; z-index:5; width:28px; height:28px; border:none; border-radius:999px; background:#ef2424; color:#fff; font-size:18px; line-height:1; font-weight:900; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 18px rgba(239,36,36,.22); transition:transform .16s ease, background .16s ease; pointer-events:auto;}
.plannerWeek__itemRemove:hover{transform:scale(1.08); background:#cf1e1e;}
.plannerWeek__footer{ position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-top:18px; }
.plannerWeek__value{ flex:1; }
.plannerWeek__valueBar{ height:14px; border-radius:999px; background:rgba(12,107,62,.08); overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.plannerWeek__valueBar span{ display:block; width:38%; height:100%; border-radius:999px; background:linear-gradient(90deg, #ef2424, #ffde00); box-shadow:0 0 18px rgba(239,36,36,.18); transition:width .28s ease; }
.plannerWeek__value p{ margin:10px 0 0; color:#4d6157; font-size:14px; }
.plannerWeek__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.plannerWeek__cta{ appearance:none; border:none; cursor:pointer; min-height:46px; padding:0 18px; border-radius:999px; background:linear-gradient(180deg, #0d8f46, #066b33); color:#fff; font-size:14px; font-weight:900; box-shadow:0 14px 28px rgba(6,107,51,.18); transition:transform .16s ease, color .16s ease, box-shadow .16s ease; }
.plannerWeek__cta:hover{ transform:translateY(-1px); color:var(--arbuzik-yellow); box-shadow:0 18px 34px rgba(6,107,51,.24);}
.plannerWeek__cta--ghost{ background:#fff; color:#0a6c37; border:1px solid rgba(12,107,62,.16); box-shadow:none; }
.plannerWeek__cta--ghost:hover{ color:#ef2424; }
.plannerWeek__flash{ animation: plannerFlash 1.1s ease; }
@keyframes plannerFlash{ 0%{ box-shadow:0 0 0 0 rgba(255,222,0,.0);} 35%{ box-shadow:0 0 0 12px rgba(255,222,0,.22);} 100%{ box-shadow:0 0 0 0 rgba(255,222,0,0);} }

@media (max-width: 980px){
  .plannerWeek__grid{ grid-template-columns:1fr; }
  .plannerWeek__sidebar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plannerWeek__items{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plannerWeek__hero{ flex-direction:column; }
  .plannerWeek__summary{ min-width:0; width:100%; }
}
@media (max-width: 640px){
  .hero--full .hero__imgOverlay{ padding:14px !important; align-items:flex-end; }
  .heroSpot{ width:min(292px, calc(100vw - 28px)); min-height:188px; padding:14px 14px 14px !important; margin-bottom:10px; }
  .heroSpot__media::before{ display:none; }
  .heroSpot__title, .heroSpot__copy{ max-width:100%; }
  .heroSpot__copy{ min-height:34px; }
  .heroSpot__actions{ gap:8px; }
  .heroSpot__cta{ min-height:36px; padding:0 12px; }
  .heroSpot__price{ min-height:34px; font-size:13px; }
  .heroSpot__dots{ margin-top:8px; }

  /* === PLANER MOBILE: shell bez bocznych paddingów na siatce tabów === */
  .plannerWeek__shell{ padding:18px 0 18px 0; border-radius:0; background:none; border:none; box-shadow:none; }
  .plannerWeek__head{ padding:0 18px 14px; }
  .plannerWeek__grid{ display:flex; flex-direction:column; gap:0; }

  /* Sidebar pełna szerokość ekranu — wysuwa się poza wrap */
  .plannerWeek__sidebar{
    display:flex;
    flex-direction:row;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    touch-action:pan-x pinch-zoom;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:24px 18px 28px;
    grid-template-columns:unset;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%);
    box-sizing:border-box;
    width:100vw;
    background:
      linear-gradient(135deg, #0b6d36 0%, #118a43 34%, #ffde00 34%, #ffde00 40%, #ef2424 40%, #ef2424 54%, #0f7a3c 54%, #0f7a3c 100%);
    border-radius:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 34px rgba(6,107,51,.14);
  }
  .plannerWeek__sidebar::-webkit-scrollbar{ display:none; height:0; }
  .plannerWeek__sidebar::-webkit-scrollbar-track{ background:rgba(12,107,62,.06); border-radius:999px; }
  .plannerWeek__sidebar::-webkit-scrollbar-thumb{ background:rgba(12,107,62,.22); border-radius:999px; }
  .plannerWeek__wrap{ overflow:visible; }

  /* Taby — karty z żywymi kolorami */
  .plannerWeek__tab{
    flex:0 0 auto;
    width:155px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    border-radius:22px;
    touch-action:pan-x;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    padding:14px 14px 13px;
    text-align:left;
    margin-right:10px;
    position:relative;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .plannerWeek__tab:last-child{ margin-right:0; }

  /* Sałatka — świeża zieleń */
  .plannerWeek__tab[data-plan-key="salatka"]{
    background:linear-gradient(155deg, #1db954 0%, #0a6c37 100%);
    border:none;
    box-shadow:0 8px 22px rgba(10,108,55,.28);
  }
  .plannerWeek__tab[data-plan-key="salatka"] strong{ color:#fff; font-size:17px; }
  .plannerWeek__tab[data-plan-key="salatka"] small{ color:rgba(255,255,255,.82); }
  .plannerWeek__tab[data-plan-key="salatka"] .plannerWeek__tabEyebrow{ background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.28); }

  /* Rosół — złoty amber */
  .plannerWeek__tab[data-plan-key="rosol"]{
    background:linear-gradient(155deg, #f5a623 0%, #c47b00 100%);
    border:none;
    box-shadow:0 8px 22px rgba(196,123,0,.30);
  }
  .plannerWeek__tab[data-plan-key="rosol"] strong{ color:#fff; font-size:17px; }
  .plannerWeek__tab[data-plan-key="rosol"] small{ color:rgba(255,255,255,.82); }
  .plannerWeek__tab[data-plan-key="rosol"] .plannerWeek__tabEyebrow{ background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.28); }

  /* Smoothie — pomarańcz-koralowy */
  .plannerWeek__tab[data-plan-key="smoothie"]{
    background:linear-gradient(155deg, #ff6b35 0%, #d4380d 100%);
    border:none;
    box-shadow:0 8px 22px rgba(212,56,13,.30);
  }
  .plannerWeek__tab[data-plan-key="smoothie"] strong{ color:#fff; font-size:17px; }
  .plannerWeek__tab[data-plan-key="smoothie"] small{ color:rgba(255,255,255,.82); }
  .plannerWeek__tab[data-plan-key="smoothie"] .plannerWeek__tabEyebrow{ background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.28); }

  /* Weekend — fiolet premium */
  .plannerWeek__tab[data-plan-key="weekend"]{
    background:linear-gradient(155deg, #9b59b6 0%, #6c2d91 100%);
    border:none;
    box-shadow:0 8px 22px rgba(108,45,145,.30);
  }
  .plannerWeek__tab[data-plan-key="weekend"] strong{ color:#fff; font-size:17px; }
  .plannerWeek__tab[data-plan-key="weekend"] small{ color:rgba(255,255,255,.82); }
  .plannerWeek__tab[data-plan-key="weekend"] .plannerWeek__tabEyebrow{ background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.28); }

  /* Active: wyraźniejszy lift + jasny ring */
  .plannerWeek__tab.is-active{ transform:translateY(-3px) scale(1.03); border-color:transparent; }
  .plannerWeek__tab[data-plan-key="salatka"].is-active{ box-shadow:0 16px 34px rgba(10,108,55,.40), 0 0 0 3px #ffde00; }
  .plannerWeek__tab[data-plan-key="rosol"].is-active{ box-shadow:0 16px 34px rgba(196,123,0,.42), 0 0 0 3px #fff; }
  .plannerWeek__tab[data-plan-key="smoothie"].is-active{ box-shadow:0 16px 34px rgba(212,56,13,.40), 0 0 0 3px #ffde00; }
  .plannerWeek__tab[data-plan-key="weekend"].is-active{ box-shadow:0 16px 34px rgba(108,45,145,.42), 0 0 0 3px #e879f9; }

  /* Panel produktów — z paddingiem bocznym */
  .plannerWeek__panel{ margin:0 18px; border-radius:26px; padding:18px; }

  /* Hero row: badge + tytuł po lewej, cena po prawej w jednej linii */
  .plannerWeek__hero{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
  .plannerWeek__hero > div:first-child{ flex:1; min-width:0; }
  .plannerWeek__hero h3{ margin:8px 0 6px; font-size:22px; line-height:1.08; }

  /* Summary — kompaktowy box po prawej na górze */
  .plannerWeek__summary{
    min-width:0;
    width:auto;
    flex:0 0 auto;
    padding:10px 12px;
    border-radius:16px;
    text-align:right;
  }
  .plannerWeek__sumLabel{ font-size:10px; }
  .plannerWeek__summary strong{ font-size:22px; margin-top:3px; }
  .plannerWeek__summary small{ font-size:11px; margin-top:4px; }

  /* Ukryj opis w hero (oszczędność miejsca) */
  .plannerWeek__hero p{ display:none; }

  /* Produkty — 2 kolumny, mniejszy badge cenowy */
  .plannerWeek__items{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .plannerWeek__item{ min-height:148px; padding:12px; border-radius:18px; }
  .plannerWeek__item h4{ font-size:16px; }
  .plannerWeek__itemMeta{ font-size:11px; min-height:28px; margin-top:5px; }
  .plannerWeek__itemPrice{ padding:5px 9px; font-size:11px; margin-top:8px; border-radius:999px; }
  .plannerWeek__itemQty{ min-width:42px; height:24px; font-size:10px; padding:0 8px; }

  .plannerWeek__footer{ flex-direction:column; align-items:stretch; }
  .plannerWeek__actions{ width:100%; }
  .plannerWeek__cta{ width:100%; }
}


/* =========================================================
   MOBILE CART BAR + HERO BOOST + PLANNER TABS DESKTOP v.162
   ========================================================= */
.mobileCartBar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px 12px 14px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(6,107,51,.98), rgba(10,143,70,.98));
  color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.24), 0 0 0 3px rgba(255,222,0,.24);
  transform:translateY(120%);
  opacity:0;
  transition:transform .24s ease, opacity .24s ease;
}
.mobileCartBar.is-visible{ transform:translateY(0); opacity:1; }
.mobileCartBar__meta{ display:flex; flex-direction:column; min-width:0; }
.mobileCartBar__meta strong{ font-size:14px; font-weight:900; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobileCartBar__meta span{ font-size:18px; font-weight:1000; color:#ffde00; line-height:1.1; }
.mobileCartBar__cta{
  flex:0 0 auto;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:1000;
  font-size:13px;
  color:#0a6c37;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(255,255,255,.18);
}
.mobileCartBar__cta:hover,.mobileCartBar__cta:focus-visible{ color:#ef2424; }

.heroSpot{
  width:min(368px, calc(100vw - 34px));
  min-height:214px;
  padding:16px 16px 14px !important;
  border:3px solid rgba(255,255,255,.96) !important;
  background:
    radial-gradient(220px 90px at 92% 14%, rgba(239,36,36,.16), transparent 62%),
    radial-gradient(180px 80px at 14% 96%, rgba(255,222,0,.22), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.995), rgba(255,251,251,.99)) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.24), 0 0 0 8px rgba(255,255,255,.12), 0 0 0 16px rgba(239,36,36,.22), inset 0 1px 0 rgba(255,255,255,.96);
  overflow:hidden;
}
.heroSpot::after{
  content:"";
  position:absolute;
  inset:auto -32px -38px auto;
  width:128px;
  height:128px;
  border-radius:999px;
  background:radial-gradient(circle at 36% 36%, rgba(255,255,255,.82) 0 12%, rgba(255,255,255,.08) 13% 28%, rgba(239,36,36,.92) 29% 100%);
  box-shadow:0 0 0 8px rgba(255,222,0,.28), 0 18px 34px rgba(239,36,36,.24);
  transform:rotate(-16deg);
  z-index:0;
}
.heroSpot__burst{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.heroSpot__burst::before,
.heroSpot__burst::after{
  content:"";
  position:absolute;
  border-radius:999px;
}
.heroSpot__burst::before{
  top:-18px; right:14px;
  width:122px; height:52px;
  background:#ef2424;
  box-shadow:0 12px 24px rgba(239,36,36,.18);
}
.heroSpot__burst::after{
  right:14px; top:18px;
  width:72px; height:72px;
  background:radial-gradient(circle at 35% 35%, #ffde00 0 18%, #ffde00 19%, #ef2424 20% 100%);
  box-shadow:0 14px 30px rgba(239,36,36,.24);
}
.heroSpot__label{
  background:#ef2424;
  color:#fff;
  box-shadow:0 14px 26px rgba(239,36,36,.22);
}
.heroSpot__label::before{ background:#ffde00; box-shadow:0 0 0 4px rgba(255,222,0,.18); }
.heroSpot__title{ max-width:100%; font-size:clamp(20px, 2vw, 29px); color:#0a6c37; }
.heroSpot__copy{ max-width:76%; min-height:40px; font-size:12px; color:#476154; }
.heroSpot__actions{ padding-top:12px; }
.heroSpot__price{ background:#fff; border:2px solid rgba(6,107,51,.12); }
.heroSpot__cta{ background:linear-gradient(135deg, #0a9348, #066b33); box-shadow:0 16px 28px rgba(6,107,51,.24); }
.heroSpot__dots{ position:relative; z-index:2; margin-top:12px; }
.heroSpot__dot{ background:rgba(6,107,51,.14); }
.heroSpot__dot.is-active{ background:#ef2424; }

.plannerWeek__tab{
  border:1px solid rgba(12,107,62,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.plannerWeek__tab strong{ font-size:18px; line-height:1.05; }
.plannerWeek__tab small{ font-size:13px; line-height:1.45; }
@media (min-width: 861px){
  .plannerWeek__sidebar{ gap:14px; }
  .plannerWeek__tab{ min-height:118px; padding:18px 18px 16px; border-radius:24px; background:linear-gradient(180deg, #fff, #f8fcf8); box-shadow:0 14px 28px rgba(15,23,42,.05); }
  .plannerWeek__tab[data-plan-key="salatka"]{ background:linear-gradient(135deg, #f4fff2, #e0f6df); border-color:rgba(10,108,55,.18); }
  .plannerWeek__tab[data-plan-key="rosol"]{ background:linear-gradient(135deg, #fff7df, #ffeab0); border-color:rgba(196,123,0,.22); }
  .plannerWeek__tab[data-plan-key="smoothie"]{ background:linear-gradient(135deg, #fff0e7, #ffd3be); border-color:rgba(212,56,13,.20); }
  .plannerWeek__tab[data-plan-key="weekend"]{ background:linear-gradient(135deg, #f7f0ff, #ecd8ff); border-color:rgba(108,45,145,.18); }
  .plannerWeek__tab:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(15,23,42,.09); }
  .plannerWeek__tabEyebrow{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
}

@media (max-width: 680px){
  .mobileCartBar{ display:flex; }
  body{ padding-bottom:88px; }
  .heroSpot{
    width:272px;
    min-height:184px;
    padding:14px 12px 12px !important;
    border-radius:22px !important;
  }
  .heroSpot::after{ width:96px; height:96px; right:-22px; bottom:-30px; }
  .heroSpot__burst::before{ width:94px; height:16px; right:12px; top:12px; border-radius:999px; }
  .heroSpot__burst::after{ display:none; }
  .heroSpot__copy{ max-width:100%; min-height:34px; }
  .heroSpot__actions{ gap:8px; }
  .heroSpot__price{ min-height:34px; font-size:12px; }
  .heroSpot__cta{ min-height:36px; font-size:12px; padding:0 12px; }
  .heroSpot__dots{ margin-top:10px; }
}


/* ===== Arbuzik refresh: AWR / HERO / Today (v.164) ===== */
.today__card--bg{
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat;
}
.today__card--bg::after{
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.10) 48%, rgba(0,0,0,.16) 100%) !important;
}
.today__overlay{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.84)) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(1.5px);
}
.today__ctaBtn--fallback{
  background:#ffffff !important;
  color:#066b33 !important;
  border:1px solid rgba(6,107,51,.16);
}
.today__ctaBtn--fallback:hover,
.today__ctaBtn--fallback:focus-visible{
  color:var(--arbuzik-yellow) !important;
  background:#066b33 !important;
}

.heroSpot{
  border:4px solid #ffde00 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.995), rgba(255,252,248,.985)) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.22), 0 0 0 10px rgba(255,222,0,.15), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.heroSpot::after{ display:none !important; }
.heroSpot__burst,
.heroSpot__burst::before,
.heroSpot__burst::after{ display:none !important; content:none !important; }
.heroSpot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(220px 88px at 100% 0%, rgba(255,222,0,.14), transparent 60%),
    radial-gradient(180px 120px at 0% 100%, rgba(52,184,79,.12), transparent 62%);
  pointer-events:none;
}
.heroSpot__label{
  background:var(--spot-accent) !important;
  color:#fff !important;
  box-shadow:0 12px 24px var(--spot-ring, rgba(0,0,0,.12));
  border:2px solid rgba(255,255,255,.82);
}
.heroSpot__label::before{
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.18) !important;
}
.heroSpot__title{ color:#066b33 !important; }
.heroSpot__copy{ max-width:100% !important; color:#3f5b4b !important; }
.heroSpot__price{
  background:#fffbea !important;
  border:2px solid rgba(255,222,0,.72) !important;
}
.heroSpot__cta{
  background:linear-gradient(135deg, #0b9a4a, #066b33) !important;
  box-shadow:0 16px 28px rgba(6,107,51,.22) !important;
}
.heroSpot__cta:hover{ color:var(--arbuzik-yellow) !important; }
.heroSpot__dot{ background:rgba(6,107,51,.16) !important; }
.heroSpot__dot.is-active{ background:var(--spot-accent) !important; width:18px; }
.heroSpot--green{ --spot-accent:#34b84f; --spot-ring:rgba(52,184,79,.28); }
.heroSpot--gold{ --spot-accent:#ffb300; --spot-ring:rgba(255,179,0,.26); }
.heroSpot--red{ --spot-accent:#ef2424; --spot-ring:rgba(239,36,36,.28); }
.heroSpot--mix{ --spot-accent:#ef2424; --spot-ring:rgba(239,36,36,.28); }

@media (max-width: 680px){
  .heroSpot{
    width:272px;
    min-height:194px;
    padding:14px 14px 14px !important;
  }
  .heroSpot__copy{ min-height:36px; }
  .heroSpot__dots{ margin-top:12px; min-height:10px; }
}


/* PLANER TYGODNIA — dodawanie produktów do planu */
.plannerWeek__summary{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.plannerWeek__summary strong{align-self:flex-start;}
.plannerWeek__summary small{display:flex;flex-direction:column;align-items:flex-end;width:100%;text-align:right;gap:2px;color:#587064;}
.plannerWeek__summary small b{font-size:14px;color:#173a2a;}
.plannerWeek__items{align-items:stretch;}
.plannerWeek__item{background-size:cover;background-position:center;overflow:hidden;}
.plannerWeek__itemShade{background:linear-gradient(180deg, rgba(7,27,17,.04) 0%, rgba(7,27,17,.16) 54%, rgba(7,27,17,.28) 100%);}
.plannerWeek__itemTop,.plannerWeek__itemPrice{position:relative;z-index:2;}
.plannerWeek__itemTop{gap:12px;}
.plannerWeek__item h4{text-shadow:0 2px 16px rgba(0,0,0,.18);}
.plannerWeek__itemMeta{text-shadow:0 1px 10px rgba(0,0,0,.14);}
.plannerWeek__itemAdd{position:relative; display:flex; align-items:center; justify-content:center; min-height:164px; border-radius:22px; border:2px dashed rgba(255,222,0,.82); background:radial-gradient(circle at 50% 15%, rgba(255,222,0,.24), transparent 34%), linear-gradient(135deg, rgba(12,107,62,.12), rgba(255,255,255,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 14px 28px rgba(6,107,51,.10); overflow:hidden; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; text-align:center;}
.plannerWeek__itemAdd:hover{transform:translateY(-2px); box-shadow:0 18px 34px rgba(6,107,51,.16); border-color:#ffde00;}
.plannerWeek__itemAdd::before{content:""; position:absolute; inset:auto -36px -48px auto; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(239,36,36,.22), transparent 68%);}
.plannerWeek__itemAdd::after{content:""; position:absolute; inset:-36px auto auto -26px; width:92px; height:92px; border-radius:50%; background:radial-gradient(circle, rgba(255,222,0,.26), transparent 70%);}
.plannerWeek__itemAddInner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding:16px; height:100%;}
.plannerWeek__itemPlus{display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:linear-gradient(180deg,#ffde00,#ffc400); color:#0a6c37; font-size:34px; font-weight:900; box-shadow:0 12px 24px rgba(255,196,0,.28);}
.plannerWeek__itemAddTitle{font-size:17px; line-height:1.04; color:#0a6c37; font-weight:900; display:block; max-width:11ch; text-align:center;}
.plannerWeek__itemAddCopy{color:#456054; font-size:11px; line-height:1.35; max-width:18ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:center;}
.plannerWeek__itemAddTag{display:inline-flex; padding:6px 10px; border-radius:999px; background:#ef2424; color:#fff; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;}
.plannerPicker[hidden]{display:none !important;}
.plannerPicker{position:fixed; inset:0; z-index:2200;}
.plannerPicker__backdrop{position:absolute; inset:0; background:rgba(8,24,15,.56); backdrop-filter:blur(8px);}
.plannerPicker__dialog{position:relative; width:min(920px, calc(100vw - 28px)); max-height:min(82vh, 860px); margin:clamp(18px, 5vh, 48px) auto; background:linear-gradient(180deg,#f8fcf7,#eef7ef); border:1px solid rgba(12,107,62,.14); border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.26); padding:20px; overflow:hidden; display:flex; flex-direction:column;}
.plannerPicker__dialog::before{content:""; position:absolute; inset:auto -70px -70px auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(239,36,36,.18), transparent 70%);}
.plannerPicker__dialog::after{content:""; position:absolute; inset:-90px auto auto -60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,222,0,.22), transparent 70%);}
.plannerPicker__top,.plannerPicker__searchWrap,.plannerPicker__list{position:relative; z-index:2;}
.plannerPicker__top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px;}
.plannerPicker__eyebrow{display:inline-flex; padding:6px 10px; border-radius:999px; background:#ef2424; color:#fff; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;}
.plannerPicker__top h3{margin:8px 0 6px; color:#0a6c37; font-size:30px; line-height:1.05;}
.plannerPicker__top p{margin:0; color:#51695d; max-width:52ch;}
.plannerPicker__close{appearance:none; border:none; cursor:pointer; width:46px; height:46px; border-radius:16px; background:#fff; color:#0a6c37; font-size:28px; line-height:1; box-shadow:0 12px 28px rgba(15,23,42,.10);}
.plannerPicker__searchWrap{margin-bottom:14px;}
.plannerPicker__search{width:100%; min-height:52px; border-radius:18px; border:1px solid rgba(12,107,62,.14); background:rgba(255,255,255,.92); padding:0 16px; font-size:16px; color:#123726; outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.8);}
.plannerPicker__search:focus{border-color:#ffde00; box-shadow:0 0 0 3px rgba(255,222,0,.18);}
.plannerPicker__list{overflow:auto; padding-right:6px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.plannerPicker__list::-webkit-scrollbar{width:10px;}
.plannerPicker__list::-webkit-scrollbar-thumb{background:rgba(12,107,62,.20); border-radius:999px;}
.plannerPicker__card{display:grid; grid-template-columns:68px minmax(0,1fr) auto; grid-template-areas:"thumb copy action"; gap:12px; align-items:center; padding:12px 14px; border-radius:20px; background:rgba(255,255,255,.94); border:1px solid rgba(12,107,62,.10); box-shadow:0 14px 28px rgba(15,23,42,.06); min-height:116px;}
.plannerPicker__thumb{grid-area:thumb; width:68px; height:68px; border-radius:16px; background-size:cover; background-position:center;}
.plannerPicker__copy{grid-area:copy; min-width:0; align-self:center; display:flex; flex-direction:column; justify-content:center;}
.plannerPicker__name{font-size:16px; line-height:1.08; color:#0a6c37; font-weight:900; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.plannerPicker__meta{margin:0; color:#587064; font-size:11px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.plannerPicker__price{display:inline-flex; margin-top:8px; padding:6px 10px; border-radius:999px; background:#fff; color:#0a6c37; font-size:11px; font-weight:900; box-shadow:0 8px 18px rgba(15,23,42,.06); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.plannerPicker__add{grid-area:action; justify-self:end; align-self:center; appearance:none; border:none; cursor:pointer; min-width:132px; min-height:42px; padding:0 16px; border-radius:999px; background:linear-gradient(180deg,#0d8f46,#066b33); color:#fff; font-size:13px; font-weight:900; box-shadow:0 14px 28px rgba(6,107,51,.18); transition:transform .16s ease, color .16s ease, box-shadow .16s ease; white-space:nowrap;}
.plannerPicker__add:hover{transform:translateY(-1px); color:var(--arbuzik-yellow);}
.plannerPicker__empty{padding:22px; border-radius:22px; background:#fff; color:#51695d; text-align:center;}
@media (max-width: 860px){
  .plannerPicker__dialog{width:min(100vw - 16px, 760px); max-height:86vh; padding:16px;}
  .plannerPicker__list{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .plannerWeek__summary small{align-items:flex-start; text-align:left;}
  .plannerWeek__itemAdd{min-height:136px;}
  .plannerWeek__itemPlus{width:48px; height:48px; font-size:34px;}
  .plannerWeek__itemAddTitle{font-size:18px;}
  .plannerPicker__top h3{font-size:24px;}
  .plannerPicker__card{grid-template-columns:64px minmax(0,1fr) auto; gap:10px; padding:10px 12px;}
  .plannerPicker__thumb{width:72px; height:72px;}  
}


/* planner picker + equal tile sizing fix v166 */
.plannerWeek__items{grid-auto-rows:164px;}
.plannerWeek__item, .plannerWeek__itemAdd{height:164px; min-height:164px;}
.plannerWeek__itemAddInner{width:100%; height:100%; justify-content:center;}
.plannerWeek__itemAddTitle{max-width:10ch;}
.plannerPicker__dialog{padding-bottom:18px;}
.plannerPicker__list{min-height:280px; max-height:52vh; align-content:start;}
.plannerPicker__card{position:relative; overflow:hidden;}
.plannerPicker__card::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,#ffde00,#ef2424); opacity:.9;}
.plannerPicker__copy{min-width:0;}
.plannerPicker__name,.plannerPicker__meta{word-break:break-word;}
@media (max-width: 640px){
  .plannerWeek__items{grid-auto-rows:148px;}
  .plannerWeek__item, .plannerWeek__itemAdd{height:148px; min-height:148px;}
  .plannerPicker__list{max-height:56vh;}
}

.plannerWeek__item > .plannerWeek__itemTop > div{min-width:0;}
@media (max-width: 1180px){
  .plannerPicker__card{grid-template-columns:56px minmax(0,1fr); gap:8px 10px; padding:10px;}
  .plannerPicker__thumb{width:56px; height:56px; border-radius:14px;}
  .plannerPicker__name{font-size:14px;}
  .plannerPicker__meta{font-size:10px;}
  .plannerPicker__price{font-size:10px; padding:5px 8px;}
  .plannerPicker__add{font-size:12px; min-height:36px; padding:0 12px;}
}


/* ===== PLANER TYGODNIA / MAPA MOBILE / DESKTOP COLORS PATCH v174 ===== */

/* Główna sekcja planera jak pozostałe sekcje główne */
.plannerWeek__shell{background:none;border:none;box-shadow:none;padding:0;}
.plannerWeek__head{margin-bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:18px;align-items:start;}
.plannerWeek .secTitle{color:#104929;font-size:clamp(28px,3.4vw,40px);text-shadow:none;}
.plannerWeek .secTitle::before{content:"Codzienny rytm zakupów";display:block;margin-bottom:12px;font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#0d6b3b;}
.plannerWeek .secTitle > span::after{content:"";position:absolute;left:-8px;right:4px;bottom:-7px;height:11px;background:var(--arbuzik-yellow);opacity:.98;border-radius:999px;z-index:-1;}
.plannerWeek__head .muted{color:rgba(16,62,39,.74);max-width:42ch;justify-self:end;}

/* Desktop: plany po lewej w tych samych żywych kolorach co mobile */
.plannerWeek__tab[data-plan-key="salatka"]{background:linear-gradient(155deg,#1db954 0%,#0a6c37 100%);border:none;box-shadow:0 8px 22px rgba(10,108,55,.28);}
.plannerWeek__tab[data-plan-key="salatka"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="salatka"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="salatka"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab[data-plan-key="rosol"]{background:linear-gradient(155deg,#f5a623 0%,#c47b00 100%);border:none;box-shadow:0 8px 22px rgba(196,123,0,.30);}
.plannerWeek__tab[data-plan-key="rosol"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="rosol"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="rosol"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab[data-plan-key="smoothie"]{background:linear-gradient(155deg,#ff6b35 0%,#d4380d 100%);border:none;box-shadow:0 8px 22px rgba(212,56,13,.30);}
.plannerWeek__tab[data-plan-key="smoothie"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="smoothie"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="smoothie"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab[data-plan-key="weekend"]{background:linear-gradient(155deg,#9b59b6 0%,#6c2d91 100%);border:none;box-shadow:0 8px 22px rgba(108,45,145,.30);}
.plannerWeek__tab[data-plan-key="weekend"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="weekend"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="weekend"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab.is-active{transform:translateY(-3px) scale(1.02);border-color:transparent;}
.plannerWeek__tab[data-plan-key="salatka"].is-active{box-shadow:0 16px 34px rgba(10,108,55,.40),0 0 0 3px #ffde00;}
.plannerWeek__tab[data-plan-key="rosol"].is-active{box-shadow:0 16px 34px rgba(196,123,0,.42),0 0 0 3px #fff;}
.plannerWeek__tab[data-plan-key="smoothie"].is-active{box-shadow:0 16px 34px rgba(212,56,13,.40),0 0 0 3px #ffde00;}
.plannerWeek__tab[data-plan-key="weekend"].is-active{box-shadow:0 16px 34px rgba(108,45,145,.42),0 0 0 3px #e879f9;}

/* Panel ceny bardziej w stylu sekcji Boxiki Arbuzika */
.plannerWeek__summary{position:relative;overflow:hidden;background:
  radial-gradient(circle at 84% 18%, rgba(var(--arbuzik-yellow-rgb),.28) 0 2px, transparent 3px) 0 0/16px 16px,
  radial-gradient(180px 90px at 82% 12%, rgba(var(--arbuzik-yellow-rgb),.18), transparent 58%),
  linear-gradient(172deg, rgba(var(--arbuzik-yellow-rgb),.92) 0 8%, transparent 8.3% 100%),
  linear-gradient(8deg, rgba(239,46,40,.85) 0 10%, transparent 10.3% 100%),
  linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,248,.96));
  border:1px solid rgba(12,107,62,.12); box-shadow:0 14px 28px rgba(15,23,42,.08);}
.plannerWeek__summary::after{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle, rgba(12,107,62,.10), transparent 70%);pointer-events:none;}

/* Mobile: badge ilości pod ceną */
@media (max-width:640px){
  .plannerWeek__head{grid-template-columns:1fr;gap:12px;padding:0 18px 14px;}
  .plannerWeek__head .muted{justify-self:start;max-width:none;}
  .plannerWeek__panel{margin:0 18px;border-radius:26px;padding:18px;}
  .plannerWeek__item{padding:12px 12px 64px;}
  .plannerWeek__itemPrice{position:absolute;left:12px;bottom:34px;margin-top:0;z-index:3;}
  .plannerWeek__itemQty{left:12px;right:auto;bottom:8px;min-width:54px;font-size:10px;padding:0 8px;}
  #mapa::before{display:none !important;}
  #mapa > .wrap{background:none !important;}
}


/* ===== PLANER + LOKALNOSC + OPISY PATCH v175 ===== */
.plannerWeek__shell{
  background:linear-gradient(180deg, rgba(18,123,67,.05) 0%, rgba(18,123,67,.02) 100%);
  border:1px solid rgba(12,107,62,.08);
  border-radius:32px;
  box-shadow:none;
  padding:24px;
}
.plannerWeek__head{
  margin-bottom:18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,460px);
  gap:18px;
  align-items:start;
}
.plannerWeek .secTitle{color:#104929;font-size:clamp(28px,3.4vw,40px);text-shadow:none;}
.plannerWeek .secTitle::before{content:"Codzienny rytm zakupów";display:block;margin-bottom:12px;font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#0d6b3b;}
.plannerWeek .secTitle > span::after{content:"";position:absolute;left:-8px;right:4px;bottom:-7px;height:11px;background:var(--arbuzik-yellow);opacity:.98;border-radius:999px;z-index:-1;}
.plannerWeek__head .muted{color:rgba(16,62,39,.74);max-width:46ch;justify-self:end;text-align:right;}

/* summary price panel */
.plannerWeek__summary{
  position:relative;
  overflow:hidden;
  min-width:190px;
  padding:16px 18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 20% 24%, rgba(var(--arbuzik-yellow-rgb),.78) 0 2px, transparent 3px) 0 0/18px 18px,
    linear-gradient(180deg, #118242 0%, #0c6b3e 100%);
  border:1px solid rgba(12,107,62,.14);
  box-shadow:0 14px 28px rgba(15,23,42,.10);
}
.plannerWeek__sumLabel{display:block;color:rgba(255,255,255,.82);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.plannerWeek__summary strong{display:block;margin-top:6px;font-size:34px;color:#ff4a43;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.12);}
.plannerWeek__summary small{display:flex;margin-top:8px;flex-direction:column;align-items:flex-end;color:#fff;font-size:13px;line-height:1.2;text-align:right;}
.plannerWeek__summary small b{font-size:16px;line-height:1.05;color:#fff;}

/* desktop plan cards use mobile vivid colors */
.plannerWeek__tab[data-plan-key="salatka"]{background:linear-gradient(155deg,#1db954 0%,#0a6c37 100%);border:none;box-shadow:0 8px 22px rgba(10,108,55,.28);}
.plannerWeek__tab[data-plan-key="salatka"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="salatka"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="salatka"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab[data-plan-key="rosol"]{background:linear-gradient(155deg,#f5a623 0%,#c47b00 100%);border:none;box-shadow:0 8px 22px rgba(196,123,0,.30);}
.plannerWeek__tab[data-plan-key="rosol"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="rosol"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="rosol"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab[data-plan-key="smoothie"]{background:linear-gradient(155deg,#ff6b35 0%,#d4380d 100%);border:none;box-shadow:0 8px 22px rgba(212,56,13,.30);}
.plannerWeek__tab[data-plan-key="smoothie"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="smoothie"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="smoothie"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab[data-plan-key="weekend"]{background:linear-gradient(155deg,#9b59b6 0%,#6c2d91 100%);border:none;box-shadow:0 8px 22px rgba(108,45,145,.30);}
.plannerWeek__tab[data-plan-key="weekend"] strong{color:#fff;font-size:20px;}
.plannerWeek__tab[data-plan-key="weekend"] small{color:rgba(255,255,255,.82);}
.plannerWeek__tab[data-plan-key="weekend"] .plannerWeek__tabEyebrow{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);}
.plannerWeek__tab.is-active{transform:translateY(-3px) scale(1.02);border-color:transparent;}
.plannerWeek__tab[data-plan-key="salatka"].is-active{box-shadow:0 16px 34px rgba(10,108,55,.40),0 0 0 3px #ffde00;}
.plannerWeek__tab[data-plan-key="rosol"].is-active{box-shadow:0 16px 34px rgba(196,123,0,.42),0 0 0 3px #fff;}
.plannerWeek__tab[data-plan-key="smoothie"].is-active{box-shadow:0 16px 34px rgba(212,56,13,.40),0 0 0 3px #ffde00;}
.plannerWeek__tab[data-plan-key="weekend"].is-active{box-shadow:0 16px 34px rgba(108,45,145,.42),0 0 0 3px #e879f9;}

/* remove local map dotted colorful background */
#lokalnosc::before{background:none !important;}
#lokalnosc > .wrap{border-radius:28px;background:transparent !important;}

@media (max-width: 760px){
  #planer-tygodnia > .wrap{
    width:min(96vw,96vw) !important;
    margin:0 auto !important;
  }
  .plannerWeek__shell{
    padding:18px 16px 20px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,.03) 100%);
  }
  .plannerWeek__head{grid-template-columns:1fr;gap:12px;padding:0 0 14px;}
  .plannerWeek__head .muted{justify-self:start;max-width:none;text-align:left;}
  .plannerWeek__panel{margin:0;border-radius:26px;padding:18px;}
  #lokalnosc::before,#lokalnosc > .wrap{background:none !important;}
}
@media (max-width: 640px){
  .plannerWeek__itemTop{padding-right:36px !important;}
  .plannerWeek__itemBottom{
    left:10px;
    bottom:10px;
    gap:5px;
  }
  .plannerWeek__itemPrice{
    font-size:11px;
    padding:6px 10px;
  }
  .plannerWeek__itemQty{
    min-width:58px;
    height:20px;
    font-size:9px;
  }
}


/* PATCH v177 — planner/localMap/offer browse */
#planer-tygodnia > .wrap,
#lokalnosc > .wrap{
  width:min(1140px, 92vw) !important;
  margin:0 auto !important;
  border-radius:28px;
}

#planer-tygodnia > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,.02) 100%),
    radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%);
}
#lokalnosc > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 36%),
    radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%) !important;
}
#lokalnosc::before{ background:none !important; }

.plannerWeek__shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:24px !important;
}
.plannerWeek__summary{
  background:
    radial-gradient(circle at 16% 22%, rgba(var(--arbuzik-yellow-rgb),.78) 0 2px, transparent 3px) 0 0/18px 18px,
    linear-gradient(180deg, #118242 0%, #0c6b3e 100%) !important;
}
.plannerWeek__sumLabel{ color:rgba(255,255,255,.84) !important; }
.plannerWeek__summary strong{ color:#fff !important; text-shadow:0 2px 10px rgba(0,0,0,.18) !important; }
.plannerWeek__summary small,
.plannerWeek__summary small b{ color:#fff !important; }

.plannerWeek__itemBottom{
  left:12px;
  right:12px;
  bottom:12px;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.plannerWeek__itemQty{
  min-width:auto;
  height:24px;
  padding:0 10px;
  margin-left:auto;
  background:rgba(255,255,255,.96);
}

.offerHub__filters{
  position:relative;
  padding-top:32px;
}
.offerHub__filters::before{
  content:'Filtry oferty';
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.14);
  color:#0c6b3e;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.offerHub__status{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,244,.96));
  border:1px solid rgba(12,107,62,.10);
  box-shadow:0 10px 22px rgba(15,23,42,.05);
  color:#104929;
  font-size:14px;
  font-weight:700;
}
.offerHub__status::before{
  content:'AWR';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg, #0d8f46, #066b33);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.offerHub__moreBtn{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  margin:18px 0 0;
  border:none;
  border-radius:20px;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,244,.96));
  border:1px solid rgba(12,107,62,.12);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
  color:#0c6b3e;
  font-size:15px;
  font-weight:900;
  transition:transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.offerHub__moreBtn:hover{
  transform:translateY(-2px);
  color:#ef2424;
  box-shadow:0 18px 34px rgba(15,23,42,.10);
}
.offerHub__moreBtn::after{
  content:'→';
  margin-left:10px;
}

@media (max-width: 760px){
  #planer-tygodnia > .wrap,
  #lokalnosc > .wrap{
    width:min(96vw, 96vw) !important;
  }
  .plannerWeek__shell{ padding:18px 16px 20px !important; }
  .plannerWeek__itemBottom{
    left:10px;
    right:10px;
    bottom:10px;
    gap:6px;
  }
  .plannerWeek__itemPrice{ font-size:11px !important; padding:6px 10px !important; }
  .plannerWeek__itemQty{ height:22px; font-size:9px; padding:0 8px; }
  .offerHub__filters{ padding-top:34px; }
  .offerHub__status{ font-size:13px; line-height:1.35; }
  .offerHub__moreBtn{ min-height:50px; font-size:14px; }
}


/* PATCH v178 — localMap shell off + wider mobile planner panel */
.localMap__shell{
  padding:24px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,0) 100%) !important;
  border:1px solid rgba(12,107,62,.08) !important;
  box-shadow:none !important;
}

#lokalnosc > .wrap{
  background:transparent !important;
  border-radius:0 !important;
}

@media (max-width: 760px){
  #planer-tygodnia > .wrap{
    width:min(98vw, 98vw) !important;
    margin:0 auto !important;
  }

  .plannerWeek__shell{
    padding:18px 10px 20px !important;
  }

  .plannerWeek__panel{
    margin:0 6px !important;
    padding:18px 14px !important;
  }
}

@media (max-width: 640px){
  #planer-tygodnia > .wrap{
    width:min(99vw, 99vw) !important;
  }

  .plannerWeek__shell{
    padding:16px 6px 18px !important;
  }

  .plannerWeek__panel{
    margin:0 4px !important;
    padding:16px 12px !important;
  }

  .plannerWeek__item{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .plannerWeek__itemBottom{
    left:10px !important;
    right:10px !important;
  }
}


/* PATCH v180 — usuń zewnętrzny wrapper sekcji lokalności */
#lokalnosc > .wrap{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.localMap__shell{
  width:min(1140px, 92vw) !important;
  margin:0 auto !important;
  padding:24px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,0) 100%) !important;
  border:1px solid rgba(12,107,62,.08) !important;
  box-shadow:none !important;
}

@media (max-width: 760px){
  .localMap__shell{
    width:min(96vw, 96vw) !important;
    padding:18px 16px 20px !important;
    border-radius:28px !important;
  }
}

@media (max-width: 640px){
  .localMap__shell{
    width:min(96vw, 96vw) !important;
    padding:16px 12px 18px !important;
    border-radius:24px !important;
  }
}


/* PATCH v181 — lokalnosc bez zewnętrznego wrapera */
#lokalnosc{
  padding-left:0 !important;
  padding-right:0 !important;
}

#lokalnosc > .wrap{
  display:none !important;
}

#lokalnosc > .localMap__shell{
  width:min(1140px, 92vw) !important;
  margin:0 auto !important;
  padding:24px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,0) 100%) !important;
  border:1px solid rgba(12,107,62,.08) !important;
  box-shadow:none !important;
}

@media (max-width: 760px){
  #lokalnosc > .localMap__shell{
    width:min(96vw, 96vw) !important;
    padding:18px 16px 20px !important;
    border-radius:28px !important;
  }
}

@media (max-width: 640px){
  #lokalnosc > .localMap__shell{
    width:min(96vw, 96vw) !important;
    padding:16px 12px 18px !important;
    border-radius:24px !important;
  }
}


/* PATCH v182 — ubij zewnętrzny wrapper sekcji lokalności */
#lokalnosc{
  position:relative !important;
  padding:40px 0 10px !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#lokalnosc::before,
#lokalnosc::after{
  content:none !important;
  display:none !important;
}

#lokalnosc > .wrap{
  display:none !important;
}

#lokalnosc > .localMap__shell{
  position:relative !important;
  z-index:1 !important;
  width:min(1140px, 92vw) !important;
  margin:0 auto !important;
  padding:24px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg, rgba(18,123,67,.06) 0%, rgba(18,123,67,0) 100%) !important;
  border:1px solid rgba(12,107,62,.08) !important;
  box-shadow:none !important;
}

@media (max-width: 760px){
  #lokalnosc{
    padding:32px 0 10px !important;
  }
  #lokalnosc > .localMap__shell{
    width:min(96vw, 96vw) !important;
    padding:18px 16px 20px !important;
    border-radius:28px !important;
  }
}

@media (max-width: 640px){
  #lokalnosc{
    padding:28px 0 10px !important;
  }
  #lokalnosc > .localMap__shell{
    width:min(96vw, 96vw) !important;
    padding:16px 12px 18px !important;
    border-radius:24px !important;
  }
}


/* PATCH v184 — Boxiki w abonamencie wrapper jak O nas */
#boxiki-slider{
  position:relative !important;
  isolation:isolate !important;
  padding:40px 0 10px !important;
}

#boxiki-slider::before,
#boxiki-slider::after{
  content:none !important;
  display:none !important;
}

#boxiki-slider > .wrap{
  position:relative !important;
  z-index:1 !important;
  width:min(1140px, 92vw) !important;
  margin:0 auto !important;
  padding:28px clamp(18px, 2.9vw, 30px) 30px !important;
  border-radius:28px !important;
  background:
    linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 36%),
    radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%) !important;
  border:none !important;
  box-shadow:none !important;
}

@media (max-width: 760px){
  #boxiki-slider > .wrap{
    width:min(96vw, 96vw) !important;
    padding:20px 16px 22px !important;
    border-radius:24px !important;
  }
}

/* PATCH v184 — mobile: Gdzie jesteśmy dostaje zielony wrap główny */
@media (max-width: 760px){
  #mapa > .wrap{
    width:min(96vw, 96vw) !important;
    margin:0 auto !important;
    border-radius:24px !important;
    background:
      linear-gradient(180deg, rgba(18,123,67,.05) 0%, rgba(18,123,67,0) 28%) !important;
  }
}

/* PATCH v184 — mobile: Planer tygodnia wrapper jak O nas */
@media (max-width: 760px){
  #planer-tygodnia > .wrap{
    width:min(96vw, 96vw) !important;
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
    border-radius:24px !important;
  }

  .plannerWeek__shell{
    border-radius:24px !important;
    padding:18px 14px 20px !important;
  }
}


/* PATCH v187 — wrapy jak w "O nas" */
#lokalnosc > .localMap__shell{
  background:
    linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 36%),
    radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%) !important;
  border:none !important;
  box-shadow:none !important;
}

@media (max-width: 760px){
  #planer-tygodnia > .wrap{
    width:min(96vw, 96vw) !important;
    margin:0 auto !important;
    padding:0 !important;
    background:
      linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 36%),
      radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%) !important;
    border-radius:24px !important;
    border:none !important;
    box-shadow:none !important;
  }

  .plannerWeek__shell{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:24px !important;
    padding:18px 14px 20px !important;
  }
}


/* PATCH v188 — planer mobile + CTA w Kup według potrzeb */
.needCard__cta{
  transition:color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.needCard:hover .needCard__cta,
.needCard:focus-within .needCard__cta{
  color:var(--arbuzik-yellow) !important;
}
.needCard__cta:hover,
.needCard__cta:focus-visible{
  color:var(--arbuzik-yellow) !important;
}

@media (max-width: 760px){
  #planer-tygodnia > .wrap{
    width:min(96vw, 96vw) !important;
    margin:0 auto !important;
    padding:14px 12px 16px !important;
    background:
      linear-gradient(180deg, rgba(18,123,67,.09) 0%, rgba(18,123,67,0) 36%),
      radial-gradient(260px 130px at 14% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 62%) !important;
    border-radius:24px !important;
    border:none !important;
    box-shadow:none !important;
  }

  .plannerWeek__shell{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }

  .plannerWeek__head{
    padding:0 4px 12px !important;
  }

  .plannerWeek__panel{
    margin:0 !important;
    padding:14px 0 0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
}

@media (max-width: 640px){
  #planer-tygodnia > .wrap{
    width:min(96vw, 96vw) !important;
    padding:12px 10px 14px !important;
    border-radius:22px !important;
  }

  .plannerWeek__head{
    padding:0 2px 10px !important;
  }

  .plannerWeek__panel{
    padding:12px 0 0 !important;
  }
}


/* PATCH v189 — planer desktop/mobilny + needCard CTA */
#planer-tygodnia > .wrap{
  padding:18px 18px 20px !important;
}
.plannerWeek__shell{
  padding:0 !important;
}

.needCard__cta{
  transition:color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.needCard__cta:hover,
.needCard__cta:focus-visible,
.needCard:hover .needCard__cta,
.needCard:focus-within .needCard__cta{
  color:var(--arbuzik-yellow) !important;
}

@media (max-width: 760px){
  #planer-tygodnia > .wrap{
    width:min(96vw, 96vw) !important;
    padding:14px 12px 16px !important;
    border-radius:24px !important;
  }

  .plannerWeek__shell{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }

  .plannerWeek__head{
    padding:0 4px 12px !important;
  }

  .plannerWeek__panel{
    margin:0 !important;
    padding:14px 0 0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  .plannerWeek__itemBottom{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .plannerWeek__itemPrice{
    order:1 !important;
    margin:0 !important;
  }

  .plannerWeek__itemQty{
    order:2 !important;
    margin-left:auto !important;
  }
}

@media (max-width: 640px){
  #planer-tygodnia > .wrap{
    width:min(96vw, 96vw) !important;
    padding:12px 10px 14px !important;
    border-radius:22px !important;
  }

  .plannerWeek__head{
    padding:0 2px 10px !important;
  }

  .plannerWeek__panel{
    padding:12px 0 0 !important;
  }

  .plannerWeek__itemBottom{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
  }
}


/* PATCH v190 — localMap kicker + today meta + planner mobile */
.secKicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  color:#1d7b4a;
  font-weight:900;
  font-size:12px;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.today__meta{
  margin-top:10px;
  display:grid;
  gap:4px;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.today__metaLine{
  display:block;
  font-size:13px;
  line-height:1.25;
  color:rgba(0,0,0,.66);
  font-weight:700;
}
.today__metaLine--supplier{
  color:rgba(0,0,0,.70);
}
.today__metaLine--city{
  color:rgba(12,107,62,.84);
  font-weight:800;
}
.today__metaLine--fallback{
  color:rgba(0,0,0,.60);
}

@media (max-width: 760px){
  .plannerWeek__head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr) !important;
    gap:12px !important;
    align-items:start !important;
    padding:0 2px 12px !important;
  }

  .plannerWeek__head .muted{
    margin:0 !important;
    max-width:none !important;
    text-align:right !important;
    justify-self:end !important;
    align-self:start !important;
    font-size:14px !important;
    line-height:1.4 !important;
  }

  .plannerWeek__head .secTitle{
    font-size:clamp(18px, 8vw, 34px) !important;
    line-height:1.03 !important;
  }

  .plannerWeek__itemBottom{
    left:10px !important;
    bottom:10px !important;
    right:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:6px !important;
    width:auto !important;
  }

  .plannerWeek__itemPrice{
    order:1 !important;
    margin:0 !important;
  }

  .plannerWeek__itemQty{
    order:2 !important;
    margin:0 !important;
    position:absolute !important;
    right:10px !important;
    bottom:10px !important;
  }

  .localMap__head .secTitle{
    font-size:clamp(18px, 8vw, 34px) !important;
    line-height:1.03 !important;
  }

  .localMap__head .muted{
    font-size:14px !important;
    line-height:1.45 !important;
  }
}


/* PATCH v191 — lokalnosc kicker nad tytułem + mobile planner badges */
.localMap__head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(280px, .95fr) !important;
  grid-template-areas:
    "kicker desc"
    "title desc" !important;
  gap:8px 22px !important;
  align-items:start !important;
}
.localMap__head .secKicker{
  grid-area:kicker !important;
  justify-self:start !important;
  align-self:end !important;
  margin:0 !important;
}
.localMap__head .secTitle{
  grid-area:title !important;
  margin:0 !important;
}
.localMap__head .muted{
  grid-area:desc !important;
  margin:0 !important;
  align-self:start !important;
  justify-self:end !important;
}

@media (max-width: 760px){
  .localMap__head{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr) !important;
    grid-template-areas:
      "kicker desc"
      "title desc" !important;
    gap:8px 12px !important;
  }

  .plannerWeek__item{
    position:relative !important;
  }

  .plannerWeek__itemBottom{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:auto !important;
  }

  .plannerWeek__itemPrice{
    order:1 !important;
    margin:0 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }

  .plannerWeek__itemQty{
    order:2 !important;
    margin:0 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin-left:auto !important;
    white-space:nowrap !important;
  }
}

@media (max-width: 640px){
  .localMap__head{
    grid-template-columns:minmax(0,1fr) minmax(0,.88fr) !important;
    gap:6px 10px !important;
  }

  .plannerWeek__itemBottom{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    gap:6px !important;
  }

  .plannerWeek__itemPrice,
  .plannerWeek__itemQty{
    transform:none !important;
  }

  .plannerWeek__itemQty{
    font-size:11px !important;
    padding:4px 8px !important;
  }

  .plannerWeek__itemPrice{
    font-size:12px !important;
    padding:6px 10px !important;
  }
}


/* WERSJA PLIKU v.194 */
/* BOXIKI — koszyk: prawy panel nie może rozciągać się do wysokości lewej kolumny */
body[data-page="boxiki"] #zamow .grid{
  align-items: start !important;
}

body[data-page="boxiki"] #orderForm{
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: 108px;
}

body[data-page="boxiki"] #cartBox{
  min-width: 0;
}

@media (max-width: 960px){
  body[data-page="boxiki"] #orderForm{
    position: static;
    top: auto;
  }
}


/* PATCH v195 — wyszukiwanie oferty + alfabet A-Z */
.offerHub__browseTools{
  display:grid;
  gap:18px;
  margin:0 0 18px;
}
.offerHub__searchBar,
.offerHub__alphaBlock,
.offerHub__filtersBlock{
  display:grid;
  gap:10px;
}
.offerHub__searchLabel,
.offerHub__alphaLabel,
.offerHub__filtersLabel{
  display:flex;
  align-items:center;
  gap:10px;
  color:#0c6b3e;
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.offerHub__searchLabel::before,
.offerHub__alphaLabel::before,
.offerHub__filtersLabel::before{
  content:'';
  width:28px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, #ffde00, #ef2424);
  flex:0 0 auto;
}
.offerHub__searchWrap{
  position:relative;
  display:flex;
  align-items:center;
  min-height:60px;
  padding:0 16px 0 52px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,247,.96));
  border:1px solid rgba(12,107,62,.12);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}
.offerHub__searchIcon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#0c6b3e;
  opacity:.72;
}
.offerHub__searchInput{
  width:100%;
  min-width:0;
  border:none;
  background:transparent;
  color:#104929;
  font-size:16px;
  font-weight:700;
  outline:none;
}
.offerHub__searchInput::placeholder{ color:rgba(16,73,41,.45); font-weight:600; }
.offerHub__searchClear{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:none;
  border-radius:999px;
  background:rgba(12,107,62,.08);
  color:#0c6b3e;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.offerHub__searchClear:hover{ transform:scale(1.04); background:#ef2424; color:#fff; }
.offerHub__alphabet{
  display:grid;
  grid-template-columns:repeat(14, minmax(0, 1fr));
  gap:8px;
}
.offerHub__alpha{
  appearance:none;
  min-height:44px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(12,107,62,.12);
  box-shadow:0 10px 20px rgba(15,23,42,.04);
  color:#0c6b3e;
  font-size:18px;
  font-weight:900;
  text-transform:uppercase;
  transition:transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}
.offerHub__alpha:hover{
  transform:translateY(-2px);
  color:#ef2424;
  box-shadow:0 14px 24px rgba(15,23,42,.08);
}
.offerHub__alpha.is-active{
  background:linear-gradient(180deg, #0d8f46, #066b33);
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 26px rgba(6,107,51,.22);
}
.offerHub__alpha[data-offer-letter="all"]{
  grid-column:span 2;
  font-size:14px;
  letter-spacing:.04em;
}
.offerHub__filters{
  position:static !important;
  padding-top:0 !important;
}
.offerHub__filters::before{ content:none !important; }
@media (max-width: 1100px){
  .offerHub__alphabet{ grid-template-columns:repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .offerHub__browseTools{ gap:14px; }
  .offerHub__searchWrap{ min-height:56px; padding:0 14px 0 48px; border-radius:18px; }
  .offerHub__searchInput{ font-size:15px; }
  .offerHub__alphabet{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:7px; }
  .offerHub__alpha{ min-height:40px; font-size:16px; border-radius:14px; }
  .offerHub__alpha[data-offer-letter="all"]{ grid-column:span 2; font-size:13px; }
}


/* ===== WERSJA v.196 — oferta: alfabet w jednej linii + rail ===== */
.offerHub__alphaRail{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color: rgba(12,107,62,.38) rgba(12,107,62,.08);
  padding:2px 2px 10px;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.offerHub__alphaRail::-webkit-scrollbar{ height:10px; }
.offerHub__alphaRail::-webkit-scrollbar-track{ background:rgba(12,107,62,.08); border-radius:999px; }
.offerHub__alphaRail::-webkit-scrollbar-thumb{ background:rgba(12,107,62,.34); border-radius:999px; }
.offerHub__alphabet{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px;
  width:max-content;
  min-width:100%;
  align-items:center;
}
.offerHub__alpha{
  flex:0 0 auto;
  min-width:48px;
  min-height:44px;
  font-size:18px;
}
.offerHub__alpha[data-offer-letter="all"]{
  min-width:72px;
  letter-spacing:.04em;
}
@media (max-width:900px){
  .offerHub__alphaRail{ padding-bottom:8px; }
  .offerHub__alpha{ min-width:44px; min-height:40px; font-size:16px; }
  .offerHub__alpha[data-offer-letter="all"]{ min-width:64px; }
}


/* === WERSJA PLIKU v.200 — quick start hierarchy mobile/fullwidth === */
.quickStart{padding-top:8px}
.quickStart > .wrap{
  background:linear-gradient(180deg, rgba(12,107,62,.08) 0%, rgba(255,255,255,.97) 58%, rgba(255,255,255,.82) 100%);
  border:1px solid var(--line);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
  padding:22px 20px 24px;
  overflow:visible;
}
.quickStart__head{margin-bottom:22px;align-items:flex-start}
.quickStart__titleCol{min-width:0}
.quickStart__head .secKicker{margin-bottom:10px}
.quickStart__head .secTitle{
  color:#104929;
  font-size:clamp(34px,3vw,42px);
  text-shadow:none;
}
.quickStart__head .secTitle > span::after{
  background:var(--arbuzik-yellow);
}
.quickStart__head .muted{
  margin:0;
  max-width:44ch;
  line-height:1.5;
  color:#6d846d;
  padding-top:16px;
}
.quickStart__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.quickStart__card{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:28px;color:#132018;background:linear-gradient(180deg,#ffffff 0%,#f6f9f4 100%);border:1px solid rgba(12,107,62,.10);box-shadow:0 18px 45px rgba(10,32,20,.08);overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.quickStart__card:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(10,32,20,.12);border-color:rgba(12,107,62,.22)}
.quickStart__card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--accent,#0c6b3e)}
.quickStart__card--green{--accent:#0c6b3e}
.quickStart__card--yellow{--accent:#ffde00}
.quickStart__card--red{--accent:#ef2424}
.quickStart__eyebrow{display:inline-flex;align-items:center;align-self:flex-start;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(12,107,62,.12);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.quickStart__card h3{margin:0;font-size:1.55rem;line-height:1.08}
.quickStart__card p{margin:0;color:#52615a}
.quickStart__list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.quickStart__list li{position:relative;padding-left:18px;color:#203228;font-weight:600}
.quickStart__list li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:8px;border-radius:50%;background:var(--accent,#0c6b3e);box-shadow:0 0 0 4px rgba(12,107,62,.10)}
.quickStart__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  font-weight:900;
  color:#fff;
  text-decoration:none;
  padding:12px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, #0d6b3b 0%, #14864b 100%);
  border:1px solid rgba(12,107,62,.28);
  box-shadow:0 12px 24px rgba(12,107,62,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.quickStart__cta:hover,.quickStart__cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(12,107,62,.24);
  filter:saturate(1.04) brightness(1.02);
}
@media (max-width: 980px){
  .quickStart > .wrap{padding:18px 14px 18px}
  .quickStart__head{display:block}
  .quickStart__head .muted{max-width:none;padding-top:14px}
  .quickStart__grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(260px,78vw);
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    width:calc(100% + 28px);
    margin-left:-14px;
    margin-right:-14px;
    padding:4px 14px 10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .quickStart__grid::-webkit-scrollbar{display:none}
  .quickStart__card{min-height:100%;padding:20px 18px 18px;border-radius:24px;scroll-snap-align:start;gap:12px}
  .quickStart__card h3{font-size:1.32rem}
  .quickStart__card p{font-size:.94rem;line-height:1.42}
  .quickStart__list{gap:6px}
  .quickStart__list li{font-size:.93rem;padding-left:16px}
  .quickStart__list li::before{top:.56em;width:7px;height:7px}
  .quickStart__cta{padding:10px 14px;font-size:.95rem}
  .quickStart__head .secTitle{font-size:clamp(28px,8vw,38px)}
}
@media (max-width: 560px){
  .quickStart__grid{grid-auto-columns:minmax(248px,86vw)}
  .quickStart__card{padding:18px 16px 16px}
  .quickStart__eyebrow{padding:6px 10px;font-size:.7rem}
  .quickStart__card h3{font-size:1.2rem}
  .quickStart__card p{font-size:.9rem}
  .quickStart__list li{font-size:.9rem}
}



/* === WERSJA PLIKU v.204 — onas wrap + contact quick actions === */

/* 1) Jak chcesz kupować — wrap jak Boxiki w abonamencie */
.quickStart{
  position: relative;
  isolation: isolate;
  padding: 58px 0 34px !important;
}
.quickStart::before{
  content:"";
  position:absolute;
  z-index:0;
  inset: 8px clamp(10px, 2.3vw, 24px) 0 !important;
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 22px 48px rgba(8, 36, 20, .14);
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%),
    linear-gradient(180deg, #f3f6ed 0%, #f8f4ec 100%) !important;
}
.quickStart > .wrap{
  position: relative;
  z-index: 1;
  padding: 28px clamp(18px, 2.9vw, 30px) 30px !important;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 34%),
    radial-gradient(220px 110px at 84% 10%, rgba(var(--arbuzik-yellow-rgb),.08), transparent 60%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Nagłówek sekcji — lewy blok + prawy opis */
.quickStart__head{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(340px, 430px);
  align-items:start !important;
  gap:16px 28px;
  margin-bottom:22px;
}
.quickStart__titleCol{
  align-self:start;
}
.quickStart__head .secTitle{
  color:#104929 !important;
}
.quickStart__head .muted{
  align-self:start;
  justify-self:end;
  text-align:left;
  max-width:430px;
  padding-top:4px !important;
  margin:0;
}
.quickStart__cta:hover,
.quickStart__cta:focus-visible{
  color: var(--arbuzik-yellow) !important;
}

/* 3) O nas — bez kolorowego wrapa */
#onas::before{
  background:
    linear-gradient(180deg, rgba(18,123,67,.05) 0%, rgba(18,123,67,0) 26%),
    linear-gradient(180deg, #f6f8f2 0%, #f8f4ec 100%) !important;
}
#onas > .wrap{
  background: none !important;
}

/* 4) Mobile — opis po prawej, karty pełna szerokość viewportu */
@media (max-width: 980px){
  .quickStart{
    padding: 52px 0 28px !important;
  }
  .quickStart::before{
    inset: 8px 12px 0 12px !important;
    border-radius: 28px;
  }
  .quickStart > .wrap{
    padding: 20px 14px 22px !important;
  }
  .quickStart__head{
    grid-template-columns:minmax(0, .9fr) minmax(0, 1fr) !important;
    align-items:start !important;
    gap:10px 14px !important;
  }
  .quickStart__head .muted{
    justify-self:stretch !important;
    max-width:none !important;
    padding-top:6px !important;
    font-size:.98rem;
    line-height:1.45;
  }
  .quickStart__head .secTitle{
    font-size:clamp(28px,8vw,38px) !important;
  }
  .quickStart__grid{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:4px 12px 10px 12px !important;
    grid-auto-columns:minmax(260px, calc(100vw - 56px)) !important;
  }
}
@media (max-width: 560px){
  .quickStart__head{
    grid-template-columns:minmax(0, .95fr) minmax(0, .95fr) !important;
    gap:10px 12px !important;
  }
  .quickStart__grid{
    grid-auto-columns:minmax(248px, calc(100vw - 44px)) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .quickStart__card{
    padding:18px 16px 16px !important;
  }
  .quickStart__cta{
    padding:11px 15px !important;
    font-size:.96rem !important;
  }
}

/* 5) Mobile sticky cart vs back-to-top — bez zwiększania wysokości */
@media (max-width: 768px){
  .mobileCartBar{
    padding-right:74px !important; /* miejsce na przycisk powrotu */
  }
  .mobileCartBar__cta{
    padding:0 14px !important;
    min-height:40px !important;
    font-size:12.5px !important;
  }
  #arbuzik-top{
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 1300 !important;
  }
  #arbuzik-top .btn-ring-wrap{
    width:56px !important;
    height:56px !important;
  }
}


/* =========================================================
   O NAS + KONTAKT PATCH v.204
   ========================================================= */

/* 1) O nas — wrap taki sam jak Kontakt */
#onas::before{
  background:
    radial-gradient(circle at 84% 14%, rgba(var(--arbuzik-yellow-rgb),.22) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(360px 170px at 82% 14%, rgba(var(--arbuzik-yellow-rgb),.16), transparent 56%),
    linear-gradient(173deg, rgba(var(--arbuzik-yellow-rgb),.92) 0 6%, transparent 6.3% 100%),
    linear-gradient(8deg, rgba(239,46,40,.88) 0 7%, transparent 7.3% 100%),
    linear-gradient(180deg, #127842 0%, #0d6e3d 24%, #f8f4ec 24.5%, #f8f4ec 100%) !important;
}
#onas > .wrap{
  background:
    linear-gradient(180deg, rgba(18,123,67,.05) 0%, rgba(18,123,67,0) 28%) !important;
}

/* 2) Kontakt — panel szybkich akcji premium */
.contactQuick{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px 18px 16px !important;
  background:
    radial-gradient(260px 120px at 84% 12%, rgba(var(--arbuzik-yellow-rgb),.14), transparent 60%),
    linear-gradient(180deg, rgba(18,123,67,.08) 0%, rgba(18,123,67,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,245,237,.97)) !important;
  border:1px solid rgba(18,82,46,.10) !important;
}
.contactQuick::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg, #0c6b3e 0%, var(--arbuzik-yellow) 52%, #ef2424 100%);
}
.contactQuick__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.contactQuick__eyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0c6b3e;
  margin-bottom:8px;
}
.contactQuick__title{
  margin:0;
  font-size:1.5rem;
  line-height:1.06;
  color:#123725;
}
.contactQuick__desc{
  margin:10px 0 0;
  color:#617368;
  line-height:1.55;
}
.contactQuick__badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(18,82,46,.10);
  box-shadow:0 8px 22px rgba(9,44,24,.08);
  font-size:12px;
  font-weight:900;
  color:#0c6b3e;
}
.contactQuick__actions{
  display:grid;
  gap:12px;
}
.contactQuick__action{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(18,82,46,.08);
  box-shadow:0 10px 24px rgba(9,44,24,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.contactQuick__action:hover,
.contactQuick__action:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(9,44,24,.12);
  border-color:rgba(12,107,62,.18);
}
.contactQuick__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:23px;
  background:linear-gradient(180deg, rgba(12,107,62,.10), rgba(12,107,62,.05));
  border:1px solid rgba(12,107,62,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.contactQuick__text{display:grid;gap:3px;min-width:0;}
.contactQuick__text strong{font-size:1.05rem;color:#163525;line-height:1.1;}
.contactQuick__text small{font-size:.86rem;color:#66776d;line-height:1.4;}
.contactQuick__arrow{
  font-size:1.15rem;
  font-weight:900;
  color:#0c6b3e;
  transition:transform .18s ease, color .18s ease;
}
.contactQuick__action:hover .contactQuick__arrow,
.contactQuick__action:focus-visible .contactQuick__arrow{
  transform:translateX(3px);
  color:#ef2424;
}
.contactQuick__action--nav .contactQuick__icon{
  background:linear-gradient(180deg, rgba(255,222,0,.28), rgba(255,222,0,.10));
  border-color:rgba(255,222,0,.28);
}
.contactQuick__action--box .contactQuick__icon{
  background:linear-gradient(180deg, rgba(12,107,62,.14), rgba(12,107,62,.06));
}
.contactQuick__action--call .contactQuick__icon{
  background:linear-gradient(180deg, rgba(239,36,36,.14), rgba(239,36,36,.06));
  border-color:rgba(239,36,36,.16);
}
.contactQuick__footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:2px;
}
.contactQuick__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(18,82,46,.08);
  font-size:12px;
  font-weight:800;
  color:#52665b;
}
@media (max-width: 980px){
  .contactQuick{padding:16px 14px 14px !important;}
  .contactQuick__top{display:grid;grid-template-columns:1fr;gap:10px;}
  .contactQuick__badge{justify-self:flex-start;}
}
@media (max-width: 640px){
  .contactQuick__action{grid-template-columns:46px minmax(0,1fr) auto;padding:13px 12px;border-radius:18px;}
  .contactQuick__icon{width:46px;height:46px;border-radius:14px;font-size:21px;}
  .contactQuick__text strong{font-size:1rem;}
  .contactQuick__text small{font-size:.83rem;}
}


/* =========================================================
   O NAS WRAP REMOVE FIX v.205
   ========================================================= */
#onas::before{
  display:none !important;
  content:none !important;
  background:none !important;
}


/* ===== Boxiki koszyk premium v206 ===== */
.cartPremiumShell{display:grid;gap:14px}
.cartPremiumHero{position:relative;overflow:hidden;border-radius:24px;padding:18px;background:linear-gradient(135deg,#0d6b3e 0%,#108245 58%,#ffde00 145%);box-shadow:0 18px 34px rgba(6,107,51,.15);color:#fff}
.cartPremiumHero__glow{position:absolute;top:-26px;right:-26px;width:126px;height:126px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,0) 72%)}
.cartPremiumHero__top{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.cartPremiumHero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:900;letter-spacing:.08em}
.cartPremiumHero__title{margin-top:12px;font-size:24px;font-weight:950;line-height:1.05}
.cartPremiumHero__copy{margin-top:10px;max-width:46ch;font-size:14px;line-height:1.5;color:rgba(255,255,255,.92)}
.cartPremiumHero__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cartPremiumHero__count{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:900}
.cartPremiumHero__clear{border-color:rgba(255,255,255,.35)!important;color:#fff!important;background:rgba(255,255,255,.08)!important}
.cartPremiumHero__clear:hover,.cartPremiumHero__clear:focus-visible{color:var(--arbuzik-yellow)!important;border-color:rgba(255,222,0,.55)!important;background:rgba(255,255,255,.14)!important}
.cartItemsGrid{display:grid;gap:12px}
.cartItemCard{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.99));border:1px solid rgba(6,107,51,.08);box-shadow:0 12px 26px rgba(0,0,0,.055);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.cartItemCard:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(6,107,51,.10);border-color:rgba(6,107,51,.16)}
.cartItemCard__thumb{width:86px;height:86px;border-radius:20px;overflow:hidden;border:2px solid rgba(255,222,0,.52);flex-shrink:0;box-shadow:0 10px 22px rgba(6,107,51,.08)}
.cartItemCard__img{width:100%;height:100%;object-fit:cover;display:block}
.cartItemCard__fallback{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-size:30px}
.cartItemCard__main{min-width:0}
.cartItemCard__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cartItemCard__name{font-size:16px}
.cartItemCard__tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:rgba(6,107,51,.09);font-size:11px;font-weight:900;letter-spacing:.06em;color:#0d6b3e}
.cartItemCard__tag.is-box{background:rgba(255,222,0,.22);color:#7a5d00}
.cartItemCard__meta{margin-top:6px}
.cartItemCard__bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.cartQtyBox{display:flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.10);border-radius:15px;padding:5px 7px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.cartQtyBox__btn{padding:7px 11px!important;border-radius:10px!important}
.cartQtyBox__btn:hover,.cartQtyBox__btn:focus-visible{color:var(--arbuzik-yellow)!important;background:var(--brand)!important;border-color:var(--brand)!important}
.cartQtyBox__value{min-width:28px;text-align:center}
.cartItemCard__pill{padding:6px 10px;border-radius:999px;background:rgba(239,36,36,.08);font-size:12px;font-weight:800;color:#b02020}
.cartItemCard__side{align-self:stretch;display:flex;align-items:center;justify-content:flex-end}
.cartItemCard__line{min-width:96px;text-align:right;font-size:20px}
.cartSummaryPremium{display:grid;gap:12px;padding:0 0 2px;border-radius:22px;background:linear-gradient(180deg,#fff7cc 0%,#fff3b0 100%);border:1px solid rgba(255,222,0,.50);box-shadow:0 14px 30px rgba(255,222,0,.16)}
.cartSummaryPremium__head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px 0}
.cartSummaryPremium__head strong{font-size:15px}
.cartSummaryPremium__badge{padding:6px 10px;border-radius:999px;background:#fff;font-size:12px;font-weight:900;color:#0d6b3e;box-shadow:0 6px 12px rgba(0,0,0,.04)}
.myOrderCard{padding:14px;border-radius:20px;border:1px solid rgba(6,107,51,.08);box-shadow:0 12px 26px rgba(0,0,0,.05);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.96));position:relative;overflow:hidden}
.myOrderCard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#0d6b3e 0%,#ffde00 55%,#ef2424 100%);opacity:.92}
.myOrderCard__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.myOrderCard__side{display:grid;justify-items:end;gap:8px;flex-shrink:0}
.myOrderCard__rebuy{min-width:146px}
.myOrderCard__items{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.06)}
@media (max-width: 760px){
  .cartPremiumHero__title{font-size:22px}
  .cartItemCard{grid-template-columns:auto 1fr;align-items:flex-start}
  .cartItemCard__thumb{width:78px;height:78px}
  .cartItemCard__side{grid-column:2;justify-content:flex-start;align-items:flex-start}
  .cartItemCard__line{min-width:auto;text-align:left;font-size:18px}
  .cartSummaryPremium{position:relative}
  .myOrderCard__side{width:100%;justify-items:start}
  .myOrderCard__rebuy{width:100%}
}


/* =========================================================
   MOJE ZAMÓWIENIA PRO UPGRADE v.207
   ========================================================= */
.myOrdersList{display:grid;gap:14px}
.myOrderCard{padding:16px;border-radius:22px;border:1px solid rgba(6,107,51,.08);box-shadow:0 14px 32px rgba(0,0,0,.05);background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,255,255,.96));position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.myOrderCard:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.08);border-color:rgba(6,107,51,.16)}
.myOrderCard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#0d6b3e 0%,#ffde00 55%,#ef2424 100%);opacity:.95}
.myOrderCard--latest{background:linear-gradient(135deg,rgba(232,245,236,.96),rgba(255,255,255,.99) 58%);border-color:rgba(6,107,51,.18);box-shadow:0 18px 38px rgba(6,107,51,.10)}
.myOrderCard__latestBadge{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;border-radius:999px;background:rgba(6,107,51,.10);border:1px solid rgba(6,107,51,.16);color:#0c6b3e;font-size:12px;font-weight:950;letter-spacing:.03em;text-transform:uppercase}
.myOrderCard__head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.myOrderCard__meta{min-width:0;display:grid;gap:4px}
.myOrderCard__idRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.myOrderCard__id{font-size:13px;letter-spacing:.04em}
.myOrderCard__hint{margin-top:6px;color:#0c6b3e;font-weight:900;font-size:12px}
.myOrderCard__side{display:grid;justify-items:end;gap:10px;flex-shrink:0}
.myOrderCard__price{font-size:22px;font-weight:950;color:#066b33;line-height:1}
.myOrderCard__rebuy{min-width:180px}
.myorder-rebuy{box-shadow:0 12px 22px rgba(6,107,51,.16)}
.myorder-rebuy:hover,.myorder-rebuy:focus-visible{color:var(--arbuzik-yellow)!important;transform:translateY(-2px)}
.myOrderCard__items{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.06)}
.myOrderCard__itemsWrap{display:grid;gap:3px}
.myOrderCard__itemRow{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.myOrderCard__itemName{min-width:0;font-weight:800}
.myOrderCard__itemQty{font-weight:600}
.myOrderCard__itemPrice{flex-shrink:0;font-weight:900}
.myOrderCard__more{margin:2px 0 2px;padding:8px 10px;border-radius:12px;background:rgba(255,222,0,.14);border:1px solid rgba(255,222,0,.3);color:#715800;font-weight:900;font-size:12px;justify-self:start}
@media (max-width: 780px){
  .myOrderCard{padding:14px 14px 16px}
  .myOrderCard__head{gap:12px}
  .myOrderCard__side{width:100%;justify-items:start}
  .myOrderCard__price{font-size:20px}
  .myOrderCard__rebuy{width:100%;min-width:0}
}


/* WERSJA PLIKU v.212 */
/* BOXIKI HERO — ostatnie zamówienie w prawym panelu */
.boxHeroQuickPanel{
  position:relative;
  overflow:hidden;
  box-shadow:none;
  padding:16px;
  border-radius:var(--r2);
  background:linear-gradient(180deg, rgba(12,107,62,.10), rgba(255,255,255,.92));
  min-height:100%;
}
.boxHeroQuickPanel--order{
  background:
    radial-gradient(180px 120px at 10% 0%, rgba(255,222,0,.22), transparent 70%),
    linear-gradient(145deg, #066b33 0%, #0da24f 54%, #ffde00 124%);
  box-shadow:0 18px 38px rgba(6,107,51,.22);
  border:1px solid rgba(255,255,255,.20);
}
.boxHeroQuickPanel--order::before{
  content:"";
  position:absolute;
  inset:-18% auto auto -18%;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,222,0,.34), rgba(255,222,0,0) 70%);
  pointer-events:none;
}
.boxHeroQuickPanel--order::after{
  content:"";
  position:absolute;
  inset:auto -90px -90px auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,36,36,.24), rgba(239,36,36,0) 70%);
  pointer-events:none;
}
.boxHeroQuickPanel__glow{
  position:absolute;
  inset:-34px -24px auto auto;
  width:150px;
  height:150px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.boxHeroQuickPanel__art{
  position:absolute;
  top:14px;
  right:16px;
  width:122px;
  height:94px;
  background:var(--hero-order-art) center/cover no-repeat;
  clip-path:polygon(12% 8%, 88% 0, 100% 24%, 92% 82%, 55% 100%, 8% 86%, 0 38%);
  border:3px solid rgba(255,255,255,.86);
  box-shadow:0 16px 28px rgba(0,0,0,.16), 0 0 0 6px rgba(255,222,0,.24);
  transform:rotate(7deg);
  z-index:1;
}
.boxHeroQuickPanel__eyebrow{
  position:relative;
  z-index:2;
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:900;
}
.boxHeroQuickPanel__top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding-right:132px;
}
.boxHeroQuickPanel__title{
  margin-top:2px;
  font-size:24px;
  font-weight:950;
  color:#fff;
  line-height:1.02;
  max-width:12ch;
  text-shadow:0 2px 14px rgba(0,0,0,.14);
}
.boxHeroQuickPanel__copy{
  margin-top:5px;
  color:rgba(255,255,255,.90);
  font-size:12px;
  line-height:1.45;
}
.boxHeroQuickPanel__metrics{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.boxHeroQuickPanel__pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  color:#0c6b3e;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.boxHeroQuickPanel__pill--lime{
  background:#edfff2;
  border:1px solid rgba(12,107,62,.16);
}
.boxHeroQuickPanel__pill--gold{
  background:#ffef8a;
  border:1px solid rgba(255,222,0,.44);
}
.boxHeroQuickPanel__featured{
  position:relative;
  z-index:2;
  margin-top:10px;
  margin-right:132px;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.94);
}
.boxHeroQuickPanel__items{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  margin-top:12px;
}
.boxHeroQuickPanel__item{
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:9px;
  padding:6px 8px;
  border-radius:16px;
  background:rgba(255,248,219,.96);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.boxHeroQuickPanel__item.is-box{
  background:linear-gradient(135deg, rgba(255,252,226,.98), rgba(255,241,179,.96));
}
.boxHeroQuickPanel__thumbWrap{
  width:36px;
  height:36px;
  border-radius:11px;
  overflow:hidden;
  background:linear-gradient(135deg, #0d6b3e, #ffde00);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.boxHeroQuickPanel__thumb{width:100%;height:100%;object-fit:cover;display:block;}
.boxHeroQuickPanel__itemMain{min-width:0;}
.boxHeroQuickPanel__itemName{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;font-size:12px;font-weight:900;color:#123a21;}
.boxHeroQuickPanel__itemText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.boxHeroQuickPanel__miniTag{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:rgba(12,107,62,.10);color:#0c6b3e;font-size:9px;font-weight:900;letter-spacing:.05em;}
.boxHeroQuickPanel__qty{flex-shrink:0;min-width:26px;text-align:center;padding:4px 7px;border-radius:999px;background:#ffef8a;color:#0c6b3e;font-size:11px;font-weight:900;}
.boxHeroQuickPanel__more{margin-top:2px;font-size:12px;font-weight:800;color:rgba(255,255,255,.88);}
.boxHeroQuickPanel__actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:14px;
}
.boxHeroQuickPanel__actions .btn{min-height:46px;font-weight:900;border-width:1.5px;}
.boxHeroQuickPanel__actions .btn--solid{background:linear-gradient(135deg,#0b9f49,#066b33);box-shadow:0 14px 28px rgba(6,107,51,.28);}
.boxHeroQuickPanel__actions .btn--solid:hover,
.boxHeroQuickPanel__actions .btn--solid:focus-visible{color:var(--arbuzik-yellow) !important;transform:translateY(-1px);}
.boxHeroQuickPanel__actions .btn--ghost{background:rgba(255,255,255,.94);color:#0c6b3e;border-color:rgba(12,107,62,.18);box-shadow:0 10px 18px rgba(0,0,0,.08);}
.boxHeroQuickPanel__actions .btn--ghost:hover,
.boxHeroQuickPanel__actions .btn--ghost:focus-visible{background:#fff;color:#0c6b3e;}
.boxHeroQuickPanel__empty{color:var(--muted);font-size:13px;line-height:1.45;margin-top:12px;}
@media (max-width: 980px){
  .boxHeroQuickPanel{padding:13px;border-radius:22px;}
  .boxHeroQuickPanel__art{top:12px;right:12px;width:96px;height:76px;box-shadow:0 12px 22px rgba(0,0,0,.16), 0 0 0 4px rgba(255,222,0,.20);}
  .boxHeroQuickPanel__top{padding-right:102px;}
  .boxHeroQuickPanel__title{font-size:20px;max-width:11ch;}
  .boxHeroQuickPanel__featured{margin-right:102px;}
  .boxHeroQuickPanel__actions{grid-template-columns:1fr;}
}


/* WERSJA PLIKU v.211 */
/* BOXIKI HERO — ostatnie zamówienie w prawym panelu */
.boxHeroQuickPanel{
  position:relative;
  overflow:hidden;
  box-shadow:none;
  padding:16px;
  border-radius:var(--r2);
  background:linear-gradient(180deg, rgba(12,107,62,.10), rgba(255,255,255,.92));
  min-height:100%;
}
.boxHeroQuickPanel--order{
  background:
    radial-gradient(220px 160px at 100% 0%, rgba(255,222,0,.28), transparent 65%),
    radial-gradient(180px 160px at 0% 100%, rgba(229,57,53,.18), transparent 65%),
    linear-gradient(135deg, rgba(6,107,51,.97) 0%, rgba(12,146,79,.96) 58%, rgba(255,222,0,.96) 150%);
  box-shadow:0 18px 38px rgba(6,107,51,.18);
  border:1px solid rgba(255,255,255,.22);
}
.boxHeroQuickPanel--order::before{
  content:"";
  position:absolute;
  inset:auto -40px -34px auto;
  width:188px;
  height:188px;
  border-radius:28px 0 0 0;
  background:var(--hero-order-art) center/cover no-repeat;
  opacity:.24;
  filter:saturate(1.1) contrast(1.02);
  transform:rotate(-8deg);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.boxHeroQuickPanel--order::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(229,57,53,.94) 62% 83%, rgba(255,222,0,.96) 83% 87%, transparent 87%),
    radial-gradient(circle at 18px 18px, rgba(255,222,0,.32) 0 2px, transparent 2.4px) 0 0/18px 18px;
  opacity:.20;
  pointer-events:none;
}
.boxHeroQuickPanel__glow{
  position:absolute;
  inset:-40px -40px auto auto;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.34), rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.boxHeroQuickPanel__eyebrow{
  position:relative;
  z-index:2;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.boxHeroQuickPanel--order .boxHeroQuickPanel__eyebrow,
.boxHeroQuickPanel--order .boxHeroQuickPanel__copy,
.boxHeroQuickPanel--order .boxHeroQuickPanel__more,
.boxHeroQuickPanel--order .boxHeroQuickPanel__featured{
  color:rgba(255,255,255,.88);
}
.boxHeroQuickPanel__top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.boxHeroQuickPanel__title{
  margin-top:2px;
  font-size:22px;
  font-weight:950;
  color:#0b4f2d;
  line-height:1.05;
}
.boxHeroQuickPanel--order .boxHeroQuickPanel__title{color:#fff; max-width:14ch;}
.boxHeroQuickPanel__copy{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.boxHeroQuickPanel__list{display:grid;gap:8px;margin-top:12px;}
.boxHeroQuickPanel__row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;}
.boxHeroQuickPanel__divider{height:1px;margin:8px 0 0;background:var(--line);}
.boxHeroQuickPanel__footer{margin-top:10px;}
.boxHeroQuickPanel__tag{flex-shrink:0;}
.boxHeroQuickPanel__tag--refresh{
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  color:#fff !important;
  backdrop-filter:blur(8px);
}
.boxHeroQuickPanel__metrics{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.boxHeroQuickPanel__pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  color:#0c6b3e;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}
.boxHeroQuickPanel__pill--lime{
  background:#e8fff1;
  border:1px solid rgba(12,107,62,.16);
}
.boxHeroQuickPanel__pill--gold{
  background:#fff2a8;
  border:1px solid rgba(255,222,0,.38);
}
.boxHeroQuickPanel__featured{
  position:relative;
  z-index:2;
  margin-top:10px;
  font-size:12px;
  font-weight:800;
}
.boxHeroQuickPanel__items{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  margin-top:12px;
}
.boxHeroQuickPanel__item{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-radius:14px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.boxHeroQuickPanel__item.is-box{
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,249,208,.94));
}
.boxHeroQuickPanel__thumbWrap{
  width:42px;
  height:42px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg, #0d6b3e, #ffde00);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.boxHeroQuickPanel__thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.boxHeroQuickPanel__itemMain{min-width:0;}
.boxHeroQuickPanel__itemName{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:900;
  color:#123a21;
}
.boxHeroQuickPanel__itemDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(180deg, #0c6b3e, #ffd400);
  box-shadow:0 0 0 3px rgba(12,107,62,.08);
  flex:0 0 auto;
}
.boxHeroQuickPanel__itemText{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.boxHeroQuickPanel__miniTag{
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(12,107,62,.10);
  color:#0c6b3e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
}
.boxHeroQuickPanel__qty{
  flex-shrink:0;
  min-width:28px;
  text-align:center;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,222,0,.22);
  color:#0c6b3e;
  font-size:11px;
  font-weight:900;
}
.boxHeroQuickPanel__more{margin-top:2px;font-size:12px;font-weight:800;}
.boxHeroQuickPanel__actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:14px;
}
.boxHeroQuickPanel__actions .btn{
  min-height:46px;
  font-weight:900;
  border-width:1.5px;
}
.boxHeroQuickPanel__actions .btn--solid{
  box-shadow:0 10px 22px rgba(6,107,51,.22);
}
.boxHeroQuickPanel__actions .btn--solid:hover,
.boxHeroQuickPanel__actions .btn--solid:focus-visible{
  color:var(--arbuzik-yellow) !important;
}
.boxHeroQuickPanel__actions .btn--ghost{
  background:rgba(255,255,255,.92);
  color:#0c6b3e;
  border-color:rgba(12,107,62,.18);
}
.boxHeroQuickPanel__actions .btn--ghost:hover,
.boxHeroQuickPanel__actions .btn--ghost:focus-visible{
  background:#fff;
  color:#0c6b3e;
}
.boxHeroQuickPanel__empty{color:var(--muted);font-size:13px;line-height:1.45;margin-top:12px;}
@media (max-width: 980px){
  .boxHeroQuickPanel{
    padding:13px;
    border-radius:22px;
  }
  .boxHeroQuickPanel--order::before{
    width:128px;
    height:128px;
    right:-26px;
    bottom:-18px;
    opacity:.18;
  }
  .boxHeroQuickPanel__title{font-size:19px;}
  .boxHeroQuickPanel__actions{grid-template-columns:1fr;}
}


/* =========================================================
   BOXIKI HERO QUICK PANEL WOW FIX v.212
   - usuwa wyblakłe filtry
   - przenosi grafikę do prawego górnego rogu
   - daje mocniejsze kolory Arbuzika
   ========================================================= */
.boxHeroQuickPanel--order{
  background:
    radial-gradient(220px 160px at 92% 14%, rgba(255,222,0,.30), transparent 62%),
    radial-gradient(180px 140px at 16% 82%, rgba(229,57,53,.22), transparent 62%),
    linear-gradient(135deg, #066b33 0%, #0a7b3c 42%, #14944f 76%, #0f7a41 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 22px 42px rgba(6,107,51,.24) !important;
}
.boxHeroQuickPanel--order::before{
  content:none !important;
}
.boxHeroQuickPanel--order::after{
  content:none !important;
}
.boxHeroQuickPanel__glow{
  inset:-22px -20px auto auto !important;
  width:140px !important;
  height:140px !important;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 72%) !important;
}
.boxHeroQuickPanel__art{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:116px !important;
  height:94px !important;
  background:var(--hero-order-art) center/cover no-repeat !important;
  clip-path:polygon(10% 8%, 84% 0, 100% 22%, 95% 78%, 60% 100%, 14% 92%, 0 34%) !important;
  border:3px solid rgba(255,255,255,.88) !important;
  box-shadow:0 14px 24px rgba(0,0,0,.20), 0 0 0 5px rgba(255,222,0,.20) !important;
  transform:rotate(8deg) !important;
  z-index:2 !important;
}
.boxHeroQuickPanel__top{
  padding-right:128px !important;
}
.boxHeroQuickPanel__title{
  font-size:27px !important;
  line-height:1.00 !important;
  max-width:10ch !important;
  text-shadow:0 3px 14px rgba(0,0,0,.12) !important;
}
.boxHeroQuickPanel__eyebrow,
.boxHeroQuickPanel--order .boxHeroQuickPanel__eyebrow{
  color:rgba(255,255,255,.84) !important;
}
.boxHeroQuickPanel__copy,
.boxHeroQuickPanel--order .boxHeroQuickPanel__copy{
  color:rgba(255,255,255,.86) !important;
  font-weight:700 !important;
}
.boxHeroQuickPanel__featured,
.boxHeroQuickPanel--order .boxHeroQuickPanel__featured{
  color:#ffe978 !important;
  font-weight:900 !important;
}
.boxHeroQuickPanel__items{
  gap:7px !important;
}
.boxHeroQuickPanel__item{
  grid-template-columns:34px 1fr auto !important;
  gap:8px !important;
  padding:6px 8px !important;
  border-radius:15px !important;
  background:linear-gradient(135deg, rgba(255,248,214,.98), rgba(255,240,174,.95)) !important;
  border:1px solid rgba(255,222,0,.30) !important;
  box-shadow:0 10px 16px rgba(0,0,0,.08) !important;
}
.boxHeroQuickPanel__item.is-box{
  background:linear-gradient(135deg, rgba(255,251,229,.99), rgba(255,233,131,.96)) !important;
}
.boxHeroQuickPanel__thumbWrap{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  box-shadow:0 4px 10px rgba(6,107,51,.18) !important;
}
.boxHeroQuickPanel__itemName{
  font-size:12px !important;
  gap:5px !important;
}
.boxHeroQuickPanel__miniTag{
  background:#d7f3df !important;
  color:#0c6b3e !important;
}
.boxHeroQuickPanel__qty{
  background:#ffde00 !important;
  color:#066b33 !important;
  box-shadow:inset 0 0 0 1px rgba(6,107,51,.12) !important;
}
.boxHeroQuickPanel__actions{
  grid-template-columns:1fr auto !important;
}
.boxHeroQuickPanel__actions .btn--solid{
  background:linear-gradient(135deg,#0b9f49,#066b33) !important;
  box-shadow:0 16px 28px rgba(6,107,51,.28) !important;
}
.boxHeroQuickPanel__actions .btn--ghost{
  background:#fff7cc !important;
  color:#0c6b3e !important;
  border-color:rgba(255,222,0,.48) !important;
}
.boxHeroQuickPanel__actions .btn--ghost:hover,
.boxHeroQuickPanel__actions .btn--ghost:focus-visible{
  color:var(--arbuzik-yellow-deep,#d4ab00) !important;
  background:#fff3a8 !important;
}
@media (max-width:980px){
  .boxHeroQuickPanel__art{
    width:90px !important;
    height:72px !important;
    top:12px !important;
    right:12px !important;
  }
  .boxHeroQuickPanel__top{padding-right:100px !important;}
  .boxHeroQuickPanel__title{font-size:22px !important;max-width:11ch !important;}
}


/* WERSJA PLIKU v.213 */
/* HERO QUICK PANEL — final vivid override */
.boxHeroQuickPanel{background:#f5f8f1;}
.boxHeroQuickPanel--order{
  background:
    radial-gradient(160px 120px at 12% 8%, rgba(255,222,0,.38), transparent 68%),
    radial-gradient(180px 130px at 92% 18%, rgba(255,188,0,.24), transparent 70%),
    linear-gradient(135deg, #0b6f38 0%, #14984d 46%, #ffe13c 120%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 24px 48px rgba(6,107,51,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.boxHeroQuickPanel--order::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08) 0 42%, rgba(255,255,255,0) 42% 100%),
    linear-gradient(118deg, transparent 0 76%, rgba(239,36,36,.92) 76% 92%, transparent 92%);
  opacity:1;
  pointer-events:none;
}
.boxHeroQuickPanel--order::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-18px;
  width:172px;
  height:128px;
  background:var(--hero-order-art) center/cover no-repeat;
  clip-path:polygon(12% 10%, 86% 0, 100% 24%, 96% 74%, 68% 100%, 14% 92%, 0 44%);
  border:4px solid rgba(255,255,255,.92);
  border-radius:28px;
  box-shadow:0 16px 34px rgba(0,0,0,.22), 0 0 0 8px rgba(255,222,0,.22);
  transform:rotate(7deg);
  opacity:1;
  pointer-events:none;
}
.boxHeroQuickPanel__glow{display:none;}
.boxHeroQuickPanel__art{display:none;}
.boxHeroQuickPanel__eyebrow,
.boxHeroQuickPanel__copy,
.boxHeroQuickPanel__featured,
.boxHeroQuickPanel__more{color:rgba(255,255,255,.96)!important;text-shadow:0 2px 10px rgba(0,0,0,.12);}
.boxHeroQuickPanel__top{padding-right:146px;}
.boxHeroQuickPanel__title{color:#fff!important;max-width:10ch;font-size:clamp(28px,2.2vw,34px);text-shadow:0 3px 16px rgba(0,0,0,.18);}
.boxHeroQuickPanel__metrics{margin-top:14px;}
.boxHeroQuickPanel__pill{box-shadow:0 10px 20px rgba(0,0,0,.12);}
.boxHeroQuickPanel__pill--lime{background:#edfff1;border-color:rgba(12,107,62,.14);color:#0c6b3e;}
.boxHeroQuickPanel__pill--gold{background:#ffde00;border-color:rgba(255,222,0,.65);color:#0c6b3e;}
.boxHeroQuickPanel__featured{margin-right:146px;font-size:12px;font-weight:900;}
.boxHeroQuickPanel__items{gap:10px;margin-top:14px;}
.boxHeroQuickPanel__item{
  grid-template-columns:44px 1fr auto;
  gap:10px;
  padding:8px 10px;
  border-radius:18px;
  background:rgba(255,248,219,.98);
  border:1px solid rgba(255,222,0,.38);
  box-shadow:0 12px 20px rgba(0,0,0,.10);
}
.boxHeroQuickPanel__item.is-box{background:linear-gradient(135deg, rgba(255,250,220,.98), rgba(255,235,133,.98));}
.boxHeroQuickPanel__thumbWrap{width:44px;height:44px;border-radius:13px;box-shadow:0 6px 14px rgba(0,0,0,.12);}
.boxHeroQuickPanel__itemName{font-size:13px;font-weight:900;color:#114123;}
.boxHeroQuickPanel__miniTag{background:#e4f4e8;color:#0c6b3e;font-size:9px;padding:2px 6px;}
.boxHeroQuickPanel__qty{background:#ffde00;color:#0c6b3e;min-width:30px;padding:5px 8px;box-shadow:0 4px 10px rgba(255,222,0,.35);}
.boxHeroQuickPanel__actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.boxHeroQuickPanel__actions .btn--solid{background:linear-gradient(135deg,#0b9d4a,#066b33)!important;border:none!important;box-shadow:0 14px 28px rgba(6,107,51,.28);}
.boxHeroQuickPanel__actions .btn--ghost{background:#fff7d7!important;color:#0c6b3e!important;border:1.5px solid rgba(255,222,0,.6)!important;box-shadow:0 10px 20px rgba(0,0,0,.08);}
.boxHeroQuickPanel__actions .btn--ghost:hover,.boxHeroQuickPanel__actions .btn--ghost:focus-visible,.boxHeroQuickPanel__actions .btn--solid:hover,.boxHeroQuickPanel__actions .btn--solid:focus-visible{color:#ffde00!important;}
@media (max-width:980px){
  .boxHeroQuickPanel--order::after{right:-12px;top:-10px;width:132px;height:100px;border-width:3px;box-shadow:0 12px 24px rgba(0,0,0,.18),0 0 0 6px rgba(255,222,0,.2);}
  .boxHeroQuickPanel__top{padding-right:104px;}
  .boxHeroQuickPanel__featured{margin-right:104px;}
  .boxHeroQuickPanel__title{font-size:24px;}
  .boxHeroQuickPanel__actions{grid-template-columns:1fr;}
}


/* =========================================================
   BOXIKI HERO QUICK PANEL FINAL FIX v.214
   - jedna finalna, nadrzędna wersja panelu szybkiego zakupu
   - usuwa mgłę / filtry / półprzezroczyste nakładki
   - robi mocny sticker w prawym górnym rogu
   ========================================================= */
.boxHeroQuickPanel,
.boxHeroQuickPanel.card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  padding:16px !important;
  border-radius:28px !important;
  background:#f7f4ea !important;
  border:1px solid rgba(12,107,62,.10) !important;
  box-shadow:0 18px 34px rgba(6,107,51,.12) !important;
  backdrop-filter:none !important;
  filter:none !important;
}
.boxHeroQuickPanel--order{
  background:
    radial-gradient(140px 100px at 16% 14%, rgba(255,222,0,.22), transparent 72%),
    linear-gradient(180deg, #fbf8ef 0%, #f4f0e2 100%) !important;
  border:1px solid rgba(255,222,0,.28) !important;
  box-shadow:0 22px 42px rgba(6,107,51,.14), 0 0 0 1px rgba(255,255,255,.55) inset !important;
}
.boxHeroQuickPanel--order::before,
.boxHeroQuickPanel--order::after,
.boxHeroQuickPanel__glow{display:none !important; content:none !important;}
.boxHeroQuickPanel__art{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:132px !important;
  height:104px !important;
  border-radius:24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    var(--hero-order-art) center/cover no-repeat !important;
  box-shadow:0 16px 28px rgba(0,0,0,.16), 0 0 0 4px rgba(255,222,0,.18) !important;
  border:2px solid rgba(255,255,255,.72) !important;
  transform:rotate(6deg) !important;
  clip-path:polygon(14% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 18%) !important;
  z-index:1 !important;
}
.boxHeroQuickPanel__art::after{
  content:"";
  position:absolute;
  inset:auto auto -10px -10px;
  width:72px;
  height:72px;
  background:radial-gradient(circle, rgba(255,222,0,.58), rgba(255,222,0,0) 72%);
  pointer-events:none;
}
.boxHeroQuickPanel__eyebrow,
.boxHeroQuickPanel__title,
.boxHeroQuickPanel__copy,
.boxHeroQuickPanel__featured,
.boxHeroQuickPanel__items,
.boxHeroQuickPanel__actions{position:relative; z-index:2;}
.boxHeroQuickPanel__top{padding-right:150px !important;}
.boxHeroQuickPanel__eyebrow{
  color:#5f7f67 !important;
  font-size:12px !important;
  font-weight:900 !important;
  opacity:1 !important;
}
.boxHeroQuickPanel__title{
  color:#0b4f2a !important;
  font-size:clamp(28px,2.1vw,34px) !important;
  line-height:.95 !important;
  letter-spacing:-.03em !important;
  max-width:8ch !important;
  text-shadow:none !important;
}
.boxHeroQuickPanel__copy,
.boxHeroQuickPanel__featured,
.boxHeroQuickPanel__more{
  color:#6b7b6d !important;
  text-shadow:none !important;
}
.boxHeroQuickPanel__featured{
  margin-top:10px !important;
  margin-right:150px !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.boxHeroQuickPanel__featured strong{color:#f0b400 !important;}
.boxHeroQuickPanel__metrics{margin-top:12px !important; gap:8px !important;}
.boxHeroQuickPanel__pill{box-shadow:none !important;}
.boxHeroQuickPanel__pill--lime{background:#e8f7ec !important; color:#0c6b3e !important; border-color:rgba(12,107,62,.16) !important;}
.boxHeroQuickPanel__pill--gold{background:#ffde00 !important; color:#0c6b3e !important; border-color:rgba(255,222,0,.65) !important;}
.boxHeroQuickPanel__items{gap:10px !important; margin-top:12px !important;}
.boxHeroQuickPanel__item{
  background:linear-gradient(180deg, #fff6c7 0%, #ffef99 100%) !important;
  border:1px solid rgba(240,180,0,.28) !important;
  box-shadow:0 8px 16px rgba(255,222,0,.14) !important;
}
.boxHeroQuickPanel__item.is-box{background:linear-gradient(180deg, #fff4bf 0%, #ffe96c 100%) !important;}
.boxHeroQuickPanel__thumbWrap{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  border:1px solid rgba(12,107,62,.10) !important;
  box-shadow:0 6px 12px rgba(0,0,0,.10) !important;
}
.boxHeroQuickPanel__itemName{color:#114123 !important; font-size:13px !important;}
.boxHeroQuickPanel__miniTag{background:#dcf2df !important; color:#0c6b3e !important;}
.boxHeroQuickPanel__qty{background:#ffde00 !important; color:#0c6b3e !important; box-shadow:none !important;}
.boxHeroQuickPanel__actions{grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:14px !important;}
.boxHeroQuickPanel__actions .btn{min-height:48px !important; font-weight:900 !important;}
.boxHeroQuickPanel__actions .btn--solid{background:linear-gradient(135deg,#0a9d4a,#066b33) !important; border:none !important; box-shadow:0 14px 26px rgba(6,107,51,.24) !important;}
.boxHeroQuickPanel__actions .btn--ghost{background:#fff7d7 !important; color:#0c6b3e !important; border:1.5px solid rgba(255,222,0,.7) !important; box-shadow:none !important;}
.boxHeroQuickPanel__actions .btn--solid:hover,
.boxHeroQuickPanel__actions .btn--solid:focus-visible,
.boxHeroQuickPanel__actions .btn--ghost:hover,
.boxHeroQuickPanel__actions .btn--ghost:focus-visible{color:#ffde00 !important;}
@media (max-width:1100px){
  .boxHeroQuickPanel__art{width:112px !important;height:88px !important;top:12px !important;right:12px !important;}
  .boxHeroQuickPanel__top{padding-right:122px !important;}
  .boxHeroQuickPanel__featured{margin-right:122px !important;}
}
@media (max-width:700px){
  .boxHeroQuickPanel__art{width:94px !important;height:76px !important;}
  .boxHeroQuickPanel__top{padding-right:0 !important;}
  .boxHeroQuickPanel__featured{margin-right:0 !important;}
  .boxHeroQuickPanel__title{max-width:none !important; font-size:24px !important;}
  .boxHeroQuickPanel__actions{grid-template-columns:1fr !important;}
}


/* === WERSJA PLIKU v.217 | final hard fix hero quick panel === */
#abonament > .wrap > .card > div > .boxHeroRail{
  background: linear-gradient(180deg,#fffef8 0%,#fff8df 100%) !important;
  border-left: 1px solid rgba(12,107,62,.10) !important;
  position: relative !important;
}
#abonament > .wrap > .card > div > .boxHeroRail::before,
#abonament > .wrap > .card > div > .boxHeroRail::after{content:none !important;display:none !important;}
.boxHeroQuickPanel,
.boxHeroQuickPanel.card{
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#fffdf2 0%,#fff4bf 100%) !important;
  border: 1px solid rgba(255,222,0,.55) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 40px rgba(6,107,51,.10) !important;
  filter: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.boxHeroQuickPanel::before,
.boxHeroQuickPanel::after,
.boxHeroQuickPanel__glow,
.boxHeroQuickPanel--order::before,
.boxHeroQuickPanel--order::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}
.boxHeroQuickPanel--order{
  background:
    radial-gradient(circle at 88% 16%, rgba(255,222,0,.34) 0 18%, rgba(255,222,0,0) 19%),
    radial-gradient(circle at 82% 82%, rgba(239,36,36,.16) 0 16%, rgba(239,36,36,0) 17%),
    linear-gradient(160deg,#fffef4 0%, #fff6c8 52%, #ffe35c 100%) !important;
  border: 1px solid rgba(255,222,0,.75) !important;
  box-shadow: 0 22px 48px rgba(6,107,51,.16), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.boxHeroQuickPanel--order .boxHeroQuickPanel__eyebrow,
.boxHeroQuickPanel--order .boxHeroQuickPanel__title,
.boxHeroQuickPanel--order .boxHeroQuickPanel__copy,
.boxHeroQuickPanel--order .boxHeroQuickPanel__featured,
.boxHeroQuickPanel--order .boxHeroQuickPanel__more{
  color:#114123 !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.boxHeroQuickPanel__eyebrow{
  color: rgba(12,107,62,.72) !important;
  font-weight: 900 !important;
}
.boxHeroQuickPanel__title{
  color:#114123 !important;
  max-width: 11ch !important;
  font-size: clamp(24px,2.1vw,34px) !important;
  line-height: .98 !important;
}
.boxHeroQuickPanel__copy{ color:#5e745f !important; }
.boxHeroQuickPanel__top{ padding-right: 132px !important; }
.boxHeroQuickPanel__featured{ margin-right:132px !important; font-size:12px !important; font-weight:800 !important; }
.boxHeroQuickPanel__featured strong{ color:#d88f00 !important; }
.boxHeroQuickPanel__art{
  display:block !important;
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:112px !important;
  height:88px !important;
  background-image: var(--hero-order-art) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border:none !important;
  border-radius: 26px 20px 30px 14px !important;
  clip-path: polygon(16% 0, 100% 0, 100% 76%, 84% 100%, 0 100%, 0 22%);
  box-shadow: 0 14px 30px rgba(0,0,0,.18), 0 0 0 4px rgba(255,222,0,.22) !important;
  transform: rotate(4deg) !important;
  z-index: 3 !important;
}
.boxHeroQuickPanel__art::after{
  content:"" !important;
  position:absolute !important;
  inset:auto 8px 8px auto !important;
  width:44px !important;
  height:10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.24) !important;
  transform:rotate(-16deg) !important;
}
.boxHeroQuickPanel__metrics,.boxHeroQuickPanel__items,.boxHeroQuickPanel__actions{ position:relative !important; z-index:2 !important; }
.boxHeroQuickPanel__pill--lime{ background:#e7f6eb !important; color:#0c6b3e !important; border-color:rgba(12,107,62,.16) !important; }
.boxHeroQuickPanel__pill--gold{ background:#ffde00 !important; color:#0c6b3e !important; border-color:rgba(255,222,0,.70) !important; }
.boxHeroQuickPanel__items{ gap:10px !important; }
.boxHeroQuickPanel__item{
  background: linear-gradient(180deg,#fff7cf 0%,#ffec86 100%) !important;
  border:1px solid rgba(255,222,0,.72) !important;
  box-shadow: 0 8px 18px rgba(255,222,0,.18) !important;
}
.boxHeroQuickPanel__itemName{ color:#114123 !important; }
.boxHeroQuickPanel__miniTag{ background:#ddf1e1 !important; color:#0c6b3e !important; }
.boxHeroQuickPanel__qty{ background:#ffde00 !important; color:#0c6b3e !important; }
.boxHeroQuickPanel__actions .btn--solid{ background:linear-gradient(135deg,#0b9d4a,#066b33) !important; border:none !important; }
.boxHeroQuickPanel__actions .btn--ghost{ background:#fff7d7 !important; color:#0c6b3e !important; border:1.5px solid rgba(255,222,0,.7) !important; }
.boxHeroQuickPanel__actions .btn--solid:hover,
.boxHeroQuickPanel__actions .btn--solid:focus-visible,
.boxHeroQuickPanel__actions .btn--ghost:hover,
.boxHeroQuickPanel__actions .btn--ghost:focus-visible{ color:#ffde00 !important; }
@media (max-width: 980px){
  #abonament > .wrap > .card > div > .boxHeroRail{border-left:0 !important; border-top:1px solid rgba(12,107,62,.10) !important;}
  .boxHeroQuickPanel__top{padding-right:122px !important;}
  .boxHeroQuickPanel__featured{margin-right:122px !important;}
  .boxHeroQuickPanel__art{width:102px !important;height:80px !important;}
}
@media (max-width: 640px){
  .boxHeroQuickPanel__top{padding-right:0 !important;}
  .boxHeroQuickPanel__featured{margin-right:0 !important;}
  .boxHeroQuickPanel__art{position:relative !important; top:auto !important; right:auto !important; margin:0 0 10px auto !important; width:94px !important; height:74px !important;}
  .boxHeroQuickPanel__title{max-width:none !important;}
}


/* MOJE ZAMÓWIENIA — rozwijanie szczegółów v.218 */
.myOrderCard__previewWrap{display:grid;gap:3px}
.myOrderCard__details{display:none}
.myOrderCard__details.is-open{display:block}
.myOrderCard__toggle{margin-top:8px;justify-self:start}
.myOrderCard__detailContent{display:grid;gap:0}
.myOrderCard__fullRows{display:grid;gap:3px}


/* PATCH v219 — moje zamówienia: przycisk przed listą, szczegóły całkowicie ukryte */
.myOrderCard__itemsWrap--collapsed{display:grid;gap:10px}
.myOrderCard__itemsWrap--collapsed .myOrderCard__toggle{order:1;margin-top:0 !important;justify-self:start}
.myOrderCard__itemsWrap--collapsed .myOrderCard__details{order:2}


/* =========================================================
   MY ORDERS PICK AGAIN + CART UPSELL v.221
   ========================================================= */
.myOrderCard__selectRow{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  align-items:center;
  gap:10px;
}
.myOrderCard__itemCheck{
  width:16px;
  height:16px;
  accent-color:#0c6b3e;
  cursor:pointer;
}
.myOrderCard__pickActions{
  display:flex;
  justify-content:flex-start;
  padding:10px 0 8px;
}
.myOrderCard__pickBtn{
  padding:8px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:#0c6b3e !important;
  border-color:rgba(12,107,62,.18) !important;
  background:#fff !important;
}
.myOrderCard__pickBtn:hover,
.myOrderCard__pickBtn:focus-visible{
  color:#ffde00 !important;
  background:#0c6b3e !important;
}
.cartUpsell{
  display:grid;
  gap:10px;
  padding:14px 14px 10px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(12,107,62,.06), rgba(255,255,255,.98));
  border:1px solid rgba(12,107,62,.10);
  box-shadow:0 10px 22px rgba(6,107,51,.08);
}
.cartUpsell__head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.cartUpsell__title{font-size:15px}
.cartUpsell__copy{font-size:12px;color:#6a6a6a;margin-top:2px}
.cartUpsell__badge{padding:6px 10px;border-radius:999px;background:rgba(255,222,0,.22);font-weight:900;font-size:12px;color:#0d6b3e}
.cartUpsell__grid{display:grid;gap:10px}
.cartUpsell__card{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid rgba(12,107,62,.08)}
.cartUpsell__media{width:56px;height:56px;border-radius:14px;overflow:hidden;background:#eef6ef;display:flex;align-items:center;justify-content:center}
.cartUpsell__media img{width:100%;height:100%;object-fit:cover;display:block}
.cartUpsell__name{font-weight:900;font-size:14px;color:#173922}
.cartUpsell__reason{font-size:12px;color:#6a6a6a;margin-top:2px}
.cartUpsell__side{text-align:right;display:grid;gap:6px}
.cartUpsell__price{font-weight:900;font-size:13px;color:#0c6b3e}
.cartUpsell__btn{padding:7px 12px !important;border-radius:999px !important;font-size:12px !important;font-weight:900 !important;color:#0c6b3e !important;border-color:rgba(12,107,62,.18) !important;background:#fff !important}
.cartUpsell__btn:hover,.cartUpsell__btn:focus-visible{background:#0c6b3e !important;color:#ffde00 !important}
@media (max-width: 680px){
  .cartUpsell__card{grid-template-columns:48px 1fr;}
  .cartUpsell__media{width:48px;height:48px}
  .cartUpsell__side{grid-column:1 / -1;text-align:left;grid-template-columns:auto auto;align-items:center;justify-content:space-between}
}


/* =========================================================
   HERO PREMIUM ANIMATION v.222
   ========================================================= */
.hero--premiumMotion .hero__grid--full{
  isolation:isolate;
}

.heroMotion,
.heroSeeds{
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:2;
}

.heroMotion{
  border-radius:999px;
  filter:blur(18px);
  mix-blend-mode:screen;
  opacity:.55;
  animation:heroAuraFloat 11s ease-in-out infinite;
}
.heroMotion--gold{
  width:360px;
  height:360px;
  right:18%;
  top:8%;
  background:radial-gradient(circle, rgba(255,222,0,.78) 0%, rgba(255,222,0,.34) 45%, rgba(255,222,0,0) 72%);
}
.heroMotion--red{
  width:260px;
  height:260px;
  left:6%;
  bottom:14%;
  animation-delay:-4s;
  background:radial-gradient(circle, rgba(239,36,36,.42) 0%, rgba(239,36,36,.18) 46%, rgba(239,36,36,0) 74%);
}

.heroSeeds{
  width:190px;
  height:190px;
  opacity:.92;
}
.heroSeeds::before,
.heroSeeds::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:32px;
  background:
    radial-gradient(circle at 16px 18px, rgba(255,222,0,.98) 0 2px, transparent 3px) 0 0/28px 28px,
    radial-gradient(circle at 8px 12px, rgba(255,222,0,.72) 0 1.5px, transparent 2.5px) 12px 14px/28px 28px;
  mask-image:radial-gradient(circle at center, #000 32%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at center, #000 32%, transparent 78%);
}
.heroSeeds::after{
  transform:scale(1.08) rotate(8deg);
  opacity:.58;
  filter:blur(2px);
}
.heroSeeds--left{
  left:3%;
  top:10%;
  animation:heroSeedDrift 14s linear infinite;
}
.heroSeeds--right{
  right:14%;
  top:14%;
  animation:heroSeedDrift 16s linear infinite reverse;
}

.hero--premiumMotion .hero__copyInner > *{
  opacity:0;
  transform:translateY(18px);
  animation:heroFadeUp .72s cubic-bezier(.2,.9,.2,1) forwards;
}
.hero--premiumMotion .hero__copyInner > h1{ animation-delay:.08s; }
.hero--premiumMotion .hero__copyInner > p{ animation-delay:.18s; }
.hero--premiumMotion .hero__copyInner > .hero__btns{ animation-delay:.28s; }
.hero--premiumMotion .hero__copyInner > .pills{ animation-delay:.38s; }

.hero--premiumMotion .hero__img{
  animation:heroImageFloat 9s ease-in-out infinite;
  transform-origin:center center;
}
.hero--premiumMotion .hero__img::before{
  animation:heroLightSweep 10s ease-in-out infinite;
}
.hero--premiumMotion .hero__btns .btn{
  position:relative;
}
.hero--premiumMotion .hero__btns .btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  opacity:0;
  transform:scale(.96);
  transition:opacity .22s ease, transform .22s ease;
}
.hero--premiumMotion .hero__btns .btn:hover::after{
  opacity:1;
  transform:scale(1.03);
}
.hero--premiumMotion .hero__btns .btn:hover{
  box-shadow:0 18px 34px rgba(0,0,0,.22), 0 0 0 5px rgba(255,222,0,.14) !important;
}

.hero--premiumMotion .heroSpot{
  animation:heroSpotLift 7.8s ease-in-out infinite;
  box-shadow:0 22px 40px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.44);
}
.hero--premiumMotion .heroSpot::before{
  animation:heroSpotGlow 4.4s ease-in-out infinite;
}

@keyframes heroFadeUp{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes heroAuraFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-12px,0) scale(1.05); }
}
@keyframes heroSeedDrift{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(12px,-8px,0) rotate(8deg); }
  100%{ transform:translate3d(0,0,0) rotate(0deg); }
}
@keyframes heroImageFloat{
  0%,100%{ transform:scale(1.01) translateY(0); }
  50%{ transform:scale(1.025) translateY(-8px); }
}
@keyframes heroLightSweep{
  0%,100%{ opacity:.46; filter:none; }
  50%{ opacity:.7; filter:brightness(1.08); }
}
@keyframes heroSpotLift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@media (max-width:980px){
  .heroMotion--gold{ width:220px; height:220px; right:8%; top:8%; opacity:.44; }
  .heroMotion--red{ width:180px; height:180px; left:-4%; bottom:16%; opacity:.30; }
  .heroSeeds--right{ right:4%; top:20%; }
  .heroSeeds--left{ left:-6%; top:12%; opacity:.72; }
  .hero--premiumMotion .hero__copyInner > *{ animation-duration:.58s; }
  .hero--premiumMotion .hero__img{ animation-duration:7s; }
}

@media (prefers-reduced-motion: reduce){
  .heroMotion, .heroSeeds, .hero--premiumMotion .hero__img, .hero--premiumMotion .heroSpot, .hero--premiumMotion .hero__img::before{ animation:none !important; }
  .hero--premiumMotion .hero__copyInner > *{ animation:none !important; opacity:1; transform:none; }
}


/* WERSJA PLIKU v.224 */
/* BOXIKI — przycisk Subskrybuj + modal abonamentu */

.boxCard__benefits{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}
.boxCard__benefits span{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.9);
  font-size:11px;
  font-weight:900;
  backdrop-filter:blur(3px);
}

.card__bottom--box{
  display:grid !important;
  grid-template-columns: 1fr;
  align-items:end;
  gap:10px;
}

.boxCard__actions{
  display:flex;
  gap:8px;
  width:100%;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.boxCard__actions .btn{
  min-height:42px;
  font-size:13px;
  font-weight:900;
}
.boxCard__actions .btn--subscribe{
  background:rgba(255,255,255,.96) !important;
  color:#cf2227 !important;
  border-color:transparent !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
}
.boxCard__actions .btn--subscribe:hover{
  color:var(--arbuzik-yellow) !important;
  background:linear-gradient(180deg,#0c6b3e,#095531) !important;
}

.subModal{
  padding:18px;
  background:rgba(4,20,10,.58);
  backdrop-filter:blur(8px);
}
.subModal__box{
  position:relative;
  width:min(760px, 100%);
  max-width:min(760px, 100%);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  overflow:hidden;
  padding:22px 22px 18px;
  background:
    radial-gradient(800px 260px at 18% 0%, rgba(12,107,62,.12), transparent 58%),
    radial-gradient(680px 220px at 92% 12%, rgba(229,57,53,.09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
}
.subModal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#0c6b3e;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.subModal__eyebrow{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,222,0,.22);
  color:#0c6b3e;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.subModal__title{
  margin:14px 0 8px;
  font-size:30px;
  line-height:1.05;
}
.subModal__copy{
  margin:0 0 14px;
  color:var(--muted);
  max-width:56ch;
}
.subModal__hero{
  display:grid;
  grid-template-columns: 132px 1fr auto;
  gap:16px;
  align-items:center;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(12,107,62,.08), rgba(255,222,0,.12));
  border:1px solid rgba(12,107,62,.10);
  margin-bottom:16px;
}
.subModal__heroMedia{
  min-height:110px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 30px rgba(0,0,0,.14);
}
.subModal__heroLabel{
  font-size:12px;
  font-weight:900;
  color:#0c6b3e;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.subModal__heroName{
  margin-top:4px;
  font-size:25px;
  font-weight:950;
  line-height:1.05;
}
.subModal__heroDesc{
  margin-top:6px;
  color:var(--muted);
  line-height:1.45;
}
.subModal__heroPrice{
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  color:#0c6b3e;
  font-weight:950;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.subModal__form{
  display:grid;
  gap:14px;
}
.subModal__form label{
  font-size:13px;
}
.subModal__form select,
.subModal__form input,
.subModal__form textarea{
  margin-top:6px;
  background:#fff;
}
.subModal__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.subModal__benefits{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.subModal__benefits span{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.10);
  color:#0c6b3e;
  font-size:12px;
  font-weight:900;
}
.subModal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
body.subModal-open{
  overflow:hidden;
}

@media (max-width: 820px){
  .subModal__hero{
    grid-template-columns:1fr;
    justify-items:start;
  }
  .subModal__heroMedia{
    width:100%;
    min-height:180px;
  }
  .subModal__heroPrice{
    justify-self:start;
  }
}
@media (max-width: 640px){
  .boxCard__actions{
    justify-content:stretch;
  }
  .boxCard__actions .btn{
    flex:1 1 100%;
  }
  .subModal{
    padding:10px;
  }
  .subModal__box{
    padding:18px 16px 16px;
    border-radius:22px;
  }
  .subModal__title{
    font-size:24px;
    padding-right:42px;
  }
  .subModal__grid{
    grid-template-columns:1fr;
  }
  .subModal__actions .btn{
    width:100%;
  }
}


/* =========================================================
   BOXIKI SUBSCRIPTION INLINE PANEL v.224
   ========================================================= */
body[data-page="boxiki"] #orderForm{
  gap:12px;
}

.checkoutMode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:6px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(6,107,51,.08), rgba(255,255,255,.96));
  border:1px solid rgba(12,107,62,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.checkoutMode__btn{
  appearance:none;
  border:0;
  border-radius:16px;
  padding:12px 14px;
  font:inherit;
  font-weight:900;
  background:transparent;
  color:#0c6b3e;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.checkoutMode__btn.is-active{
  background:linear-gradient(135deg, #0c6b3e, #11854c);
  color:#fff;
  box-shadow:0 12px 28px rgba(12,107,62,.22);
}
.checkoutMode__hint{
  margin:0 0 2px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.subInline{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:
    radial-gradient(460px 180px at 0% 0%, rgba(255,222,0,.16), transparent 62%),
    radial-gradient(420px 160px at 100% 0%, rgba(229,57,53,.12), transparent 60%),
    linear-gradient(180deg, rgba(12,107,62,.08), rgba(255,255,255,.98));
  border:1px solid rgba(12,107,62,.14);
  box-shadow:0 16px 34px rgba(12,107,62,.10);
}
.subInline__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.subInline__eyebrow,
.subManager__eyebrow,
.subManager__emptyEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0c6b3e;
}
.subInline__eyebrow::before,
.subManager__eyebrow::before,
.subManager__emptyEyebrow::before{
  content:'';
  width:24px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, #ffde00, #ef2424);
}
.subInline__title{
  margin-top:6px;
  font-size:20px;
  font-weight:950;
  line-height:1.08;
}
.subInline__badge{
  flex-shrink:0;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(12,107,62,.12);
  color:#0c6b3e;
  font-size:12px;
  font-weight:900;
}
.subInline__box{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.08);
}
.subInline__boxMedia{
  width:88px;
  height:88px;
  border-radius:18px;
  background:center/cover no-repeat;
  box-shadow:0 12px 24px rgba(0,0,0,.14);
}
.subInline__boxLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0c6b3e;
}
.subInline__boxName{
  margin-top:5px;
  font-size:18px;
  font-weight:950;
}
.subInline__boxDesc{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}
.subInline__boxPrice{
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(135deg,#fff8dd,#ffe8a3);
  border:1px solid rgba(200,155,28,.35);
  color:#8a6a00;
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
}
.subInline__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.subInline__note{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.84);
  border:1px dashed rgba(12,107,62,.18);
  color:#48614f;
  font-size:12px;
  line-height:1.5;
}
#btnSubscriptionInline{
  background:linear-gradient(135deg, var(--arbuzik-yellow-deep), #ffd400) !important;
  color:#0c6b3e !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18) !important;
}
#subscriptionInlineMsg{
  min-height:16px;
  margin:0;
  font-size:12px;
  font-weight:800;
}

.subManager{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 14px 32px rgba(15,23,42,.08);
}
.subManager__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.subManager__title{
  margin-top:6px;
  font-size:18px;
  font-weight:950;
  line-height:1.08;
}
.subManager__count{
  flex-shrink:0;
  min-width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(12,107,62,.08);
  color:#0c6b3e;
  font-weight:950;
}
.subManager__list{
  display:grid;
  gap:10px;
}
.subManager__item{
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,246,.98));
  border:1px solid rgba(17,24,39,.08);
}
.subManager__itemTop,
.subManager__itemBottom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.subManager__itemBottom{ margin-top:10px; flex-wrap:wrap; }
.subManager__itemName{
  font-size:16px;
  font-weight:950;
  text-transform:capitalize;
}
.subManager__itemMeta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.subManager__next{
  font-size:12px;
  color:#48614f;
}
.subManager__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.subManager__btn{
  min-height:40px;
  font-size:12px;
  font-weight:900;
}
.subManager__status{
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
  background:rgba(12,107,62,.12);
  color:#0c6b3e;
  border:1px solid rgba(12,107,62,.18);
}
.subManager__status.is-paused{
  background:rgba(255,222,0,.18);
  color:#8a6a00;
  border-color:rgba(200,155,28,.22);
}
.subManager__status.is-canceled{
  background:rgba(229,57,53,.14);
  color:#b42318;
  border-color:rgba(180,35,24,.2);
}
.subManager__empty{
  display:grid;
  gap:8px;
}
.subManager__emptyTitle{
  font-size:18px;
  font-weight:950;
  line-height:1.08;
}

.boxCard__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
  justify-content:flex-end;
}
.btn--subscribe{
  background:rgba(255,255,255,.94) !important;
  color:#0c6b3e !important;
  border-color:rgba(12,107,62,.18) !important;
  font-weight:900 !important;
}

@media (max-width: 960px){
  .subInline__grid{
    grid-template-columns:1fr;
  }
  .subInline__box{
    grid-template-columns:72px 1fr;
  }
  .subInline__boxPrice{
    grid-column:1 / -1;
    justify-self:start;
  }
  .boxCard__actions{
    width:100%;
    margin-left:0;
    justify-content:stretch;
  }
  .boxCard__actions .btn{
    flex:1 1 calc(50% - 4px);
  }
}


/* =========================================================
   ADMIN MOBILE TABS v.225
   ========================================================= */
.adminTabs{display:flex;gap:8px;flex-wrap:wrap;}
.adminTab{white-space:nowrap;}
@media (max-width: 700px){
  .adminTabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .adminTabs::-webkit-scrollbar{height:6px;}
  .adminTabs::-webkit-scrollbar-thumb{background:rgba(6,107,51,.25);border-radius:999px;}
  .adminTab{flex:0 0 auto;}
}


/* =========================================================
   BOXIKI UI POLISH v.226
   - badge ceny przy kartach boxików
   - lepsza czytelność badge w hero lewym panelu
   - delikatny odstęp foto/opis w prawym panelu hero
   - FAQ cards lekko ciaśniejsze i czytelniejsze
   ========================================================= */

.card--bg .card__price{
  display:inline-flex !important;
  width:max-content !important;
  max-width:max-content !important;
  justify-self:start !important;
  align-self:flex-start !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-weight:950 !important;
  font-size:13px !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.price--green{
  background:linear-gradient(135deg,#f2fff6,#c9f4d8) !important;
  border:1px solid rgba(12,107,62,.42) !important;
  color:#066b33 !important;
}
.price--yellow{
  background:linear-gradient(135deg,#fff8c4,#ffd84d) !important;
  border:1px solid rgba(200,155,28,.58) !important;
  color:#7a5600 !important;
}
.price--red{
  background:linear-gradient(135deg,#fff0f0,#ffb6b0) !important;
  border:1px solid rgba(180,35,24,.52) !important;
  color:#b42318 !important;
}

.boxHeroBadge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:8px 12px !important;
  min-height:34px;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  text-shadow:none !important;
}
.boxHeroBadge--green{
  background:linear-gradient(135deg,#19a157,#0c6b3e) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.boxHeroBadge--red{
  background:linear-gradient(135deg,#ff5b52,#d72626) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

.boxHeroQuickPanel__row{
  gap:14px !important;
}
.boxHeroQuickPanel__item{
  gap:14px !important;
}
.boxHeroQuickPanel__itemMain{
  min-width:0;
  padding-left:4px;
}
.boxHeroQuickPanel__itemName{
  gap:10px !important;
}

#faq .grid.grid--2{
  gap:12px;
}
#faq .card{
  min-height:132px;
}
#faq .card h3{
  line-height:1.22;
}
#faq .card p{
  line-height:1.55;
}

@media (max-width: 820px){
  .boxHeroBadge{
    font-size:11px !important;
    padding:7px 10px !important;
  }
  .card--bg .card__price{
    font-size:12px !important;
    padding:5px 11px !important;
  }
}


/* =========================================================
   PLANER TYGODNIA — MOBILE SCROLL FIX v.227
   - płynniejsze przewijanie poziome tabów na telefonie
   - mniej przypadkowych kliknięć podczas swipe
   ========================================================= */
@media (max-width: 980px){
  .plannerWeek__grid{
    overflow:visible;
  }

  .plannerWeek__sidebar{
    cursor:grab;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:18px;
    scroll-padding-right:18px;
  }

  .plannerWeek__sidebar:active{
    cursor:grabbing;
  }

  .plannerWeek__tab strong,
  .plannerWeek__tab small,
  .plannerWeek__tab span{
    pointer-events:none;
  }
}

/* =========================================================
   PLANER TYGODNIA — MOBILE NATIVE SCROLL FIX v.228
   Mechanika jak w sekcji „Jak chcesz kupować?”:
   - czysty poziomy scroll CSS
   - bez ręcznego przechwytywania swipe w JS
   - większe karty, łatwiejszy chwyt palcem
   ========================================================= */
@media (max-width: 980px){
  .plannerWeek__sidebar{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(260px, calc(100vw - 56px)) !important;
    grid-template-columns:none !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:24px 12px 28px 12px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x pinch-zoom !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .plannerWeek__sidebar::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .plannerWeek__tab{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:unset !important;
    margin-right:0 !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:normal !important;
    touch-action:pan-x pinch-zoom !important;
    -webkit-user-select:none !important;
    user-select:none !important;
  }

  .plannerWeek__tab *{
    pointer-events:none;
  }
}

@media (max-width: 560px){
  .plannerWeek__sidebar{
    grid-auto-columns:minmax(248px, calc(100vw - 44px)) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* =========================================================
   PLANER TYGODNIA — HARD MOBILE SWIPE FIX v.229
   - wymusza prawdziwy poziomy tor przewijania
   - współpracuje z JS v045, który przesuwa scrollLeft palcem
   ========================================================= */
@media (max-width: 980px){
  #planer-tygodnia,
  #planer-tygodnia .wrap,
  .plannerWeek__shell,
  .plannerWeek__grid{
    overflow: visible !important;
  }

  .plannerWeek__sidebar{
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 24px 12px 28px 12px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .plannerWeek__sidebar.is-dragging{
    scroll-snap-type: none !important;
    cursor: grabbing !important;
  }

  .plannerWeek__sidebar::-webkit-scrollbar{
    display:none !important;
    height:0 !important;
  }

  .plannerWeek__tab{
    flex: 0 0 calc(100vw - 56px) !important;
    width: calc(100vw - 56px) !important;
    min-width: calc(100vw - 56px) !important;
    max-width: calc(100vw - 56px) !important;
    scroll-snap-align: start !important;
    touch-action: pan-y !important;
  }
}

@media (max-width: 560px){
  .plannerWeek__tab{
    flex-basis: calc(100vw - 44px) !important;
    width: calc(100vw - 44px) !important;
    min-width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }
}

/* =========================================================
   PLANER TYGODNIA — MOBILE CARD WIDTH TUNING v.230
   - karty wyboru planu są węższe na telefonie
   - scroll zostaje płynny, ale widać fragment następnego planu
   ========================================================= */
@media (max-width: 980px){
  .plannerWeek__sidebar{
    gap: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    scroll-padding-left: 10px !important;
    scroll-padding-right: 10px !important;
  }

  .plannerWeek__tab{
    flex: 0 0 clamp(214px, 74vw, 278px) !important;
    width: clamp(214px, 74vw, 278px) !important;
    min-width: clamp(214px, 74vw, 278px) !important;
    max-width: clamp(214px, 74vw, 278px) !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 390px){
  .plannerWeek__tab{
    flex-basis: clamp(206px, 72vw, 258px) !important;
    width: clamp(206px, 72vw, 258px) !important;
    min-width: clamp(206px, 72vw, 258px) !important;
    max-width: clamp(206px, 72vw, 258px) !important;
  }
}

/* =========================================================
   PLANER MOBILE PREMIUM SCROLL v.231
   - płynniejszy suwak planów na iPhone/Android
   - krótsze karty, bez agresywnego snapowania
   - brak blokowania gestu poziomego przez buttony
   ========================================================= */
@media (max-width: 640px){
  #planer-tygodnia{
    overflow: visible !important;
  }

  #planer-tygodnia > .wrap,
  #planer-tygodnia .plannerWeek__shell,
  #planer-tygodnia .plannerWeek__grid{
    overflow: visible !important;
  }

  .plannerWeek__sidebar{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    gap:12px !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:22px 18px 26px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    scroll-padding-left:18px !important;
    scroll-padding-right:18px !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-x pan-y pinch-zoom !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    contain:layout paint !important;
    transform:translate3d(0,0,0) !important;
    backface-visibility:hidden !important;
    will-change:scroll-position !important;
    cursor:grab;
  }

  .plannerWeek__sidebar:active{
    cursor:grabbing;
  }

  .plannerWeek__sidebar::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .plannerWeek__tab{
    flex:0 0 clamp(128px, 44vw, 148px) !important;
    width:clamp(128px, 44vw, 148px) !important;
    min-width:clamp(128px, 44vw, 148px) !important;
    max-width:148px !important;
    margin-right:0 !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:normal !important;
    min-height:112px !important;
    padding:13px 13px 12px !important;
    border-radius:22px !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:paint !important;
    touch-action:pan-x pan-y pinch-zoom !important;
    transition:box-shadow .18s ease, filter .18s ease !important;
  }

  .plannerWeek__tab:hover,
  .plannerWeek__tab:active,
  .plannerWeek__tab.is-active{
    transform:translateZ(0) !important;
  }

  .plannerWeek__tab strong{
    font-size:16px !important;
    line-height:1.08 !important;
    letter-spacing:-.01em !important;
  }

  .plannerWeek__tab small{
    font-size:11.5px !important;
    line-height:1.28 !important;
    margin-top:5px !important;
  }

  .plannerWeek__tabEyebrow{
    margin-bottom:7px !important;
    padding:5px 8px !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  .plannerWeek__tab.is-active::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:8px;
    height:3px;
    border-radius:999px;
    background:var(--arbuzik-yellow);
    box-shadow:0 0 12px rgba(var(--arbuzik-yellow-rgb),.72);
    pointer-events:none;
  }

  .plannerWeek__tab[data-plan-key="salatka"].is-active,
  .plannerWeek__tab[data-plan-key="rosol"].is-active,
  .plannerWeek__tab[data-plan-key="smoothie"].is-active,
  .plannerWeek__tab[data-plan-key="weekend"].is-active{
    box-shadow:0 12px 26px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.72) !important;
    filter:saturate(1.08) contrast(1.02) !important;
  }

  .plannerWeek__tab:first-child{
    margin-left:0 !important;
  }

  .plannerWeek__tab:last-child{
    margin-right:18px !important;
  }

  .plannerWeek__panel{
    margin-top:10px !important;
  }
}


/* =========================================================
   KOSZYK PRO + ABONAMENT PRO v.232
   - mocniejszy upsell w koszyku
   - dodatki cykliczne do abonamentu
   ========================================================= */

.cartUpsell--pro{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:14px;
  background:
    radial-gradient(360px 150px at 8% 0%, rgba(255,222,0,.22), transparent 62%),
    radial-gradient(360px 150px at 100% 0%, rgba(239,36,36,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,246,.96));
  border:1px solid rgba(12,107,62,.14);
  box-shadow:0 18px 38px rgba(15,23,42,.08);
}
.cartUpsell--pro::before{
  content:"";
  position:absolute;
  left:16px;
  top:0;
  width:64px;
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,#ffde00,#ef2424);
}
.cartUpsell__grid--pro{
  grid-template-columns:1fr;
  gap:10px;
}
.cartUpsell__card--pro{
  grid-template-columns:64px minmax(0,1fr) auto;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(12,107,62,.10);
  box-shadow:0 8px 22px rgba(15,23,42,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cartUpsell__card--pro:hover{
  transform:translateY(-2px);
  border-color:rgba(12,107,62,.24);
  box-shadow:0 14px 30px rgba(15,23,42,.09);
}
.cartUpsell__media--pro{
  width:64px;
  height:64px;
  border-radius:16px;
}
.cartUpsell__miniBadge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,222,0,.22);
  border:1px solid rgba(255,222,0,.44);
  color:#0c6b3e;
  font-size:10px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.cartUpsellBundle{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(12,107,62,.10), rgba(255,222,0,.22));
  border:1px dashed rgba(12,107,62,.24);
}
.cartUpsellBundle__title{
  font-weight:950;
  color:#0c6b3e;
}
.cartUpsellBundle__copy{
  margin-top:3px;
  color:#48614f;
  font-size:12px;
  line-height:1.35;
}
.cartUpsellBundle__side{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.cartUpsellBundle__side strong{
  white-space:nowrap;
  color:#0c6b3e;
  font-size:16px;
}
.cartUpsellBundle__btn{
  min-height:38px;
  border-radius:999px !important;
  padding:9px 14px !important;
  font-size:12px !important;
  font-weight:950 !important;
}

.subAddons{
  display:grid;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:
    radial-gradient(260px 100px at 0% 0%, rgba(255,222,0,.22), transparent 62%),
    rgba(255,255,255,.86);
  border:1px solid rgba(12,107,62,.12);
}
.subAddons__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.subAddons__eyebrow{
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0c6b3e;
}
.subAddons__title{
  display:block;
  margin-top:4px;
  font-size:15px;
  color:#173922;
}
.subAddons__copy{
  margin-top:3px;
  font-size:12px;
  line-height:1.35;
  color:#6a6a6a;
}
.subAddons__pill{
  flex-shrink:0;
  padding:7px 10px;
  border-radius:999px;
  background:#fff7cc;
  border:1px solid rgba(255,222,0,.42);
  color:#0c6b3e;
  font-size:11px;
  font-weight:950;
  max-width:180px;
  text-align:right;
}
.subAddons__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.subAddons__item{
  display:grid;
  grid-template-columns:auto 34px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  cursor:pointer;
  font-weight:900;
}
.subAddons__item input{
  width:18px;
  height:18px;
  accent-color:#0c6b3e;
}
.subAddons__emoji{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(12,107,62,.08);
}
.subAddons__item small{
  display:block;
  margin-top:2px;
  color:#6a6a6a;
  font-weight:700;
  font-size:11px;
}
.subManager__addons{
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:#0c6b3e;
  font-weight:800;
}

@media (max-width: 560px){
  .cartUpsell__card--pro{grid-template-columns:56px minmax(0,1fr)}
  .cartUpsell__side{grid-column:1 / -1;grid-template-columns:1fr auto;text-align:left}
  .cartUpsellBundle{align-items:flex-start;flex-direction:column}
  .cartUpsellBundle__side{width:100%;justify-content:space-between}
  .subAddons__head{display:grid}
  .subAddons__pill{text-align:left;max-width:none;width:max-content}
  .subAddons__grid{grid-template-columns:1fr}
}

/* =========================================================
   MOBILE KOSZYK + ABONAMENT PRO FIX v.233
   - koszyk na telefonie zawsze jedna kolumna
   - panel abonamentu nie wypycha strony poza viewport
   - miniaturki zdjęć zamiast emoji w dodatkach cyklicznych
   ========================================================= */

.subAddons__thumb{
  width:38px;
  height:38px;
  border-radius:13px;
  overflow:hidden;
  display:block;
  background:rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.12);
  box-shadow:0 8px 18px rgba(15,23,42,.07);
}
.subAddons__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.subAddons__item > span:last-child,
.subAddons__item b,
.subAddons__item small{
  min-width:0;
}

@media (max-width: 960px){
  body[data-page="boxiki"] #zamow,
  body[data-page="boxiki"] #zamow > .wrap,
  body[data-page="boxiki"] #zamow .grid,
  body[data-page="boxiki"] #cartBox,
  body[data-page="boxiki"] #orderForm{
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:clip !important;
  }

  body[data-page="boxiki"] #zamow > .wrap{
    width:min(100%, 96vw) !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  body[data-page="boxiki"] #zamow .grid.grid--2,
  body[data-page="boxiki"] #zamow .grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  body[data-page="boxiki"] #orderForm,
  body[data-page="boxiki"] #cartBox{
    width:100% !important;
    justify-self:stretch !important;
  }

  .checkoutMode{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    width:100% !important;
  }
  .checkoutMode__btn{
    min-width:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .subInline{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:12px !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }
  .subInline__top,
  .subManager__head,
  .subManager__itemTop,
  .subManager__itemBottom{
    min-width:0 !important;
  }
  .subInline__box{
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
  }
  .subInline__boxMedia{
    width:64px !important;
    height:64px !important;
    border-radius:15px !important;
  }
  .subInline__boxMain,
  .subInline__boxName,
  .subInline__boxDesc{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
  .subInline__boxPrice{
    grid-column:1 / -1 !important;
    justify-self:start !important;
    max-width:100% !important;
  }
  .subInline__grid{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
  }
  .subInline__grid label,
  .subInline__grid select,
  .subInline__grid input,
  .delivery-option,
  .delivery-option__body{
    min-width:0 !important;
    max-width:100% !important;
  }
  .delivery-option{
    grid-template-columns:auto minmax(0,1fr) auto !important;
  }
  .delivery-option__name,
  .delivery-option__area{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .subAddons{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:10px !important;
    overflow:hidden !important;
  }
  .subAddons__head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  .subAddons__pill{
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    white-space:normal !important;
  }
  .subAddons__grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .subAddons__item{
    grid-template-columns:22px 38px minmax(0,1fr) !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width: 420px){
  body[data-page="boxiki"] #zamow > .wrap{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .subInline__top{
    display:grid !important;
  }
  .subInline__badge{
    justify-self:start !important;
  }
  .subAddons__item{
    grid-template-columns:20px 34px minmax(0,1fr) !important;
    padding:9px !important;
  }
  .subAddons__thumb{
    width:34px;
    height:34px;
    border-radius:12px;
  }
}


/* === FIX: mobile date input overflow (subscription start) === */
input[type="date"]{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}
.sub-panel, .subscription-panel, .cart-panel{
  overflow:hidden;
}


/* =========================================================
   KOSZYK / TWÓJ ABONAMENT — czytelne ID + kompakt mobile v.236
   ========================================================= */
.subManager__count{ display:none !important; }
.subManager__countLabel{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(12,107,62,.08);
  border:1px solid rgba(12,107,62,.16);
  color:#0c6b3e;
  font-size:11px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
}
.subManager__countLabel span{
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#0c6b3e;
  opacity:.86;
}
.subManager__countLabel strong{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#0c6b3e;
  color:#fff;
  font-size:12px;
}
.subManager__head--compact{
  align-items:flex-start;
}
.subManager__item--compact{
  padding:10px !important;
  border-radius:16px !important;
}
.subManager__main{min-width:0;}
.subManager__infoGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:7px;
  margin-top:9px;
}
.subManager__infoPill{
  min-width:0;
  padding:7px 8px;
  border-radius:13px;
  background:rgba(12,107,62,.055);
  border:1px solid rgba(12,107,62,.10);
}
.subManager__infoPill span{
  display:block;
  margin-bottom:3px;
  font-size:10px;
  line-height:1;
  color:#617569;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.subManager__infoPill strong{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#123e25;
  font-size:12px;
  line-height:1.15;
  font-weight:950;
}
.subManager__infoPill--next{
  background:rgba(var(--arbuzik-yellow-rgb),.16);
  border-color:rgba(var(--arbuzik-yellow-rgb),.34);
}
.subManager__notes{
  margin-top:7px;
  padding:7px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.72);
  border:1px dashed rgba(12,107,62,.16);
  color:#48614f;
  font-size:11px;
  font-weight:750;
  line-height:1.35;
}
.subManager__itemBottom--compact{
  margin-top:8px !important;
  justify-content:flex-end !important;
}
.subManager__itemBottom--compact .subManager__actions{
  width:100%;
  justify-content:flex-end;
}
.subManager__btn{
  min-height:34px !important;
  padding:7px 11px !important;
  border-radius:12px !important;
  font-size:11px !important;
}

@media (max-width:560px){
  .subManager{padding:11px !important;border-radius:20px !important;}
  .subManager__head--compact{gap:8px;align-items:flex-start;}
  .subManager__title{font-size:17px !important;}
  .subManager__countLabel{padding:6px 8px;font-size:10px;}
  .subManager__itemTop{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;align-items:start !important;}
  .subManager__status{padding:6px 9px !important;font-size:11px !important;}
  .subManager__infoGrid{grid-template-columns:1fr 1fr;gap:6px;}
  .subManager__infoPill--next{grid-column:1 / -1;}
  .subManager__itemBottom--compact .subManager__actions{display:grid !important;grid-template-columns:1fr 1fr;gap:7px;}
  .subManager__btn{width:100%;}
}

/* iOS/mobile: pole Start abonamentu nie wypycha panelu poza ekran */
@media (max-width:960px){
  #subscriptionInlineNextRun,
  input[type="date"]#subscriptionInlineNextRun{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:16px !important;
    overflow:hidden !important;
    -webkit-appearance:none;
    appearance:none;
  }
  .subInline__grid label,
  .subInline__grid input,
  .subInline__grid select{
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* =========================================================
   KOSZYK / TWÓJ ABONAMENT — licznik aktywne + razem v.237
   ========================================================= */
.subManager__countLabel{
  gap:6px !important;
  align-items:center !important;
}
.subManager__countLabel em{
  display:inline-flex;
  align-items:center;
  font-style:normal;
  font-size:10px;
  line-height:1;
  color:#48614f;
  font-weight:900;
  opacity:.9;
  white-space:nowrap;
}
.subManager__notes{
  overflow-wrap:anywhere;
}
@media (max-width:560px){
  .subManager__countLabel{
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:148px;
  }
  .subManager__countLabel em{
    width:100%;
    justify-content:flex-end;
    font-size:9px;
  }
}


/* =========================================================
   KOSZYK PRO — żywy Arbuzik / compact premium v.238
   ========================================================= */
#zamow .card{
  border: 1px solid rgba(6,107,51,.12) !important;
  box-shadow: 0 18px 48px rgba(6,38,18,.10) !important;
}

#cartBox .cartHero,
.cartHero{
  background:
    radial-gradient(260px 150px at 92% 12%, rgba(255,222,0,.38), transparent 55%),
    linear-gradient(135deg, #06783a 0%, #0aa24d 48%, #7fbc1f 100%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 16px 42px rgba(6,107,51,.22) !important;
}

#cartBox .cartHero *,
.cartHero *{
  color: #fff;
}

.cartItem,
.cart-item,
.cartRow{
  border: 1px solid rgba(6,107,51,.09) !important;
  box-shadow: 0 10px 26px rgba(6,38,18,.07) !important;
  background: linear-gradient(180deg,#ffffff,#fbfff7) !important;
}

.cartImg,
.cart-img,
.cartItem__img{
  border: 3px solid #ffde00 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}

.cartBadge,
.cartTag,
.cartPill,
.subManager__status,
.subManager__infoPill,
.upsellBadge,
.upsell__badge{
  filter: saturate(1.25) contrast(1.05);
}

.cartSummary,
.quickSummary,
.orderSummary{
  background: linear-gradient(180deg,#fff4a8,#ffe75a) !important;
  border: 2px solid #ffde00 !important;
  box-shadow: 0 12px 30px rgba(255,212,0,.20) !important;
}

.cartUpsell,
.upsellBox,
.upsell,
#cartUpsell{
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(239,36,36,.16), transparent 58%),
    linear-gradient(180deg,#fff,#f6fff0) !important;
  border: 1px solid rgba(6,107,51,.18) !important;
  box-shadow: 0 14px 36px rgba(6,38,18,.08) !important;
}

.cartUpsell button,
.upsell button,
.upsellBox button,
[data-upsell-add],
[data-add-upsell]{
  background: linear-gradient(135deg,#008f45,#066b33) !important;
  color: #fff !important;
  border-color: rgba(6,107,51,.30) !important;
  font-weight: 950 !important;
}

.cartUpsell button:hover,
.upsell button:hover,
.upsellBox button:hover,
[data-upsell-add]:hover,
[data-add-upsell]:hover{
  color: #ffde00 !important;
  transform: translateY(-1px);
}

.subManager__head{
  align-items: flex-start !important;
  gap: 10px !important;
}

.subManager__eyebrow{
  color:#066b33 !important;
  letter-spacing:.08em !important;
  font-weight:1000 !important;
}

.subManager__countLabel{
  background: linear-gradient(135deg,#e8fff1,#fff6aa) !important;
  border: 1px solid rgba(6,107,51,.20) !important;
  color:#066b33 !important;
  box-shadow: 0 8px 20px rgba(6,38,18,.08) !important;
}

.subManager__item{
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(255,222,0,.18), transparent 58%),
    linear-gradient(180deg,#ffffff,#f7fff6) !important;
  border: 1px solid rgba(6,107,51,.14) !important;
}

.subManager__itemName{
  color:#123018 !important;
  font-weight:1000 !important;
}

.subManager__status.is-active{
  background: linear-gradient(135deg,#c9f7de,#8be3b0) !important;
  border-color: rgba(6,107,51,.25) !important;
  color:#075a33 !important;
}
.subManager__status.is-paused{
  background: linear-gradient(135deg,#fff0a8,#ffd84d) !important;
  border-color: rgba(255,212,0,.55) !important;
  color:#7a5400 !important;
}

.subManager__infoPill{
  background: linear-gradient(180deg,#ebfff4,#d9f4e5) !important;
  border-color: rgba(6,107,51,.16) !important;
}
.subManager__infoPill--next{
  background: linear-gradient(180deg,#fff6a8,#ffe96a) !important;
  border-color: rgba(255,212,0,.75) !important;
}

.subManager__notes{
  background: linear-gradient(180deg,#ffffff,#f6fff3) !important;
  border: 1px dashed rgba(6,107,51,.20) !important;
}

.subManager__btn{
  min-height: 38px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.subManager__btn:hover{
  color:#ef2424 !important;
}

#subscriptionInline,
.subscriptionInline,
.subscriptionPanel{
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(255,222,0,.22), transparent 58%),
    linear-gradient(180deg,#ffffff,#f4fff2) !important;
  border: 1px solid rgba(6,107,51,.16) !important;
}

#btnSubscriptionInline,
#btnOrder{
  min-height: 44px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#ffde00,#ffd000) !important;
  color:#075a33 !important;
  font-weight:1000 !important;
  box-shadow: 0 14px 28px rgba(255,212,0,.20) !important;
}

#btnOrder{
  background: linear-gradient(135deg,#066b33,#0a963f) !important;
  color:#fff !important;
}

@media (max-width: 760px){
  #zamow .grid,
  #zamow .grid--2{
    gap: 12px !important;
  }

  .subManager__item{
    padding: 12px !important;
  }

  .subManager__infoGrid{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .subManager__itemTop,
  .subManager__itemBottom,
  .subManager__itemBottom--compact{
    gap: 8px !important;
  }

  .subManager__actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:8px !important;
  }

  .subManager__countLabel{
    transform: scale(.92);
    transform-origin: right top;
  }
}


/* =========================================================
   KOSZYK / ABONAMENT — korekta kolorów do palety Arbuzika v.239
   Paleta: zielony #066b33, żółty #ffde00, czerwony #ef2424
   ========================================================= */

:root{
  --tlsw-green:#066b33;
  --tlsw-green-dark:#045326;
  --tlsw-yellow:#ffde00;
  --tlsw-red:#ef2424;
  --tlsw-cream:#fbf8ef;
}

/* Panel abonamentów — mniej neonowo, bardziej brandowo */
.subManager__countLabel{
  background:#fff !important;
  border:1px solid rgba(6,107,51,.20) !important;
  color:var(--tlsw-green) !important;
  box-shadow:0 8px 22px rgba(6,38,18,.07) !important;
}

.subManager__countLabel strong{
  background:var(--tlsw-green) !important;
  color:#fff !important;
  border:1px solid rgba(6,107,51,.25) !important;
}

.subManager__countLabel em{
  color:rgba(20,20,20,.62) !important;
}

/* Karta abonamentu — biel/krem zamiast jaskrawej zieleni */
.subManager__item,
.subManager__item--compact{
  background:linear-gradient(180deg,#ffffff 0%, #fbf8ef 100%) !important;
  border:1px solid rgba(6,107,51,.18) !important;
  box-shadow:0 10px 26px rgba(6,38,18,.06) !important;
}

.subManager__itemName{
  color:#1b1b1b !important;
}

.subManager__itemMeta{
  color:rgba(20,20,20,.58) !important;
}

/* Statusy — firmowe, ale bez neonów */
.subManager__status{
  border-radius:999px !important;
  font-weight:900 !important;
}

.subManager__status.is-active{
  background:rgba(6,107,51,.10) !important;
  border:1px solid rgba(6,107,51,.28) !important;
  color:var(--tlsw-green) !important;
}

.subManager__status.is-paused{
  background:rgba(255,222,0,.22) !important;
  border:1px solid rgba(255,222,0,.65) !important;
  color:#6b5600 !important;
}

.subManager__status.is-canceled{
  background:rgba(239,36,36,.10) !important;
  border:1px solid rgba(239,36,36,.25) !important;
  color:var(--tlsw-red) !important;
}

/* Info-pille: spokojne, premium */
.subManager__infoPill{
  background:#fff !important;
  border:1px solid rgba(6,107,51,.14) !important;
  color:#1b1b1b !important;
  box-shadow:none !important;
}

.subManager__infoPill span{
  color:rgba(6,107,51,.72) !important;
  font-weight:950 !important;
  letter-spacing:.05em !important;
}

.subManager__infoPill strong{
  color:var(--tlsw-green-dark) !important;
}

.subManager__infoPill--next{
  background:rgba(255,222,0,.16) !important;
  border:1px solid rgba(255,222,0,.75) !important;
}

.subManager__infoPill--next span{
  color:#6b5600 !important;
}

.subManager__infoPill--next strong{
  color:#1b1b1b !important;
}

/* Uwagi — bez zielonego zalewu */
.subManager__notes{
  background:#fff !important;
  border:1px dashed rgba(6,107,51,.20) !important;
  color:rgba(20,20,20,.70) !important;
}

/* Przyciski w abonamencie */
.subManager__btn{
  background:#fff !important;
  border:1px solid rgba(20,20,20,.14) !important;
  color:#141414 !important;
  box-shadow:none !important;
}

.subManager__btn:hover{
  color:var(--tlsw-green) !important;
  border-color:rgba(6,107,51,.32) !important;
  background:rgba(255,222,0,.10) !important;
}

/* Panel "Tryb abonamentowy" — świeży, ale nie pastelowo-neonowy */
#subscriptionInline,
.subscriptionInline,
.subscriptionPanel{
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(255,222,0,.14), transparent 58%),
    linear-gradient(180deg,#ffffff 0%, #fbf8ef 100%) !important;
  border:1px solid rgba(6,107,51,.16) !important;
}

/* CTA abonamentu: żółty firmowy + zielony tekst */
#btnSubscriptionInline{
  background:linear-gradient(180deg,#ffde00 0%, #ffd000 100%) !important;
  color:var(--tlsw-green) !important;
  border:1px solid rgba(255,222,0,.85) !important;
  box-shadow:0 12px 24px rgba(255,222,0,.18) !important;
}

#btnSubscriptionInline:hover{
  color:var(--tlsw-red) !important;
}

/* Koszyk: podsumowanie i badge bez nadmiernych neonów */
.cartSummary,
.quickSummary,
.orderSummary{
  background:linear-gradient(180deg,#fff8cf 0%, #fff1a0 100%) !important;
  border:1px solid rgba(255,222,0,.75) !important;
  box-shadow:0 12px 28px rgba(6,38,18,.07) !important;
}

.cartUpsell,
.upsellBox,
.upsell,
#cartUpsell{
  background:linear-gradient(180deg,#ffffff 0%, #fbf8ef 100%) !important;
  border:1px solid rgba(6,107,51,.14) !important;
  box-shadow:0 12px 28px rgba(6,38,18,.06) !important;
}

.cartBadge,
.cartTag,
.cartPill,
.upsellBadge,
.upsell__badge{
  background:rgba(255,222,0,.20) !important;
  border-color:rgba(255,222,0,.55) !important;
  color:var(--tlsw-green) !important;
  filter:none !important;
}

/* Zielone przyciski zawsze w firmowym odcieniu */
.cartUpsell button,
.upsell button,
.upsellBox button,
[data-upsell-add],
[data-add-upsell],
#btnOrder{
  background:linear-gradient(180deg,#066b33 0%, #045326 100%) !important;
  color:#fff !important;
  border:1px solid rgba(6,107,51,.35) !important;
  box-shadow:0 10px 22px rgba(6,38,18,.12) !important;
}

.cartUpsell button:hover,
.upsell button:hover,
.upsellBox button:hover,
[data-upsell-add]:hover,
[data-add-upsell]:hover,
#btnOrder:hover{
  color:var(--tlsw-yellow) !important;
}

/* Mobile — zachowaj kompaktowość, bez zmiany palety */
@media (max-width:760px){
  .subManager__countLabel{
    background:#fff !important;
  }
  .subManager__item,
  .subManager__item--compact{
    background:linear-gradient(180deg,#ffffff 0%, #fbf8ef 100%) !important;
  }
}


/* =========================================================
   NAVIGATION UPDATE — pełny topbar Arbuzika v.240
   ========================================================= */
.nav--arbuzik{
  gap:6px !important;
  align-items:center;
  flex-wrap:nowrap;
}

.nav--arbuzik a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 10px !important;
  border-radius:999px !important;
  color:rgba(255,255,255,.94) !important;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}

.nav--arbuzik a:hover{
  transform:translateY(-1px);
  color:#ffde00 !important;
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.16);
}

.nav--arbuzik .nav__hot{
  background:rgba(255,222,0,.13) !important;
  color:#ffde00 !important;
  border-color:rgba(255,222,0,.26);
}

.nav--arbuzik .nav__hot::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#ef2424;
  box-shadow:0 0 0 3px rgba(239,36,36,.16);
  margin-left:7px;
}

.mnav__in a{
  border-bottom:1px solid rgba(6,107,51,.09);
  font-weight:850;
}

.mnav__in a span{
  display:inline-flex;
  width:24px;
  justify-content:center;
  margin-right:6px;
}

@media (min-width:981px) and (max-width:1180px){
  .nav--arbuzik a{
    font-size:12px;
    padding:8px 8px !important;
  }
  .hdr__right{
    gap:7px !important;
  }
  .brand__logo, .brand img{
    max-width:210px !important;
  }
}

@media (max-width:980px){
  .mnav__in{
    padding-top:10px !important;
    padding-bottom:12px !important;
  }
  .mnav__in a{
    padding:11px 0 !important;
  }
}


/* =========================================================
   NAV GROUPED DROPDOWN — logiczny topbar Arbuzika v.241
   ========================================================= */
.nav--grouped{display:flex !important;align-items:center;gap:8px !important;margin-left:10px}
.navGroup{position:relative;display:inline-flex;align-items:center}
.navGroup__btn,.navSingle{
  appearance:none;border:1px solid transparent;background:transparent;min-height:38px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 11px;border-radius:999px;color:rgba(255,255,255,.94);
  font-family:inherit;font-size:13px;font-weight:950;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease
}
.navGroup__btn:hover,.navGroup:focus-within .navGroup__btn,.navSingle:hover,.navSingle:focus-visible{
  background:rgba(255,255,255,.10) !important;color:var(--arbuzik-yellow) !important;
  border-color:rgba(255,255,255,.15);transform:translateY(-1px)
}
.navGroup__btn--hot{background:rgba(255,222,0,.13) !important;color:var(--arbuzik-yellow) !important;border-color:rgba(255,222,0,.25)}
.navDrop{
  position:absolute;left:0;top:calc(100% + 10px);width:290px;padding:10px;border-radius:20px;
  background:rgba(255,255,255,.96);border:1px solid rgba(6,107,51,.14);
  box-shadow:0 20px 48px rgba(6,38,18,.18);backdrop-filter:blur(10px) saturate(160%);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.98);
  transition:opacity .16s ease,visibility .16s ease,transform .16s ease;z-index:10050
}
.navDrop::before{
  content:"";position:absolute;left:22px;top:-7px;width:14px;height:14px;background:rgba(255,255,255,.96);
  border-left:1px solid rgba(6,107,51,.14);border-top:1px solid rgba(6,107,51,.14);transform:rotate(45deg)
}
.navGroup:hover .navDrop,.navGroup:focus-within .navDrop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.navDrop a{
  display:grid !important;gap:3px;padding:11px 12px !important;border-radius:14px !important;
  color:#123018 !important;background:transparent !important;border:1px solid transparent
}
.navDrop a:hover,.navDrop a:focus-visible{background:rgba(6,107,51,.07) !important;border-color:rgba(6,107,51,.12);color:#066b33 !important}
.navDrop a strong{font-size:13px;font-weight:1000;line-height:1.15}
.navDrop a small{font-size:11px;line-height:1.2;color:rgba(20,20,20,.56);font-weight:750}
.nav--grouped .nav__hot::after,.nav--grouped a::before,.nav--grouped a::after{content:none !important;display:none !important}
.mnavGroup{display:grid;gap:2px;padding:10px 0 12px;border-bottom:1px solid rgba(6,107,51,.10)}
.mnavGroup__title{color:#066b33;font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;padding:4px 0 5px}
.mnavGroup a{display:flex !important;align-items:center;gap:8px;padding:10px 0 !important;border-bottom:0 !important;color:#1d2b20 !important;font-weight:900}
.mnavGroup a span{width:26px;margin-right:2px;display:inline-flex;justify-content:center}
@media (min-width:981px) and (max-width:1180px){
  .navGroup__btn,.navSingle{font-size:12px;padding:8px 8px}
  .navDrop{width:270px}
}
@media (max-width:980px){.nav--grouped{display:none !important}}


/* =========================================================
   NAVBAR ARBUZIK MEGA MENU — FINAL v.242
   Spójny bar dla strony głównej i boxików
   ========================================================= */
.nav--grouped{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-left:10px !important;
  flex-wrap:nowrap !important;
}
.navGroup{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
}
.navGroup__btn,
.navSingle{
  appearance:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important;
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:9px 12px !important;
  border-radius:14px !important;
  color:rgba(255,255,255,.94) !important;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:950 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease !important;
}
.navGroup__btn span{
  font-size:11px;
  opacity:.82;
  transform:translateY(1px);
}
.navGroup__btn:hover,
.navGroup:hover .navGroup__btn,
.navGroup:focus-within .navGroup__btn,
.navSingle:hover,
.navSingle:focus-visible{
  background:rgba(255,222,0,.14) !important;
  color:var(--arbuzik-yellow) !important;
  border-color:rgba(255,222,0,.34) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.12) !important;
}
.navGroup__btn--hot{
  background:rgba(255,222,0,.16) !important;
  color:var(--arbuzik-yellow) !important;
  border-color:rgba(255,222,0,.36) !important;
}
.navDrop{
  position:absolute !important;
  left:50% !important;
  top:calc(100% + 12px) !important;
  width:min(520px, 88vw) !important;
  padding:12px !important;
  border-radius:22px !important;
  background:
    radial-gradient(360px 150px at 12% 0%, rgba(255,222,0,.13), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,240,.96)) !important;
  border:1px solid rgba(6,107,51,.16) !important;
  box-shadow:0 24px 58px rgba(6,38,18,.20) !important;
  backdrop-filter:blur(12px) saturate(160%) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(-50%, 8px) scale(.985) !important;
  transition:opacity .16s ease, visibility .16s ease, transform .16s ease !important;
  z-index:10050 !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}
.navDrop::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  width:14px !important;
  height:14px !important;
  background:rgba(255,255,255,.98) !important;
  border-left:1px solid rgba(6,107,51,.14) !important;
  border-top:1px solid rgba(6,107,51,.14) !important;
  transform:translateX(-50%) rotate(45deg) !important;
  display:block !important;
}
.navGroup:hover .navDrop,
.navGroup:focus-within .navDrop{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(-50%, 0) scale(1) !important;
}
.navDrop a{
  display:grid !important;
  gap:4px !important;
  min-height:68px !important;
  padding:12px 13px !important;
  border-radius:16px !important;
  color:#10351b !important;
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(6,107,51,.08) !important;
  box-shadow:0 8px 18px rgba(6,38,18,.05) !important;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}
.navDrop a:hover,
.navDrop a:focus-visible{
  transform:translateY(-1px) !important;
  background:rgba(255,222,0,.18) !important;
  border-color:rgba(255,222,0,.52) !important;
  color:#066b33 !important;
  box-shadow:0 12px 26px rgba(6,38,18,.10) !important;
}
.navDrop a strong{
  font-size:13px !important;
  font-weight:1000 !important;
  line-height:1.12 !important;
  color:inherit !important;
}
.navDrop a small{
  font-size:11px !important;
  line-height:1.24 !important;
  color:rgba(20,20,20,.58) !important;
  font-weight:750 !important;
}
.nav--grouped .nav__hot::after,
.nav--grouped a::before,
.nav--grouped a::after{
  content:none !important;
  display:none !important;
}
@media (min-width:981px) and (max-width:1180px){
  .nav--grouped{gap:4px !important;margin-left:4px !important;}
  .navGroup__btn,.navSingle{font-size:12px !important;padding:8px 9px !important;}
  .navDrop{width:min(460px, 88vw) !important;}
  .hdr__in{gap:10px !important;}
}
@media (max-width:980px){
  .nav--grouped{display:none !important;}
  .mnav{
    background:linear-gradient(180deg, #075a33 0%, #064d2c 100%) !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }
  .mnav__in{
    padding-top:14px !important;
    padding-bottom:18px !important;
  }
  .mnavGroup{
    display:grid !important;
    gap:6px !important;
    padding:12px 0 14px !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }
  .mnavGroup__title{
    color:var(--arbuzik-yellow) !important;
    font-size:12px !important;
    font-weight:1000 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    padding:2px 0 6px !important;
  }
  .mnavGroup a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:42px !important;
    padding:10px 12px !important;
    border-radius:15px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.07) !important;
    color:#ffffff !important;
    font-weight:900 !important;
    line-height:1.15 !important;
  }
  .mnavGroup a:hover,
  .mnavGroup a:focus-visible{
    background:rgba(255,222,0,.16) !important;
    border-color:rgba(255,222,0,.30) !important;
    color:var(--arbuzik-yellow) !important;
  }
  .mnavGroup a span{
    width:24px !important;
    margin-right:2px !important;
    display:inline-flex !important;
    justify-content:center !important;
    color:inherit !important;
  }
  #authBoxMobile .auth{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
  }
  #authBoxMobile .auth__name,
  #authBoxMobile .auth__label{
    color:#fff !important;
  }
}

/* =========================================================
   NAVBAR ARBUZIK HIERARCHIA + ANIMACJA — FIX v.243
   - naprawia rozjeżdżanie dropdownu na desktop
   - usuwa styl okrągłych badge
   - dodaje logiczną hierarchię Oferta -> podsekcje
   ========================================================= */
@media (min-width:981px){
  .hdr{
    overflow:visible !important;
  }
  .hdr__in{
    overflow:visible !important;
    width:min(1320px,94vw) !important;
  }
  .nav--grouped,
  .nav--grouped *{
    max-width:none !important;
  }
  .nav--grouped{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    margin-left:8px !important;
    flex-wrap:nowrap !important;
    isolation:isolate;
  }
  .navGroup{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    overflow:visible !important;
  }
  .navGroup__btn,
  .navSingle{
    position:relative !important;
    isolation:isolate !important;
    appearance:none !important;
    min-height:40px !important;
    padding:10px 13px !important;
    border-radius:12px 12px 5px 5px !important;
    border:0 !important;
    background:transparent !important;
    color:rgba(255,255,255,.94) !important;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:1000 !important;
    letter-spacing:-.015em !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transition:color .18s ease, transform .18s ease !important;
  }
  .navGroup__btn::before,
  .navSingle::before{
    content:"" !important;
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    bottom:6px !important;
    height:3px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,var(--arbuzik-yellow),#fff35a,var(--arbuzik-yellow)) !important;
    transform:scaleX(0) !important;
    transform-origin:left center !important;
    transition:transform .22s cubic-bezier(.2,.9,.2,1) !important;
    display:block !important;
    z-index:-1 !important;
  }
  .navGroup__btn::after,
  .navSingle::after{
    content:"" !important;
    position:absolute !important;
    inset:7px 3px 7px 3px !important;
    border-radius:13px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)) !important;
    opacity:0 !important;
    transform:translateY(6px) scale(.96) !important;
    transition:opacity .18s ease, transform .18s ease !important;
    display:block !important;
    z-index:-2 !important;
  }
  .navGroup__btn:hover,
  .navGroup:hover .navGroup__btn,
  .navGroup:focus-within .navGroup__btn,
  .navSingle:hover,
  .navSingle:focus-visible{
    background:transparent !important;
    color:var(--arbuzik-yellow) !important;
    border-color:transparent !important;
    transform:translateY(-1px) !important;
    box-shadow:none !important;
  }
  .navGroup__btn:hover::before,
  .navGroup:hover .navGroup__btn::before,
  .navGroup:focus-within .navGroup__btn::before,
  .navSingle:hover::before,
  .navSingle:focus-visible::before{
    transform:scaleX(1) !important;
  }
  .navGroup__btn:hover::after,
  .navGroup:hover .navGroup__btn::after,
  .navGroup:focus-within .navGroup__btn::after,
  .navSingle:hover::after,
  .navSingle:focus-visible::after{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
  }
  .navGroup__btn--hot{
    color:var(--arbuzik-yellow) !important;
    background:transparent !important;
  }
  .navGroup__btn--hot::before{
    transform:scaleX(.62) !important;
  }
  .navGroup__btn span{
    font-size:11px !important;
    opacity:.88 !important;
    transform:translateY(1px) !important;
  }
  .navDrop{
    position:absolute !important;
    left:50% !important;
    top:calc(100% + 14px) !important;
    width:360px !important;
    min-width:360px !important;
    max-width:360px !important;
    padding:12px !important;
    border-radius:20px !important;
    background:
      radial-gradient(360px 160px at 12% 0%, rgba(255,222,0,.16), transparent 60%),
      radial-gradient(300px 140px at 92% 18%, rgba(239,36,36,.08), transparent 62%),
      linear-gradient(180deg,rgba(255,255,255,.985),rgba(249,247,238,.965)) !important;
    border:1px solid rgba(255,255,255,.72) !important;
    box-shadow:0 26px 62px rgba(6,38,18,.24),0 0 0 1px rgba(6,107,51,.12) inset !important;
    backdrop-filter:blur(14px) saturate(170%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate(-50%, 12px) scale(.975) !important;
    transition:opacity .18s ease, visibility .18s ease, transform .18s cubic-bezier(.2,.9,.2,1) !important;
    z-index:10050 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .navDrop--wide{
    width:590px !important;
    min-width:590px !important;
    max-width:590px !important;
    grid-template-columns:230px 1fr !important;
    align-items:stretch !important;
  }
  .navGroup:hover .navDrop,
  .navGroup:focus-within .navDrop{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(-50%, 0) scale(1) !important;
  }
  .navDrop::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:-8px !important;
    width:16px !important;
    height:16px !important;
    background:rgba(255,255,255,.98) !important;
    border-left:1px solid rgba(6,107,51,.13) !important;
    border-top:1px solid rgba(6,107,51,.13) !important;
    transform:translateX(-50%) rotate(45deg) !important;
    display:block !important;
  }
  .navDrop__feature{
    position:relative !important;
    display:grid !important;
    align-content:start !important;
    gap:8px !important;
    padding:16px !important;
    border-radius:18px !important;
    background:
      linear-gradient(135deg,rgba(6,107,51,.96),rgba(7,125,59,.92)),
      radial-gradient(240px 110px at 0% 0%,rgba(255,222,0,.22),transparent 64%) !important;
    color:#fff !important;
    overflow:hidden !important;
  }
  .navDrop__feature::after{
    content:"" !important;
    position:absolute !important;
    right:-34px !important;
    bottom:-44px !important;
    width:150px !important;
    height:150px !important;
    border-radius:999px !important;
    background:radial-gradient(circle at center, rgba(255,222,0,.95) 0 2px, transparent 3px) 0 0/16px 16px !important;
    opacity:.24 !important;
  }
  .navDrop__kicker{
    color:var(--arbuzik-yellow) !important;
    font-size:10px !important;
    font-weight:1000 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .navDrop__feature strong{
    font-size:19px !important;
    line-height:1.05 !important;
    font-weight:1000 !important;
    color:#fff !important;
  }
  .navDrop__feature small{
    color:rgba(255,255,255,.82) !important;
    font-size:12px !important;
    line-height:1.35 !important;
    font-weight:750 !important;
  }
  .navDrop__cta{
    margin-top:auto !important;
    display:inline-flex !important;
    min-height:auto !important;
    padding:9px 11px !important;
    border-radius:12px !important;
    background:var(--arbuzik-yellow) !important;
    border:0 !important;
    color:#063f24 !important;
    font-size:12px !important;
    font-weight:1000 !important;
    box-shadow:0 12px 24px rgba(0,0,0,.14) !important;
  }
  .navDrop__list{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .navDrop a:not(.navDrop__cta){
    position:relative !important;
    display:grid !important;
    gap:4px !important;
    min-height:74px !important;
    padding:13px 13px 12px !important;
    border-radius:15px !important;
    color:#10351b !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(6,107,51,.09) !important;
    box-shadow:0 8px 18px rgba(6,38,18,.05) !important;
    overflow:hidden !important;
    transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  }
  .navDrop a:not(.navDrop__cta)::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:4px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,var(--arbuzik-yellow),#ef2424) !important;
    transform:scaleY(.28) !important;
    transform-origin:top center !important;
    transition:transform .16s ease !important;
    display:block !important;
  }
  .navDrop a:not(.navDrop__cta):hover,
  .navDrop a:not(.navDrop__cta):focus-visible{
    transform:translateY(-2px) !important;
    background:rgba(255,222,0,.18) !important;
    border-color:rgba(255,222,0,.56) !important;
    color:#066b33 !important;
    box-shadow:0 14px 30px rgba(6,38,18,.12) !important;
  }
  .navDrop a:not(.navDrop__cta):hover::before,
  .navDrop a:not(.navDrop__cta):focus-visible::before{
    transform:scaleY(1) !important;
  }
  .navDrop a strong{
    font-size:13px !important;
    font-weight:1000 !important;
    line-height:1.14 !important;
    color:inherit !important;
  }
  .navDrop a small{
    font-size:11px !important;
    line-height:1.26 !important;
    color:rgba(20,20,20,.58) !important;
    font-weight:760 !important;
  }
  .navDrop__feature .navDrop__cta::before,
  .navDrop__feature .navDrop__cta::after,
  .nav--grouped > a::before,
  .nav--grouped > a::after{
    pointer-events:none !important;
  }
}
@media (min-width:981px) and (max-width:1240px){
  .hdr__in{width:min(1420px,96vw) !important;gap:8px !important;}
  .brand__logo,.brand img{max-width:210px !important;}
  .nav--grouped{gap:2px !important;margin-left:3px !important;}
  .navGroup__btn,.navSingle{font-size:12px !important;padding:9px 9px !important;}
  .navDrop--wide{width:540px !important;min-width:540px !important;max-width:540px !important;grid-template-columns:210px 1fr !important;}
  .navDrop{width:330px !important;min-width:330px !important;max-width:330px !important;}
  .hdr__right{gap:6px !important;}
}
@media (max-width:980px){
  .mnavGroup--main{
    background:linear-gradient(180deg,rgba(255,222,0,.10),rgba(255,255,255,.04)) !important;
    border:1px solid rgba(255,222,0,.16) !important;
    border-radius:18px !important;
    padding:12px !important;
    margin-bottom:8px !important;
  }
}



/* =========================================================
   NAVBAR ARBUZIK CLEAN PREMIUM — NO BADGES + ACTIVE FIX v.244
   - Boxiki nie jest stale aktywne na żółto
   - topbar bez pigułek / badge
   - subtelna animacja tekstu + linia Arbuzika
   ========================================================= */
@media (min-width:981px){
  .nav--grouped{
    gap:18px !important;
    margin-left:14px !important;
    align-items:center !important;
  }

  .navGroup__btn,
  .navSingle{
    min-height:42px !important;
    padding:10px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:rgba(255,255,255,.92) !important;
    font-size:13px !important;
    font-weight:950 !important;
    letter-spacing:-.01em !important;
    overflow:visible !important;
    transform:none !important;
  }

  /* kasujemy wcześniejszy wygląd aktywnej pigułki */
  .navGroup__btn--hot,
  .navGroup__btn--hot:hover,
  .navGroup:hover .navGroup__btn--hot,
  .navGroup:focus-within .navGroup__btn--hot{
    background:transparent !important;
    color:rgba(255,255,255,.92) !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .navGroup__btn::after,
  .navSingle::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:4px !important;
    height:3px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,#ffde00 0%, #ffde00 52%, #ef2424 52%, #ef2424 100%) !important;
    opacity:1 !important;
    transform:scaleX(0) translateY(0) !important;
    transform-origin:left center !important;
    transition:transform .24s cubic-bezier(.2,.9,.2,1) !important;
    z-index:1 !important;
  }

  .navGroup__btn::before,
  .navSingle::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:-9px !important;
    right:-9px !important;
    top:8px !important;
    bottom:8px !important;
    border-radius:14px !important;
    background:radial-gradient(80px 32px at 50% 100%, rgba(255,222,0,.13), transparent 70%) !important;
    opacity:0 !important;
    transform:translateY(4px) scale(.96) !important;
    transition:opacity .18s ease, transform .18s ease !important;
    z-index:-1 !important;
  }

  .navGroup__btn:hover,
  .navGroup:hover .navGroup__btn,
  .navGroup:focus-within .navGroup__btn,
  .navSingle:hover,
  .navSingle:focus-visible{
    color:#ffde00 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  .navGroup__btn:hover::after,
  .navGroup:hover .navGroup__btn::after,
  .navGroup:focus-within .navGroup__btn::after,
  .navSingle:hover::after,
  .navSingle:focus-visible::after{
    transform:scaleX(1) translateY(0) !important;
  }

  .navGroup__btn:hover::before,
  .navGroup:hover .navGroup__btn::before,
  .navGroup:focus-within .navGroup__btn::before,
  .navSingle:hover::before,
  .navSingle:focus-visible::before{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
  }

  .navGroup__btn span{
    color:currentColor !important;
    opacity:.74 !important;
    font-size:10px !important;
    margin-left:2px !important;
  }

  /* rozwijane menu: szerokie, równe, nie słupek */
  .navDrop{
    top:calc(100% + 12px) !important;
    width:390px !important;
    min-width:390px !important;
    max-width:390px !important;
    border-radius:24px !important;
    padding:13px !important;
    background:
      radial-gradient(380px 160px at 0% 0%, rgba(255,222,0,.16), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,248,239,.97)) !important;
    border:1px solid rgba(255,255,255,.70) !important;
    box-shadow:0 26px 70px rgba(6,38,18,.25), 0 0 0 1px rgba(6,107,51,.10) inset !important;
    gap:9px !important;
  }

  .navDrop--wide{
    width:620px !important;
    min-width:620px !important;
    max-width:620px !important;
    grid-template-columns:245px 1fr !important;
  }

  .navDrop a:not(.navDrop__cta){
    min-height:68px !important;
    border-radius:17px !important;
    background:#fff !important;
    border:1px solid rgba(6,107,51,.10) !important;
  }

  .navDrop a:not(.navDrop__cta):hover,
  .navDrop a:not(.navDrop__cta):focus-visible{
    background:linear-gradient(180deg, rgba(255,222,0,.18), rgba(255,255,255,.96)) !important;
    border-color:rgba(255,222,0,.70) !important;
  }
}

@media (min-width:981px) and (max-width:1240px){
  .nav--grouped{gap:12px !important;margin-left:8px !important;}
  .navGroup__btn,.navSingle{font-size:12px !important;}
  .navDrop--wide{width:560px !important;min-width:560px !important;max-width:560px !important;grid-template-columns:220px 1fr !important;}
  .navDrop{width:350px !important;min-width:350px !important;max-width:350px !important;}
}


/* =========================================================
   PRZEGLĄDAJ OFERTĘ — kafle produktowe Arbuzik v.245
   Inspiracja: duże zdjęcie + zielona fala + cena kapsuła
   ========================================================= */
.offerHub__grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.offerCard{
  --card-green:#066b33;
  --card-green-2:#087a3d;
  --card-red:#ff1d18;
  --card-yellow:#ffde00;
  --card-cream:#fff9e7;
  min-height: 360px;
  padding:0;
  border-radius: 22px;
  overflow:hidden;
  background: var(--card-green);
  border:1px solid rgba(6,107,51,.16);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  isolation:isolate;
}
.offerCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(6,107,51,.18);
}
.offerCard__mediaLink{
  display:block;
  text-decoration:none;
  color:inherit;
}
.offerCard__media{
  min-height: 178px;
  height: 178px;
  margin:0;
  border-radius:0;
  overflow:hidden;
  background-color:#eef5e9;
}
.offerCard__media.has-image{
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -24px 34px rgba(0,0,0,.08);
}
.offerCard__media::before,
.offerCard__media::after{
  content:none !important;
}
.offerCard__badges{
  position:absolute;
  top:12px;
  left:12px;
  right:48px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  pointer-events:none;
}
.offerCard__badge{
  min-height:28px;
  padding:7px 10px;
  border-radius:999px;
  color:#ffffff;
  background: linear-gradient(180deg, #0b7d42, #066b33);
  border:1px solid rgba(255,255,255,.42);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  font-size:11px;
  text-transform:lowercase;
}
.offerCard__badge::before{
  content:"●";
  font-size:8px;
  color:#ffde00;
  margin-right:6px;
}
.offerCard__badge--warm,
.offerCard__badge--yellow{
  color:#12411f;
  background: linear-gradient(180deg, #ffea58, #ffde00);
  border-color: rgba(6,107,51,.18);
}
.offerCard__badge--warm::before,
.offerCard__badge--yellow::before{ color:#ff1d18; }
.offerCard__badge--red{
  color:#ffffff;
  background: linear-gradient(180deg, #ff392f, #ff1d18);
  border-color: rgba(255,255,255,.44);
}
.offerCard__badge--red::before{ color:#ffde00; }
.offerCard__heart{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-size:25px;
  font-weight:900;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.32);
  background: rgba(6,107,51,.16);
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(4px);
}
.offerCard__body{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height: 190px;
  padding: 31px 18px 16px;
  margin-top:-1px;
  color:#ffffff;
  background:
    radial-gradient(360px 140px at 100% 100%, rgba(255,222,0,.12), transparent 58%),
    linear-gradient(180deg, var(--card-green-2), var(--card-green));
}
.offerCard__body::before{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  top:-30px;
  height:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 58' preserveAspectRatio='none'%3E%3Cpath d='M0 27 C52 2 101 45 157 22 C219 -4 267 42 331 18 C374 2 400 10 420 21 V58 H0 Z' fill='%23087a3d'/%3E%3Cpath d='M0 18 C52 -7 101 36 157 13 C219 -13 267 33 331 9 C374 -7 400 1 420 12' fill='none' stroke='%23fff9e7' stroke-width='8' stroke-linecap='round' opacity='.95'/%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
}
.offerCard h4,
.offerCard .offerCard__body h4{
  position:relative;
  z-index:1;
  margin:0;
  color:#ffffff;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: .98;
  letter-spacing:-.04em;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.offerCard p,
.offerCard .offerCard__body p{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  color: rgba(255,255,255,.92);
  font-size:15px;
  line-height:1.28;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.offerCard__meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px;
  margin:12px 0 0;
  color: rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.offerCard__pin{
  flex:0 0 auto;
  filter: saturate(1.1);
}
.offerCard__ctaWrap{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.offerCard__price{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  min-height:44px;
  padding: 8px 13px 7px;
  border-radius:999px;
  background: linear-gradient(180deg, #ffea58, #ffde00);
  color:#063d24;
  border:1px solid rgba(255,255,255,.50);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
  font-size:23px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.offerCard__price small{
  font-size:11px;
  font-weight:1000;
  letter-spacing:0;
  color:#063d24;
  opacity:.92;
}
.offerCard__ctaBtn{
  min-height:44px;
  padding: 10px 17px;
  border-radius:999px;
  background: linear-gradient(180deg, #ff392f, #ff1d18);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.26);
  box-shadow: 0 12px 24px rgba(255,29,24,.24);
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
}
.offerCard__ctaBtn::after{
  content:"🛒";
  font-size:14px;
  line-height:1;
}
.offerCard__ctaBtn:hover{
  color:#ffffff;
  background: linear-gradient(180deg, #ff4a40, #e91512);
  box-shadow: 0 16px 28px rgba(255,29,24,.30);
}
.offerCard__ctaBtn.is-added{
  background: linear-gradient(180deg, #ffea58, #ffde00);
  color:#063d24;
  box-shadow: 0 14px 28px rgba(255,222,0,.25);
}
.offerCard__ctaBtn.is-added::after{ content:""; }
.offerCard__linkRow{
  position:relative;
  z-index:1;
  margin-top:8px;
  padding-top:0;
  min-height:0;
}
.offerCard__link{
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}
.offerCard__link:hover{
  color:#ffde00;
  text-decoration:none;
}
.offerCard__when{
  color:rgba(255,255,255,.64);
}
.offerCard--gold .offerCard__body,
.offerCard--leaf .offerCard__body,
.offerCard--rose .offerCard__body{
  background:
    radial-gradient(360px 140px at 100% 100%, rgba(255,222,0,.12), transparent 58%),
    linear-gradient(180deg, var(--card-green-2), var(--card-green));
}
.offerCard--gold .offerCard__body::before,
.offerCard--leaf .offerCard__body::before,
.offerCard--rose .offerCard__body::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 58' preserveAspectRatio='none'%3E%3Cpath d='M0 27 C52 2 101 45 157 22 C219 -4 267 42 331 18 C374 2 400 10 420 21 V58 H0 Z' fill='%23087a3d'/%3E%3Cpath d='M0 18 C52 -7 101 36 157 13 C219 -13 267 33 331 9 C374 -7 400 1 420 12' fill='none' stroke='%23fff9e7' stroke-width='8' stroke-linecap='round' opacity='.95'/%3E%3C/svg%3E");
}
@media (min-width: 1180px){
  .offerHub__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .offerCard__media{
    min-height: 190px;
    height: 190px;
  }
}
@media (max-width: 900px){
  .offerHub__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .offerHub__grid{
    grid-template-columns: 1fr;
    gap:16px;
  }
  .offerCard{
    min-height: 340px;
    border-radius: 20px;
  }
  .offerCard__media{
    height: 174px;
    min-height:174px;
  }
  .offerCard__body{
    min-height:170px;
    padding: 29px 16px 14px;
  }
  .offerCard h4,
  .offerCard .offerCard__body h4{
    font-size:30px;
  }
  .offerCard__ctaWrap{
    flex-direction:row;
    align-items:center;
  }
  .offerCard__ctaBtn{
    width:auto;
    flex:0 0 auto;
  }
  .offerCard__price{
    font-size:21px;
    text-align:left;
  }
}
@media (max-width: 390px){
  .offerCard__price{
    font-size:18px;
    padding-left:11px;
    padding-right:11px;
  }
  .offerCard__ctaBtn{
    padding-left:13px;
    padding-right:13px;
  }
}


/* =========================================================
   OFERTA ARBUZIKA — CENA + DODAJ STANDARD PATCH v.247
   - tylko cena + przycisk Dodaj w kaflach oferty
   - przycisk Dodaj: standard zielony, biały tekst, żółty hover tekstu
   ========================================================= */

.offerCard__ctaWrap{
  gap: 10px !important;
  align-items: center !important;
}

/* Cena: spokojny badge informacyjny, bez efektu "żółtego przycisku" */
.offerCard__price{
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(90px 46px at 20% 0%, rgba(255,255,255,.88), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)) !important;
  color: #0c6b3e !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.offerCard__price small{
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: rgba(12,107,62,.72) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Dodaj: standardowy zielony przycisk jak reszta strony */
.offerCard__ctaBtn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(9,85,49,1)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease !important;
}

.offerCard__ctaBtn::before{
  content:"";
  position:absolute;
  top:-140%;
  left:-42%;
  width:32%;
  height:380%;
  transform: rotate(24deg) translateX(-220%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 38%,
    rgba(255,255,255,.46) 50%,
    rgba(255,255,255,.10) 62%,
    rgba(255,255,255,0) 100%
  );
  z-index: 1;
  pointer-events:none;
  transition: transform .72s ease;
}

.offerCard__ctaBtn::after{
  content:"🛒" !important;
  position: relative;
  z-index: 2;
  font-size: 13px !important;
  line-height: 1;
  margin-left: 1px;
  color: currentColor !important;
}

.offerCard__ctaBtn:hover,
.offerCard__ctaBtn:focus-visible{
  transform: translateY(-2px) !important;
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(7,74,42,1)) !important;
  color: var(--arbuzik-yellow) !important;
  box-shadow:
    0 15px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.offerCard__ctaBtn:hover::before,
.offerCard__ctaBtn:focus-visible::before{
  transform: rotate(24deg) translateX(540%);
}

.offerCard__ctaBtn.is-added{
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(9,85,49,1)) !important;
  color: var(--arbuzik-yellow) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.offerCard__ctaBtn.is-added::after{
  content:"" !important;
}

@media (max-width: 640px){
  .offerCard__price{
    min-height: 38px !important;
    font-size: 15.5px !important;
    padding: 7px 11px !important;
  }
  .offerCard__price small{
    font-size: 9.5px !important;
  }
  .offerCard__ctaBtn{
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 390px){
  .offerCard__price{
    font-size: 15px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .offerCard__ctaBtn{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}



/* =========================================================
   OFERTA ARBUZIKA — ŻÓŁTY PAS CTA v.248
   - poziomy żółty pasek przez cały kafelek
   - cena + Dodaj jako zielone elementy na żółtym tle
   ========================================================= */

.offerCard__ctaWrap{
  margin-left: -18px !important;
  margin-right: -18px !important;
  padding: 10px 18px !important;
  min-height: 60px !important;
  background:
    radial-gradient(180px 70px at 18% 0%, rgba(255,255,255,.30), transparent 62%),
    linear-gradient(180deg, var(--arbuzik-yellow), var(--arbuzik-yellow-deep)) !important;
  border-top: 1px solid rgba(255,255,255,.55) !important;
  border-bottom: 1px solid rgba(6,107,51,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 12px 22px rgba(0,0,0,.10) !important;
}

.offerCard__ctaWrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,107,51,.08), transparent 28%, transparent 72%, rgba(6,107,51,.08)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 2px, transparent 2px 9px);
  pointer-events: none;
  z-index: 0;
}

.offerCard__price,
.offerCard__ctaBtn{
  position: relative !important;
  z-index: 1 !important;
}

/* Cena jako zielony badge na żółtym pasie */
.offerCard__price{
  min-height: 40px !important;
  padding: 8px 13px 7px !important;
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(9,85,49,1)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    0 10px 20px rgba(6,52,29,.22),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.offerCard__price small{
  color: rgba(255,255,255,.82) !important;
}

/* Dodaj: standard zielony + biały tekst, po hover tekst żółty */
.offerCard__ctaBtn{
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(9,85,49,1)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    0 10px 20px rgba(6,52,29,.24),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.offerCard__ctaBtn:hover,
.offerCard__ctaBtn:focus-visible{
  color: var(--arbuzik-yellow) !important;
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(7,74,42,1)) !important;
}

.offerCard__linkRow{
  margin-top: 10px !important;
}

@media (max-width: 640px){
  .offerCard__ctaWrap{
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 9px 16px !important;
    min-height: 56px !important;
  }
}

@media (max-width: 390px){
  .offerCard__ctaWrap{
    gap: 8px !important;
  }
}


/* =========================================================
   OFERTA ARBUZIKA — ŻÓŁTY PAS CTA KOREKTA v.249
   - węższy żółty pasek
   - bez połysku na przycisku Dodaj
   - więcej oddechu między lokalizacją a pasem CTA
   ========================================================= */

/* więcej przestrzeni nad żółtym pasem przy dłuższych opisach */
.offerCard__body{
  min-height: 205px !important;
}

.offerCard__meta{
  margin-bottom: 12px !important;
}

/* żółty pas: niższy, bardziej elegancki */
.offerCard__ctaWrap{
  margin-left: -18px !important;
  margin-right: -18px !important;
  margin-top: auto !important;
  padding: 7px 18px !important;
  min-height: 48px !important;
  background:
    linear-gradient(180deg, var(--arbuzik-yellow), var(--arbuzik-yellow-deep)) !important;
  border-top: 1px solid rgba(255,255,255,.46) !important;
  border-bottom: 1px solid rgba(6,107,51,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 8px 16px rgba(0,0,0,.08) !important;
}

.offerCard__ctaWrap::before{
  background:
    linear-gradient(90deg, rgba(6,107,51,.06), transparent 30%, transparent 70%, rgba(6,107,51,.06)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 2px, transparent 2px 10px) !important;
}

/* cena i Dodaj trochę niższe, żeby pas nie dominował */
.offerCard__price,
.offerCard__ctaBtn{
  min-height: 34px !important;
  height: 34px !important;
}

.offerCard__price{
  padding: 6px 12px !important;
  font-size: 15px !important;
}

.offerCard__price small{
  font-size: 9px !important;
}

.offerCard__ctaBtn{
  padding: 7px 14px !important;
  font-size: 12.5px !important;
}

/* usunięcie połysku/shine z przycisku Dodaj */
.offerCard__ctaBtn::before,
.offerCard__ctaBtn:hover::before,
.offerCard__ctaBtn:focus-visible::before{
  content: none !important;
  display: none !important;
  background: none !important;
  transform: none !important;
}

.offerCard__ctaBtn:hover,
.offerCard__ctaBtn:focus-visible{
  transform: translateY(-1px) !important;
  color: var(--arbuzik-yellow) !important;
  background: linear-gradient(180deg, rgba(12,107,62,1), rgba(7,74,42,1)) !important;
}

@media (max-width: 640px){
  .offerCard__body{
    min-height: 188px !important;
  }

  .offerCard__meta{
    margin-bottom: 10px !important;
  }

  .offerCard__ctaWrap{
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 6px 16px !important;
    min-height: 46px !important;
  }

  .offerCard__price,
  .offerCard__ctaBtn{
    min-height: 33px !important;
    height: 33px !important;
  }

  .offerCard__price{
    font-size: 14.5px !important;
    padding: 6px 11px !important;
  }

  .offerCard__ctaBtn{
    font-size: 12px !important;
    padding: 7px 13px !important;
  }
}

@media (max-width: 390px){
  .offerCard__ctaWrap{
    gap: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .offerCard__price{
    font-size: 13.5px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .offerCard__ctaBtn{
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}


/* =========================================================
   OFERTA ARBUZIKA — PUSTY FEED / BRAK WYNIKÓW v.250
   - pusty wynik wygląda jak normalny kafelek oferty
   - zamiast niedokończonego bloku pokazuje logo Arbuzika
   ========================================================= */

.offerCard--emptyFeed{
  max-width: 360px !important;
  min-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
}

.offerCard--emptyFeed .offerCard__media,
.offerCard--emptyFeed .offerCard__media--logo{
  position: relative !important;
  height: 190px !important;
  min-height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 34px 30px 24px !important;
  background:
    radial-gradient(220px 120px at 50% 40%, rgba(255,255,255,.92), rgba(255,255,255,.50) 56%, transparent 68%),
    linear-gradient(135deg, rgba(255,249,231,.98), rgba(222,239,216,.96)) !important;
  box-shadow: inset 0 -24px 34px rgba(6,107,51,.08) !important;
}

.offerCard--emptyFeed .offerCard__emptyLogo{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: min(210px, 78%) !important;
  max-height: 122px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(6,107,51,.16)) !important;
}

.offerCard--emptyFeed .offerCard__body{
  min-height: 230px !important;
}

.offerCard--emptyFeed .offerCard__body h4{
  max-width: 260px !important;
}

.offerCard--emptyFeed .offerCard__body p{
  -webkit-line-clamp: 3 !important;
  max-width: 290px !important;
}

.offerCard--emptyFeed .offerCard__meta{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.offerCard--emptyFeed .offerCard__ctaWrap{
  margin-top: auto !important;
}

.offerCard--emptyFeed .offerCard__ctaBtn{
  cursor: pointer !important;
}

.offerCard--emptyFeed .offerCard__linkRow{
  justify-content: flex-start !important;
}

@media (max-width: 640px){
  .offerCard--emptyFeed{
    max-width: none !important;
  }

  .offerCard--emptyFeed .offerCard__media,
  .offerCard--emptyFeed .offerCard__media--logo{
    height: 174px !important;
    min-height: 174px !important;
  }

  .offerCard--emptyFeed .offerCard__emptyLogo{
    width: min(190px, 74%) !important;
    max-height: 110px !important;
  }
}

/* =========================================================
   TOP BAR — WIĘKSZA CZCIONKA + BEZ PODKREŚLENIA v.251
   - zwiększa czytelność głównego menu na desktopie
   - usuwa żółto-czerwone podkreślenie hover/active
   ========================================================= */
@media (min-width:981px){
  .navGroup__btn,
  .navSingle{
    font-size:15px !important;
  }

  .navGroup__btn::after,
  .navSingle::after,
  .navGroup__btn:hover::after,
  .navGroup:hover .navGroup__btn::after,
  .navGroup:focus-within .navGroup__btn::after,
  .navSingle:hover::after,
  .navSingle:focus-visible::after,
  .navGroup__btn--hot::after{
    content:none !important;
    display:none !important;
  }
}

@media (min-width:981px) and (max-width:1240px){
  .navGroup__btn,
  .navSingle{
    font-size:14px !important;
  }
}