/* barva pozadí informační lišty */
.UserContentPanelView.HeaderInfoPanel {
    background-color: #d9f13d;  /* sem vložte hexadecimální kód zvolené barvy - barvy najdete např. zde: https://www.klikzone.cz/sekce-html/html-barvy.php*/
}
/* konec úpravy pozadí */

.FooterView.v3 .middle {
    background-color: #56ac21 !important;
}

div#FooterUserContent {
    padding-top: 0px;
}

.footer_odkazy a{
    color: black;
    text-decoration: none;
}
.footer_odkazy a:hover{
    text-decoration: underline;
}
.LoginView.v3 .title, .LoginView.v3 .login {
    color: #086b3b !important;
}

.LoginView.v1 {
    background-color: #237948 !important;
}

.LogoView.v1a {
    width: 150px !important;
}

#CategoryForum .button.searchButton {
    background-color: #237948;
    padding: 1rem;
    color: white;
}


.UserPanelView.v2 .initials {
    border-color: white;
}

.UserPanelView.v2 .initials>span {
    color: white;
}


@media only screen and (min-width: 900px){
    .bsuc-flex.hp_bannervyhody>.w1of2_900.banner {
        width: calc(3/4*100%);
    }
    .bsuc-flex.hp_bannervyhody>.w1of2_900.vyhody {
        width: calc(1/4*100%);
    }
    
    .bsuc-flex.hp_bannervyhody .vyhodyImg {
    width: calc(2/5*100%);
    text-align: center;
    }
    
    .bsuc-flex.hp_bannervyhody .vyhodyText {
    width: calc(3/5*100%);
    }
}

@media only screen and (max-width: 899px){
    .hp_bannervyhody .vyhody {
    display: none;
    }
}


/*Na tabletu nefungovalo vůbec horní menu. Quick-fix*/
.MenuCategoriesRwdView.v1.big ul.root>li:not(.leaf)>a.name { pointer-events: auto;}



/* =====================================================
   EXO DESIGN SYSTEM – START
   Bezpečné pro BSS / CMS
===================================================== */

/* =====================
   1. DESIGN TOKENS
===================== */
:root {
  /* Colors */
  --exo-color-primary: #2f7d32;
  --exo-color-primary-hover: #256528;
  --exo-color-secondary: #0f766e;
  --exo-color-text: #1f2937;
  --exo-color-muted: #6b7280;
  --exo-color-border: #e5e7eb;
  --exo-color-bg-soft: #f9fafb;

  /* Typography */
  --exo-font-size-base: 16px;
  --exo-font-size-lg: 18px;
  --exo-font-weight-semibold: 600;

  /* Radius & motion */
  --exo-radius: 8px;
  --exo-transition: 0.2s ease;

  /* Spacing */
  --exo-space-2: 8px;
  --exo-space-4: 16px;
  --exo-space-6: 24px;
}

/* =====================
   2. LAYOUT UTILITIES
===================== */
.exo-flex { display: flex; }
.exo-flex-col { flex-direction: column; }

@media (min-width: 768px) {
  .exo-flex-row-md { flex-direction: row; }
}

.exo-gap-4 { gap: var(--exo-space-4); }
.exo-gap-6 { gap: var(--exo-space-6); }

/* =====================
   3. BUTTONS
===================== */
.exo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--exo-radius);
  font-weight: var(--exo-font-weight-semibold);
  font-size: var(--exo-font-size-base);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--exo-transition),
              color var(--exo-transition),
              border var(--exo-transition);
}

/* Primary */
.exo-btn--primary {
  background: var(--exo-color-primary);
  color: #fff;
}

.exo-btn--primary:hover {
  background: var(--exo-color-primary-hover);
}

/* Secondary */
.exo-btn--secondary {
  background: var(--exo-color-secondary);
  color: #fff;
}

.exo-btn--secondary:hover {
  opacity: 0.9;
}

