:root{--bs-success:#49943c;--bs-success-rgb:73,148,60;--bs-danger:#d92719;--bs-danger-rgb:217,39,25;--bs-primary:#092857;--bs-primary-rgb:9,40,87;--bs-warning:#f98305;--bs-warning-rgb:249,131,5}.text-bg-success{background-color:#49943c !important;color:#fff !important}.text-bg-danger{background-color:#d92719 !important;color:#fff !important}.text-bg-warning{background-color:#f98305 !important;color:#fff !important}.text-bg-primary{background-color:#092857 !important;color:#fff !important}.btn-success{--bs-btn-bg:#49943c;--bs-btn-border-color:#49943c;--bs-btn-hover-bg:#3e7f33;--bs-btn-hover-border-color:#3a772e;--bs-btn-active-bg:#3a772e;--bs-btn-active-border-color:#366c2a;--bs-btn-disabled-bg:#49943c;--bs-btn-disabled-border-color:#49943c}.beta-db-mode{position:fixed;bottom:0;right:0;z-index:99999;padding:2px 8px;font-size:10px;font-weight:700;opacity:0.7}.beta-db-mode--live{background:#49943c;color:#fff}.beta-db-mode--test{background:#e53935;color:#fff}#basketInfo_overviewBox .header-dropdown-items .item .row{margin-left:0;margin-right:0;flex-wrap:nowrap}#basketInfo_overviewBox .header-dropdown-items .item .row>.col{min-width:0;padding-left:0;padding-right:.25rem}#basketInfo_overviewBox .header-dropdown-items .item .row>.col-auto{padding-left:.25rem;padding-right:0}#basketInfo_overviewBox .header-dropdown-items .item .row>.col>div{white-space:normal}#basketInfo_overviewBox .header-dropdown-items .item .link-shop-fake{display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-word}#basketInfo_overviewBox .header-dropdown-list-scroll{overflow-x:hidden}#basketInfo_overviewBox .header-dropdown-items .item button{background:transparent;border:0;padding:0 .25rem;color:inherit;cursor:pointer;font-size:.9em;line-height:1}#basketInfo_overviewBox .header-dropdown-items .item button:hover{color:#c33}#hpBannerCarousel .carousel-indicators{margin:10px auto 5px;padding:0;bottom:-25px}#hpBannerCarousel .carousel-indicators button{width:10px;height:10px;border-radius:50%;background:#d6d6d6;border:0;margin:0 3px;opacity:1;transition:background-color .2s}#hpBannerCarousel .carousel-indicators button.active{background:#869791}#hpBannerCarousel .c-banner-slider_img{width:100%;height:auto}
/* Bezne BS5 carousel-item ma display:none krome .active/.next/.prev. Override
 * `.c-banner-slider_item{display:block}` v golf.css priblizoval rule, ale
 * MUSI zustat scoped jen na aktivni polozku — jinak vsechny banner slidy
 * (10 ks) zustanou displayed (float:left; margin-right:-100%) a stackuji se
 * pres sebe. Posledni v DOM (CLICGEAR) zachytava VSECHNY clicky → banner
 * jakoby nefunguje, presmeruje na CLICGEAR (a sliduje carousel mezitim
 * jinou polozkou). */
#hpBannerCarousel .carousel-item.active,
#hpBannerCarousel .carousel-item-next,
#hpBannerCarousel .carousel-item-prev{display:block}
/* DULEZITE: NEPRIDAVAT `#hpBannerCarousel .c-banner-slider_item{display:block}` ! */
/* BS5 modal popup for "Product added to basket" (replaces fancybox wrapper).
 * Layout matches production 3-column row: title left, product image centre,
 * "Přejít do košíku" CTA right; larger typography per user feedback so the
 * message has visual weight. "Máte dopravu zdarma" banner + bottom buttons
 * stack below. */
#beta-basket-added-modal .modal-dialog{max-width:820px}
#beta-basket-added-modal .modal-content{border:0;border-radius:4px;overflow:hidden}
#beta-basket-added-modal .modal-body{padding:0}
#beta-basket-added-modal .prebasket{background:#f5f5f5}
#beta-basket-added-modal .prebasket .product{
  /* 2-col layout: title 1fr | image 120px. Predtim bylo 3-col (s buttons),
   * ale buttons se presunuly do .prebasket-buttons → tretí "auto" col
   * zustaval 0px ale s gap:24px kolem sebe a vznikla nestabilita kolem
   * sirky modalu (obrazek pri uzkem viewportu utikal mimo box). */
  display:grid;
  grid-template-columns: 1fr 120px;
  gap:24px;
  align-items:center;
  background:#fff;
  padding:22px 28px;
}
#beta-basket-added-modal .prebasket .product .title{width:100%;max-width:none;margin:0;padding:0;line-height:1.35;font-weight:700;color:#092857;text-transform:uppercase;letter-spacing:.02em;word-break:normal;overflow-wrap:normal}
#beta-basket-added-modal .prebasket .product .title:before{display:none}
#beta-basket-added-modal .prebasket .product .title .name{display:block;margin-top:8px;font-size:19px;color:#092857;font-weight:700;text-transform:uppercase}
#beta-basket-added-modal .prebasket .product .input{display:none}
/* DULEZITE: styles.min.css ma stare pravidla:
 *   .prebasket .product .img {
 *     box-sizing:border-box; width:25%/30%;
 *     padding:0 4px 0 48px; margin:0 0 0 -33px;
 *     margin:1.5em 0; padding-top/bottom:5px;
 *   }
 *   .prebasket .product .img img { max-width:100%; max-height:100%; width:auto; height:auto }
 * Bez explicitniho overridu by se obrazek zmensoval na "auto", aspect by
 * mohl zustat fixed 72x72 box ale visual content by byl center-cropped
 * (kombinace `width:auto;height:auto` + box-sizing border-box + paddingy
 * legacy pravidla → image cropped na top half). Vsechno explicitne reset. */
