/* =========================================================
   GymSupps – VARIANTY PRODUKTU
   FINAL v10 – čisté, stabilní, desktop + mobil
   Nahraď tím celé předchozí CSS pro #variants.
   ========================================================= */

/* ---------- základ ---------- */
#variants .variant-table{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

#variants .variant-table .table-row{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(150px,.42fr) minmax(390px,.88fr)!important;
  grid-template-areas:"info price cart"!important;
  align-items:center!important;
  gap:20px!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:18px!important;
  background:#fff!important;
  border:1px solid #e9eaec!important;
  border-radius:20px!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}

/* ---------- info ---------- */
#variants .variant-name-wrapper{
  grid-area:info!important;
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  column-gap:16px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
}

#variants .variant-image{
  grid-column:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:82px!important;
  height:82px!important;
  margin:0!important;
  padding:8px!important;
  background:#f5f5f6!important;
  border:0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

#variants .variant-image a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
}

#variants .variant-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  object-fit:contain!important;
}

#variants .variant-name-wrapper>div:not(.variant-image){
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;

  /* skryje textový uzel s interním kódem varianty */
  font-size:0!important;
  line-height:1!important;
}

#variants .variant-name{
  display:block!important;
  margin:0 0 10px!important;
  color:#202124!important;
  font-size:18px!important;
  line-height:1.22!important;
  font-weight:700!important;
}

/* EAN pryč */
#variants .productEan{
  display:none!important;
}

/* ---------- skladovost ---------- */
/* původní obsah schováme a sami vykreslíme tečku + text */
html body #variants .variant-name-wrapper span[style*="#009901"]{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  height:auto!important;
  margin:0 7px 0 0!important;
  padding:0!important;
  color:transparent!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  font-size:0!important;
  line-height:1!important;
  text-indent:0!important;
}

html body #variants .variant-name-wrapper span[style*="#009901"]::before{
  content:""!important;
  display:block!important;
  flex:0 0 8px!important;
  width:8px!important;
  height:8px!important;
  margin:0 5px 0 0!important;
  padding:0!important;
  background:#16a637!important;
  border:0!important;
  border-radius:50%!important;
  box-shadow:none!important;
  transform:none!important;
}

html body #variants .variant-name-wrapper span[style*="#009901"]::after{
  content:"Skladem"!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#078c25!important;
  background:none!important;
  font-family:inherit!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:700!important;
}

#variants .availability-amount{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  color:#7a7d82!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:500!important;
}

/* ---------- doručení ---------- */
#variants .delivery-time{
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  margin:9px 0 0!important;
  color:#777b81!important;
  font-size:12px!important;
  line-height:1.3!important;
}

#variants .delivery-time-label{
  color:#92959a!important;
  font-size:12px!important;
}

#variants .delivery-time>span:last-child{
  color:#3d4045!important;
  font-size:12px!important;
  font-weight:650!important;
}

/* ---------- cena ---------- */
/* obě cenové buňky sdílí stejnou oblast */
#variants .standard-price-wrap{
  grid-area:price!important;
  align-self:center!important;
  width:auto!important;
  margin:0!important;
  padding:0 0 37px!important;
  float:none!important;
  text-align:right!important;
  pointer-events:none!important;
}

#variants .price-standard{
  display:inline-block!important;
  color:#e3475c!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:500!important;
  text-decoration:line-through!important;
}

#variants .table-col.price{
  grid-area:price!important;
  align-self:center!important;
  width:auto!important;
  margin:0!important;
  padding:13px 0 0!important;
  float:none!important;
  text-align:right!important;
}

#variants .variant-price-wrap{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  margin:0!important;
}

#variants .price-final{
  margin:0!important;
  color:#202124!important;
  font-size:27px!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
}

/* ---------- košík ---------- */
#variants .table-col.cart{
  grid-area:cart!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
}

#variants .variant-cart,
#variants .variant-submit,
#variants .variant-submit fieldset{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

#variants .variant-submit fieldset{
  display:grid!important;
  grid-template-columns:120px minmax(250px,1fr)!important;
  gap:10px!important;
  align-items:stretch!important;
}

/* ---------- množství: - 1 + ---------- */
#variants .quantity{
  position:relative!important;
  display:grid!important;
  grid-template-columns:38px 44px 38px!important;
  grid-template-rows:54px!important;
  width:120px!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  background:#f8f8f9!important;
  border:1px solid #e1e3e6!important;
  border-radius:13px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

#variants .quantity>br,
#variants .quantity .increase-tooltip,
#variants .quantity .decrease-tooltip{
  display:none!important;
}

#variants .quantity .decrease{
  grid-column:1!important;
  grid-row:1!important;
}

#variants .quantity label{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:44px!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  border-left:1px solid #e1e3e6!important;
  border-right:1px solid #e1e3e6!important;
  box-sizing:border-box!important;
}

#variants .quantity .increase{
  grid-column:3!important;
  grid-row:1!important;
}