/* Ghost */
.exo-btn--ghost {
  background: transparent;
  color: var(--exo-color-primary);
  border: 1px solid var(--exo-color-primary);
}

.exo-btn--ghost:hover {
  background: var(--exo-color-bg-soft);
}

/* =====================
   4. ICON SYSTEM (SVG)
===================== */
.exo-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  fill: currentColor;
  flex-shrink: 0;
}

.exo-icon--sm { width: 16px; height: 16px; }
.exo-icon--lg { width: 32px; height: 32px; }

/* =====================
   5. COMPONENTS
===================== */

/* Info box */
.exo-info {
  border: 1px solid var(--exo-color-border);
  padding: var(--exo-space-6);
  border-radius: var(--exo-radius);
  text-align: center;
  background: #fff;
}

.exo-info__icon {
  margin-bottom: var(--exo-space-4);
  color: var(--exo-color-primary);
}

.exo-info__title {
  font-size: var(--exo-font-size-lg);
  font-weight: var(--exo-font-weight-semibold);
  margin-bottom: var(--exo-space-2);
  color: var(--exo-color-text);
}

.exo-info__text {
  color: var(--exo-color-muted);
}

/* =====================
   6. PAGE-SCOPED OVERRIDES (EXAMPLE)
===================== */
.exo-page-benefits .exo-info {
  background: var(--exo-color-bg-soft);
}

/* =====================================================
   EXO – PAGE: DOPRAVA
===================================================== */

.exo-page-shipping {
  margin-top: 2rem;
}

/* Grid sekcí */
.exo-shipping-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .exo-shipping-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Karta dopravy */
/* =====================================================
   EXO – PAGE: DOPRAVA (COMPACT VERSION)
===================================================== */

.exo-page-shipping {
  margin-top: 1.5rem;
}

/* Grid */
.exo-shipping-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .exo-shipping-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .exo-shipping-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Karta */
.exo-shipping-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 20px 18px;
  border: 1px solid var(--exo-color-border);
  border-radius: var(--exo-radius);
  background: #fff;
  text-align: center;

  /* sjednocení velikosti */
  min-height: 260px;

  transition: box-shadow var(--exo-transition),
              transform var(--exo-transition);
}

.exo-shipping-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

/* Ikona */
.exo-shipping-card__icon {
  color: var(--exo-color-primary);
  margin-bottom: 0px;
}

/* Nadpis */
.exo-shipping-card__title {
  font-size: 20px;
  font-weight: 600;
  color: orange ;
  margin-bottom: 0px;
}

/* Popis */
.exo-shipping-card__desc {
  font-size: 14px;
  color: var(--exo-color-muted);
  line-height: 1.5;
}

/* CTA */
.exo-shipping-card__cta {
  margin-top: auto;
}



/* =====================================================
   EXO DESIGN SYSTEM – END
===================================================== */

/* ==========================================================================
   BRAND PAGE – jednotný styl brandových stránek (EXO-EKO.cz + Greenpets.cz)
   Vložit jednou do centrálního CSS v BSAdminu. Použití: obsah stránky obalit
   do <div class="bp"> … </div>. Všechny třídy mají prefix .bp-, stylování
   je omezeno na obsah uvnitř .bp, zbytek e-shopu se nemění.
   Dvojité .bp.bp zvyšuje specificitu, aby styly nepřebily pravidla šablony.
   Písmo se dědí z e-shopu (Open Sans).
   Barvy lze změnit na jednom místě v proměnných níže.
   ========================================================================== */