#beta-basket-added-modal .prebasket .product .img{
  width:120px;
  height:120px;
  margin:0;
  padding:0;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
}
/* 120x120 fixed velikost. `max-width:none` + `max-height:none` prebijou
 * legacy `.prebasket .product .img img{max-width:100%;max-height:100%}`,
 * ktere by jinak limitovali image na parent dimenze BEZ aspect-ratio
 * preservation. object-fit:contain → letterboxing pro non-square fotky,
 * cely obrazek vzdy viditelny. */
#beta-basket-added-modal .prebasket .product .img img{width:120px!important;height:120px!important;max-width:120px!important;max-height:120px!important;object-fit:contain!important;display:block;margin:0}
#beta-basket-added-modal .prebasket .product .buttons{margin:0;min-width:180px}
#beta-basket-added-modal .prebasket .product .buttons .btn{width:100%;padding:10px 16px;font-weight:700}
#beta-basket-added-modal .prebasket-buttons{background:#f5f5f5;margin:0;padding:18px 28px}
#beta-basket-added-modal .prebasket-buttons .btn{
  width:100%;
  padding:10px 16px;
  font-weight:700;
  /* Flex centering pro sipku + text vedle sebe (sipky pridany v
   * basket-added-popup.php). Layout col-12 col-md-6 → mobile stack
   * (full-width tlacitka pod sebou pro lepsi tap target), desktop
   * side-by-side. */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
#beta-basket-added-modal .prebasket-buttons .btn svg{flex:none}
#beta-basket-added-modal #snippet--transport_free{background:#fff;padding:0 24px 4px}
/* PDP gallery hover zoom — the overlay is created in JS (product-gallery.js),
 * classname is string-literal so the CSS purger's template scanner never saw it.
 * These rules come from the pre-purge master-golf.css. */
.detail-carousel-img--zoom{position:absolute;inset:0;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#fff;cursor:zoom-in;pointer-events:none;z-index:2}
@media (max-width:991px){.detail-carousel-img--zoom{display:none!important}}
.modal-detail-carousel .detail-carousel-img--zoom,.modal .detail-carousel-img--zoom{display:none!important}
#beta-basket-added-modal .delivery-box{background:#f9fafb;border:1px solid #e5e7eb;border-radius:4px}
/* Stack vertically when modal is narrower than 600 px (mobile). */
@media (max-width:600px){
  #beta-basket-added-modal .modal-dialog{max-width:95%}
  #beta-basket-added-modal .prebasket .product{grid-template-columns:1fr;text-align:center}
  #beta-basket-added-modal .prebasket .product .img{margin:0 auto}
  #beta-basket-added-modal .prebasket .product .img img{margin:0 auto}
}

/* ==== Article detail (MarketingCampaignDetail.aspx parity) ====
 * Minimal port of the article-header styling. In master-t4orig.css the
 * overlay-positioning rules for .article-header__inner are written with a
 * stray space inside :not() (`:not ( ... )`), so they never parsed and the
 * original header always rendered as normal flow on white bg. We mirror
 * that: the H1 inherits the site-wide h1 style (navy Bebas Neue + green
 * underline), subtitle paragraph sits below in body text. */
.article-header{position:relative}
.article-header__inner{width:100%}
.article-header-container{position:relative}
@media (min-width:850px){
  .article-header{padding:1.5rem}
  .article-header-text{font-size:1.25rem}
}
@media (max-width:849px){
  .article-header-title{font-size:1.5rem}
  .article-header-text{line-height:2}
}

/* Article body typography */
.article-content{line-height:2}
.article-content img{max-width:100%;height:auto}
.article-content p{margin-bottom:2rem;line-height:1.5}
.article-content p strong{font-weight:700}
.article-content h1,.article-content h2,.article-content h3,.article-content h4{margin-top:2rem;margin-bottom:1rem;font-style:normal}
.article-content h1 em,.article-content h2 em,.article-content h3 em,.article-content h4 em{font-style:normal}
.article-content h2{font-weight:700;font-size:1.5rem!important}
.article-content h3,.article-content h3 strong{font-weight:400}
.article-content h3{font-size:1.4rem!important}
.article-content h4,.article-content h4 strong{font-weight:lighter}
.article-content h4{font-size:1.2rem!important}
.article-content strong{font-weight:700}
.article-content ul{margin-bottom:1rem}
.article-content li{list-style:disc;margin-left:2rem}
.article-content hr{margin:2rem -1.5rem}
.article-content>figure figcaption{padding:0 1.5rem;text-align:center;font-style:italic;color:grey}

/* Bootstrap 4 embed-responsive polyfill (BS5 uses .ratio). Needed for the
 * YouTube iframe in mty_id=4 templates and for any embedded media inside
 * legacy article HTML. */
.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}
.embed-responsive:before{display:block;content:""}
.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}
.embed-responsive-16by9:before{padding-top:56.25%}
.embed-responsive-21by9:before{padding-top:42.85714%}
.embed-responsive-4by3:before{padding-top:75%}
.embed-responsive-1by1:before{padding-top:100%}

