/* =========================================================
   MagnetWorld – GLOBAL DESIGN SYSTEM (tokens + base)
   Dej ÚPLNĚ NA KONEC vlastního CSS
========================================================= */

:root{
  /* Brand */
  --mw-primary: #1195FE;
  --mw-primary-hover: #0F7ED4;
  --mw-text: #151515;
  --mw-muted: #444;
  --mw-border: rgba(0,0,0,.12);

  /* Fonts */
  --mw-font-head: "Futura PT", sans-serif;
  --mw-font-body: "Stolzl", sans-serif;

  /* Radius */
  --mw-radius-sm: 6px;
  --mw-radius-md: 10px;
  --mw-radius-lg: 18px;
  --mw-radius-pill: 999px;

  /* Shadows (sjednocení napříč webem) */
  --mw-shadow-card: 0 16px 36px rgba(0,0,0,.10);
  --mw-shadow-card-hover: 0 22px 46px rgba(0,0,0,.14);
  --mw-shadow-float: 0 6px 18px rgba(17,149,254,.35);

  /* Spacing */
  --mw-space-1: 6px;
  --mw-space-2: 10px;
  --mw-space-3: 14px;
  --mw-space-4: 18px;
  --mw-space-5: 24px;
  --mw-space-6: 32px;

  /* Underline (JEDINÁ sada proměnných – bez duplikací) */
  --mw-underline-width: 70px;
  --mw-underline-height: 6px;
  --mw-underline-radius: 5px;
  --mw-underline-offset: 29px;
  --mw-underline-color: var(--mw-primary);
}

/* =========================
   Base text
========================= */
body{
  color: var(--mw-text);
  font-family: var(--mw-font-body);
}

p, li, label, input, textarea{
  font-family: var(--mw-font-body);
  color: var(--mw-text);
}

/* Responsive body text (mobil/tablet/desktop) */
@media (max-width: 575px){
  p, li{ font-size: 15px; line-height: 22px; }
}
@media (min-width: 576px) and (max-width: 991px){
  p, li{ font-size: 16px; line-height: 24px; }
}
@media (min-width: 992px){
  p, li{ font-size: 18px; line-height: 26px; }
}

/* =========================
   Headings (globální sjednocení)
========================= */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--mw-font-head) !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--mw-text);
}

/* jemné defaulty, ať to nepůsobí rozházeně */
h1{ font-weight:700; margin: 0 0 var(--mw-space-5); }
h2{ font-weight:600; margin: var(--mw-space-6) 0 var(--mw-space-5); }
h3{ font-weight:600; margin: var(--mw-space-5) 0 var(--mw-space-3); }

/* =========================
   Links
========================= */
a{ color: inherit; }
a:hover, a:focus{
  color: var(--mw-primary) !important;
  text-decoration: underline;
}

/* =========================
   Card / white blocks (sjednocení stínů + radius)
========================= */
.mw-card{
  background: #fff;
  border-radius: var(--mw-radius-lg);
  box-shadow: var(--mw-shadow-card);
}
.mw-card:hover{
  box-shadow: var(--mw-shadow-card-hover);
}

/* =========================
   Buttons – jednotná velikost + pill tvar (desktop/tablet/mobil)
========================= */
.mw-btn,
.btn.btn-cart, .btn.btn-conversion, .p-bottom .btn.btn-primary,
.btn.btn-default, a.btn.btn-default{
  border-radius: var(--mw-radius-pill) !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  transition: all .25s ease-out !important;
}

/* Desktop */
@media (min-width: 992px){
  .mw-btn,
  .btn.btn-cart, .btn.btn-conversion, .p-bottom .btn.btn-primary,
  .btn.btn-default, a.btn.btn-default{
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 10px 50px !important;
  }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
  .mw-btn,
  .btn.btn-cart, .btn.btn-conversion, .p-bottom .btn.btn-primary,
  .btn.btn-default, a.btn.btn-default{
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 8px 40px !important;
  }
}
/* Mobil */
@media (max-width: 767px){
  .mw-btn,
  .btn.btn-cart, .btn.btn-conversion, .p-bottom .btn.btn-primary,
  .btn.btn-default, a.btn.btn-default{
    font-size: 4vw !important;
    line-height: 1.1 !important;
    padding: 2vw 4vw !important;
  }
}