.bp{
  --bp-primary:#397e35;     /* hlavní zelená Greenpets */
  --bp-secondary:#086b3b;   /* tmavší zelená EXO-EKO */
  --bp-tint:#edf5ec;
  --bp-ink:#2b3033;
  --bp-muted:#5d666b;
  --bp-card:#f6f7f7;
  --bp-line:#dfe3e3;
  --bp-radius:10px;
  max-width:1100px;margin:0 auto;padding:0 16px 48px;
  color:var(--bp-ink);font-size:16px;line-height:1.65;box-sizing:border-box;
}
.bp *,.bp *::before,.bp *::after{box-sizing:border-box}
.bp.bp h2,.bp.bp h3{font-family:inherit;color:var(--bp-ink);line-height:1.2;margin:0;padding:0;border:0;text-transform:none;letter-spacing:normal;text-wrap:balance}
.bp.bp p{margin:0 0 1em;max-width:68ch}
.bp.bp a{color:var(--bp-secondary)}
.bp.bp img{max-width:100%;height:auto;display:block;border-radius:var(--bp-radius)}
.bp.bp ul,.bp.bp ol{margin:0;padding:0}

/* sekce */
.bp .bp-section{padding:40px 0 0}
.bp.bp .bp-section>h2{font-size:28px;font-weight:600;margin-bottom:8px}
.bp .bp-section>h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--bp-primary);margin-top:10px}
.bp.bp .bp-lead{color:var(--bp-muted);margin:12px 0 24px}
.bp.bp .bp-note{font-size:14px;color:var(--bp-muted);margin-top:14px}