/* Video list CTA strip (mty_id=4 footer) */
.bg-silver-light{background:#f5f5f5;padding:2rem 0}
.btn-outline-shop{color:#092857;background:transparent;border:1px solid #092857;padding:.5rem 1.25rem;text-decoration:none;display:inline-block;border-radius:.15rem;font-weight:700}
.btn-outline-shop:hover{color:#fff;background:#092857}

/* font-family-alt (original: same stack as body, used for header-text) */
.font-family-alt{font-family:inherit}
/* Produktová karta: generator vrací originální aspect (ne čtverec, ne letterbox).
 * Wrapper 321×206 (legacy fixed). Img má max-width/height 199px (legacy display size),
 * centered ve wrapperu přes flex. Tím má karta "čtverec na obrázek" cca 199×199
 * uvnitř širšího wrapperu. */
.product-list .img picture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:0}
/* Desktop: hard cap at 199px (legacy display size). Mobile: shrink to fit
 * the half-width grid cell — without this clamp the natural 320px source
 * overflows the ~150px mobile cell and clips into the next column. */
.product-list .img picture img,.product-list .img>img{max-width:100%!important;max-height:100%!important;width:auto;height:auto;display:block;object-fit:contain}
@media (min-width:576px){
  .product-list .img picture img,.product-list .img>img{max-width:199px!important;max-height:199px!important}
}
/* PDP carousel (main + zoom modal): generator vrací originální aspect.
 * <picture> má bez explicitních dimenzí tendenci se nafouknout na čtverec
 * podle natural-size <img> (1920×1920) a přerůst flex box (864×600). Proto
 * picture explicitně bereme 100% box, img dostane width:auto + max-width/height:100%
 * + object-fit:contain → letterbox bez crop. */
.detail-carousel-box{overflow:hidden}
.detail-carousel-box>picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:0;max-width:100%;max-height:100%}
.detail-carousel-box picture>img,.detail-carousel-img{width:auto!important;max-width:100%!important;max-height:100%!important;height:auto;object-fit:contain;display:block}

/* YouTube Lite — placeholder nahrazuje real <iframe>, který by jinak
 * stáhnul ~600 KB player JS i bez kliknutí. Real iframe se vytvoří
 * teprve po kliknutí. Viz dist/js/video-modal.js. */
.yt-lite{position:relative;display:block;width:100%;background:#000;cursor:pointer;overflow:hidden;aspect-ratio:16/9}
/* Kdyz je yt-lite wrappovany v BS5 .ratio nebo BS4 .embed-responsive containeru,
 * parent uz vynucuje aspect-ratio pres padding-bottom 56.25% trik (::before
 * pseudo). yt-lite by se pak vykresliloPOD pseudo elementem a vytvorilo by
 * 716px prazdneho mista nad videem. Forsujeme position:absolute + inset:0 +
 * aspect-ratio:auto, aby yt-lite vyplnil parent kontejner misto stackingu pod
 * pseudo elementem. Zachova se ratio z parentu (.ratio-16x9 / .embed-responsive-16by9). */
.ratio>.yt-lite,.embed-responsive>.yt-lite{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.yt-lite picture,.yt-lite img.yt-lite__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt-lite__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:transparent;border:0;padding:0;cursor:pointer;transition:transform .15s,filter .15s}
.yt-lite__play svg{display:block;width:68px;height:48px}
.yt-lite__play-bg{fill:#212121;opacity:.8;transition:fill .15s,opacity .15s}
.yt-lite:hover .yt-lite__play-bg,.yt-lite:focus .yt-lite__play-bg{fill:#f00;opacity:1}
.yt-lite:hover .yt-lite__play{transform:translate(-50%,-50%) scale(1.05)}
.yt-lite:focus{outline:3px solid #49943c;outline-offset:2px}

/* Vendor directory (/znacky, /marken, /marki, …) — ported 1:1 from
 * www.golfbrothers.de/Assets/Pages/Css/panelnavigatorvendor.css. The
 * production .NET shop loads these styles only on the vendor list page;
 * we inline them here so they're always available without an extra
 * request. The grid (.cards .cards-item) is in master-golf.css. */
.letters{background:#FAFAFA;border:0.125rem solid transparent;border-radius:0}
.letters_in{width:100%;display:table;table-layout:fixed}
.letters_letter{display:table-cell;vertical-align:middle;padding:0.625rem 0;text-align:center;text-decoration:none;font-weight:700;color:#424242;transition:background 0.4s}
.letters_letter:hover{background:#E0E0E0}
.letters.fixed{width:100%;position:fixed;left:0;border-radius:0;z-index:8000}
.vendors-list .panel-heading{text-align:center}
.vendors-list .panel-title{margin-right:0;text-align:center}
.vendors-list .nav-menu-list{margin-left:-10px;margin-right:-10px;margin-top:0;margin-bottom:0}
.vendors-list .nav-menu-list::after{content:"";display:table;clear:both}
.vendors-list .nav-btn-toggle{left:0.625rem}
.vendors-list .nav-item{position:relative;min-height:1px;padding-right:10px;padding-left:10px}
@media (min-width:992px){
  .vendors-list .nav-item{float:left;width:25%}
}

/* Variant attribute buttons — green underline pro skladem.
 * Class .in_stock / .not_in_stock / .unavailable nastavuje runtime
 * product-variants.js v updateButtonClasses() podle reachable variant
 * matrix + stock — bez tohoto pravidla user neviděl, které atributy jsou
 * skladem. Strikethrough textu pro .unavailable je řešen v dist/css/last.css.
 *
 * Historicky pravidlo žilo v www.golfprovsechny.cz/dist/css/last.css, ale
 * CSS purger commit 8a23728b ho z stripped poolu vyhodil — DB-aware purger
 * skenuje class/id v PHP templates + DB content, nezná třídy nasazované
 * až runtime z JS. .in_stock je učebnicový příklad. Re-introduction zde
 * v beta-custom.css zajišťuje že další purger run pravidlo nesmaže
 * (beta-custom.css je whitelist).
 *
 * overflow:hidden + border-radius inherit: proužek je uvnitř .btn a dolní
 * rohy se kopírují s tlačítkem (jinak by 4px pás přesahoval zaoblené rohy
 * a vyčnival vedle tlačítka — viz screen od uživatele). */
#productVariants .in_stock,
#productVariants .not_in_stock {
  position: relative;
  overflow: hidden;
}
#productVariants .in_stock:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #49943c;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
   Sale landing page slider + Quick Picks + brand strip.
   ───────────────────────────────────────────────────────────────────── */

/* Slider — neutralizujeme `.product-list` defaultní `margin:-5px` a
   `padding-bottom:195px` (z styles.min.css), aby slider wrapper nebyl
   posunutý a nepřebíral plnou výšku. */
.product-slider { position: relative; }
.product-list.product-slider {
  overflow: visible;
  margin: 0;
  padding-bottom: 0;
}

.product-slider-track {
  display: flex;
  gap: 0;                       /* main listing pouziva .spc{margin:5px}
                                   pro spacing — slider same pattern, zadny
                                   extra flex gap */
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0 70px;
  margin: 0;
  width: auto;
  letter-spacing: normal;
  cursor: grab;
}
.product-slider-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.product-slider-track::-webkit-scrollbar { display: none; }

/* 5 produktů per row (desktop), 4 tablet, 3 mobil-large, 2 mobil-small.
   Bez gapu, jen .spc{margin:5px} uvnitř karet poskytne natural spacing
   stejne jako v main listingu. */
.product-list .product-slider-track > li,
.product-slider-track > li {
  scroll-snap-align: start;
  flex: 0 0 20%;
  width: auto;
  min-width: 0;
  display: block;
  position: relative;
}
@media (max-width: 991.98px) {
  .product-list .product-slider-track > li,
  .product-slider-track > li { flex-basis: 25%; }
}
@media (max-width: 767.98px) {
  .product-list .product-slider-track > li,
  .product-slider-track > li { flex-basis: 33.333%; }
}
@media (max-width: 575.98px) {
  .product-list .product-slider-track > li,
  .product-slider-track > li { flex-basis: 50%; }
}

/* Header slider sekce: nadpis + button vedle sebe (button MIMO H4 aby
   nezdedil H4 font/podtrzeni). H4 zustava centred, button na pravem
   okraji vedle nej. */
.sale-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sale-slider-header .headline-strip {
  flex: 1 1 auto;
  margin-bottom: 0;
  text-align: center;
}
.sale-slider-header .btn { flex-shrink: 0; }

/* Arrows — z-index nad cards (.spc:hover ma z-index 6) aby prev sipka nebyla
   schovana pod prvni kartou. Pin na fixed top relative k image area. */
.product-slider-btn {
  position: absolute; top: 90px; transform: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid #d1d5db; color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer; z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background .15s, color .15s, border-color .15s;
}
.product-slider-btn:hover { background: #49943c; color: #fff; border-color: #49943c; }
.product-slider-btn--prev { left: -8px; }
.product-slider-btn--next { right: -8px; }
.product-slider-btn[disabled] { opacity: .25; cursor: default; pointer-events: none; }
@media (max-width: 991.98px) { .product-slider-btn { top: 75px; } }
@media (max-width:  575.98px) { .product-slider-btn { display: none; } }

/* Brand strip arrows — nizsi tile */
.sale-brand-slider .product-slider-btn { top: 40px; }

/* ── Quick Picks (sekce B) ─────────────────────────────────────────── */

.sale-qp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin: 0; padding: 0;
}
@media (max-width: 991.98px) { .sale-qp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .sale-qp-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }
.sale-qp-tile { list-style: none; margin: 0; padding: 0; }
.sale-qp-link {
  display: block; background: #fff;
  border: 1px solid #eaeaea; border-radius: 5px;
  padding: 1rem .9rem; text-decoration: none; color: #2c2c2c;
  height: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sale-qp-link:hover {
  border-color: #49943c;
  box-shadow: 0 2px 10px rgba(73,148,60,.18);
  transform: translateY(-1px);
  text-decoration: none; color: #2c2c2c;
}
.sale-qp-eyebrow { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #49943c; margin-bottom: .25rem; }
.sale-qp-title { display: block; font-size: .95rem; font-weight: 700; line-height: 1.25; color: #1a1a1a; }
.sale-qp-sub { display: block; font-size: .8rem; color: #6c757d; margin-top: .25rem; }
.sale-qp-cnt { display: block; font-size: .75rem; color: #8a8a8a; margin-top: .5rem; }
@media (max-width: 575.98px) {
  .sale-qp-sub { display: none; }
  .sale-qp-link { padding: .75rem .65rem; }
  .sale-qp-title { font-size: .85rem; }
}

/* ── Brand strip (sekce D) — replikuje .logos label look pro <a> ── */

.sale-brand-slider .pro-filter-aside_values-item { list-style: none; margin: 0; padding: 0; }
.sale-brand-slider .pro-filter-aside_value {
  display: block; background: #fff;
  border: 1px solid #eaeaea; border-radius: 5px;
  padding: 70px 0 0; position: relative;
  color: #2c2c2c; height: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.sale-brand-slider .pro-filter-aside_value:hover {
  border-color: #49943c;
  box-shadow: 0 1px 5px rgba(73,148,60,.3);
  text-decoration: none; color: #2c2c2c;
}
.sale-brand-slider .pro-filter-aside_value .img {
  position: absolute; top: 5px; left: 5px; right: 5px;
  height: 60px; text-align: center;
}
.sale-brand-slider .pro-filter-aside_value .img img {
  max-width: 90%; max-height: 50px; width: auto; height: auto;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.sale-brand-slider .pro-filter-aside_value .name {
  display: block; padding: .5rem .25rem; text-align: center;
  border-top: 1px solid #eaeaea; font-size: .8rem; font-weight: 600;
}
.sale-brand-slider .pro-filter-aside_value .value_counter {
  display: block; color: #8a8a8a; font-size: .7rem; font-weight: normal; margin-top: .15rem;
}
.sale-brand-slider .product-slider-track > li { flex-basis: calc((100% - 5rem) / 6); }
@media (max-width: 991.98px) { .sale-brand-slider .product-slider-track > li { flex-basis: calc((100% - 3rem) / 4); } }
@media (max-width:  575.98px) { .sale-brand-slider .product-slider-track > li { flex-basis: calc((100% - 1rem) / 3); } }

/* ── Headline-strip margin pod zelenou carou (default je 0) ───────── */
.page-product-list .h-limit .headline-strip,
.page-product-list .page-max-width .headline-strip { margin-bottom: 1.25rem; }
.sale-seo-footer .headline-strip { margin-bottom: 1.25rem; }

/* ── Loader marker pro AJAX donacitani ─────────────────────────────── */
.product-slider-loader {
  flex: 0 0 60px; display: flex; align-items: center; justify-content: center;
  color: #6c757d; font-size: .85rem;
}

/* "Zobrazit vse" v slider headline pouziva primo `.btn` tridu
   (styles.min.css `.btn:not(.p-reset)` ji nastyluje na zeleny #49943c —
   stejne jako `.btn.pro-pager_btn-more-items` "Dalsi produkty" pod paging).
   Zadne extra CSS pravidla zde. */

/* ── Filter Vyse slevy radio checked visual ──────────────────────── */
.checkbox input[type=radio]:checked + label:before {
  background: #092857 url(../images/check-white.png);
  background-size: cover;
  border: 2px solid #092857;
  color: #fff;
}

/* ── Header brand dropdown menu loga ──────────────────────────────────
   header.php pouziva h60.jpg (height-bounded, no crop) → zachova aspect.
   Layout: logo VEDLE textu (ne nad), vertikalne centrovane, mensi velikost
   aby se vesly cca 5+ sloupcu jako v produkci. */
/* Vendor menu loga — fixed-width box, ne ctvercovy.
 * Drive byla loga zobrazena s vlastni natural sirkou (60x30 az 60x60),
 * texty zacalyna ruznych pozicich. Nyni wrap do `.vendor-logo-box` 60x30
 * inline-flex containeru — logo se vycentruje uvnitr, brand text vzdy
 * zacne na stejne x-pozici.
 *
 * Source h60 (height-bounded, natural aspect) → CSS object-fit:contain
 * pohlti pomer stran do boxu. Vyssi specificita ridi cascade nad
 * legacy `last.css { li.produceritem a img { height:auto !important } }`. */
li.produceritem > a > .vendor-logo-box {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
  flex: 0 0 auto;
}
li.produceritem > a > .vendor-logo-box > picture {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}
li.produceritem > a > .vendor-logo-box img,
li.produceritem > a > .vendor-logo-box picture > img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  display: block;
  margin: 0;
}
li.produceritem > a > .vendor-name {
  vertical-align: middle;
  display: inline-block;
}
li.produceritem > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Header mini-cart dropdown: po obale <img class="img-search"> do <picture>
 * (picture/avif/webp/jpg chain) musi byt picture sam fitness-able do
 * fixed-width box `.item-img` (production CSS width:6em desktop / 3.5em mobile).
 * Bez tohoto by picture default inline a image vyletel z boxu. */
#navigation .header-dropdown-items .item-img picture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 0;
}
#navigation .header-dropdown-items .item-img picture > img.img-search {
  aspect-ratio: auto !important;
  object-fit: contain;
}

/* Mobile checkout: doprava/platba ikony.
 * Drive master-golf.css `@media (min-width:992px) { .order-radiobox-img:
 * 48x48 }` — desktop only. Pod 992px image renderovan natural size
 * (slovenska vlajka 380x250, GLS logo 300x200, ...) — vyletel z layoutu.
 * Mobile constraint: 48x48 fixed s object-fit:contain pro non-square
 * loga (DPD logo 2:1, ...). */
@media (max-width: 991.98px) {
  .order-radiobox-img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    flex: 0 0 auto;
  }
  .cartTransportItem .js-order-delivery-select.col-auto {
    flex: 0 0 auto;
  }
}

/* Mobile košík (basket page): try-on outfit teaser block + tlacitka smazat
 * polozku. Drive `desktop hover` styling — v mobile prazdno nebo schovane.
 * Pojďme schovat teaser a vratit visible delete button. */
@media (max-width: 600px) {
  /* Skryt cely "vyzkousej outfit" teaser na mobile — zabira moc mista
   * a AI try-on flow je na mobile uneconomical (file upload + ai compute).
   * Pravdivy id box: #basketTryOnOutfit (basket.php). */
  #basketTryOnOutfit {
    display: none !important;
  }
  /* Delete polozka v kosiku — master-golf.css `@media (max-width:575px)
   * { .m-order-item-trash position:absolute top:0 right:0 }` parent.
   * Vnitrni `.order-item-trash` linkdrops display:block jen v
   * (min-width:768px) media query. V mobile -> ZIVO INLINE prazdny.
   * Vynutim viditelne kruhove tlacitko + dostatek paddingu okolo SVG. */
  .order-item .order-item-trash,
  .order-item .order-item-trash:link,
  .order-item .order-item-trash:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 1;
    border-radius: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .07);
    color: #c33;
    text-decoration: none;
  }
  .order-item .order-item-trash:hover,
  .order-item .order-item-trash:active {
    background: rgba(0, 0, 0, .14);
    color: #c33;
  }
  .order-item .order-item-trash .svg-icon,
  .order-item .order-item-trash svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
  }
  /* Trash position: mirror production master-golf.css
   * `@media (max-width:575) { .m-order-item-trash position:absolute top:0 right:0 }`.
   * Mobile cart row je nedostatecne siroky pro inline trash (image+name+qty+
   * price+trash > 375px), takze trash visi v pravem hornim rohu order-item.
   * Parent .order-item musi byt position:relative aby anchor fungoval. */
  .order-item {
    position: relative;
  }
  .m-order-item-trash {
    position: absolute !important;
    top: .5rem;
    right: .5rem;
    padding: 0;
    z-index: 2;
  }
}

/* Mobile product list — equal card heights.
 * Drive: UL block + LI inline-block — karty maji natural height z obsahu.
 * S 2 sloupci side-by-side, kde jeden produkt ma jednorádkovy availability
 * ("Skladem 1 ks") a vedlejsi dvourádkovy ("Odesíláme za 30 dnů"), karty
 * vystupuji z grid layoutu rozdilnymi vyskami.
 *
 * Fix: UL prepneme na CSS grid 2-sloupcove (mobile-only). Grid items
 * stretch by default → equal heights v ramci radky. Pri prepnutu na
 * desktop (>=576) zpet inline-block (production default). */
@media (max-width: 575.98px) {
  .product-list > ul.reset,
  ul.product-list,
  .product-list-wrap > ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    padding: 0;
    list-style: none;
  }
  .product-list > ul.reset > li.item,
  ul.product-list > li.item,
  .product-list-wrap > ul > li.item {
    display: flex !important;
    flex-direction: column;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .product-list > ul.reset > li.item > .spc,
  ul.product-list > li.item > .spc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
  }
  /* availability text — vyhradit prostor pro 2 radky aby karta nezkrabacela
   * kdyz produkt ma jen 1 radek statusu. */
  .product-list .availability,
  .product-list p.availability {
    min-height: 2.6em;
    line-height: 1.3;
  }
}

/* Mobile basket row: dlouha availability "1 ks skladem, 1 ks Obvykle 15 dnu"
 * mela `<span class="text-nowrap">` → forced single-line → flex column min-width
 * = intrinsic content → vytlacovala cenu mimo viewport (price utekla off-screen).
 *
 * Fix: prepnout text-nowrap na zalamovani v mobile + min-width:0 na flex cols
 * aby mohly shrink pod content width (default min-width:auto je `intrinsic
 * content size` = no shrink). */
@media (max-width: 600px) {
  .order-item-row,
  .order-item-row .order-item-col,
  .order-item-row .order-item-col > .row,
  .order-item-row .order-item-col > .row > .order-item-col {
    min-width: 0 !important;
  }
  /* Dostupnost: dovolit zalomit za carkou ("1 ks skladem, [BREAK] 1 ks - Obvykle..."). */
  .order-item-row .order-item-list__item .text-nowrap {
    white-space: normal !important;
  }
  /* Cena: zustava text-end + nowrap (cislo + mena nesmi prasknout), ale
   * cely block musi byt visible — `flex:1` na price col, justify-content:end. */
  .order-item-row .order-item-price {
    word-break: keep-all;
  }
}

/* Dual-range labels (cena od / do) — nad sliderem.
 * Produkce DE eshop ma podobny patter: 2 navy labels na okrajích kontaineru
 * s aktualnimi cenami (formatted s DPH + currency). */
.dual-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 6px 0;
  font-weight: 700;
  color: #092857;
  font-size: 0.95em;
}
.dual-range-label {
  white-space: nowrap;
}

/* Dual-range price slider (sidebar filter)
 * HTML5 native <input type=range> × 2 overlaid. CSS:
 * - track 4px grey background v container
 * - track__fill green segment od min thumbu k max thumbu (JS pozicuje pres
 *   left/width style)
 * - 2× range input position:absolute, transparent background — visible jen
 *   thumb. pointer-events necha thumb interagible, track passes clicks
 *   through (jinak by horni input blokoval spodni).
 * - thumb: 16px green disk s box-shadow */
.dual-range-slider {
  position: relative;
  height: 32px;
  margin: 10px 6px 14px;
}
.dual-range-track {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 4px;
  background: #d6d6d6;
  border-radius: 2px;
}
.dual-range-track__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #49943c;
  border-radius: 2px;
}
.dual-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual-range-input::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
.dual-range-input::-moz-range-track {
  background: transparent;
  height: 4px;
}
.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #49943c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -6px;
}
.dual-range-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #49943c;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
  pointer-events: auto;
}
.dual-range-input:focus {
  outline: none;
}
.dual-range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(73, 148, 60, .25);
}
.dual-range-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(73, 148, 60, .25);
}

