/* trikito-popup-1.css — Shoptet colorbox popupy (Přidáno do košíku aj.)
   v SVĚTLO: bílý panel radius 20, fade+rise vstup, černé CTA se žlutým
   hoverem. CSS-only, do chování colorboxu nesahá. Tokeny literálně,
   popup žije mimo naše scopy. */

/* ── overlay ── */
#cboxOverlay{background:rgba(27,21,19,.7)!important;animation:tkPopFade .3s ease}
@keyframes tkPopFade{from{opacity:0}}

/* ── panel ── */
#colorbox{animation:tkPopVstup .38s cubic-bezier(.16,1,.3,1);outline:0}
@keyframes tkPopVstup{from{opacity:0;transform:translateY(16px) scale(.98)}}
#cboxContent{background:#fff!important;border-radius:20px!important;
  box-shadow:0 24px 70px rgba(27,21,19,.28);overflow:visible!important}
#cboxLoadedContent{border-radius:20px;background:#fff!important;
  font-family:'Grift',-apple-system,system-ui,sans-serif;color:#1B1513}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{background:none!important;display:none!important}

/* ── zavírací křížek (nativně textové tlačítko Zavřít) ── */
#cboxClose{position:absolute;top:14px;right:16px;width:38px;height:38px;
  font-size:0!important;line-height:0;text-indent:0!important;
  background:#fff!important;border:0;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(27,21,19,.16);cursor:pointer;
  transition:box-shadow .18s,transform .18s;z-index:5}
#cboxClose::before{content:"×";font-size:22px;line-height:38px;color:#1B1513;
  font-family:'Grift',sans-serif;display:block}
#cboxClose:hover{box-shadow:inset 0 0 0 2px #1B1513;transform:rotate(90deg)}

/* ── obsah Přidáno do košíku ── */
#colorbox .advanced-order{padding:34px 38px 30px;text-align:center}
#colorbox .advanced-order .h1{font-size:26px;font-weight:800;letter-spacing:-.015em;
  color:#1B1513;margin:0 0 6px;font-family:inherit}
#colorbox .advanced-order .h2{font-size:16px;font-weight:700;color:#1B1513;margin:0 0 18px}
#colorbox .advanced-order .h2 span{display:inline-block;font-weight:600;
  color:rgba(27,21,19,.62);margin-left:6px}
#colorbox .extras-wrap{max-width:520px;margin:0 auto 22px}
#colorbox .extra.delivery{background:#F4F1EA;border-radius:14px;padding:14px 18px;
  font-size:14.5px;color:#1B1513;position:relative;overflow:hidden}
#colorbox .extra.delivery::before,#colorbox .extra.delivery::after{display:none!important}
#colorbox .extra.delivery img,#colorbox .extra.delivery svg,
#colorbox .extra.delivery .icon{display:none!important}
#colorbox .extra.delivery strong{font-weight:800}
#colorbox .extra.delivery strong:last-of-type{color:#0F6F5C}
#colorbox .extra.delivery .price-range{height:5px;background:rgba(27,21,19,.10);
  border-radius:4px;margin-top:11px;overflow:hidden}
#colorbox .extra.delivery .price-range>div{height:100%;background:#0F6F5C;border-radius:4px}

/* ── tlačítka ── */
#colorbox .advancedOrder__buttons{display:flex;justify-content:center;align-items:center;
  gap:22px;flex-wrap:wrap;margin-top:4px}
#colorbox .advancedOrder__buttons .btn{float:none;margin:0}
#colorbox .btn.next-step-back{background:none!important;border:0!important;
  color:rgba(27,21,19,.62)!important;font:600 14.5px/1.2 'Grift',sans-serif;
  text-transform:none!important;text-decoration:underline;text-underline-offset:3px;
  padding:10px 6px;cursor:pointer;transition:color .18s;box-shadow:none!important}
#colorbox .btn.next-step-back:hover{color:#1B1513!important}
#colorbox .btn.btn-conversion{background:#1B1513!important;color:#fff!important;
  border:0!important;border-radius:16px!important;
  font:700 15px/1 'Grift',sans-serif;letter-spacing:.02em;text-transform:none!important;
  padding:17px 34px;cursor:pointer;box-shadow:none!important;text-decoration:none!important;
  transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1)}
