/* =========================================================
   v3 – stránka produktu.

   POČÍTAČ A TABLET (od 761 px) ostáva presne ako vo verzii 2.
   Všetko, čo pridáva v3, je tu buď v @media (max-width:760px),
   alebo je to na širšom displeji skryté.

   MOBIL (do 760 px) – konverzné poradie v pravom stĺpci:
   hodnotenie → názov → popis → záruky → výber variantu → doručenie
   → veľké tlačidlo s cenou → expresné platby,
   k tomu štvorcová galéria a prilepené tlačidlo pri rolovaní.
   ========================================================= */

/* ---------- prvky v3, ktoré sa na širšom displeji nezobrazujú ----------
   Markup sa vypisuje vždy (PHP nevie, aký má návštevník displej),
   skrývame ho preto tu. */
@media (min-width:761px){
  .lss3-trust,
  .lss3-delivery,
  .lss3-pricenote,
  .lss3-picker,
  .lss3-buybar,
  .lss3-gallery__counter,
  .lss-product__gallery .flex-direction-nav,
  .woocommerce div.product div.images .flex-direction-nav{display:none!important;}
}

/* ---------- galéria ----------
   Na počítači ostáva presne ako v predchádzajúcej verzii: fotka v prirodzenom
   pomere strán, pás náhľadov pod ňou a priblíženie pri prejdení myšou.
   Nové je len zobrazenie na mobile: štvorcová fotka 1:1, malé šípky
   na listovanie a počítadlo snímok. */
.lss-product__gallery{position:relative;}
.woocommerce-product-gallery{position:relative;}

@media (max-width:760px){
  /* Štvorcová fotka, ktorá nejde cez celú šírku displeja.
     Zámerne bez rámika: flexslider nastavuje výšku okna galérie cez jQuery
     .height(), ktoré rámik nepočíta, takže spodná (a podľa zaokrúhlenia aj
     pravá) čiara rámika sa orezávala. Bez rámika niet čo orezať. */
  .woocommerce-product-gallery__image{
    position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;
  }
  .woocommerce-product-gallery__image a{display:block;width:100%;height:100%;}
  /* .zoomImg je zväčšenina pri priblížení – tej sa nesmieme dotknúť */
  .woocommerce-product-gallery__image img:not(.zoomImg){
    width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;
  }
  /* namiesto náhľadov sú tu šípky a počítadlo */
  .woocommerce div.product div.images .flex-control-thumbs,
  .lss-product__gallery .flex-control-thumbs{display:none;}
  .lss-product__badge{top:0;left:0;z-index:3;}

  .lss3-gallery__counter{
    position:absolute;right:12px;bottom:12px;z-index:3;
    padding:5px 12px;border-radius:999px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
    font-size:12.5px;font-weight:700;color:var(--lss-ink);
    box-shadow:0 2px 10px rgba(0,0,0,.08);pointer-events:none;
  }

  /* malé okrúhle šípky */
  .lss-product__gallery .flex-direction-nav{list-style:none;margin:0;padding:0;}
  .lss-product__gallery .flex-direction-nav a{
    position:absolute;top:50%;z-index:4;transform:translateY(-50%);
    width:34px;height:34px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.95);box-shadow:0 2px 12px rgba(0,0,0,.14);
    font-size:0;color:transparent;opacity:1;text-indent:0;
    transition:background .2s,transform .2s;
  }
  .lss-product__gallery .flex-direction-nav a::before{
    content:'';width:9px;height:9px;border:solid var(--lss-ink);border-width:2px 2px 0 0;
  }
  .lss-product__gallery .flex-direction-nav .flex-prev{left:12px;}
  .lss-product__gallery .flex-direction-nav .flex-prev::before{transform:rotate(-135deg);margin-left:3px;}
  .lss-product__gallery .flex-direction-nav .flex-next{right:12px;}
  .lss-product__gallery .flex-direction-nav .flex-next::before{transform:rotate(45deg);margin-right:3px;}
  .lss-product__gallery .flex-direction-nav .flex-disabled{opacity:.35;pointer-events:none;}
}