/* Article content (WYSIWYG z DB) — fix squished obrazku v mobilu
 * Drive: redaktor v Esyco editoru ulozil inline `style="width:775px;
 * height:362px"` na <img>. Browser na mobilu (viewport 414px) aplikuje
 * `max-width:100%` -> width zmenseni na ~322px, ALE forced inline height
 * (362px) zustal -> aspect ratio destruction (image squished do portrait).
 *
 * Source z DB nemuzeme prepsat (WYSIWYG editor produkuje porad inline
 * styly), takze CSS override na user-facing render: pokud max-width
 * shrink width, MUSI byt height:auto aby aspect zustal. */
.article-container img,
article img {
  height: auto !important;
  max-width: 100%;
  /* Take redaktor mohl ulozit nesmyslne velky width (e.g. 2000px) na malem
   * obrazku — width:auto by braan jako fyzicky vetsi natural. Bezpecnejsi
   * je hands-off jen height. */
}

/* Mobile article container — zmensit redundantni padding
 * Drive: <section class="article-container container container-850 mx-auto
 * px-4 my-4 my-lg-5"> v mobilu mela `px-4` (24px) navrch nad #main padding
 * 10px → total 34px z kazdé strany = uzky content (346px z 414px viewportu).
 * V mobile staci #main padding 10px, article.px-4 muze byt 0. */