/* tlačítka */
.bp.bp a.bp-btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:15px;line-height:1.2;border:2px solid transparent;transition:background .15s,color .15s}
.bp.bp a.bp-btn-main{background:var(--bp-primary);color:#fff}
.bp.bp a.bp-btn-main:hover{background:var(--bp-secondary)}
.bp.bp a.bp-btn-ghost{border-color:#fff;color:#fff}
.bp.bp a.bp-btn-ghost:hover{background:#ffffff22}
.bp.bp .bp-hero a.bp-btn-main{background:#fff;color:var(--bp-secondary)}
.bp.bp .bp-hero a.bp-btn-main:hover{background:var(--bp-tint)}
.bp.bp a.bp-btn-line{border-color:var(--bp-secondary);color:var(--bp-secondary)}
.bp.bp a.bp-btn-line:hover{background:var(--bp-secondary);color:#fff}
.bp a:focus-visible{outline:3px solid var(--bp-primary);outline-offset:3px}

/* HERO */
.bp .bp-hero{margin-top:16px;border-radius:14px;background:var(--bp-primary);background:linear-gradient(135deg,var(--bp-primary) 0%,var(--bp-secondary) 100%);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:40px}
.bp.bp .bp-hero h2.bp-title{color:#fff;font-size:38px;font-weight:700}
.bp.bp .bp-hero p{color:#ffffffe6;font-size:17px;margin-top:14px}
.bp .bp-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#ffffff22;padding:4px 12px;border-radius:999px;margin-bottom:14px}
.bp .bp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.bp.bp img.bp-photo{width:100%;object-fit:cover}
.bp.bp img.bp-photo--hero,.bp.bp img.bp-photo--wide{aspect-ratio:3/2}
.bp.bp img.bp-photo--tall{aspect-ratio:4/5}

/* fakta */
.bp .bp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.bp .bp-fact{background:var(--bp-tint);border-radius:var(--bp-radius);padding:16px 18px;font-size:14px;line-height:1.5;color:var(--bp-muted)}
.bp .bp-fact strong,.bp .bp-fact b{display:block;font-size:26px;line-height:1.1;color:var(--bp-secondary);font-weight:700;margin-bottom:2px}

/* text + obrázek vedle sebe */
.bp .bp-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.bp .bp-split--center{align-items:center}
.bp .bp-split--tint{background:var(--bp-tint);border-radius:14px;padding:28px;grid-template-columns:1.2fr 1fr}
.bp.bp ul.bp-list{padding-left:20px}
.bp.bp ul.bp-list li{margin-bottom:6px}

/* časová osa */
.bp.bp ol.bp-timeline{list-style:none;margin:20px 0 0;padding:0 0 0 22px;border-left:3px solid var(--bp-primary)}
.bp .bp-timeline li{position:relative;margin:0 0 18px;padding-left:6px}
.bp .bp-timeline li::before{content:"";position:absolute;left:-30px;top:6px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--bp-primary)}
.bp .bp-timeline strong,.bp .bp-timeline b{display:block;color:var(--bp-secondary)}

/* karty (řady, kategorie) */
.bp .bp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bp .bp-card{background:var(--bp-card);border:1px solid var(--bp-line);border-radius:var(--bp-radius);padding:20px;display:flex;flex-direction:column;gap:8px}
.bp.bp .bp-card h3{font-size:19px;font-weight:600}
.bp.bp .bp-card p{margin:0;font-size:15px;color:var(--bp-muted)}
.bp .bp-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--bp-secondary);padding:3px 10px;border-radius:999px}
.bp.bp a.bp-more{margin-top:auto;padding-top:6px;font-weight:700;font-size:14px;text-decoration:none}
.bp.bp a.bp-more:hover{text-decoration:underline}
.bp .bp-card--wide{grid-column:1/-1}
.bp .bp-card--top{border:2px solid var(--bp-primary);background:var(--bp-tint)}

/* dlaždice s ikonami (druhy masa, zvířata, kategorie) */
.bp.bp ul.bp-tiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.bp.bp ul.bp-tiles li{display:block;margin:0;padding:0}
.bp.bp .bp-tiles a{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:14px 8px 12px;border:2px solid var(--bp-line);border-radius:var(--bp-radius);background:#fff;text-decoration:none;font-weight:600;font-size:15px;color:var(--bp-ink);transition:border-color .15s,background .15s}
.bp.bp .bp-tiles a:hover{border-color:var(--bp-primary);background:var(--bp-tint)}
.bp.bp .bp-tiles img{width:64px;height:64px;border-radius:0}

/* výhody (číslované) */
.bp .bp-why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bp .bp-why>div{padding:18px 18px 18px 20px;border:1px solid var(--bp-line);border-left:4px solid var(--bp-primary);border-radius:var(--bp-radius)}
.bp.bp .bp-why h3{font-size:17px;font-weight:600;margin-bottom:4px}
.bp.bp .bp-why p{margin:0;font-size:15px;color:var(--bp-muted)}

/* obrázek s popiskem */
.bp .bp-fig{margin:24px 0 0}
.bp.bp .bp-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bp .bp-fig p{margin:8px 0 0;font-size:14px;color:var(--bp-muted)}
@media (min-width:861px){.bp .bp-fig{max-width:640px}}

/* produkty z e-shopu */
.bp .bp-products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bp .bp-prod{border:1px solid var(--bp-line);border-radius:var(--bp-radius);padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff}
.bp.bp .bp-prod img{width:100%;aspect-ratio:1/1;object-fit:contain}
.bp.bp .bp-prod h3{font-size:15px;font-weight:600}
.bp.bp .bp-prod a.bp-btn{text-align:center;padding:9px 12px;font-size:14px;margin-top:auto}

/* FAQ (vždy rozbalené) */
.bp .bp-faq-item{border:1px solid var(--bp-line);border-radius:var(--bp-radius);margin-bottom:10px;padding:14px 18px 4px;background:#fff}
.bp.bp .bp-faq-item h3{font-size:17px;font-weight:600;margin-bottom:6px}

@media (max-width:860px){
  .bp .bp-hero,.bp .bp-split,.bp .bp-split--tint{grid-template-columns:1fr}
  .bp .bp-hero{padding:28px 22px}
  .bp.bp .bp-hero h2.bp-title{font-size:30px}
  .bp .bp-facts{grid-template-columns:repeat(2,1fr)}
  .bp .bp-cards,.bp .bp-why{grid-template-columns:1fr}
  .bp .bp-products{grid-template-columns:repeat(2,1fr)}
  .bp.bp img.bp-photo--tall{aspect-ratio:3/2;object-position:center 62%}
}
@media (max-width:420px){.bp .bp-products{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bp .bp-btn,.bp .bp-tiles a{transition:none}}