#colorbox .btn.btn-conversion:hover{background:#FFD21E!important;color:#1B1513!important}

/* ── mobil ── */
@media(max-width:620px){
  #colorbox .advanced-order{padding:26px 18px 22px}
  #colorbox .advanced-order .h1{font-size:21px}
  #colorbox .advancedOrder__buttons{gap:12px}
  #colorbox .btn.btn-conversion{width:100%;padding:16px 20px}
}
@media(prefers-reduced-motion:reduce){
  #colorbox,#cboxOverlay{animation:none}
  #cboxClose{transition:none}
}

/* ══════════ v2: sekce „Ostatní zákazníci také nakoupili" + robustní křížek ══════════ */

/* křížek: text × nahrazen kresleným SVG (font se v colorboxu občas nenačte) */
#cboxClose::before{content:""!important;position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%231B1513' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* nadpis sekce */
#colorbox .advanced-order-suggestion{font-size:21px;font-weight:800;letter-spacing:-.015em;
  margin:28px 0 20px;padding-top:24px;border-top:1px solid rgba(27,21,19,.12)}

/* mřížka produktů */
#colorbox .products-related{display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;
  margin:0;padding:0;text-align:center}
#colorbox .products-related .product{width:auto!important;float:none!important;
  margin:0!important;padding:0!important;border:0!important}
#colorbox .products-related .p{border:0!important;box-shadow:none!important;
  background:none!important;padding:0!important;margin:0!important}
#colorbox .products-related .image{display:block;border:0!important}
#colorbox .products-related .image img{width:100%;height:auto;border-radius:14px}
#colorbox .products-related .name{display:block;margin-top:10px;
  font:700 15px/1.3 'Grift',sans-serif;color:#1B1513!important;
  text-decoration:none!important}
#colorbox .products-related .name:hover{text-decoration:underline!important;
  text-underline-offset:3px}
#colorbox .products-related .price-final{font:800 15.5px/1 'Grift',sans-serif;
  color:#1B1513;margin-top:6px}
#colorbox .products-related .prices{margin:0}

/* pryč: nativní hovery, štítky, odkazy barev (čárkované boxy) a kupónový řádek */
#colorbox .products-related .p:hover{box-shadow:none!important;transform:none!important}
#colorbox .products-related .image:hover img{opacity:1!important;transform:none!important}
#colorbox .products-related .flags,
#colorbox .products-related .widget-parameter-wrapper,
#colorbox .products-related .dm-coupon-div,
#colorbox .products-related .p-tools{display:none!important}
/* hvězdy hodnocení nechat, jen vycentrovat */
#colorbox .products-related .ratings-wrapper{display:flex;justify-content:center;margin-top:4px}

@media(max-width:620px){
  #colorbox .products-related{grid-template-columns:1fr 1fr;gap:14px}
}
/* texty karet centrovat pod fotku (nativní .p-in je zarovnává vlevo) */
#colorbox .products-related .p-in,
#colorbox .products-related .p-in-in,
#colorbox .products-related .p-bottom{text-align:center;float:none!important;width:auto!important}
#colorbox .products-related .name,
#colorbox .products-related .prices,
#colorbox .products-related .price-final,
#colorbox .products-related .p-bottom div{text-align:center!important}

/* ══════════ v3: karty doporučení jako skutečné karty ══════════ */
#colorbox .products-related{gap:14px;align-items:stretch}
#colorbox .products-related .product{display:flex!important}
#colorbox .products-related .p{flex:1;display:flex!important;flex-direction:column;
  background:#fff!important;border-radius:16px;
  padding:14px 14px 16px!important;
  box-shadow:inset 0 0 0 1px rgba(27,21,19,.13)!important;
  transition:box-shadow .18s}
#colorbox .products-related .p:hover{box-shadow:inset 0 0 0 1.5px #1B1513!important}
#colorbox .products-related .image img{border-radius:10px}
#colorbox .products-related .p-in{margin-top:2px}
/* cena vždy dole — karty drží linii, i když někde chybí hvězdy */
#colorbox .products-related .p-bottom{margin-top:auto!important;padding-top:8px}
#colorbox .products-related .name{font-size:14.5px}