/* ---------- pravý stĺpec (len mobil) ---------- */
@media (max-width:760px){
  /* Názov a krátky popis majú byť vidieť hneď, bez rolovania –
     preto sú odstupy nad nimi utiahnuté. Odznaky (záruka, CE) presúva
     product-v3.js pod súhrn. */
  .woocommerce div.product.lss-product{row-gap:14px;margin-top:6px;}
  /* Štvorec nesmie zabrať priveľa výšky displeja, inak názov a popis
     spadnú pod záhyb. Na vyšších telefónoch ostáva na celú šírku stĺpca,
     na nižších sa zmenší a vycentruje. */
  .lss-product__gallery{max-width:min(100%,44vh);margin-left:auto;margin-right:auto;}
  .lss-product__crumbs{margin-bottom:6px;}
  .lss-product__trust{margin-top:22px;}

  /* hodnotenie nad názvom */
  .lss-product__summary .lss-product__rating{
    display:flex;align-items:center;gap:8px;margin:0 0 8px;
    font-size:14px;font-weight:700;color:var(--lss-ink);
  }
  .lss-product__summary .lss-product__rating svg{color:var(--lss-ink);}
  .lss-product__summary .lss-product__rating-count{color:var(--lss-ink);text-decoration:underline;text-underline-offset:3px;}

  /* názov a krátky popis */
  .woocommerce div.product .lss-product__summary .product_title{
    font-size:28px;line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;
  }
  .woocommerce div.product .lss-product__summary .woocommerce-product-details__short-description{
    font-size:15px;line-height:1.55;color:var(--lss-body);margin:0 0 16px;
  }
  .lss-product__summary .woocommerce-product-details__short-description p:last-child{margin-bottom:0;}

  /* cenu ukazuje tlačidlo – pôvodný blok s cenou skryjeme,
     ale len keď skript naozaj beží (.lss3-js), inak by cena chýbala */
  .lss3-js .lss-product__price,
  .lss3-js .woocommerce-variation-price{display:none;}

  /* záruky */
  .lss3-trust{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 22px;}
  .lss3-trust__item{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:600;color:var(--lss-muted);
  }
  .lss3-trust__item svg{color:var(--lss-muted);flex:none;}

  /* doručenie nad tlačidlom */
  .lss3-delivery{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;margin:14px 0 8px;order:1;
    font-size:15px;font-weight:700;color:var(--lss-ink);
  }
  .lss3-delivery svg{color:#12a150;flex:none;}

  /* veľké tlačidlo s cenou */
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart.lss-simple-cart{flex-wrap:wrap;gap:12px;}
  .woocommerce div.product form.cart .button.single_add_to_cart_button{
    flex:1 1 auto;order:3;min-width:0;height:56px;border-radius:999px;
    background:var(--lss-black);color:#fff;
    font-size:16px;font-weight:800;letter-spacing:.01em;text-transform:none;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  /* theme.js obalí pole s množstvom do .lss-qty – poradie musí platiť naň,
     bez JavaScriptu ostane pôvodné .quantity */
  .woocommerce div.product form.cart .lss-qty,
  .woocommerce div.product form.cart .quantity{order:2;flex:none;}
  .lss3-pricenote{
    order:4;flex:1 1 100%;margin:4px 0 0;text-align:center;
    font-size:12.5px;font-weight:500;color:var(--lss-muted);
  }
}

/* ---------- výber variantu: riadok + panel zdola (len mobil) ---------- */
.lss3-picker{display:none;}
.lss3-sheet[hidden]{display:none;}

@media (max-width:760px){
  /* natívny výber nahrádza riadok – skryjeme ho, až keď riadok existuje */
  .lss3-has-variants select{display:none!important;}
  /* riadok musí mať celú šírku stĺpca, nie len šírku obsahu bunky */
  .woocommerce div.product form.cart table.variations,
  .woocommerce div.product form.cart table.variations tbody,
  .woocommerce div.product form.cart table.variations tr,
  .woocommerce div.product form.cart table.variations td.value,
  .lss3-has-variants{display:block;width:100%;}
  /* popis atribútu nesie samotný riadok, pôvodný nadpis by sa opakoval */
  .woocommerce div.product form.cart table.variations th.label{display:none;}
  .lss3-picker{
    display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
    padding:14px 16px;border:1.5px solid #d6d6db;border-radius:16px;background:#fff;
    font:inherit;color:var(--lss-ink);text-align:left;cursor:pointer;
  }
  .lss3-picker:active{border-color:var(--lss-ink);}
  .lss3-picker__text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .lss3-picker__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lss-muted);}
  .lss3-picker__value{font-size:15.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
  .lss3-picker.is-empty .lss3-picker__value{color:var(--lss-muted);font-weight:600;}
  .lss3-picker__icon{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;width:22px;}
  .lss3-picker__icon span{display:block;height:2px;border-radius:2px;background:var(--lss-ink);}
  .lss3-picker__icon span:nth-child(2){width:70%;}
  .lss3-picker__icon span:nth-child(3){width:45%;}
}

/* panel zdola – otvoriť sa dá len riadkom, ktorý je mimo mobilu skrytý */
.lss3-sheet{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;}
.lss3-sheet__backdrop{position:absolute;inset:0;background:rgba(9,9,9,.45);}
.lss3-sheet__panel{
  position:relative;z-index:1;width:100%;max-height:78vh;display:flex;flex-direction:column;
  background:#fff;border-radius:22px 22px 0 0;padding:6px 0 max(16px,env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:lss3-sheet-up .22s ease-out;
}
@keyframes lss3-sheet-up{from{transform:translateY(16px);opacity:.6;}to{transform:none;opacity:1;}}
.lss3-sheet__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 10px;border-bottom:1px solid var(--lss-line);
}
.lss3-sheet__title{font-size:16px;font-weight:800;}
.lss3-sheet__close{border:0;background:none;font-size:26px;line-height:1;color:var(--lss-muted);cursor:pointer;padding:0 4px;}
.lss3-sheet__list{list-style:none;margin:0;padding:6px 0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.lss3-sheet__opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:15px 18px;border:0;background:none;font:inherit;color:var(--lss-ink);
  text-align:left;cursor:pointer;
}
.lss3-sheet__name{flex:1;min-width:0;font-size:15.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
.lss3-sheet__price{flex:none;font-size:14.5px;font-weight:700;color:var(--lss-muted);}
.lss3-sheet__check{flex:none;width:22px;height:22px;border-radius:999px;border:1.5px solid #d6d6db;position:relative;}
.lss3-sheet__opt.is-active .lss3-sheet__check{background:var(--lss-red);border-color:var(--lss-red);}
.lss3-sheet__opt.is-active .lss3-sheet__check::after{
  content:'';position:absolute;left:7px;top:3.5px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.lss3-sheet__opt.is-active .lss3-sheet__price{color:var(--lss-ink);}
.lss3-sheet__opt[disabled],.lss3-sheet__opt.is-out{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
body.lss3-sheet-open{overflow:hidden;}

/* ---------- prilepené tlačidlo pri rolovaní (len mobil) ---------- */
@media (max-width:760px){
  .lss3-buybar{
    position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;
    align-items:center;gap:12px;
    /* Vpravo dole sedí bublina chatu – necháme jej miesto, aby neprekryla
       tlačidlo s cenou. Tlačidlo je preto vľavo, názov produktu vpravo.
       Ak by chat zmenil veľkosť, stačí upraviť --lss3-chat. */
    --lss3-chat:108px;
    padding:10px var(--lss3-chat) calc(10px + env(safe-area-inset-bottom,0px)) 16px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--lss-line);box-shadow:0 -6px 20px rgba(0,0,0,.08);
    /* Skrytá lišta je odsunutá pod okraj – prechod je plynulý, nie skokom. */
    transform:translateY(100%);opacity:0;pointer-events:none;
    transition:transform .22s ease,opacity .22s ease;
  }
  .lss3-buybar.is-visible{transform:none;opacity:1;pointer-events:auto;}
  @media (prefers-reduced-motion:reduce){
    .lss3-buybar{transition:none;}
  }
  .lss3-buybar__name{
    order:2;flex:1;min-width:0;font-size:13px;font-weight:700;line-height:1.25;color:var(--lss-ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .lss3-buybar__btn{
    order:1;flex:none;height:48px;padding:0 22px;border:0;border-radius:999px;
    background:var(--lss-black);color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;
    /* Cena sa nesmie orezať – ak je málo miesta, ustúpi názov (má min-width:0). */
    white-space:nowrap;max-width:100%;
  }
  .lss3-buybar__btn[disabled]{opacity:.5;cursor:not-allowed;}
  /* Na úzkych displejoch by na názov ostalo pár znakov – radšej len tlačidlo. */
  @media (max-width:379px){
    .lss3-buybar__name{display:none;}
  }
  body.lss3-has-buybar{padding-bottom:84px;}
}