@media (max-width: 600px) {
  .article-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
}

/* Mobile checkout radio buttons — posunout 7px doleva
 * Drive: .radio label:before { left:0 } + .radio label:after { left:5px }
 * lepili kruhy radiobuttonu primo na okraj container → vypadali nalepene
 * na ikony dopravcu/platby. V mobile dame negative left aby kruhy sedeli
 * cca uprostred mezi okrajem obrazovky a ikon prepravce. */
@media (max-width: 600px) {
  .cartTransportItem .radio label:before {
    left: -7px !important;
  }
  .cartTransportItem .radio label:after {
    left: -2px !important;
  }
}

/* Mega-menu Oblečení (supcat7) — 3-sloupce misto 4
 * Drive: nav-col-item > li mel `width:25%` default → 4 sloupce s 270px each.
 * Texty "Trička a pola", "Mikiny a svetry" zasahovaly POD absolutni-positioned
 * `.gen` blok s ikonami panske/damske/detske (116px wide overlay vpravo).
 * Production `last.css` ma supcat7 override na 33% — sloupec 356px, dost
 * mista pro text 240px vlevo + overlay 116px vpravo bez prekryvu.
 *
 * Beta last.css legacy NEMA tento override (sdilena ale jen specific rules).
 * Mirror it here. */