/* skutečné Shoptet buttony – vždy viditelné a klikatelné */
html body #variants .quantity button.decrease,
html body #variants .quantity button.increase{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  height:54px!important;
  min-width:38px!important;
  min-height:54px!important;
  margin:0!important;
  padding:0!important;
  color:#202124!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:5!important;
  transform:none!important;
}

/* =========================================================
   ZNAKY - / +
   ---------------------------------------------------------
   Shoptet si u +/- přidává vlastní vnitřní span/pseudo prvky.
   Proto uvnitř buttonu schováme úplně VŠECHNO a jediný
   viditelný znak vykreslíme sami přes ::before.
   Klikací zůstává celý skutečný BUTTON.
   ========================================================= */

/* žádný původní obsah uvnitř +/- buttonů */
html body #variants .quantity button.decrease > *,
html body #variants .quantity button.increase > *{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* zrušit všechny staré pseudo prvky */
html body #variants .quantity button.decrease::before,
html body #variants .quantity button.decrease::after,
html body #variants .quantity button.increase::before,
html body #variants .quantity button.increase::after{
  content:none!important;
  display:none!important;
}

/* přesně jeden znak MINUS */
html body #variants .quantity button.decrease::before{
  content:"-"!important;
  display:block!important;

  color:#202124!important;

  font-family:Arial,sans-serif!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:500!important;

  pointer-events:none!important;

  opacity:1!important;
  visibility:visible!important;
}

/* přesně jeden znak PLUS */
html body #variants .quantity button.increase::before{
  content:"+"!important;
  display:block!important;

  color:#202124!important;

  font-family:Arial,sans-serif!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:500!important;

  pointer-events:none!important;

  opacity:1!important;
  visibility:visible!important;
}

#variants .quantity input.amount{
  display:block!important;
  width:100%!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  color:#202124!important;
  background:#fff!important;
  border:0!important;
  outline:0!important;
  font-family:inherit!important;
  font-size:16px!important;
  line-height:54px!important;
  font-weight:700!important;
  text-align:center!important;
  appearance:textfield!important;
  -moz-appearance:textfield!important;
}

#variants .quantity input.amount::-webkit-inner-spin-button,
#variants .quantity input.amount::-webkit-outer-spin-button{
  margin:0!important;
  -webkit-appearance:none!important;
}

/* ---------- CTA ---------- */
#variants .add-to-cart-button{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  margin:0!important;
  padding:0 26px!important;
  color:#fff!important;
  background:#2d2f2e!important;
  border:0!important;
  border-radius:13px!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:700!important;
  text-indent:0!important;
}

#variants .add-to-cart-button::before,
#variants .add-to-cart-button::after{
  content:none!important;
  display:none!important;
}

#variants .add-to-cart-button .sr-only{
  position:static!important;
  display:inline!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  white-space:normal!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  font-weight:inherit!important;
}

/* ---------- hover ---------- */
@media (hover:hover) and (pointer:fine){
  #variants .variant-table .table-row{
    transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
  }

  #variants .variant-table .table-row:hover{
    transform:translateY(-1px)!important;
    border-color:#dfe1e4!important;
    box-shadow:0 7px 24px rgba(0,0,0,.035)!important;
  }

  #variants .add-to-cart-button:hover{
    background:#181919!important;
  }

  #variants .quantity button.increase:hover,
  #variants .quantity button.decrease:hover{
    background:#eeeeef!important;
  }
}

/* =========================================================
   MOBIL – stabilní jednoduchá karta
   ========================================================= */