/* Primary button (plné modré) */
.mw-btn--primary,
.btn.btn-cart, .btn.btn-conversion{
  background: var(--mw-primary) !important;
  border: 2px solid var(--mw-primary) !important;
  color: #fff !important;
}
.mw-btn--primary:hover,
.btn.btn-cart:hover, .btn.btn-conversion:hover{
  background: transparent !important;
  color: var(--mw-primary) !important;
}

/* Outline button */
.mw-btn--outline,
.p-bottom .btn.btn-primary,
.btn.btn-default, a.btn.btn-default{
  background: transparent !important;
  border: 2px solid var(--mw-primary) !important;
  color: var(--mw-primary) !important;
}
.mw-btn--outline:hover,
.p-bottom .btn.btn-primary:hover,
.btn.btn-default:hover, a.btn.btn-default:hover{
  background: var(--mw-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* CTA tlačítka nikdy nepodtrhávat */
.mw-btn, .mw-btn:hover,
.btn.btn-cart, .btn.btn-cart:hover,
.p-bottom .btn.btn-primary, .p-bottom .btn.btn-primary:hover,
.btn.btn-default, .btn.btn-default:hover{
  text-decoration: none !important;
}

/* =========================================================
   NADPISY – MagnetWorld underline (SAFE, bez kolizí)
   - ŽÁDNÉ globální h1::after / h2::after!
========================================================= */

/* underline jen na konkrétní Shoptet nadpisy */
.page-title,
.category-title,
.product-title,
.type-category h1,
.homepage-group-title{
  position: relative;
  padding-bottom: 50px;
}

/* underline pseudo-element */
.page-title::after,
.category-title::after,
.product-title::after,
.type-category h1::after,
.homepage-group-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--mw-underline-offset);
  width: var(--mw-underline-width);
  height: var(--mw-underline-height);
  border-radius: var(--mw-underline-radius);
  background-color: var(--mw-underline-color);
}

/* Responsivita underline */
@media (max-width: 991px){
  :root{
    --mw-underline-width: 60px;
    --mw-underline-height: 5px;
    --mw-underline-offset: 22px;
  }

  .page-title,
  .category-title,
  .product-title,
  .type-category h1,
  .homepage-group-title{
    padding-bottom: 42px;
  }
}

@media (max-width: 575px){
  :root{
    --mw-underline-width: 55px;
    --mw-underline-height: 4px;
    --mw-underline-offset: 20px;
  }

  .page-title,
  .category-title,
  .product-title,
  .type-category h1,
  .homepage-group-title{
    padding-bottom: 38px;
  }
}

/* =========================================================
   FIX: Titulka / slidery – underline vždy pod textem
   (homepage-group-title je DIV na 100% šířky -> zúžíme na text)
========================================================= */
.type-index .homepage-group-title{
  display: inline-block;      /* klíč */
  text-align: center;
}
.type-index .homepage-group-title::after{
  left: 0;
  transform: none;
}

/* =========================================================
   QUANTITY – sjednocený vzhled (detail + košík + mini košík)
========================================================= */
.quantity { border-radius: 6px; overflow: hidden; }

