/* bandurka.cz theme, bandurka7.css = bandurka6.css with the palette as variables + fixes-2026-11-r1.css (design review round 1).
   One navy, one blue, one red: change a colour here, it changes everywhere. */
:root {
    --bnd-navy-deep: #12286E;   /* header gradient end, footer */
    --bnd-navy: #1e3a8a;        /* titles, buttons, menu */
    --bnd-blue: #1d4ed8;        /* links in articles */
    --bnd-red: #E63946;         /* buy, sale, active, title lines */
    --bnd-green: #15803d;       /* in stock */
    --bnd-grey: #f2f4f9;        /* page background */
}


/* ===== base (was bandurka2.css) ===== */
body {
    color: #333333;
    background-color: var(--bnd-grey);
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* notifikace */
.msg.msg-error, .msg.msg-success, .msg.msg-info {
    width: 70%;
    border-radius: 7px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

/* top bar */
.navigationActions li a {
    color: var(--bnd-navy);
    text-transform: uppercase;
    font-weight: bold;
}

.top-navigation-menu {
    display: none !important;
}

.navigation-in > ul > li {
    border-left: none;
}

.navigation-in > ul > li.exp > a, .navigation-in > ul > li > a:hover {
    background-color: var(--bnd-red);
    color: #ffffff;
}

.link-like, a {
    transition: all .1s ease-out;
}

.top-navigation-bar {
    padding-top: 5px;
    background-color: var(--bnd-navy);
    border-bottom-width: 0;
    border-top-style: none;
}

.top-navigation-contacts {
    background-color: var(--bnd-navy);
}

.btn.cart-count:before {
    color: #ffffff;
}

.navigation-buttons a[data-target=cart] i {
    background-color: var(--bnd-red);
    color: #ffffff;
}

.navigation-buttons a[data-target=cart] span, .navigation-buttons a[data-target=cart] span:hover {
    color: #ffffff;
}

.project-email, .top-nav-button {
    color: #ffffff !important;
    font-size: 15px;
}

.top-nav-button {
    text-transform: uppercase;
}

/* categories nav bar and subcategories */
#category-header {
    border-radius: 7px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

li[class^="menu-item-"] a {
    font-weight: 500;
    text-transform: uppercase !important;
    font-size: 1.8rem;
}

li[class^="menu-item-"] a b {
    font-weight: bold !important;
    text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}

li[class^="menu-item-"] div a[data-testid="headerMenuItem"] span {
    color: var(--bnd-red);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

ul[class^="subcategories"] li {
    font-weight: bold;
    text-transform: uppercase !important;
}

ul[class^="subcategories"] li a {
    color: #333333;
    border-radius: 7px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* btns , inputs */
input,
button.btn.btn-default, a.btn.btn-default, span.btn.btn-default {
    border-radius: 7px !important;
}

a.btn.btn-primary, button.btn.btn-cart {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 7px !important;
    border-color: #ffffff;
}

button.btn.btn-cart {
    font-weight: bold;
}

button.btn.btn-cart span {
    text-transform: uppercase !important;
}

.btn.add-to-cart-button {
    font-weight: bold;
    text-transform: uppercase !important;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.btn.add-to-cart-button::before {
    content: none;
}

.btn.add-to-cart-button::after {
    content: "🛒";
    font-size: 15px;
    margin-right: -3px;
    margin-top: -3px;
    margin-left: 9px;
}

/* fonts */
.availability, .availability-label {
    font-weight: bold;
    text-transform: uppercase !important;
}

.availability-amount {
    display: none !important;
}

.p-detail-inner-header h1, .category-title {
    color: var(--bnd-navy);
}

/* product */
.price-final {
    color: var(--bnd-red);
    margin-bottom: 3px;
}

.p-in-in a span {
    font-weight: 500;
}

/* font-weight, color and uppercase come from "header extras" below */
.homepage-group-title {
    text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
    font-size: 32px !important;
    margin-top: 0 !important;
}

.more-items-trigger {
    display: none;
}

.contact-box ul li > span {
    text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}

.contact-box ul li > span.mail {
    color: green;
}

.contact-box ul li > span.facebook {
    color: blue;
}

.contact-box ul li > span.instagram {
    color: purple;
}

.contact-box ul li > span.youtube {
    color: red;
}

.contact-box ul li > span.tiktok {
    color: black;
}

.p-short-description, .basic-description {
    font-size: 12pt;
}

#signature a {
    display: none !important;
}

a[data-testid="signin"]::after {
    content: "\e922";
    font-family: "shoptet";
    margin-left: 5px;
}

/*media min*/
@media (min-width: 768px) {
    li[class^="menu-item-"] a {
        border-radius: 7px 7px 0 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        color: #ffffff;
    }

    .carousel-inner div a img,
    .banner-wrapper a img {
        border-radius: 7px;
    }
}

@media (max-width: 767px) {
    .carousel-inner {
        margin-top: 5px;
        padding: 5px;
        border-radius: 20px;
    }

    .banner-wrapper {
        display: none;
    }

    #header .site-name img {
        max-width: 160px;
        padding-bottom: 0;
    }

    .menu-level-3 {
        display: none !important;
    }

    li[class^="menu-item-"] div a[data-testid="headerMenuItem"] span {
        color: var(--bnd-navy);
        text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
    }

    ul.menu-level-2 > li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    ul.menu-level-2 > li:last-child {
        border-bottom: none;
    }

    .navigation-in ul.menu-level-2 li a {
        padding-left: 30px !important;
    }

    .navigation-buttons > a.cart-count {
        margin-top: 3px;
    }

    .navigation-home-icon-wrapper:before {
        content: "";
    }

    .breadcrumbs-wrapper {
        display: contents;
    }

    .breadcrumbs {
        margin-left: 6px;
        font-size: 15px;
        display: block;
        margin-bottom: -15px;
        margin-top: -15px;
    }

    #navigation-first {
        display: none;
    }

    span[data-testid="breadcrumbsLastLevel"] {
        display: none !important;
    }

    .breadcrumbs > span:not(:first-child):not(:last-child) > a::before {
        content: " >";
        color: #999;
        margin: 0 5px;
        background-color: white;
    }
}

ul .menu-level-3 {
    padding-top: 2px;
    overflow: visible !important;
}

span.toggle-contacts a {
    color: #ffffff;
}

/* gbs */
.variant-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.variant-item {
    padding: 8px;
    border-radius: 8px;
    background-color: #f1f1f1;
    cursor: pointer;
    text-align: center;
    width: 90px;
    height: 70px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.variant-item:hover {
    background-color: #e0e0e0;
}

.variant-item.selected {
    background-color: var(--bnd-navy);
    color: white;
}

/* ===== mobile menu icons (was bandurka_mobile_menu3.css) ===== */
@media (max-width: 767px) {
    a[data-testid="headerMenuItem"]::after {
        content: "";
        display: inline-block;
        width: 19px;
        height: 14px;
        margin-left: 3px;
        vertical-align: middle;
        background-size: cover;
    }

    a[data-testid="headerMenuItem"][href="/hokej-nhl/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/27913.png');
    }

    a[data-testid="headerMenuItem"][href="/hokej-cesko/"]::after,
    a[data-testid="headerMenuItem"][href="/fotbal-cesko/"]::after {
        background-image: url('https://flagcdn.com/16x12/cz.png');
    }

    a[data-testid="headerMenuItem"][href="/hokej-slovensko/"]::after,
    a[data-testid="headerMenuItem"][href="/fotbal-slovensko/"]::after {
        background-image: url('https://flagcdn.com/16x12/sk.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-uefa/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/uefalogo.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-fifa/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/29934.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-anglie/"]::after {
        background-image: url('https://flagcdn.com/16x12/gb-eng.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-nemecko/"]::after {
        background-image: url('https://flagcdn.com/16x12/de.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-spanelsko/"]::after {
        background-image: url('https://flagcdn.com/16x12/es.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-francie/"]::after {
        background-image: url('https://flagcdn.com/16x12/fr.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-usa/"]::after {
        background-image: url('https://flagcdn.com/16x12/us.png');
    }

    a[data-testid="headerMenuItem"][href="/fotbal-italie/"]::after {
        background-image: url('https://flagcdn.com/16x12/it.png');
    }

    a[data-testid="headerMenuItem"][href="/ufc/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/35865.png');
    }

    a[data-testid="headerMenuItem"][href="/basketbal/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/35866.png');
    }

    a[data-testid="headerMenuItem"][href="/formule-1/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/35872.png');
    }

    a[data-testid="headerMenuItem"][href="/americky-fotbal/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/35875.png');
    }

    a[data-testid="headerMenuItem"][href="/baseball/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/35874.png');
    }

    a[data-testid="headerMenuItem"][href="/golf/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/35867.png');
    }

    a[data-testid="headerMenuItem"][href="/tenis/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/41602.png');
    }

    a[data-testid="headerMenuItem"][href="/multi-sport/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/56504.png');
    }

    a[data-testid="headerMenuItem"][href="/pokemon/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/poke.png');
    }

    a[data-testid="headerMenuItem"][href="/magic-the-gathering/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36125.png');
    }

    a[data-testid="headerMenuItem"][href="/yu-gi-oh/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/55959.jpg');
    }

    a[data-testid="headerMenuItem"][href="/lorcana/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/55957.png');
    }

    a[data-testid="headerMenuItem"][href="/star-wars/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/sw.png');
    }

    a[data-testid="headerMenuItem"][href="/marvel/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36127.png');
    }

    a[data-testid="headerMenuItem"][href="/minecraft/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36135.png');
    }

    a[data-testid="headerMenuItem"][href="/garbage-pail-kids/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36139.png');
    }

    a[data-testid="headerMenuItem"][href="/naruto/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36314.png');
    }

    a[data-testid="headerMenuItem"][href="/one-piece/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/1000030625.png');
    }

    a[data-testid="headerMenuItem"][href="/fortnite/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36389.png');
    }

    a[data-testid="headerMenuItem"][href="/stumble-guys/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/1000030630.jpg');
    }

    a[data-testid="headerMenuItem"][href="/super-mario/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/36390.png');
    }

    a[data-testid="headerMenuItem"][href="/ninjago/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/39898.png');
    }

    a[data-testid="headerMenuItem"][href="/brawl-stars/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/52257.png');
    }

    a[data-testid="headerMenuItem"][href="/ostatni-serie/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/50600.jpg');
    }
}

/* ===== header extras (was the inline <style> in the Shoptet admin header) ===== */
label[for="deliveryCountryId"] {
    color: var(--bnd-navy);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 0 2px rgba(217,119,6,0.25);
}

label[for="deliveryCountryId"]::before {
    content: "🌍 ";
}

label[for="deliveryCountryId"]::after {
    content: " 🌍";
}

.benefitBanner__item {
    background: linear-gradient(
        135deg,
        rgba(30,66,159,.04) 0%,
        rgba(25,55,145,.08) 100%
    );
    transform: scale(.99);

    border: 1px solid rgba(30,66,159,.12);
    border-radius: 18px;

    transition: all .25s ease;
}

.benefitBanner__item:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(18,40,110,.12),
        0 0 0 1px rgba(30,66,159,.15);
}

.benefitBanner__item img,
.benefitBanner__item svg {
    transition: transform .25s ease;
}

.benefitBanner__item:hover img,
.benefitBanner__item:hover svg {
    transform: scale(1.08);
}

            .homepage-group-title{
    text-align:center;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:3px;
    color:var(--bnd-navy);
}

.homepage-group-title:before,.homepage-group-title:after{
    content:"";
    display:inline-block;
    width:80px;
    height:2px;
    margin:0 20px;
    vertical-align:middle;
    background:var(--bnd-red);
}

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

            .category-title{
    text-align:center;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:3px;
    color:var(--bnd-navy);
}

.category-title:before, .category-title:after{
    content:"";
    display:inline-block;
    width:80px;
    height:2px;
    margin:0 20px;
    vertical-align:middle;
    background:var(--bnd-red);
}
}

.header-top .site-name img {
    max-height: 85px !important;
    width: auto;
}

#header {
  background: radial-gradient(
    ellipse at center,
    #1E429F 0%,
    #193791 35%,
    #122973 70%,
    #12286E 100%
  );
}

@media (max-width: 767px) {
  label[for="order4"] {
     display:none !important;
  }

  .top-navigation-bar {
  background: radial-gradient(
    ellipse at center,
    #1E429F 0%,
    #193791 35%,
    #122973 70%,
    #12286E 100%
  );
  }
}
.accordion {
  width: 100%;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  background-color: var(--bnd-navy);
  color: white;
  padding: 15px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: var(--bnd-navy-deep);
}

.accordion-header::after {
  content: '\25bc';
  float: right;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.accordion-header.active::after {
  transform: rotate(-180deg);
}

.accordion-content {
  display: none;
  padding: 15px;
  background-color: #f9f9f9;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.accordion-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.myTable table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
}

.myTable th {
  background: #2c3e50;
  color: white;
  padding: 8px;
}

.myTable td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.myTable tr:nth-child(even) {
  background: #f3f3f3;
}

  th.sortable {
    cursor: pointer;          /* indicates it’s clickable */
    position: relative;
  }

  th.sortable::after {
    content: " ⬍";            /* up/down arrow hint */
    font-size: 1em;
    color: #ccc;
    margin-left: 4px;
  }

  th.sortable:hover::after {
    color: #888;              /* highlight on hover */
  }
/* ===== Bandurka articles (bnd-*): shared look for blog/checklist articles, so the article HTML stays short
   (Shoptet's description field allows about 20 000 characters). Prefix bnd- = no clash with Shoptet classes. ===== */
.bnd { max-width: 960px; margin: 0 auto; color: #1f2937; line-height: 1.65; }
.bnd-hero { background: linear-gradient(135deg, var(--bnd-navy) 0%, var(--bnd-blue) 100%); border-radius: 16px; padding: 36px 24px; text-align: center; color: #fff; margin-bottom: 28px; }
.bnd-hero .bnd-eyebrow { margin: 0 0 8px; font-size: 15px; color: #bfdbfe; font-weight: 600; letter-spacing: .5px; }
.bnd-hero h1, .bnd-hero .bnd-title { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }
.bnd-hero .bnd-lead { font-size: 18px; margin: 0 auto; max-width: 680px; color: #dbeafe; }
.bnd a.bnd-link, .bnd p a { color: var(--bnd-blue); font-weight: 600; }
.bnd-nav { margin: 20px 0 28px; }
.bnd-nav a { display: inline-block; background: #eff6ff; color: var(--bnd-blue); text-decoration: none; padding: 8px 14px; border-radius: 999px; margin: 0 6px 8px 0; font-weight: 600; }
.bnd-pills a { display: inline-block; background: var(--bnd-navy); color: #fff; text-decoration: none; padding: 9px 16px; border-radius: 999px; margin: 0 6px 8px 0; font-weight: 600; }
.bnd h2 { color: var(--bnd-navy); font-size: 24px; border-bottom: 3px solid var(--bnd-blue); padding-bottom: 6px; margin: 0 0 12px; }
.bnd h2.bnd-plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
.bnd-gap { margin: 0 0 36px; }
.bnd-tiles, .bnd-cards { display: grid; gap: 12px; margin-bottom: 36px; }
.bnd-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bnd-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.bnd-tile { background: var(--bnd-navy); color: #fff; border-radius: 12px; padding: 16px; text-align: center; }
.bnd-tile b { display: block; font-size: 26px; line-height: 1.2; }
.bnd-tile span { color: #dbeafe; font-size: 14px; }
.bnd-card { background: #fff; border: 1px solid #dbeafe; border-radius: 12px; padding: 14px; }
.bnd-card b { display: block; margin-bottom: 4px; color: var(--bnd-navy); font-size: 16px; }
.bnd-card p { margin: 0; font-size: 14px; }
.bnd-scroll { overflow-x: auto; margin-bottom: 12px; }
.bnd table.myTable { width: 100%; border-collapse: collapse; }
.bnd table.myTable td.bnd-us { font-weight: 600; }
.bnd-product { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: center; background: #fff; border: 1px solid #dbeafe; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.bnd-product img { display: block; width: 100%; height: 220px; object-fit: contain; }
.bnd-product b { display: block; margin-bottom: 4px; color: var(--bnd-navy); font-size: 18px; }
.bnd-product p { margin: 0 0 14px; }
.bnd a.bnd-btn { display: inline-block; background: var(--bnd-blue); color: #fff; text-decoration: none; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
.bnd-faq { background: #eff6ff; border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; }
.bnd-faq h3 { color: var(--bnd-navy); font-size: 18px; margin: 0 0 6px; }
.bnd-faq p { margin: 0; }
.bnd-cta { background: var(--bnd-navy); color: #fff; border-radius: 16px; padding: 28px 24px; text-align: center; margin: 32px 0 8px; }
.bnd-cta b { display: block; font-size: 20px; margin-bottom: 8px; }
.bnd-cta p { margin: 0 0 16px; color: #dbeafe; }
.bnd-cta a { display: inline-block; background: #fff; color: var(--bnd-navy); text-decoration: none; padding: 10px 22px; border-radius: 8px; font-weight: 700; }
/* ===== fixes 2026-10-30: alignment + Alza-like mobile product rows (design E) ===== */
/* Phone product rows need the Shoptet setting "1 product per row" on mobile. */

/* desktop: hamburger "Více" hung below the menu bar */
@media (min-width: 768px) {
    .menu-helper {
        top: auto !important;
        bottom: 0 !important;
        height: 32px !important;
        line-height: 32px !important;
    }
}

/* product detail: the bare "1670" next to the title -> "Kód: 1670", small and grey */
.p-detail-inner-header .p-code {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
}

.p-detail-inner-header .p-code-label {
    display: inline !important;
}

/* listing: no big empty gap under short product names */
.products-block .p .name {
    min-height: 0;
}

@media (min-width: 768px) {
    /* listing description: max 3 lines, so every card ends at the same height */
    .products-block .p-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    /* breadcrumb was pulled up under the header (cut off) */
    .breadcrumbs {
        margin-top: 4px;
        margin-bottom: 0;
    }

    /* "Nejprodávanější": one product per row, the text was one word per line */
    .products-top > .product {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* never let the page scroll sideways */
    html,
    body {
        overflow-x: clip;
    }

    /* sort tabs: one line that scrolls inside its own box (it used to push the whole page sideways) */
    .listSorting {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden;
    }

    .listSorting__controls {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .listSorting__control {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 14px;
    }

    /* benefit banners: keep Shoptet's layout (a grid broke it), just a bit more compact */
    .benefitBanner__item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .benefitBanner__item img,
    .benefitBanner__item svg {
        max-width: 48px;
        max-height: 48px;
    }

    /* product rows: image left, name / stock / price + button right (~4 products per screen) */
    .products-block > .product {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .products-block .p {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 12px;
        padding: 18px 4px !important;
        text-align: left;
    }

    .products-block .p > a.image {
        flex: 0 0 44%;
        max-width: 44%;
        margin: 0;
        position: relative;
    }

    .products-block .p > a.image img {
        width: 100%;
        height: auto;
        max-height: 165px;
        object-fit: contain;
    }

    .products-block .p-in {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
    }

    .products-block .p,
    .products-block .p-in,
    .products-block .p-in-in,
    .products-block .ratings-wrapper,
    .products-block .p-bottom,
    .products-block .prices {
        min-height: 0 !important;
        height: auto !important;
    }

    .products-block .p-desc,
    .products-block .stars-placeholder {
        display: none !important;
    }

    /* name: up to 3 lines, never cut mid-line */
    .products-block .p .name {
        font-size: 15px;
        line-height: 1.3;
        text-align: left;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    .products-block .p .name span {
        display: inline !important;
        font-size: 15px;
    }

    .products-block .ratings-wrapper,
    .products-block .availability {
        float: none !important;
        display: block;
        text-align: left !important;
        margin: 2px 0 0 !important;
        font-size: 12px;
    }

    .products-block .availability span {
        float: none !important;
    }

    /* price left, button right, one line */
    .products-block .p-bottom {
        margin-top: 4px;
        padding: 0 !important;
    }

    .products-block .p-bottom > div[data-micro=offer] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .products-block .p-bottom .prices {
        float: none !important;
        flex: 0 1 auto;
        margin: 0 !important;
        width: auto !important;
    }

    .products-block .p-tools {
        float: none !important;
        flex: 0 0 auto;
        margin: 0 !important;
        width: auto !important;
    }

    .products-block .price-final {
        margin: 0 !important;
        white-space: nowrap;
    }

    .products-block .price-final strong {
        font-size: 19px;
        white-space: nowrap;
    }

    .products-block .p-bottom .btn-cart {
        padding: 5px 9px !important;
        font-size: 12px !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.4 !important;
    }

    .products-block .p-bottom .btn-cart::after {
        font-size: 12px;
        margin-left: 5px;
    }

    /* discount: small red "-6 %" tag in the image's bottom-left corner (top-left is for Tip / Akce) */
    .products-block .flags-extra {
        position: absolute !important;
        top: auto !important;
        left: 2px !important;
        right: auto !important;
        bottom: 2px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .products-block .flags-extra .flag-discount {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        border-radius: 4px !important;
        padding: 1px 5px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        background: var(--bnd-red) !important;
        transform: none !important;
        display: block !important;
        white-space: nowrap;
    }

    .products-block .flags-extra .flag-discount .price-standard {
        display: none !important;
    }

    .products-block .flags-default .flag {
        font-size: 9px;
        padding: 0 4px;
    }
}

/* ===== fixes 2026-10-30 (2): compact category top (design H), grey strip, homepage titles ===== */
@media (max-width: 767px) {
    /* grey strip under the header: Shoptet reserved 69 px for a 55 px header */
    .overall-wrapper {
        padding-top: 55px !important;
    }

    .content-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .breadcrumbs {
        background: #fff;
        margin: 0 !important;
        padding: 8px 10px 0 !important;
    }

    /* "TIPY", "NOVÉ ČLÁNKY": both red lines stay next to the text (the right one wrapped) */
    .homepage-group-title {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 24px !important;
        letter-spacing: 2px;
    }

    .homepage-group-title:before,
    .homepage-group-title:after {
        flex: 0 1 50px;
        width: auto;
        margin: 0 12px;
    }

    /* category top: same content, less empty space, products come sooner */
    .category-top {
        padding-top: 4px;
    }

    .category-title {
        font-size: 26px !important;
        margin: 6px 0 8px !important;
    }

    .category-perex,
    .category-perex p {
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
    }

    ul.subcategories {
        margin: 8px -4px 6px !important;
    }

    ul.subcategories li {
        padding: 4px !important;
        margin: 0 !important;
    }

    ul.subcategories li a {
        min-height: 0 !important;
        height: auto !important;
        padding: 6px 8px !important;
        font-size: 13px;
    }

    ul.subcategories li a .image {
        width: 36px !important;
        flex: 0 0 36px;
        margin-right: 8px !important;
    }

    ul.subcategories li a .image img {
        max-height: 26px;
        width: auto;
    }

    /* "Nejprodávanější" */
    .products-top-wrapper {
        margin: 4px 0 !important;
        padding: 0 !important;
    }

    .products-top-header {
        font-size: 18px !important;
        margin: 10px 0 4px !important;
    }

    .products-top > .product,
    .products-top .p {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        margin: 0 !important;
        border: 0 !important;
        min-height: 0 !important;
    }

    .products-top .p .image img {
        max-height: 56px;
        width: auto;
    }

    .products-top .p-in-in,
    .products-top .p-bottom {
        line-height: 1.3;
    }
}

/* ===== fixes 2026-10-30 (3): mobile menu ===== */
@media (max-width: 767px) {
    /* arrows lined up in one column on the right (left of the close X) instead of right after the text */
    .menu-level-1 > li.ext > a {
        position: relative;
        padding-right: 80px !important;
    }

    .menu-level-1 > li.ext > a .submenu-arrow {
        position: absolute !important;
        right: 56px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
    }

    /* crisp text, no shadow */
    li[class^="menu-item-"] a,
    li[class^="menu-item-"] a b,
    li[class^="menu-item-"] div a[data-testid="headerMenuItem"] span {
        text-shadow: none !important;
    }

    /* the missing icons: KHL logo, Finnish and German flags */
    a[data-testid="headerMenuItem"][href="/hokej-khl/"]::after {
        background-image: url('https://cdn.myshoptet.com/usr/www.bandurka.cz/user/categories/thumb/90365.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    a[data-testid="headerMenuItem"][href="/hokej-finsko/"]::after {
        background-image: url('https://flagcdn.com/16x12/fi.png');
    }

    a[data-testid="headerMenuItem"][href="/hokej-nemecko/"]::after {
        background-image: url('https://flagcdn.com/16x12/de.png');
    }
}
/* ===== fixes 2026-11-01: homepage welcome text lined up with the page, article look (bnd-* from articles.css) ===== */
.welcome-wrapper .welcome { max-width: none; width: auto; margin: 0; padding: 8px 0 0; text-align: left; }
.welcome-wrapper .welcome .h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 26px; color: var(--bnd-navy); margin: 0 0 12px; text-align: left; }
.welcome-wrapper .welcome > div:not(.h1) { max-width: none; width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.welcome .bnd { max-width: none; margin: 0; }
.welcome .bnd-tile { margin: 0; width: auto; }
/* Shoptet's link colour (blue) beat the white pill text on category and welcome texts. */
.bnd-pills a[href], .bnd-pills a[href]:visited, .bnd-pills a[href]:hover { color: #fff !important; text-decoration: none; }
.welcome .bnd p { font-size: 16px; line-height: 1.6; max-width: 820px; }
.welcome .bnd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 20px 0 16px; }
.welcome .bnd-tile b { font-size: 22px; }
@media (max-width: 767px) {
    .welcome-wrapper .welcome .h1 { font-size: 21px; }
    .welcome .bnd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== round 1 (2026-11-01, from the design review): calmer type, red discount tag on desktop, active menu item,
   phone breadcrumb fix, navy footer. The palette variables (--bnd-*) are defined at the top of bandurka7.css and
   bandurka6's own hex values were replaced by them when bandurka7 was built. ===== */

/* 1. No text shadows anywhere: soft text on retina screens, 2010 look. */
li[class^="menu-item-"] a,
li[class^="menu-item-"] a b,
li[class^="menu-item-"] div a[data-testid="headerMenuItem"] span,
.homepage-group-title,
.contact-box ul li > span,
label[for="deliveryCountryId"] {
    text-shadow: none !important;
}

/* 2. Fewer capitals: availability and sub-category tiles in normal case (menu and buttons stay uppercase). */
.availability,
.availability-label {
    text-transform: none !important;
}

ul[class^="subcategories"] li,
ul[class^="subcategories"] li a {
    text-transform: none !important;
    font-weight: 600;
}

/* 3. Desktop: the category you are in gets a red line under its menu item.
   Shoptet puts .active only on the level-2 item (e.g. NHL), so the top-level item is found with :has(). */
@media (min-width: 768px) {
    .navigation-in > ul > li.active > a,
    .navigation-in > ul > li:has(.active) > a {
        box-shadow: inset 0 -3px 0 var(--bnd-red);
    }

    .category-title,
    .homepage-group-title {
        letter-spacing: 1px;
    }
}

/* 4. Phone breadcrumb: the home icon is hidden, so the first visible item must not start with ">". */
@media (max-width: 767px) {
    .breadcrumbs > #navigation-first + span > a::before {
        content: none;
    }
}

/* 5. Desktop discount: the big blue circle on the photo becomes a small red tag in the top-right corner
   (old price struck through, "-6 %" bold). Same idea as the phone tag from October. */
@media (min-width: 768px) {
    .flags-extra {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 2;
    }

    .flags-extra .flag-discount {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        background: var(--bnd-red) !important;
        color: #fff !important;
        line-height: 1.2 !important;
        transform: none !important;
        white-space: nowrap;
    }

    .flags-extra .flag-discount .price-standard {
        font-size: 10px;
        font-weight: 400;
        opacity: .85;
        text-decoration: line-through;
    }

    .flags-extra .flag-discount .price-save {
        font-size: 13px;
        font-weight: 700;
    }
}

/* 6. Navy footer: closes the page the way the navy header opens it. Social links in one colour,
   the empty Instagram column hidden until the feed is connected, payment logos on a white chip. */
#footer {
    background: var(--bnd-navy-deep);
    color: #c7d2fe;
    border-top: 0;
}

/* Shoptet paints the inner container white (white headings would vanish on it). */
#footer > .container {
    background-color: transparent;
}

#footer .custom-footer {
    border-top: 0;
}

#footer .pageElement__heading,
#footer h3,
#footer h4 {
    color: #fff;
}

#footer a,
#footer ul a,
#footer .contact-box a,
#footer .contact-box ul a,
#footer .contact-box ul li > span,
#footer .contact-box ul li > span.mail,
#footer .contact-box ul li > span.facebook,
#footer .contact-box ul li > span.instagram,
#footer .contact-box ul li > span.youtube,
#footer .contact-box ul li > span.tiktok {
    color: #e0e7ff;
}

#footer a:hover,
#footer ul a:hover,
#footer .contact-box a:hover {
    color: #fff;
}

#footer .custom-footer__instagram:not(:has(.pageElement__heading ~ *)) {
    display: none;
}

#footer .custom-footer__onlinePayments img {
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}

#footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #94a3b8;
}

#footer .copyright strong {
    color: #fff;
}

/* 7. Phone: bigger product photos, same row height (2026-11-01, owner's feedback: the photos sell).
   Less padding, a slightly smaller name and price pay for it. "Nejprodávanější" photos 56 → 76 px. */
@media (max-width: 767px) {
    .products-block .p {
        padding: 12px 4px !important;
        gap: 8px;
    }

    .products-block .p > a.image {
        flex: 0 0 49%;
        max-width: 49%;
    }

    .products-block .p > a.image img {
        max-height: 175px;
    }

    .products-block .p .name,
    .products-block .p .name span {
        font-size: 14px;
    }

    .products-block .price-final strong {
        font-size: 17px;
    }

    .products-top .p .image img {
        max-height: 76px;
        max-width: 76px;
    }
}

/* ===== round 2 (2026-11-01, from the design review): desktop product cards with a border and no description,
   blog as a grid of covers. The phone buy bar on product pages lives in bandurka3.js. ===== */

/* 1. Desktop product cards: each product its own rounded card instead of grid lines, no description
   (name, stock, price and button are what people compare). */
@media (min-width: 768px) {
    .products-block > .product {
        border: 0 !important;
        padding: 8px !important;
        box-shadow: none !important;
    }

    .products-block > .product::before,
    .products-block > .product::after {
        display: none !important;
    }

    .products-block .p {
        height: 100%;
        border: 1px solid var(--bnd-line, #e5e7eb) !important;
        border-radius: 10px;
        padding: 10px 12px 14px !important;
        overflow: hidden;
        background: #fff;
        transition: box-shadow .15s, border-color .15s;
    }

    .products-block .p:hover {
        border-color: #c7d2fe !important;
        box-shadow: 0 4px 16px rgba(30, 58, 138, .12);
    }

    .products-block .p-desc {
        display: none !important;
    }
}

/* 2. Blog: a grid of covers (3 columns on desktop, 2 on tablet, 1 on phone) instead of one long list. */
.news-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 991px) {
    .news-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .news-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

.news-wrapper .news-item {
    display: flex !important;
    flex-direction: column;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--bnd-line, #e5e7eb) !important;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .15s;
}

.news-wrapper .news-item:hover {
    box-shadow: 0 4px 16px rgba(30, 58, 138, .12);
}

.news-wrapper .news-item .image {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.news-wrapper .news-item .image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-wrapper .news-item .text {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
}

.news-wrapper .news-item .title {
    display: block;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 6px;
}

.news-wrapper .news-item .description {
    font-size: 14px;
    line-height: 1.45;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-wrapper .news-item .description p {
    margin: 0;
}

/* ===== round 3 (2026-11-01): one font, red discount tag on the phone product page ===== */

/* 1. Headings in Roboto like the rest of the page. Montserrat was named here but never loaded, so headings fell back
   to each device's own font (Arial on Windows, Helvetica on Mac). */
h1, h2, h3,
.welcome-wrapper .welcome .h1 {
    font-family: 'Roboto', sans-serif;
}

/* 2. Phone product page: the blue "-6 %" circle on the photo becomes the same small red tag as on desktop. */
@media (max-width: 767px) {
    .p-image .flags-extra {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 2;
    }

    .p-image .flags-extra .flag-discount {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        background: var(--bnd-red) !important;
        color: #fff !important;
        line-height: 1.2 !important;
        transform: none !important;
        white-space: nowrap;
    }

    .p-image .flags-extra .flag-discount .price-standard {
        font-size: 11px;
        font-weight: 400;
        opacity: .85;
        text-decoration: line-through;
    }

    .p-image .flags-extra .flag-discount .price-save {
        font-size: 14px;
        font-weight: 700;
    }
}