/* =====================================================================
   pridane-do-kosika.css — okno „Pridané do košíka“ (Shoptet Rozšírená objednávka)
   Verzia: v4 (2026-10-04) – štvorcové šípky slidera so zaoblením 5 px
   Jeden súbor pre všetkých 7 shopov (sk, cz, hu, de, at, it, fr), bez textov.

   Zapína sa v admine: Nastavenia → Objednávky → Ostatné nastavenia →
   Rozšírená objednávka → „Zobraziť“. Produkty v okne = Súvisiace produkty.

   Vzhľad podľa našich okien AR a „mat vs lesk“: tmavé teplé prekrytie,
   biela karta so zaoblením 16 px, okrúhly krížik, na mobile spodný panel
   (18 px zaoblenie hore). Okno sa zmestí na obrazovku celé bez posúvania.

   Shoptet otvára okno cez Colorbox (#colorbox.shoptet-modal-lg, šírka 1152 px,
   výška a poloha ako inline štýl) – preto !important pri rozmeroch a polohe.
   Všetko je viazané na :has(.advanced-order), ostatné okná Colorboxu
   (galéria, prihlásenie…) sa nemenia.

   Slider produktov počíta šírku kariet z šírky okna pri otvorení
   a počet kariet podľa šírky obrazovky: ≥1200 px 3, 992–1199 px 2,
   768–991 px 1, do 767 px 2. Šírka okna je preto zvolená tak,
   aby karta mala vždy ~220–260 px (na mobile ~165 px).
   ===================================================================== */

/* ---------- prekrytie (len keď je otvorené toto okno) ----------
   style.css shopov má #cboxOverlay priehľadné; Colorbox mu dáva opacity .65
   → .85 × .65 ≈ .55, rovnako ako pri AR okne rgba(28,22,14,.55) */
#cboxOverlay:has(~ #colorbox .advanced-order){
  background-color:rgba(28,22,14,.85) !important;
  z-index:2147483000 !important;
}

/* ---------- okno ---------- */
#colorbox:has(.advanced-order){
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%);
  width:760px !important;
  max-width:calc(100vw - 32px);
  height:auto !important;
  margin:0 !important;
  overflow:hidden;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  z-index:2147483001 !important;
}
#colorbox:has(.advanced-order) #cboxWrapper,
#colorbox:has(.advanced-order) #cboxContent,
#colorbox:has(.advanced-order) #cboxLoadedContent{
  position:relative;
  float:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  box-sizing:border-box;
}
#colorbox:has(.advanced-order) #cboxWrapper > div{float:none !important}
#colorbox:has(.advanced-order) #cboxTopLeft,
#colorbox:has(.advanced-order) #cboxTopCenter,
#colorbox:has(.advanced-order) #cboxTopRight,
#colorbox:has(.advanced-order) #cboxMiddleLeft,
#colorbox:has(.advanced-order) #cboxMiddleRight,
#colorbox:has(.advanced-order) #cboxBottomLeft,
#colorbox:has(.advanced-order) #cboxBottomCenter,
#colorbox:has(.advanced-order) #cboxBottomRight{display:none !important}
#colorbox:has(.advanced-order) #cboxContent{background:#fff;border-radius:inherit}
/* posúva sa len obsah, ak by sa predsa nezmestil (nízke okno prehliadača) */
#colorbox:has(.advanced-order) #cboxLoadedContent{
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:0 !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#cboxLoadedContent .colorbox-html-content:has(> .advanced-order){padding:0}

/* krížik ako v AR okne: 36 px, svetlosivý kruh */
#colorbox:has(.advanced-order) #cboxClose{
  top:12px;right:12px;
  width:36px;height:36px;
  border-radius:50%;
  background-color:#f4f4f4 !important;
  color:#444;
  z-index:5;
}
#colorbox:has(.advanced-order) #cboxClose:hover{background-color:#ececec !important}
#colorbox:has(.advanced-order) #cboxClose:before{
  left:0;top:0;width:36px;line-height:36px;
  font-size:14px;text-align:center;color:#444;
}
#colorbox:has(.advanced-order) #cboxClose:focus-visible{outline:2px solid #111;outline-offset:2px}

