/* ============================================================
   NEURONWELL — Custom Shop CSS
   Verze: 2.0 · Zahrnuje: globální styly + vylepšená tab navigace
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,600;1,400&display=swap');

/* ── FLAGS & BADGES ── */
.flag.flag-gift { background: #F7A12A; }
.bool-freeshipping { background: #717dbc; }

/* ── LOGO ── */
#header .header-top .header-top-wrapper .site-name a img,
#header .header-top .header-top-wrapper h1.site-name a img {
  height: 100%;
  max-height: 100px;
}

/* ── SIDEBAR ── */
.sidebar-inner { border: 0; }
.sidebar-inner h1 { padding-top: 12px; font-size: 32px; }

/* ── AVAILABILITY ── */
.p-cat-availability { color: #9ce; }

/* ── LINKS ── */
.link-like:focus,
.link-like:hover,
a:focus,
a:hover,
.shp-tabs-holder ul.shp-tabs li a:hover { text-decoration: underline; }
.shp-tab-link:hover { color: var(--color-secondary-hover); }

/* ── RATINGS & STARS ── */
.rate-wrap .rate-list .star,
.rate-wrap .rate-list .star:hover,
.stars .star.is-active:hover,
.stars .star.star-half:before,
.stars .star,
.stars .star:hover,
.stars .star.star-on:before,
.icon-starHalf-before,
.icon-starOn-before,
.product-ratings .icon-starOff-before:hover,
.product-ratings .star-off:hover,
.star.star-half,
.star.star-on,
.rate-average { color: #F7A12A !important; }
.rate-bar { background: #F7A12A; }

/* ── VOTES / REVIEWS ── */
.vote-name, .vote-product-name, .vote-title {
  display: block;
  font-size: 16px;
}
.navigation-in,
#hodnoceniobchodu .vote-wrap:not(.admin-response .vote-wrap),
.id--51 #content #ratingWrapper + .votes-wrap .vote-wrap:not(.admin-response .vote-wrap),
.template-14.id--51 .rate-wrapper:not(.admin-response .vote-wrap),
.homepage-latest-contribution .latest-contribution a,
.type-detail #content #ratingWrapper + .votes-wrap .vote-wrap:not(.admin-response .vote-wrap),
.votes-wrap .vote-wrap:not(.admin-response .vote-wrap) { background: #F2F8FC; }

.homepage-latest-contribution .latest-contribution a,
.votes-wrap .vote-wrap:not(.admin-response .vote-wrap) {
  border: 0;
  padding: 15px !important;
  border-radius: 8px;
  margin: 7.5px;
}
.type-detail #content #ratingWrapper + .votes-wrap .vote-wrap:not(.admin-response .vote-wrap) {
  border: 0 !important;
}
.votes-wrap .vote-wrap:not(.admin-response .vote-wrap) {
  display: block !important;
  text-align: left;
}
.sidebar .vote-product-name { font-weight: 700; }
.sidebar .vote-name { font-size: 14px; }
.homepage-latest-contribution .latest-contribution-rating .latest-contribution-description {
  font-size: 14px !important;
  line-height: 150% !important;
}

/* ── HOMEPAGE ── */
.homepage-group-title { padding-top: 16px; }
.homepage-blog-wrapper { padding: 18px 0; }
.homepage-banners-full-width,
.banner-category,
.homepage-latest-contribution-full-width,
.store-rating-full-width { background: #fff; }
.welcome-wrapper h1 { text-align: center; }
.carousel-control:before { top: 50%; background: rgba(0,0,0,.3); }
.link-icons .link-icon { margin: 14px 32px 0 0; }
.link-icons .link-icon i { display: inline; font-size: 18px; margin-right: 8px; }
.footer-newsletter { padding: 60px 16px 20px; }

/* ── CART / EXTRAS ── */
.cart-inner .contact-box [class*=" icon-"],
.cart-inner .contact-box [class^="icon-"],
.extras-wrapper [class*=" icon-"],
.extras-wrapper [class^="icon-"] { color: #1B72AC; }

/* ── BENEFIT GRID ── */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 16px;
  font-size: 15px;
  line-height: 1.3;
}
.benefit-grid div { padding: 4px 0; white-space: nowrap; }
@media (min-width: 600px)  { .benefit-grid { grid-template-columns: repeat(3, auto); } }
@media (min-width: 1024px) { .benefit-grid { grid-template-columns: repeat(5, auto); } }

/* ── CALC TABLET WIDGET ── */
.calc-tablet-widget {
  display: none;
  max-width: 320px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin: 15px auto;
  position: relative;
}
.calc-tablet-widget.visible { display: block; }
.twh, .twrl, .twccl { display: flex; align-items: center; }
.twh { gap: 10px; margin-bottom: 15px; color: #2e3a59; }
.twh h4 { margin: 0; }
.tw-icon { font-size: 22px; color: #4e73df; }
.twp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.twpc, .twiin, .twr { background: #fff; border-radius: 10px; }
.twpc { padding: 12px; text-align: center; }
.twpl { font-size: 12px; color: #6c757d; margin-bottom: 5px; }
.twpv, .twrv { font-weight: 700; color: #2e3a59; }
.twpv { font-size: 16px; }
.twi, .twr { margin-bottom: 15px; }
.twil { display: block; margin-bottom: 5px; font-size: 13px; color: #495057; }
.twiin { display: flex; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,.05); }
.twib { border: 0; width: 35px; height: 35px; font-size: 22px; cursor: pointer; background: #1C71AB; color: #fff; }
.twib:hover, .twib:active { background: #57518E; }
.twii { flex: 1; text-align: center; font-size: 16px; font-weight: 600; border: 0; outline: 0; padding: 5px; }
.twr { padding: 15px; }
.twri, .twcc { display: flex; justify-content: space-between; }
.twri { padding: 8px 0; border-bottom: 1px solid #f1f1f1; }
.twri:last-child { border: 0; }
.twrl { font-size: 14px; color: #495057; gap: 5px; }
.twrv, .twccv { font-size: 15px; font-weight: 700; }
.twpd { font-size: 20px; color: #090; font-weight: 700; text-align: center; padding: 10px; background: rgba(46,125,50,.08); border-radius: 8px; margin-bottom: 10px; }
.twpd small { font-size: 12px; color: #6c757d; }
.twcc { align-items: center; background: #fff9e6; border: 1px solid #ffeeba; border-radius: 8px; padding: 10px 15px; }
.twccl, .twccv { color: #856404; }
.twccl { font-size: 14px; gap: 8px; }
.twccv { font-size: 16px; }
#coffee-comparison-text { font-size: 12px; color: #090; margin-top: 5px; }
@media (max-width: 360px) { .twp { grid-template-columns: 1fr; gap: 8px; } .tw { padding: 15px; } }

/* ── PRODUCTS GRID ── */
.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px;
}
.product { float: none !important; width: auto !important; margin: 0 !important; }
.product .p {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: .3s;
  border: 1px solid #eee;
}
.product .p:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(108,76,241,.15); }
.product img { border-radius: 12px; padding: 8px; }
.product .name { font-weight: 600; font-size: 15px; margin-top: 8px; color: #111; }
.availability { font-size: 12px; color: #666; margin-top: 4px; }
.price-final { font-size: 18px; font-weight: 700; color: #6C4CF1; margin-top: 6px; }
.product .btn-primary { width: 100%; border-radius: 10px; background: #6C4CF1; color: #fff; padding: 10px; margin-top: 10px; text-align: center; }
.product .btn-primary:hover { background: #4b2fd6; }
.p-bottom { margin-top: auto; }
.p-desc { font-size: 13px; color: #666; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1000px) { .products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .products { grid-template-columns: 1fr !important; } }

/* ── CART / ADD-TO-CART BUTTON ── */
.btn.btn-conversion.add-to-cart-button {
  background: #6C4CF1 !important;
  border-color: #6C4CF1 !important;
  color: #fff !important;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: .2s;
  box-shadow: 0 6px 18px rgba(108,76,241,.35);
}
.btn.btn-conversion.add-to-cart-button:hover {
  background: #4b2fd6 !important;
  border-color: #4b2fd6 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 25px rgba(108,76,241,.45);
}
.p-to-cart-block {
  background: #f0fcfd;
  border: 1px solid #bbdaf7;
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 1rem;
}
.p-final-price-wrapper { margin-bottom: .75rem; }
#simple-variants-select {
  appearance: none;
  border: 1.5px solid #6C4CF1;
  border-radius: 10px;
  padding: 10px 36px 10px 16px;
  font: 500 14px 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #6C4CF1;
  cursor: pointer;
  width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C4CF1' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.btn-primary,
.btn-cart.add-to-cart-button {
  background: #6358CD !important;
  color: #fff !important;
  border-radius: 30px;
  font-weight: 600;
}
.btn-primary:hover,
.btn-cart.add-to-cart-button:hover { background: #4b2fd6 !important; }
.p-to-cart-block::after {
  content: "🌿 Čisté složení • ❤️ Funkční receptura • ⚡ Rychlé odeslání";
  display: block;
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.4;
  color: #6C4CF1;
  font-weight: 500;
}

/* ── BLOG / NEWS ── */
#newsWrapper .image,
.homepage-blog-wrapper .image { overflow: hidden !important; }
#newsWrapper .image img,
.homepage-blog-wrapper .image img {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,.08);
}
#newsWrapper .text,
.homepage-blog-wrapper .text { padding: 20px; }
:is(#newsWrapper, .homepage-blog-wrapper) .news-item {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

/* ============================================================
   TAB NAVIGACE + ŘAZENÍ
   ============================================================ */

/* společný wrapper */
.shp-tabs-holder {
  background: #f8f7ff;
  border: 1px solid #e4e2fd;
  border-radius: 100px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}

/* oba seznamy tabů */
#homepage-tabs,
#p-detail-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

#homepage-tabs .shp-tab,
#p-detail-tabs .shp-tab {
  display: flex;
}

/* ------------------------------------------------ */
/* Výchozí vzhled - homepage + detail + řazení */
/* ------------------------------------------------ */

#homepage-tabs .shp-tab-link,
#p-detail-tabs .shp-tab-link,
.listSorting__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;

  color: #5254c0;
  text-decoration: none !important;

  padding: 9px 20px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  background: transparent;

  transition:
    background .22s cubic-bezier(.22,1,.36,1),
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease;

  white-space: nowrap;
  cursor: pointer;
}

/* Hover */

#homepage-tabs .shp-tab-link:hover,
#p-detail-tabs .shp-tab-link:hover,
.listSorting__control:hover {
  background: #ededfe;
  color: #3730a3;
  border-color: #c7c8fd;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Aktivní */

#homepage-tabs .shp-tab.active .shp-tab-link,
#p-detail-tabs .shp-tab.active .shp-tab-link,
.listSorting__control--current {
  background: linear-gradient(135deg,#797BF8 0%,#5254c0 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(121,123,248,.35);
}

/* Aktivní hover */

#homepage-tabs .shp-tab.active .shp-tab-link:hover,
#p-detail-tabs .shp-tab.active .shp-tab-link:hover,
.listSorting__control--current:hover {
  background: linear-gradient(135deg,#6a6ce8 0%,#4244b0 100%);
  box-shadow:0 6px 18px rgba(121,123,248,.45);
}

/* navigace na mobilu */
.navigation-btn {
  display: none !important; /* skryjeme hamburger — tabu máme málo */
}
.hidden-links { display: none !important; }

/* responsivita — na úzkých obrazovkách přeskočí na wrap */
@media (max-width: 600px) {
  .shp-tabs-holder {
    border-radius: 20px;
    padding: 6px;
    width: 100%;
    justify-content: center;
  }
  #homepage-tabs.shp-tabs.homepage-tabs {
    justify-content: center;
  }
  #homepage-tabs.shp-tabs .shp-tab-link {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ============================================================
   CENTROVÁNÍ TAB NAVIGACE
   Funguje pro: #homepage-tabs i #p-detail-tabs
   ============================================================ */

/* Wrapper řádku — flex + center pro oba výskyty */
.shp-tabs-row.responsive-nav,
.col-sm-12.shp-tabs-row.responsive-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
}

/* Holder se neroztahuje přes celou šířku — jen tolik, kolik potřebuje */
.shp-tabs-holder {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================================
   UI/UX VYLEPŠENÍ — Verze 3.0
   1. Hodnocení badge · 2. Flags · 4. Produkt hover zoom
   5. Footer newsletter · 6. Dostupnost badge · 7. Blog
   8. Aktivní navigace · 9. Carousel · 10. Košík mini-karty
   ============================================================ */

/* ── 1. HODNOCENÍ — zlatý pill badge ── */

.product .product-ratings,
.p-cat .product-ratings,
.p .product-ratings {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff9ec;
  border: 1px solid #fde68a;
  border-radius: 100px;
  padding: 3px 10px 3px 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  line-height: 1;
}
.product .product-ratings .ratings-count,
.p .product-ratings .ratings-count {
  font-size: 11px;
  color: #b45309;
  font-weight: 600;
}
.product .product-ratings .stars,
.p .product-ratings .stars { font-size: 12px; line-height: 1; }

.type-detail .product-ratings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff9ec;
  border: 1px solid #fde68a;
  border-radius: 100px;
  padding: 5px 14px 5px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
}

/* ── 2. FLAGS — pill badges ── */

.flag {
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  padding: 4px 12px !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.flag.flag-new, .flag-new {
  background: linear-gradient(135deg, #797BF8, #5254c0) !important;
  color: #fff !important;
}
.flag.flag-action, .flag-action, .flag.flag-sale {
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  color: #fff !important;
}
.flag.flag-gift {
  background: #F7A12A !important;
  color: #fff !important;
}
.bool-freeshipping {
  background: linear-gradient(135deg, #5475BA, #334155) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
}

/* ── 4. PRODUKT HOVER — zoom obrázku ── */

.product .p .image,
.p-cat .image,
.product-image-wrapper { overflow: hidden; border-radius: 12px; }

.product .p .image img,
.p-cat .image img,
.product-image-wrapper img {
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  display: block;
  width: 100%;
}
.product .p:hover .image img,
.p-cat:hover .image img,
.product:hover .product-image-wrapper img {
  transform: scale(1.05);
  opacity: .95;
}
.product .p {
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    border-color .25s ease !important;
}
.product .p:hover { border-color: #dde1f7 !important; }

/* ── 5. FOOTER NEWSLETTER — pill input + fialové CTA ── */

.footer-newsletter { padding: 56px 24px 32px; }
.footer-newsletter h2,
.footer-newsletter .newsletter-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
  letter-spacing: -.3px;
}
.footer-newsletter p,
.footer-newsletter .newsletter-description {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
  line-height: 1.65;
}
.footer-newsletter form,
.footer-newsletter .newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.footer-newsletter input[type="email"],
.footer-newsletter .newsletter-email {
  flex: 1;
  min-width: 200px;
  border: 1.5px solid #dde1f7;
  border-radius: 100px;
  padding: 12px 20px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  color: #334155;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}
.footer-newsletter input[type="email"]:focus,
.footer-newsletter .newsletter-email:focus {
  border-color: #797BF8;
  box-shadow: 0 0 0 3px rgba(121,123,248,.12);
}
.footer-newsletter input[type="submit"],
.footer-newsletter button[type="submit"],
.footer-newsletter .newsletter-submit {
  background: linear-gradient(135deg, #797BF8, #5254c0) !important;
  color: #fff !important;
  border: none;
  border-radius: 100px;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(121,123,248,.3);
  white-space: nowrap;
}
.footer-newsletter input[type="submit"]:hover,
.footer-newsletter button[type="submit"]:hover,
.footer-newsletter .newsletter-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(121,123,248,.4);
}

/* ── 6. DOSTUPNOST — zelený pill badge ── */

.availability, .p-cat-availability {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px;
  border-radius: 100px;
  line-height: 1.4;
  margin-top: 5px;
}
.availability.in-stock,
.availability.availability-in-stock,
.p-cat-availability.in-stock,
[class*="availability"]:not(.out-of-stock):not(.unavailable) {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0;
}
.availability.out-of-stock,
.availability.availability-out-of-stock,
.p-cat-availability.out-of-stock {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
}
.availability.on-request,
.availability.availability-on-request {
  background: #fef9c3 !important;
  color: #854d0e !important;
  border: 1px solid #fef08a;
}

/* ── 7. BLOG — separátory a typografie ── */

:is(#newsWrapper, .homepage-blog-wrapper) .news-item .date,
:is(#newsWrapper, .homepage-blog-wrapper) .date {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #797BF8;
  background: #ededfe;
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
:is(#newsWrapper, .homepage-blog-wrapper) .news-item .name,
:is(#newsWrapper, .homepage-blog-wrapper) .news-item h3,
:is(#newsWrapper, .homepage-blog-wrapper) .news-item h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  margin-bottom: 8px;
  transition: color .2s ease;
}
:is(#newsWrapper, .homepage-blog-wrapper) .news-item:hover h3,
:is(#newsWrapper, .homepage-blog-wrapper) .news-item:hover h2 { color: #797BF8; }

:is(#newsWrapper, .homepage-blog-wrapper) .news-item .perex,
:is(#newsWrapper, .homepage-blog-wrapper) .news-item p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}
:is(#newsWrapper, .homepage-blog-wrapper) .news-item .more,
:is(#newsWrapper, .homepage-blog-wrapper) .news-item .read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #797BF8;
  margin-top: 12px;
  text-decoration: none !important;
  transition: gap .2s ease;
}
:is(#newsWrapper, .homepage-blog-wrapper) .news-item .more:hover,
:is(#newsWrapper, .homepage-blog-wrapper) .news-item .read-more:hover { gap: 8px; }

:is(#newsWrapper, .homepage-blog-wrapper) .news-item {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease !important;
}
:is(#newsWrapper, .homepage-blog-wrapper) .news-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1) !important;
}

/* ── 8. NAVIGACE — aktivní položka ── */

#navigation .navigation-level-1 > li.active > a,
#navigation .navigation-level-1 > li.current > a,
nav .navigation-level-1 > .active > a,
nav .navigation-level-1 > .current > a {
  color: #797BF8 !important;
  font-weight: 700;
  position: relative;
}
#navigation .navigation-level-1 > li.active > a::after,
#navigation .navigation-level-1 > li.current > a::after,
nav .navigation-level-1 > .active > a::after,
nav .navigation-level-1 > .current > a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #797BF8, #5254c0);
  border-radius: 2px;
}
#navigation .navigation-level-1 > li > a,
nav .navigation-level-1 > li > a {
  transition: color .2s ease;
  position: relative;
}
#navigation .navigation-level-1 > li:not(.active) > a:hover,
nav .navigation-level-1 > li:not(.active) > a:hover { color: #5254c0 !important; }

/* ── 9. CAROUSEL — pill šipky + tečky ── */

.carousel-control {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1.5px solid rgba(121,123,248,.2) !important;
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.carousel-control::before {
  top: auto !important;
  background: transparent !important;
  color: #797BF8;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.carousel-control:hover {
  background: #797BF8 !important;
  border-color: #797BF8 !important;
  box-shadow: 0 6px 20px rgba(121,123,248,.35) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.carousel-control:hover::before { color: #fff; }
.carousel-control.left  { left: 12px !important; }
.carousel-control.right { right: 12px !important; }

.carousel-indicators li {
  background: rgba(121,123,248,.3) !important;
  border: none !important;
  border-radius: 100px !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 3px !important;
  transition: all .25s ease !important;
}
.carousel-indicators .active {
  background: #797BF8 !important;
  width: 22px !important;
}

/* ── 10. KOŠÍK — mini-karty produktů ── */

.cart-inner .cart-products .cart-product,
.cart-popup .cart-product,
.sidebar-cart .cart-product {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f8f9ff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  transition: border-color .2s ease;
}
.cart-inner .cart-products .cart-product:hover,
.cart-popup .cart-product:hover { border-color: #dde1f7; }

.cart-inner .cart-products .cart-product .image img,
.cart-popup .cart-product .image img,
.sidebar-cart .cart-product .image img {
  border-radius: 10px !important;
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eee;
  padding: 4px;
}
.cart-inner .cart-products .cart-product .name,
.cart-popup .cart-product .name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  margin-bottom: 4px;
}
.cart-inner .cart-products .cart-product .price,
.cart-popup .cart-product .price {
  font-size: 14px;
  font-weight: 700;
  color: #797BF8;
}
.cart-inner .total-price,
.cart-popup .total-price,
.cart-total {
  background: #ededfe;
  border: 1px solid #dde1f7;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
}
.cart-inner .total-price .price-value,
.cart-popup .total-price .price-value {
  color: #797BF8;
  font-size: 17px;
}
.cart-inner .btn-cart-go,
.cart-popup .btn-to-cart,
.sidebar-cart .btn-checkout {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #797BF8, #5254c0) !important;
  color: #fff !important;
  border: none;
  border-radius: 100px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  margin-top: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(121,123,248,.3);
  text-decoration: none !important;
}
.cart-inner .btn-cart-go:hover,
.cart-popup .btn-to-cart:hover,
.sidebar-cart .btn-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(121,123,248,.4);
}

/* ── MOBILNÍ DOPLŇKY ── */

@media (max-width: 600px) {
  .footer-newsletter form,
  .footer-newsletter .newsletter-form { flex-direction: column; }
  .footer-newsletter input[type="email"],
  .footer-newsletter .newsletter-email { width: 100%; }
  .footer-newsletter input[type="submit"],
  .footer-newsletter button[type="submit"] { width: 100%; text-align: center; }
  .carousel-control { width: 36px !important; height: 36px !important; }
  .carousel-control::before { font-size: 14px; }

  /* Tab navigace na mobilu */
  .shp-tabs-holder {
    border-radius: 20px !important;
    padding: 6px !important;
    width: auto !important;
  }
  #homepage-tabs, #p-detail-tabs { flex-wrap: wrap; justify-content: center; }
  #homepage-tabs .shp-tab-link,
  #p-detail-tabs .shp-tab-link { font-size: 13px; padding: 8px 14px; }
}

/* ============================================================
   VERZE 3.1 — Sleva badge + sekundární tlačítka
   ============================================================ */

/* ── SLEVA BADGE — přepracovaný flag-discount ── */

.flag.flag-discount {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 8px rgba(34,197,94,.3);
  text-transform: none;
  white-space: nowrap;
}

/* Původní cena "od X Kč" — přeškrtnutá, průhledná bílá */
.flag.flag-discount .price-standard {
  font-size: 10px;
  font-weight: 500;
  opacity: .75;
  text-decoration: line-through;
  color: #fff;
}
.flag.flag-discount .price-standard span {
  color: #fff;
  text-decoration: line-through;
}

/* Procento slevy — větší, výrazné */
.flag.flag-discount .price-save {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}

/* Oddělovač "až" */
.flag.flag-discount {
  gap: 4px;
}

/* ── SEKUNDÁRNÍ TLAČÍTKA — zaoblená pill verze ── */

/* Základní btn-secondary */
.btn.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary {
  border-radius: 100px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600 !important;
  font-size: 14px;
  padding: 10px 24px !important;
  border: 1.5px solid #dde1f7 !important;
  background: #fff !important;
  color: #5254c0 !important;
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .18s ease,
    box-shadow .22s ease !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none !important;
  line-height: 1.3;
}
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover {
  background: #ededfe !important;
  border-color: #797BF8 !important;
  color: #3730a3 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(121,123,248,.15);
  text-decoration: none !important;
}

/* "Nahoru" tlačítko — menší, diskrétnější */
a.goToTop__button.btn.btn-secondary {
  font-size: 13px !important;
  padding: 8px 20px !important;
  opacity: .8;
}
a.goToTop__button.btn.btn-secondary:hover {
  opacity: 1;
}

/* "Načíst dalších" tlačítko — výraznější, centrované */
.loadMore__button.btn.btn-secondary {
  font-size: 15px !important;
  padding: 13px 36px !important;
  border-color: #c7c8fd !important;
  background: #f8f7ff !important;
  box-shadow: 0 2px 10px rgba(121,123,248,.1);
}
.loadMore__button.btn.btn-secondary:hover {
  background: #ededfe !important;
  box-shadow: 0 6px 20px rgba(121,123,248,.2);
}
.loadMore {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

/* "Zobrazit více" — btn-conversion varianta (hodnocení obchodu) */
a.btn.btn-conversion {
  border-radius: 100px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700 !important;
  font-size: 14px;
  padding: 11px 28px !important;
  background: linear-gradient(135deg, #797BF8, #5254c0) !important;
  color: #fff !important;
  border: none !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  box-shadow: 0 4px 14px rgba(121,123,248,.3);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.btn.btn-conversion:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(121,123,248,.4) !important;
  text-decoration: none !important;
}

/* ============================================================
   VERZE 3.2 — Oprava sleva badge + category-header border
   ============================================================ */

/* ── SLEVA BADGE — oprava přetékání textu ── */

.flag.flag-discount {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px 5px !important;
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  color: #fff !important;
  border-radius: 14px !important;      /* zaoblený obdélník místo circle */
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  line-height: 1.35 !important;
  box-shadow: 0 2px 8px rgba(34,197,94,.3);
  text-transform: none;
  white-space: normal !important;      /* povolíme zalomení */
  max-width: 120px;                    /* omezíme šířku */
  text-align: center;
}

/* "od" — malý text před původní cenou */
.flag.flag-discount {
  font-size: 10px;
}

/* Původní cena přeškrtnutá */
.flag.flag-discount .price-standard,
.flag.flag-discount .price-standard span {
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: .75;
  text-decoration: line-through !important;
  color: #fff !important;
}

/* Procento slevy — největší a tučné */
.flag.flag-discount .price-save {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.3px;
  display: block;
  width: 100%;
  text-align: center;
}

/* ── CATEGORY HEADER — odstranění šedého podtržení ── */

.category-header {
  border-bottom: none !important;
}

/* ============================================================
   VERZE 3.3 — Sleva badge fix · Dostupnost fix · Detail+Cart btns
   ============================================================ */

/* ── SLEVA BADGE — kompaktnější layout, menší řádkování ── */

.flag.flag-discount {
  display: inline-grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1px !important;
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 7px 11px !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 8px rgba(34,197,94,.3);
  white-space: normal !important;
  text-align: center !important;
  min-width: 64px;
  max-width: 80px;
}

.flag.flag-discount .price-standard,
.flag.flag-discount .price-standard span {
  font-size: 9px !important;
  font-weight: 500 !important;
  opacity: .75;
  text-decoration: line-through !important;
  color: #fff !important;
  line-height: 1.2 !important;
  display: block;
}

.flag.flag-discount .price-save {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.3px;
  display: block;
  line-height: 1.2 !important;
}

/* ── DOSTUPNOST — odstranění vnitřního rámečku u "(>5 pcs)" ── */

/* Reset všech vnořených span/elementů v dostupnosti */
.availability *,
.p-cat-availability * {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Celý badge dostupnosti — čistý pill bez vnořených rámečků */
.availability,
.p-cat-availability {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  line-height: 1.4 !important;
  margin-top: 5px !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

/* Varianta — není skladem */
.availability.out-of-stock,
.availability.availability-out-of-stock,
.p-cat-availability.out-of-stock {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

/* Varianta — na objednávku */
.availability.on-request,
.availability.availability-on-request {
  background: #fef9c3 !important;
  color: #854d0e !important;
  border: 1px solid #fef08a !important;
}

/* ── TLAČÍTKA DETAIL + ADD TO CART — sjednocení ── */

/* Detail — pill, fialový outline */
.p-tools .btn.btn-primary,
a.btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  border-radius: 100px !important;
  border: 1.5px solid #797BF8 !important;
  background: #fff !important;
  color: #5254c0 !important;
  text-decoration: none !important;
  transition:
    background .2s ease,
    color .2s ease,
    transform .18s ease,
    box-shadow .2s ease !important;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.p-tools .btn.btn-primary:hover,
a.btn.btn-primary:hover {
  background: #797BF8 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(121,123,248,.25) !important;
  text-decoration: none !important;
}

/* Add to cart — pill, fialový gradient, sjednocený s "Zobrazit více" */
.btn.btn-cart.add-to-cart-button,
button.btn-cart.add-to-cart-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  border-radius: 100px !important;
  border: none !important;
  background: linear-gradient(135deg, #797BF8, #5254c0) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition:
    transform .18s ease,
    box-shadow .2s ease !important;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(121,123,248,.28) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btn.btn-cart.add-to-cart-button:hover,
button.btn-cart.add-to-cart-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(121,123,248,.4) !important;
}

/* span uvnitř tlačítka — reset */
.btn.btn-cart.add-to-cart-button span,
button.btn-cart.add-to-cart-button span {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Wrapper tlačítek — hezké zarovnání vedle sebe */
.p-tools {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}

/* ============================================================
   VERZE 3.4 — Blog grid · Benefit banner · Welcome wrapper
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   BLOG — mřížka s mezerami a vylepšené karty
   ────────────────────────────────────────────────────────── */

/* Wrapper sekce blogů */
.homepage-blog-wrapper.blog-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding: 8px 0 40px !important;
  align-items: start;
}

/* Nadpis sekce — přes celou šířku */
.homepage-blog-wrapper.blog-wrapper .homepage-group-title {
  grid-column: 1 / -1;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -.3px;
  padding-top: 0;
  margin-bottom: 4px;
}

/* Každá karta článku */
.homepage-blog-wrapper.blog-wrapper .news-item {
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  border: 1px solid #f1f5f9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease !important;
  padding: 0 !important;
}
.homepage-blog-wrapper.blog-wrapper .news-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.11) !important;
}

/* Odkaz uvnitř karty */
.homepage-blog-wrapper.blog-wrapper .news-item > a {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none !important;
  color: inherit;
}

/* Obrázek */
.homepage-blog-wrapper.blog-wrapper .news-item .image {
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 16/9;
  flex-shrink: 0;
}
.homepage-blog-wrapper.blog-wrapper .news-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.homepage-blog-wrapper.blog-wrapper .news-item:hover .image img {
  transform: scale(1.05);
}

/* Text sekce */
.homepage-blog-wrapper.blog-wrapper .news-item .text {
  padding: 18px 20px 20px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

/* Název článku */
.homepage-blog-wrapper.blog-wrapper .news-item .text .title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  display: block;
  transition: color .2s ease;
}
.homepage-blog-wrapper.blog-wrapper .news-item:hover .text .title {
  color: #797BF8;
}

/* Popis / perex */
.homepage-blog-wrapper.blog-wrapper .news-item .text .description {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Číst článek" odkaz */
.homepage-blog-wrapper.blog-wrapper .news-item .text .read-article {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #797BF8;
  margin-top: auto;
  padding-top: 6px;
  text-decoration: none !important;
}
.homepage-blog-wrapper.blog-wrapper .news-item .text .read-article::after {
  content: '→';
  font-size: 13px;
  transition: transform .2s ease;
}
.homepage-blog-wrapper.blog-wrapper .news-item:hover .text .read-article::after {
  transform: translateX(4px);
}

/* Pátý článek — přes celou šířku nebo 2 sloupce */
.homepage-blog-wrapper.blog-wrapper .news-item:nth-child(6) {
  grid-column: span 1;
}

/* Responsivita blogu */
@media (max-width: 1100px) {
  .homepage-blog-wrapper.blog-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .homepage-blog-wrapper.blog-wrapper {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   WELCOME WRAPPER — posun níže (za blog)
   Shoptet vykresluje welcome-wrapper před produkty,
   pomocí order ho vizuálně přesuneme za blog sekci.
   ────────────────────────────────────────────────────────── */

/* Hlavní content wrapper — flex sloupec */
#content .homepage-content,
.homepage-content {
  display: flex !important;
  flex-direction: column !important;
}

/* Welcome wrapper — pošleme na konec za blog */
.welcome-wrapper {
  order: 99 !important;
  margin-top: 16px;
}

/* Blog wrapper — těsně za produkty */
.homepage-blog-wrapper {
  order: 50 !important;
}

/* ──────────────────────────────────────────────────────────
   BENEFIT BANNER — tmavý kontejner jako na screenshotu
   ────────────────────────────────────────────────────────── */

.container.container--bannersBenefit {
  margin: 32px auto;
  max-width: 1200px;
  padding: 0 16px;
}

/* Celý benefit pruh — tmavý zaoblený kontejner */
.benefitBanner.position--benefitHomepage {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  background: #111827 !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Každá položka */
.benefitBanner__item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  padding: 22px 24px !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  transition: background .2s ease;
  text-decoration: none !important;
}
.benefitBanner__item:last-child {
  border-right: none !important;
}
.benefitBanner__item:hover {
  background: rgba(255,255,255,.04) !important;
}

/* Obrázek/ikona */
.benefitBanner__picture {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(121,123,248,.15) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.benefitBanner__img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* ikonky bílé na tmavém pozadí */
  border-radius: 0 !important;
}

/* Obsah textu */
.benefitBanner__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

/* Název */
.benefitBanner__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  display: block;
}

/* Popis */
.benefitBanner__data {
  font-size: 12px !important;
  color: rgba(255,255,255,.45) !important;
  line-height: 1.5 !important;
}

/* Odkaz — bez podtržení */
a.benefitBanner__link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Responsivita benefit banneru */
@media (max-width: 900px) {
  .benefitBanner.position--benefitHomepage {
    flex-direction: column !important;
    border-radius: 16px !important;
  }
  .benefitBanner__item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    width: 100% !important;
  }
  .benefitBanner__item:last-child {
    border-bottom: none !important;
  }
}

/* ============================================================
   VERZE 3.5 — Oprava blog grid · Benefit fialový · Welcome fix
   ============================================================ */

/* ── RESET špatného grid layoutu z v3.4 ── */
.homepage-blog-wrapper.blog-wrapper {
  display: block !important;
  padding: 8px 0 40px !important;
}
.homepage-blog-wrapper.blog-wrapper .homepage-group-title {
  grid-column: unset !important;
}

/* ── BLOG — správný grid přes row wrapper ── */

/* Shoptet vykresluje news-item přímo jako děti .blog-wrapper.row,
   ale .row má float layout — musíme ho přepsat bezpečně */
.homepage-blog-wrapper.blog-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important; /* titulek přes plnou šířku */
  gap: 0 !important;
}

/* Titulek — první child, přes plnou šířku */
.homepage-blog-wrapper.blog-wrapper > .homepage-group-title {
  grid-column: 1 / -1 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 20px;
  padding-top: 0;
}

/* Vnitřní wrapper článků — nový flex grid */
.homepage-blog-wrapper.blog-wrapper::after {
  content: none !important;
}

/* Kontejner všech news-item — použijeme pseudo wrapper přes CSS columns */
.homepage-blog-wrapper.blog-wrapper {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

/* Titulek zabere celý řádek */
.homepage-blog-wrapper.blog-wrapper > .homepage-group-title {
  grid-column: 1 / -1 !important;
}

/* Každá karta */
.homepage-blog-wrapper.blog-wrapper > .news-item {
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.07) !important;
  border: 1px solid #f0f0f8 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;        /* zabraňuje přetečení v gridu */
  width: auto !important;         /* reset případného float width */
  float: none !important;         /* reset Shoptet float */
  margin: 0 !important;           /* reset Shoptet margin */
  padding: 0 !important;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease !important;
}
.homepage-blog-wrapper.blog-wrapper > .news-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.11) !important;
}

/* Odkaz uvnitř — flex sloupec */
.homepage-blog-wrapper.blog-wrapper > .news-item > a {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100%;
}

/* Obrázek */
.homepage-blog-wrapper.blog-wrapper > .news-item .image {
  overflow: hidden !important;
  flex-shrink: 0 !important;
  aspect-ratio: 16/9 !important;
  border-radius: 0 !important;
}
.homepage-blog-wrapper.blog-wrapper > .news-item .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1) !important;
}
.homepage-blog-wrapper.blog-wrapper > .news-item:hover .image img {
  transform: scale(1.05) !important;
}

/* Text sekce */
.homepage-blog-wrapper.blog-wrapper > .news-item .text {
  padding: 16px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 6px !important;
}

/* Název */
.homepage-blog-wrapper.blog-wrapper > .news-item .text .title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  display: block !important;
  transition: color .2s ease !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.homepage-blog-wrapper.blog-wrapper > .news-item:hover .text .title {
  color: #797BF8 !important;
}

/* Perex — max 2 řádky */
.homepage-blog-wrapper.blog-wrapper > .news-item .text .description {
  font-size: 12px !important;
  color: #94a3b8 !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}

/* Číst článek */
.homepage-blog-wrapper.blog-wrapper > .news-item .text .read-article {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #797BF8 !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  text-decoration: none !important;
}
.homepage-blog-wrapper.blog-wrapper > .news-item .text .read-article::after {
  content: '→' !important;
  transition: transform .2s ease !important;
}
.homepage-blog-wrapper.blog-wrapper > .news-item:hover .text .read-article::after {
  transform: translateX(4px) !important;
}

/* Responsivita */
@media (max-width: 1100px) {
  .homepage-blog-wrapper.blog-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .homepage-blog-wrapper.blog-wrapper {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── WELCOME WRAPPER — přesun za blog pomocí order ──
   Shoptet používá .homepage-content jako flex container,
   ale ne vždy. Zkusíme obě varianty. */

/* Varianta A — přímý flex na #content */
#content {
  display: flex !important;
  flex-direction: column !important;
}
.welcome-wrapper {
  order: 100 !important;
}
.homepage-blog-wrapper {
  order: 60 !important;
}
/* Produktové skupiny necháme v přirozeném pořadí */
.homepage-products {
  order: 10 !important;
}
.container--bannersBenefit {
  order: 5 !important;
}
.homepage-latest-contribution-full-width,
.store-rating-full-width {
  order: 70 !important;
}

/* ── BENEFIT BANNER — fialový gradient ── */

.benefitBanner.position--benefitHomepage {
  background: linear-gradient(135deg, #5254c0 0%, #3730a3 100%) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 !important;
  box-shadow: 0 8px 32px rgba(82,84,192,.25) !important;
}

.benefitBanner__item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  padding: 22px 26px !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  transition: background .2s ease !important;
}
.benefitBanner__item:last-child {
  border-right: none !important;
}
.benefitBanner__item:hover {
  background: rgba(255,255,255,.07) !important;
}

/* Ikona — světlý kruh */
.benefitBanner__picture {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,.15) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.benefitBanner__img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

/* Obsah */
.benefitBanner__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.benefitBanner__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  display: block !important;
}
.benefitBanner__data {
  font-size: 12px !important;
  color: rgba(255,255,255,.6) !important;
  line-height: 1.5 !important;
}

/* Odkaz bez podtržení */
a.benefitBanner__link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  text-decoration: none !important;
}

/* Responsivita benefit */
@media (max-width: 900px) {
  .benefitBanner.position--benefitHomepage {
    flex-direction: column !important;
    border-radius: 16px !important;
  }
  .benefitBanner__item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    width: 100% !important;
  }
  .benefitBanner__item:last-child {
    border-bottom: none !important;
  }
}