@media (max-width:767px){

  #variants{
    margin-top:22px!important;
  }

  #variants .variant-table{
    padding:0 12px!important;
    box-sizing:border-box!important;
  }

  #variants .variant-table .table-row{
    display:block!important;
    width:100%!important;
    margin:0 0 12px!important;
    padding:16px!important;
    background:#fff!important;
    border:0!important;
    border-radius:18px!important;
    box-shadow:0 1px 0 rgba(0,0,0,.02)!important;
  }

  #variants .variant-name-wrapper{
    display:grid!important;
    grid-template-columns:66px minmax(0,1fr)!important;
    column-gap:13px!important;
    width:100%!important;
    margin:0 0 16px!important;
  }

  #variants .variant-image{
    width:66px!important;
    height:66px!important;
    padding:6px!important;
    border-radius:13px!important;
  }

  #variants .variant-name{
    margin:0 0 9px!important;
    font-size:17px!important;
    line-height:1.22!important;
  }

  html body #variants .variant-name-wrapper span[style*="#009901"]::before{
    margin-right:4px!important;
  }

  html body #variants .variant-name-wrapper span[style*="#009901"]{
    font-size:12px!important;
  }

  #variants .availability-amount{
    font-size:11px!important;
  }

  #variants .delivery-time,
  #variants .delivery-time-label,
  #variants .delivery-time>span:last-child{
    font-size:11px!important;
  }

  /* na mobilu starou cenu schováme – hlavní je nákup */
  #variants .standard-price-wrap{
    display:none!important;
  }

  #variants .table-col.price{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
  }

  #variants .variant-price-wrap{
    align-items:flex-start!important;
  }

  #variants .price-final{
    font-size:26px!important;
  }

  #variants .table-col.cart{
    display:block!important;
    width:100%!important;
    margin:14px 0 0!important;
    padding:0!important;
  }

  #variants .variant-cart,
  #variants .variant-submit,
  #variants .variant-submit fieldset{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  /* quantity pod cenou, zarovnané doprava */
  #variants .quantity{
    display:grid!important;
    grid-template-columns:38px 46px 38px!important;
    grid-template-rows:50px!important;
    width:122px!important;
    height:50px!important;
    margin:0 0 10px auto!important;
    border-radius:12px!important;
  }

  html body #variants .quantity button.decrease,
  html body #variants .quantity button.increase{
    width:38px!important;
    height:50px!important;
    min-width:38px!important;
    min-height:50px!important;
  }

  #variants .quantity label{
    width:46px!important;
    height:50px!important;
  }

  #variants .quantity input.amount{
    height:50px!important;
    font-size:16px!important;
    line-height:50px!important;
  }

  #variants .add-to-cart-button{
    display:flex!important;
    width:100%!important;
    height:58px!important;
    margin:0!important;
    padding:0 20px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }
}

/* malý mobil */
@media (max-width:380px){
  #variants .variant-table{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #variants .variant-table .table-row{
    padding:13px!important;
  }

  #variants .variant-name-wrapper{
    grid-template-columns:58px minmax(0,1fr)!important;
  }

  #variants .variant-image{
    width:58px!important;
    height:58px!important;
  }

  #variants .variant-name{
    font-size:16px!important;
  }
}


/* =========================================================
   MOBIL – FINÁLNÍ rozložení informační části varianty
   ---------------------------------------------------------
   Desktop se NEMĚNÍ.
   Na mobilu už nepoužíváme inline/flex skládání Shoptetu.
   Textový blok přepneme na vlastní GRID:
   1. název
   2. ? Skladem  (>5 ks)
   3. doručení
   ========================================================= */
@media (max-width:767px){

  /* pravá textová část vedle obrázku */
  #variants .variant-name-wrapper > div:not(.variant-image){
    display:grid!important;

    grid-template-columns:max-content max-content!important;
    grid-template-rows:auto auto auto!important;

    column-gap:7px!important;
    row-gap:0!important;

    justify-content:start!important;
    justify-items:start!important;
    align-items:center!important;

    width:100%!important;
    min-width:0!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;

    /* interní textový uzel s kódem varianty zůstane neviditelný */
    font-size:0!important;
    line-height:1!important;
  }

  /* 1. řádek – název */
  #variants .variant-name{
    grid-column:1 / -1!important;
    grid-row:1!important;

    display:block!important;

    width:auto!important;

    margin:0 0 9px!important;
    padding:0!important;

    text-align:left!important;
  }

  /* 2. řádek – sklad */
  html body #variants .variant-name-wrapper span[style*="#009901"]{
    grid-column:1!important;
    grid-row:2!important;

    display:inline-block!important;

    width:max-content!important;
    min-width:0!important;
    max-width:none!important;

    margin:0!important;
    padding:0!important;

    float:none!important;

    text-align:left!important;
    vertical-align:middle!important;

    transform:none!important;
  }

  /* samostatná tečka pryč */
  html body #variants .variant-name-wrapper span[style*="#009901"]::before{
    content:none!important;
    display:none!important;
  }

  /* tečka je background přímo u textu */
  html body #variants .variant-name-wrapper span[style*="#009901"]::after{
    content:"Skladem"!important;

    display:inline-block!important;

    width:auto!important;

    margin:0!important;
    padding:0 0 0 14px!important;

    color:#078c25!important;

    font-family:inherit!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:700!important;

    text-align:left!important;

    background:
      radial-gradient(circle, #16a637 0 4px, transparent 4.5px)
      left center / 8px 8px no-repeat!important;
  }

  /* (>5 ks) hned vedle */
  #variants .availability-amount{
    grid-column:2!important;
    grid-row:2!important;

    display:inline-block!important;

    width:max-content!important;

    margin:0!important;
    padding:0!important;

    float:none!important;

    color:#7a7d82!important;

    font-size:11px!important;
    line-height:1.2!important;

    text-align:left!important;
    vertical-align:middle!important;
  }

  /* 3. řádek – doručení */
  #variants .delivery-time{
    grid-column:1 / -1!important;
    grid-row:3!important;

    display:flex!important;
    align-items:baseline!important;
    justify-content:flex-start!important;

    width:auto!important;
    min-width:0!important;

    gap:5px!important;

    margin:8px 0 0!important;
    padding:0!important;

    text-align:left!important;
  }
}