/* plávajúce prvky, ktoré by ležali na tmavom prekrytí (rovnako ako pri AR okne) */
body:has(> #colorbox .advanced-order) .retino-badge-panel,
body:has(> #colorbox .advanced-order) [class*=badge-panel]{display:none !important}

/* ---------- obsah ---------- */
.advanced-order{
  padding:22px 24px 20px;
  text-align:center;
  font-family:inherit;
  color:#202020;
}

/* nadpis „Pridané do košíka“ so zelenou fajkou (farba tlačidla shopu) */
/* fajka je v riadku s textom – pri dlhšom nadpise (de) sa zalomí spolu s ním */
.advanced-order .h1{
  display:block;
  margin:0;
  padding:0 40px;
  font-size:20px;
  font-weight:800;
  line-height:1.25;
  color:#202020;
  text-transform:none;
}
.advanced-order .h1::before{
  content:"";
  display:inline-block;
  vertical-align:-5px;
  margin-right:8px;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--color-secondary,#93ba40) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpolyline points='5 13 10 18 19 7' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* pridaný produkt: názov + zvolený variant v jemnej karte (ako .drevko-fcard) */
.advanced-order .h2:not(.advanced-order-suggestion){
  margin:14px 0 0;
  padding:11px 16px 12px;
  border:1px solid #ececec;
  border-radius:12px;
  background:#fafafa;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  color:#202020;
  text-transform:none;
}
.advanced-order .h2:not(.advanced-order-suggestion) span{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:#7a7a7a;
}
.advanced-order .h2:not(.advanced-order-suggestion) span:empty{display:none}

/* samostatné potvrdenie pridania zľavového kódu spoločne s produktom:
   iba kompaktnejšie rozloženie; pôvodné pozadie a tučný kód ostávajú. */
.advanced-order .shkDiscountPromoAdvancedOrder{
  display:block;
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  line-height:1.45;
  max-width:100%;
  box-sizing:border-box;
}

/* doprava zdarma / zľava (ak ich Shoptet zobrazí) – drobný riadok */
.advanced-order .extras-wrap{justify-content:center;gap:6px 16px}
.advanced-order .extras-wrap .extra{
  margin:10px 0 0 !important;
  width:auto;
  font-size:13px;
  line-height:1.4;
  text-align:center;
}
.advanced-order .extras-wrap .extra.step{margin:10px 0 0 !important}
.advanced-order .extras-wrap .extra .price-range{margin-top:4px}

/* tlačidlá: dve rovnako široké, hlavné (košík) vpravo vo farbe shopu */
.advanced-order .advancedOrder__buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 0;
}
.advanced-order .advancedOrder__buttons .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:0;
  padding:8px 14px;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  text-transform:none;
  box-shadow:none;
}
/* „Späť do obchodu“: svetlosivé bez orámovania – ako tlačidlo Obľúbené v hlavičke pri prejdení myšou (#f3f3f3) */
.advanced-order .advancedOrder__buttons .next-step-back{
  border:0;
  background:#f3f3f3;
  color:#202020;
}
.advanced-order .advancedOrder__buttons .next-step-back:hover{
  border:0;
  background:#e8e8e8;
  color:#111;
}
.advanced-order .advancedOrder__buttons .next-step-back:focus-visible{outline:2px solid #111;outline-offset:2px}
.advanced-order .advancedOrder__buttons .btn-conversion{
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* „Ostatní zákazníci tiež nakúpili“ – menší nadpis, šípky v jeho riadku */
.advanced-order .advanced-order-suggestion{
  margin:18px 0 0;
  padding:16px 84px 0 0;
  border-top:1px solid transparent;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  text-align:left;
  text-transform:none;
  color:#202020;
}

/* ---------- slider produktov ---------- */
/* šípky sedia v riadku nadpisu: obal sa vytiahne o 32 px hore a šípky sú
   v jeho hornom páse (Shoptet dáva obalu overflow:hidden, von nesmú) */
.advanced-order .products-wrapper.product-slider-holder{
  width:auto;
  margin:-30px -6px 0;
  padding:42px 0 0 !important;
}
.advanced-order .product-slider-holder .product-slider{
  margin:0 !important;
  padding:0 !important;
}
.advanced-order .product-slider-holder .product-slider-pagination{display:none}
.advanced-order .product-slider-holder .product-slider-navigation{
  top:0;
  bottom:auto;
  transform:none;
  width:32px;
  height:32px;
  border:1px solid #e2e2e2;
  border-radius:5px;
  background:#fff;
  opacity:1;
  z-index:2;
  transition:border-color .15s,background-color .15s;
}
.advanced-order .product-slider-holder .product-slider-navigation.navigation-prev{left:auto;right:46px}
.advanced-order .product-slider-holder .product-slider-navigation.navigation-next{right:6px}
.advanced-order .product-slider-holder .product-slider-navigation:before{
  width:30px;height:30px;
  font-size:14px;
  background:none !important;
  color:#202020;
}
.advanced-order .product-slider-holder .product-slider-navigation:hover{border-color:#111;background:#fff}
.advanced-order .product-slider-holder .product-slider-navigation:hover:before{color:#111}
.advanced-order .product-slider-holder .product-slider-navigation:focus-visible{outline:2px solid #111;outline-offset:2px}

/* karta: obrázok 4:3, cena, názov max. 2 riadky (poradie ako vo výpise kategórie),
   akciový box doplnku je v odporúčaných kartách skrytý.
   Selektory začínajú „.advanced-order .products-block>div .p“, aby prebili
   pravidlá kariet zo style.css shopov (.products-block>div .p …). */
.advanced-order .products-wrapper .products-block{margin:0 !important;padding:0 !important}
.advanced-order .products-block>div,
.advanced-order .products-block>div:hover{
  margin:0 !important;
  padding:0 6px !important;
  border:0 !important;
  border-radius:0;
  background:none !important;
  box-shadow:none !important;
}
.advanced-order .products-block>div .p{
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:left;
}
.advanced-order .products-block>div .p>a.image{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  margin:0 0 8px;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  background:#f5f5f4;
}
.advanced-order .products-block>div .p>a.image img{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  border-radius:0;
  transition:transform .3s ease;
}
.advanced-order .products-block>div .p:hover>a.image img{transform:scale(1.03)}
.advanced-order .products-block>div .p>a.image:after{display:none}

/* štítky (Zľava, Novinka) menšie */
.advanced-order .products-block>div .p .flags{top:6px;left:6px}
.advanced-order .products-block>div .p .flags .flag{
  margin:0 0 3px;
  padding:2px 7px;
  border-radius:5px;
  font-size:10px;
  line-height:1.4;
}

.advanced-order .products-block>div .p .p-in{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  flex:1 1 auto;
  padding:0 !important;
  text-align:left;
}
.advanced-order .products-block>div .p .p-in-in{flex-basis:auto;order:1;padding:0;margin:0}
.advanced-order .products-block>div .p .name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  height:auto !important;
  min-height:0;
  margin:0;
  padding:0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:#202020;
  text-decoration:none;
}
.advanced-order .products-block>div .p .name:hover{text-decoration:underline}
.advanced-order .products-block>div .p .name span{font:inherit;color:inherit}
.advanced-order .products-block>div .p .ratings-wrapper{display:none}

.advanced-order .products-block>div .p .p-bottom{
  flex-basis:auto;
  order:0;
  margin:0 0 2px;
  padding:0 !important;
  border:0;
}
.advanced-order .products-block>div .p .p-bottom>div{display:block;padding:0;margin:0;text-align:left}
.advanced-order .products-block>div .p .p-bottom>div .prices{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:0 8px;
  margin:0;
  padding:0;
  border:0;
  white-space:nowrap;
}
.advanced-order .products-block>div .p .p-bottom>div .prices .price-final{margin:0;padding:0;font-size:15px;line-height:1.3}
.advanced-order .products-block>div .p .p-bottom>div .prices .price-final strong{font-size:inherit;font-weight:800}
.advanced-order .products-block>div .p .p-bottom>div .prices .price-final small{font-size:12px;font-weight:700}
.advanced-order .products-block>div .p .p-bottom>div .prices .price-standard,
.advanced-order .products-block>div .p .p-bottom>div .prices .price-save{margin:0;font-size:12px}
/* cena za m² (mäkké sklo) na vlastnom riadku, drobná sivá */
.advanced-order .products-block>div .p .p-bottom>div .prices .price-measure{
  flex-basis:100%;
  margin:0;
  padding:0;
  font-size:12px;
  line-height:1.3;
  color:#7a7a7a;
}
.advanced-order .products-block>div .p .p-tools{display:none}

/* doplnok Dynamické akcie a zľavy: v odporúčaných kartách skrytý celý box
   aj jeho medzera; samostatné potvrdenie pridania kódu nad tlačidlami ostáva. */
.advanced-order .products-block>div .p .shkDiscountPromoProduct{
  order:3;
  width:100%;
  max-width:100%;
  margin:auto 0 0 !important;
  padding-top:8px;
}
.advanced-order .products-block>div .p .shkDiscountPromoProduct,
.advanced-order .products-block>div .p .shkDiscountPromoSpace{display:none !important}
.advanced-order .products-block>div .p .shkDiscountPromoProduct__header{
  margin:0 0 -9px 6px;
  padding:3px 8px;
  font-size:11px;
  line-height:12px;
}
.advanced-order .products-block>div .p .shkDiscountPromoProduct__content__main{
  gap:0 10px;
  padding:11px 8px 4px;
  border-width:1.5px;
  border-radius:var(--shk-promo-border-r,6px);
}
.advanced-order .products-block>div .p .shkDiscountPromoProduct__content__promoPrice,
.advanced-order .products-block>div .p .shkDiscountPromoProduct__content__fixedDiscount{font-size:14px;line-height:1.3}
.advanced-order .products-block>div .p .shkDiscountPromoProduct__content__promoCode{
  margin:2px 0 3px;
  padding:0 7px;
  font-size:11px;
}
.advanced-order .products-block>div .p .shkDiscountPromoSpace:empty{display:none}

/* ---------- 992–1199 px: 2 karty → užšie okno ---------- */
@media (min-width:768px) and (max-width:1199px){
  #colorbox:has(.advanced-order){width:560px !important}
}

/* ---------- 768–991 px: Shoptet ukáže 1 kartu → karta naležato ---------- */
@media (min-width:768px) and (max-width:991px){
  #colorbox:has(.advanced-order){width:520px !important}
  .advanced-order .products-block>div .p{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .advanced-order .products-block>div .p>a.image{flex:0 0 172px;width:172px;margin:0}
  .advanced-order .products-block>div .p .p-in{justify-content:center}
}

/* ---------- mobil: spodný panel ako AR okno ---------- */
@media (max-width:767px){
  #colorbox:has(.advanced-order){
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    transform:none;
    width:100% !important;
    max-width:100%;
    border-radius:18px 18px 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,.25);
  }
  #colorbox:has(.advanced-order) #cboxLoadedContent{
    max-height:92vh;
    max-height:92dvh;
  }
  #colorbox:has(.advanced-order) #cboxClose{top:10px;right:10px;background-color:#ececec !important}
  .advanced-order{padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .advanced-order .h1{font-size:18px;padding:0 34px}
  .advanced-order .h1::before{width:22px;height:22px;margin-right:7px;vertical-align:-5px;background-size:14px}
  .advanced-order .h2:not(.advanced-order-suggestion){margin-top:12px;padding:10px 12px 11px;font-size:14px}
  .advanced-order .h2:not(.advanced-order-suggestion) span{font-size:12.5px}
  .advanced-order .advancedOrder__buttons{gap:8px;margin-top:12px}
  .advanced-order .advancedOrder__buttons .btn{min-height:46px;padding:7px 10px;font-size:14px}
  .advanced-order .advanced-order-suggestion{margin-top:16px;padding-top:14px;font-size:14px}
  .advanced-order .products-wrapper.product-slider-holder{margin-top:-29px;padding-top:40px !important}
  .advanced-order .products-block>div,
  .advanced-order .products-block>div:hover{padding:0 5px !important}
  .advanced-order .products-wrapper.product-slider-holder{margin-left:-5px;margin-right:-5px}
  .advanced-order .product-slider-holder .product-slider-navigation.navigation-prev{right:45px}
  .advanced-order .product-slider-holder .product-slider-navigation.navigation-next{right:5px}
  .advanced-order .products-block>div .p .name{font-size:12.5px}
  .advanced-order .products-block>div .p .p-bottom>div .prices .price-final{font-size:14px}
}

/* ---------- malý mobil (napr. 320×568, 375×600) ---------- */
@media (max-width:767px) and (max-height:600px){
  .advanced-order{padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .advanced-order .h1{font-size:17px}
  .advanced-order .h2:not(.advanced-order-suggestion){margin-top:10px;padding:8px 12px 9px}
  .advanced-order .advancedOrder__buttons{margin-top:10px}
  .advanced-order .advancedOrder__buttons .btn{min-height:42px;font-size:13.5px}
  .advanced-order .advanced-order-suggestion{margin-top:12px;padding-top:12px}
  .advanced-order .products-block>div .p>a.image{aspect-ratio:3/2}
}

/* ---------- nízke okno na notebooku (napr. 1366×768 → ~650 px) ---------- */
@media (min-width:768px) and (max-height:680px){
  .advanced-order{padding:18px 22px 16px}
  .advanced-order .h2:not(.advanced-order-suggestion){margin-top:12px;padding:9px 14px 10px}
  .advanced-order .advancedOrder__buttons{margin-top:12px}
  .advanced-order .advancedOrder__buttons .btn{min-height:44px}
  .advanced-order .advanced-order-suggestion{margin-top:14px;padding-top:14px}
  .advanced-order .products-block>div .p>a.image{aspect-ratio:3/2}
}

/* ---------- veľmi nízka obrazovka (mobil naležato): karty naležato ---------- */
@media (max-height:500px){
  .advanced-order{padding:12px 16px 10px}
  .advanced-order .h1{font-size:17px}
  .advanced-order .h1::before{width:20px;height:20px;vertical-align:-4px;background-size:13px}
  .advanced-order .h2:not(.advanced-order-suggestion){margin-top:8px;padding:7px 12px 8px;font-size:14px;line-height:1.3}
  .advanced-order .h2:not(.advanced-order-suggestion) span{margin-top:1px;font-size:12px;line-height:1.35}
  .advanced-order .advancedOrder__buttons{margin-top:8px}
  .advanced-order .advancedOrder__buttons .btn{min-height:40px;padding:5px 10px;font-size:14px}
  .advanced-order .advanced-order-suggestion{margin-top:10px;padding-top:10px;font-size:14px}
  .advanced-order .products-wrapper.product-slider-holder{margin-top:-27px;padding-top:37px !important}
  .advanced-order .products-block>div .p{flex-direction:row;align-items:center;gap:10px}
  .advanced-order .products-block>div .p>a.image{flex:0 0 100px;width:100px;aspect-ratio:4/3;margin:0}
  .advanced-order .products-block>div .p .p-in{justify-content:center}
  .advanced-order .products-block>div .p .shkDiscountPromoProduct{margin-top:0 !important;padding-top:6px}
  #colorbox:has(.advanced-order) #cboxClose{top:8px;right:8px;width:32px;height:32px}
  #colorbox:has(.advanced-order) #cboxClose:before{width:32px;line-height:32px}
}

/* jemný nábeh okna */
@keyframes dk-ao-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#colorbox:has(.advanced-order) #cboxWrapper{animation:dk-ao-in .22s ease-out}
@media (prefers-reduced-motion:reduce){
  #colorbox:has(.advanced-order) #cboxWrapper{animation:none}
  .advanced-order .products-block>div .p>a.image img{transition:none}
}