.quantity button{
  border-radius: 4px;
  background: #eaf4ff;
  transition: background .2s ease;
}
.quantity button:hover{ background: #d6e9ff; }

.quantity input.amount,
.quantity input[name="amount"]{ background: transparent; }

/* SKRÝT QUANTITY JEN VE VÝPISECH PRODUKTŮ */
.type-index .products span.quantity,
.type-category .products span.quantity,
.type-search .products span.quantity,
.type-manufacturer .products span.quantity,
.type-flag .products span.quantity,
.type-action .products span.quantity,
.type-news .products span.quantity{
  display: none;
}

/* pojistka pro input ve výpisech */
.type-index .products span.quantity input[name="amount"],
.type-category .products span.quantity input[name="amount"],
.type-search .products span.quantity input[name="amount"],
.type-manufacturer .products span.quantity input[name="amount"],
.type-flag .products span.quantity input[name="amount"],
.type-action .products span.quantity input[name="amount"],
.type-news .products span.quantity input[name="amount"]{
  display: none;
}

/* =========================================================
   MAGNETWORLD – SCROLL OFFSET + DOKUMENTOVÁ NAVIGACE
========================================================= */
html{ scroll-behavior: smooth; }

.mw-scroll-offset{ scroll-margin-top: 120px; }
@media (max-width: 768px){
  .mw-scroll-offset{ scroll-margin-top: 80px; }
}

/* layout – navigace + obsah (desktop) */
@media (min-width: 992px){
  .mw-doc-layout{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
  }
}

.mw-doc-nav{
  background: #fff;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg);
  padding: 18px 20px;
  margin: 16px 0 24px;
}

@media (min-width: 992px){
  .mw-doc-nav{
    position: sticky;
    top: 90px;
  }
}

.mw-doc-nav__title{
  font-family: var(--mw-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--mw-text);
  margin: 0 0 12px;
}

.mw-doc-nav__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mw-doc-nav__list a{
  font-family: var(--mw-font-body);
  font-size: 14px;
  color: var(--mw-text);
  text-decoration: none;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mw-doc-nav__list a::before{
  content: "›";
  color: var(--mw-primary);
  font-size: 18px;
  line-height: 1;
}

.mw-doc-nav__list a:hover{
  color: var(--mw-primary);
  text-decoration: underline;
}

.mw-doc-divider{
  border: 0;
  border-top: 1px solid var(--mw-border);
  margin: 20px 0;
}

/* =========================================================
   FINÁL: Titulka / slidery – underline přesně uprostřed textu
========================================================= */
.type-index .homepage-group-title{
  display: table !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.type-index .homepage-group-title::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* =========================================================
   MAGNETWORLD – PŘÍZNAKY (badge přes fotku)
   - barvy z administrace
   - ikona 🧲 vždy z CSS
   - další ikony (✨ 🎨 …) dáš do NÁZVU příznaku v adminu
========================================================= */

/* 1) Obal obrázku musí být relative (výpis + detail) */
.products .p .image,
.products .product .image,
.product .p-image,
.product .image,
.type-product .p-detail .image,
.type-product .p-detail-image,
.type-product .p-image,
.type-product .image,
.type-product .product-detail .image{
  position: relative !important;
}

/* 2) Wrapper pro více příznaků = overlay přes fotku */
.products .flags,
.product .flags,
.type-product .flags{
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;

  padding: 10px !important;
  pointer-events: none !important;
}
.products .flags .flag,
.product .flags .flag,
.type-product .flags .flag{
  pointer-events: auto !important;
}

/* 3) Styl běžných příznaků (NE sleva) – barvy z adminu necháváme */
.products .flag:not(.flag-discount),
.product-detail .flag:not(.flag-discount),
.product .flag:not(.flag-discount),
.p .flag:not(.flag-discount),
.type-product .flag:not(.flag-discount),
.type-product .product-detail .flag:not(.flag-discount),
.type-product .p-detail .flag:not(.flag-discount){

  /* fallback když flag není ve .flags */
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 20 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 9px 14px !important;
  border-radius: var(--mw-radius-pill) !important;
  overflow: hidden !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;

  border: 0 !important;

  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* když je flag uvnitř .flags, pozici řeší flex */
.products .flags .flag:not(.flag-discount),
.product .flags .flag:not(.flag-discount),
.type-product .flags .flag:not(.flag-discount){
  position: static !important;
  top: auto !important;
  left: auto !important;
}

/* FIX hranatosti: Shoptet často barví vnitřní span -> zaoblit i span */
.products .flag:not(.flag-discount) > span,
.product-detail .flag:not(.flag-discount) > span,
.product .flag:not(.flag-discount) > span,
.p .flag:not(.flag-discount) > span,
.type-product .flag:not(.flag-discount) > span{
  border-radius: inherit !important;
}
.products .flag:not(.flag-discount) span,
.product-detail .flag:not(.flag-discount) span,
.product .flag:not(.flag-discount) span,
.p .flag:not(.flag-discount) span,
.type-product .flag:not(.flag-discount) span{
  border-radius: inherit !important;
}

/* 4) Ikona – vždy magnet */
.products .flag:not(.flag-discount)::before,
.product-detail .flag:not(.flag-discount)::before,
.product .flag:not(.flag-discount)::before,
.p .flag:not(.flag-discount)::before,
.type-product .flag:not(.flag-discount)::before{
  content: "🧲";
  font-size: 14px;
  line-height: 1;
  transform: translateY(-.5px);
  opacity: .95;
}

/* 5) Sleva – vždy doprava dolů */
.products .flags .flag.flag-discount,
.product .flags .flag.flag-discount,
.type-product .flags .flag.flag-discount{
  margin-top: auto !important;
  align-self: flex-end !important;
}

/* fallback když sleva není ve .flags */
.products .flag.flag-discount:not(.flags .flag),
.type-product .flag.flag-discount:not(.flags .flag){
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  top: auto !important;
  z-index: 35 !important;
}

/* 6) Mobil */
@media (max-width: 480px){
  .products .flags,
  .product .flags,
  .type-product .flags{
    padding: 8px !important;
    gap: 6px !important;
  }

  .products .flag:not(.flag-discount),
  .product-detail .flag:not(.flag-discount),
  .product .flag:not(.flag-discount),
  .p .flag:not(.flag-discount),
  .type-product .flag:not(.flag-discount){
    top: 8px !important;
    left: 8px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  .products .flag.flag-discount:not(.flags .flag),
  .type-product .flag.flag-discount:not(.flags .flag){
    right: 8px !important;
    bottom: 8px !important;
  }
}

.products .flag:not(.flag-discount),
.product-detail .flag:not(.flag-discount),
.product .flag:not(.flag-discount),
.p .flag:not(.flag-discount),
.type-product .flag:not(.flag-discount){
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   MAGNETWORLD – SLEVA BUBLINA (DETAIL PRODUKTU) – SAFE
   - upravuje POUZE .flag-discount na detailu
   - zachová pozici i velikost (nešahá na right/bottom/padding/width)
   - barva: #0f4f8a
   - typografie jako tvoje badge příznaky (700 / .03em / uppercase / line-height:1)
   - NEovlivní hotové samostatné flagy příznaků
========================================================= */

/* 1) samotná bublina */
.type-product .flag.flag-discount{
  background-color: #0f4f8a !important;
  border-color: #0f4f8a !important;
  color: #fff !important;

  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  /* nesahat na font-size => necháme původní velikost textu/bubliny */
}

/* 2) Shoptet někdy barví vnitřní bloky – tady je "zneviditelníme",
      aby se vždy ukázalo pozadí rodiče (bubliny) */
.type-product .flag.flag-discount > span{
  background: transparent !important;
}

/* 3) Konkrétní texty uvnitř slevy – sjednotit vzhled a barvu textu */
.type-product .flag.flag-discount .price-standard,
.type-product .flag.flag-discount .price-save{
  color: #fff !important;

  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  background: transparent !important;
}

/* 4) Jemné rozlišení částí */
.type-product .flag.flag-discount .price-standard{ opacity: .85 !important; }
.type-product .flag.flag-discount .price-save{ opacity: 1 !important; }

/* 5) Tablet/mobil pojistka (jen typografie, ne velikost) */
@media (max-width: 991px){
  .type-product .flag.flag-discount,
  .type-product .flag.flag-discount .price-standard,
  .type-product .flag.flag-discount .price-save{
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }
}
/* =========================================================
   KATEGORIE – fix bílého textu na hover u tlačítka
========================================================= */
.category-description .btn-scroll-down:hover,
.category-description .btn-scroll-down:focus{
  color:#fff !important;
  text-decoration:none !important;
}
.category-description .btn-scroll-down:hover *,
.category-description .btn-scroll-down:focus *{
  color:#fff !important;
}
/* =========================================================
   MAGNETWORLD – SECONDARY BUTTONS (LOGIN/REGISTR + FORM SUBMIT)
   - sjednocená typografie + outline styl
   - SAFE: nezasahuje do košíku/CTA (btn-cart/btn-conversion)
========================================================= */

/* A) Typografie tlačítek (sjednocení napříč webem)
   - Shoptet někdy dává .btn-text jiný font/weight
*/
.mw-btn,
.btn,
a.btn,
button.btn,
input.btn{
  font-family: var(--mw-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  -webkit-font-smoothing: antialiased;
  text-decoration: none !important;
}

/* B) Cílová skupina: "sekundární" akce
   1) login/registr (btn-login)
   2) submit ve FORMU, který je v Shoptetu často .btn-primary ("Odeslat")
*/
.btn.btn-login,
input.btn.btn-login,
button.btn.btn-login,
form input[type="submit"].btn.btn-primary,
form button[type="submit"].btn.btn-primary{
  border-radius: var(--mw-radius-pill) !important;
  transition: all .25s ease-out !important;

  background: transparent !important;
  border: 2px solid var(--mw-primary) !important;
  color: var(--mw-primary) !important;
}

/* Hover – sekundární outline */
.btn.btn-login:hover,
input.btn.btn-login:hover,
button.btn.btn-login:hover,
form input[type="submit"].btn.btn-primary:hover,
form button[type="submit"].btn.btn-primary:hover{
  background: var(--mw-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Pojistka: když je uvnitř span/strong (nebo Shoptet barví text) */
.btn.btn-login *,
form input[type="submit"].btn.btn-primary *,
form button[type="submit"].btn.btn-primary *{
  color: inherit !important;
}

/* C) Velikosti – stejné jako tvůj systém (desktop/tablet/mobil) */
/* Desktop */
@media (min-width: 992px){
  .btn.btn-login,
  input.btn.btn-login,
  button.btn.btn-login,
  form input[type="submit"].btn.btn-primary,
  form button[type="submit"].btn.btn-primary{
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 10px 50px !important;
  }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
  .btn.btn-login,
  input.btn.btn-login,
  button.btn.btn-login,
  form input[type="submit"].btn.btn-primary,
  form button[type="submit"].btn.btn-primary{
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 8px 40px !important;
  }
}
/* Mobil */
@media (max-width: 767px){
  .btn.btn-login,
  input.btn.btn-login,
  button.btn.btn-login,
  form input[type="submit"].btn.btn-primary,
  form button[type="submit"].btn.btn-primary{
    font-size: 4vw !important;
    line-height: 1.1 !important;
    padding: 2vw 4vw !important;
  }
}
/* Header košík – "Prázdný košík" normální velikost (bez dopadu na jiné .btn) */
a[data-testid="headerCart"] span[data-testid="headerCartPrice"]{
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
}
/* =========================================================
   MAGNETWORLD – "Hledat" (js-try-search-button)
   Outline + hover modré s bílým textem
========================================================= */

button.btn.btn-primary.js-try-search-button{
  /* tvar + typografie */
  border-radius: var(--mw-radius-pill) !important;
  font-family: var(--mw-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  /* OUTLINE */
  background: transparent !important;
  border: 2px solid var(--mw-primary) !important;
  color: var(--mw-primary) !important;

  transition: all .25s ease-out !important;
  cursor: pointer;
}

button.btn.btn-primary.js-try-search-button:hover,
button.btn.btn-primary.js-try-search-button:focus{
  background: var(--mw-primary) !important;
  border-color: var(--mw-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* pojistka: kdyby Shoptet obalil text do span */
button.btn.btn-primary.js-try-search-button *{
  color: inherit !important;
}

/* velikosti – stejné jako tvůj systém */
/* Desktop */
@media (min-width: 992px){
  button.btn.btn-primary.js-try-search-button{
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 10px 50px !important;
  }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
  button.btn.btn-primary.js-try-search-button{
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 8px 40px !important;
  }
}
/* Mobil */
@media (max-width: 767px){
  button.btn.btn-primary.js-try-search-button{
    font-size: 4vw !important;
    line-height: 1.1 !important;
    padding: 2vw 4vw !important;
  }
}
/* =========================================================
   MAGNETWORLD – SELECT VARIANT (simple-variants-select)
   - sjednoceno s MW design systémem
   - SAFE: cílí jen na tento select
========================================================= */

#simple-variants-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  max-width: 100%;

  /* tvar + spacing */
  padding: 12px 54px 12px 22px;
  border-radius: var(--mw-radius-pill);

  /* barvy */
  background-color: #fff;
  border: 2px solid var(--mw-border);
  color: var(--mw-text);

  /* typografie */
  font-family: var(--mw-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;

  /* efekt */
  box-shadow: var(--mw-shadow-soft, 0 10px 24px rgba(0,0,0,.08));
  transition: all .25s ease-out;

  cursor: pointer;
}

/* HOVER */
#simple-variants-select:hover{
  border-color: var(--mw-primary);
}

/* FOCUS */
#simple-variants-select:focus{
  outline: none;
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 3px rgba(17,149,254,.18);
}

/* disabled varianta (např. "Zvolte variantu") */
#simple-variants-select:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* =========================================================
   ŠIPKA SELECTU (custom)
========================================================= */

#simple-variants-select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mw-primary) 50%),
    linear-gradient(135deg, var(--mw-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 28px) calc(50% - 3px),
    calc(100% - 22px) calc(50% - 3px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

@media (min-width: 992px){
  #simple-variants-select{
    max-width: 70%;        /* cca –30 % */
  }
}

/* =========================================================
   OPTION – jemnější text (ne všechny prohlížeče podporují)
========================================================= */

#simple-variants-select option{
  font-family: var(--mw-font-body);
  font-size: 15px;
  padding: 8px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet */
@media (max-width: 991px){
  #simple-variants-select{
    font-size: 15px;
    padding: 10px 48px 10px 20px;
  }
}

/* Mobil */
@media (max-width: 575px){
  #simple-variants-select{
    font-size: 15px;
    padding: 10px 44px 10px 18px;
  }
}
/* =========================================================
   MAGNETWORLD – výpis produktů: CTA vždy dole
========================================================= */
.products .product,
.products .product .p-in,
.products .product .p-in-in{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.products .product .p-bottom{
  margin-top: auto !important;
}
/* CHECKOUT – sjednotit velikost textu tlačítek s global.css */
@media (min-width: 992px){
  a#continue-order-button.btn.btn-lg.btn-conversion.next-step-forward,
  a.btn.btn-lg.next-step-back{
    font-size: 16px !important;
    line-height: 20px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  a#continue-order-button.btn.btn-lg.btn-conversion.next-step-forward,
  a.btn.btn-lg.next-step-back{
    font-size: 14px !important;
    line-height: 18px !important;
  }
}
@media (max-width: 767px){
  a#continue-order-button.btn.btn-lg.btn-conversion.next-step-forward,
  a.btn.btn-lg.next-step-back{
    font-size: 4vw !important;
    line-height: 1.1 !important;
  }
}

/* Kdyby to nafukoval vnitřní span, srovnáme i jeho */
a#continue-order-button.btn.btn-lg.btn-conversion.next-step-forward span,
a.btn.btn-lg.next-step-back span{
  font-size: inherit !important;
  line-height: inherit !important;
}
/* =========================================================
   CHECKOUT – ZPĚT DO OBCHODU: vždy v 1 řádku
========================================================= */

/* samotné tlačítko */
a.btn.btn-lg.next-step-back{
  white-space: nowrap !important;
}

/* když je v textu <br>, tak ho schováme */
a.btn.btn-lg.next-step-back br{
  display: none !important;
}

/* pokud je text rozsekaný do wrapperů/spanů, uděláme je inline */
a.btn.btn-lg.next-step-back span,
a.btn.btn-lg.next-step-back strong,
a.btn.btn-lg.next-step-back em,
a.btn.btn-lg.next-step-back i{
  display: inline !important;
  white-space: nowrap !important;
}
/* =========================================================
   CHECKOUT – POKRAČOVAT vždy v jednom řádku
========================================================= */

/* samotné tlačítko */
a#continue-order-button{
  white-space: nowrap !important;
}

/* skrytí jakéhokoli <br> uvnitř */
a#continue-order-button br{
  display: none !important;
}

/* všechny vnitřní obaly udělat inline */
a#continue-order-button span,
a#continue-order-button i,
a#continue-order-button strong,
a#continue-order-button em{
  display: inline !important;
  white-space: nowrap !important;
}

/* pokud je šipka absolutně nebo blokově, srovnáme ji */
a#continue-order-button i,
a#continue-order-button span:last-child{
  margin-left: 10px !important;
}
/* =========================================================
   CHECKOUT – POKRAČOVAT: stejné "tučné" jako ostatní CTA
========================================================= */
a#continue-order-button{
  font-weight: 600 !important; /* stejné jako global */
}

a#continue-order-button span,
a#continue-order-button i,
a#continue-order-button strong,
a#continue-order-button em{
  font-weight: inherit !important; /* aby to nepřebil vnitřní span */
}

/* =========================================================
   MW – HEADER IKONY (DESKTOP): Přihlášení + Registrace
   - ultra-robust selektory pro Shoptet (a11y_login)
   - ikony přes SVG masku => žádné fontové čtverečky
   - VLOŽ ÚPLNĚ NA KONEC CSS
========================================================= */

:root{
  --mw-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2-8 4.5A1.5 1.5 0 0 0 5.5 20h13A1.5 1.5 0 0 0 20 18.5C20 16 16.42 14 12 14Zm0-12a10 10 0 1 1-10 10A10 10 0 0 1 12 2Z'/%3E%3C/svg%3E");
  --mw-ico-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75ZM20.71 7.04a1 1 0 0 0 0-1.41L18.37 3.29a1 1 0 0 0-1.41 0l-1.83 1.83l3.75 3.75Z'/%3E%3C/svg%3E");
}

/* ====== 1) PŘIHLÁŠENÍ – nové trigger buttony (a11y_login) + fallback ====== */
.top-navigation-tools button[aria-controls="login"],
.top-navigation-tools button[data-dialog-id="login"],
.top-navigation-tools button[data-target="login"],
.top-navigation-tools .top-nav-button-login,
.top-navigation-tools .top-nav-button.top-nav-button-login{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* vytvořit ikonu vždy (i když ji něco předtím "vynulovalo") */
.top-navigation-tools button[aria-controls="login"]::before,
.top-navigation-tools button[data-dialog-id="login"]::before,
.top-navigation-tools button[data-target="login"]::before,
.top-navigation-tools .top-nav-button-login::before,
.top-navigation-tools .top-nav-button.top-nav-button-login::before{
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  flex: 0 0 auto !important;

  background-color: var(--mw-primary) !important;
  -webkit-mask: var(--mw-ico-user) center / contain no-repeat !important;
  mask: var(--mw-ico-user) center / contain no-repeat !important;

  opacity: 1 !important;
}

/* ====== 2) REGISTRACE – link (URL se může lišit) + fallback tříd ====== */
.top-navigation-tools a[href*="registrace"],
.top-navigation-tools a[href*="register"],
.top-navigation-tools a[href*="registration"],
.top-navigation-tools a[href*="customer/new"],
.top-navigation-tools a[href*="customer/registration"],
.top-navigation-tools .top-nav-button-register,
.top-navigation-tools .top-nav-button-registration,
.top-navigation-tools .top-nav-button.top-nav-button-register,
.top-navigation-tools .top-nav-button.top-nav-button-registration{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.top-navigation-tools a[href*="registrace"]::before,
.top-navigation-tools a[href*="register"]::before,
.top-navigation-tools a[href*="registration"]::before,
.top-navigation-tools a[href*="customer/new"]::before,
.top-navigation-tools a[href*="customer/registration"]::before,
.top-navigation-tools .top-nav-button-register::before,
.top-navigation-tools .top-nav-button-registration::before,
.top-navigation-tools .top-nav-button.top-nav-button-register::before,
.top-navigation-tools .top-nav-button.top-nav-button-registration::before{
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  flex: 0 0 auto !important;

  background-color: var(--mw-primary) !important;
  -webkit-mask: var(--mw-ico-edit) center / contain no-repeat !important;
  mask: var(--mw-ico-edit) center / contain no-repeat !important;

  opacity: 1 !important;
}
/* =========================================================
   MW – HEADER IKONY: přepsat modrou na šedou (OVERRIDE)
   VLOŽ ÚPLNĚ NA KONEC CSS
========================================================= */

/* Přihlášení – přesně stejné selektory jako v icon bloku */
.top-navigation-tools button[aria-controls="login"]::before,
.top-navigation-tools button[data-dialog-id="login"]::before,
.top-navigation-tools button[data-target="login"]::before,
.top-navigation-tools .top-nav-button-login::before,
.top-navigation-tools .top-nav-button.top-nav-button-login::before,

/* Registrace – přesně stejné selektory jako v icon bloku */
.top-navigation-tools a[href*="registrace"]::before,
.top-navigation-tools a[href*="register"]::before,
.top-navigation-tools a[href*="registration"]::before,
.top-navigation-tools a[href*="customer/new"]::before,
.top-navigation-tools a[href*="customer/registration"]::before,
.top-navigation-tools .top-nav-button-register::before,
.top-navigation-tools .top-nav-button-registration::before,
.top-navigation-tools .top-nav-button.top-nav-button-register::before,
.top-navigation-tools .top-nav-button.top-nav-button-registration::before{
  background-color: #8a8a8a !important; /* šedá */
}

/* volitelně hover */
.top-navigation-tools button:hover::before,
.top-navigation-tools a:hover::before{
  background-color: #555 !important;
}