@media (min-width: 992px) {
  #navigation .supcat7 .nav-level-2 > ul > li.nav-col-4 .nav-col-item > li {
    width: 33% !important;
  }
}

/* "Zobrazit vse" button v .headline-strip — H4 ma vetsi font (~24px),
   coz `.btn:not(.p-reset){font-size:100%}` zdedi → vetsi button. Pager
   button "Dalsi produkty" je v normalnim body kontextu (~16px) → mensi.
   Override font-size aby byly oba identicke. */
.headline-strip .btn { font-size: 14px; line-height: 2.5em; }
.headline-strip .btn span { font-size: 14px; line-height: 2.5em; }

/* Sort sipky vedle aktivni razeni hlavicky (▲ asc, ▼ desc) — produkce ma
   v `last.css?v=...` ale beta nikoli. Replika z produkce. */
#filter-sort .ca-box .asc:after,
#filter-sort .ca-box .desc:after {
  content: '';
  width: 0; height: 0;
  position: absolute;
  top: 3px;
  left: -15px;
  margin-left: 3px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
#filter-sort .ca-box .asc:after  { border-bottom: 12px solid #49943c; }
#filter-sort .ca-box .desc:after { border-top:    12px solid #49943c; }

/* Sidebar kategorie linky — produkce ma zeleny text, beta byl cerny. */
#param-filter .category-list .ca-category > .name { color: #49943c; }
#param-filter .category-list .ca-category > .name:hover { color: #5bac03; }
#param-filter .category-list ul ul a { color: #49943c; }
#param-filter .category-list ul ul a:hover { color: #5bac03; }

/* Mini-cart dropdown — skryj na mobilu, na tap jdi rovnou do /kosik/.
 * Drop-down je 480px sirky a absolute pozicovany, na mobilu se zobrazoval
 * mimo viewport. Link v hlavicke uz vede na /kosik/, takze staci dropdown
 * potlacit pro mobile breakpoint. */
@media (max-width:991px){
  #navigation #nav-basket .header-dropdown,
  #navigation #nav-basket.active .header-dropdown{
    display:none !important;
  }
}

/* Filtr v kategoriich — #f8f8f8 (stejny odstin jako desktop wrapper
 * .sec-gray.full-width.sec-shadow-top pod sidebar). Bez backgroundu je
 * #param-filter transparent a na mobilu se pres nej propisuje tmavy
 * overlay .side-bar.mob-ver (rgba(0,0,0,0.5)) — content je necitelny.
 * Cista bila (#fff) byla na desktopu prilis kontrastni; #f8f8f8 sedi
 * s celkovym layoutem. */
#param-filter{
  background:#f8f8f8;
}

/* Qty input v kosiku — fixni sirka aby vsechny radky meli stejne velke
 * inputy bez ohledu na pocet cislic. Bez teto rule type="number" input
 * roste podle obsahu (1 cislice vs 2 cislice = jina sirka), coz vypada
 * v sezamu polozek nesourode. */
.qtyForm .order-form__quantity{
  width:120px;
  box-sizing:border-box;
}