/* Global - Cart side panel */
.cart-panel { position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #fff; color: var(--second-color); font-family: var(--shop-font, Arial, sans-serif); box-shadow: -16px 0 60px rgb(0 0 0 / 18%); }
.cart-panel[open] { animation: cart-panel-in .28s ease-out; }
.cart-panel::backdrop { background: rgb(0 0 0 / 45%); }
.cart-panel.is-loading .cart-panel-body { opacity: .55; pointer-events: none; }
.cart-panel-body { display: grid; grid-template: "head" auto "shipping" auto "items" 1fr "foot" auto / 1fr; height: 100%; transition: opacity .15s; }
.cart-panel-body:empty { display: flex; }
.cart-panel:has(.cart-panel-addons) { width: min(800px, 100%); }
.cart-panel-body:has(> .cart-panel-addons) { grid-template: "addons head" auto "addons shipping" auto "addons items" 1fr "addons foot" auto / minmax(0, 340px) minmax(0, 1fr); }
.cart-panel .cart-panel-head { grid-area: head; }
.cart-panel .cart-panel-shipping { grid-area: shipping; }
.cart-panel .cart-panel-items, .cart-panel .cart-panel-empty { grid-area: items; }
.cart-panel .cart-panel-foot { grid-area: foot; }
.cart-panel-body:empty::before { content: ""; width: 32px; height: 32px; margin: auto; border: 3px solid var(--shop-line); border-top-color: var(--main-color); border-radius: 50%; animation: cart-panel-spin .8s linear infinite; }
html.cart-panel-open { overflow: hidden; }

.cart-panel .cart-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--shop-line); }
.cart-panel .cart-panel-head h2 { margin: 0; font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.cart-panel .cart-panel-head h2 span { color: var(--shop-muted); font-size: 14px; font-weight: 400; text-transform: none; }
.cart-panel .cart-panel-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--light-bg); color: var(--second-color); }
.cart-panel .cart-panel-close .icon { width: 18px; height: 18px; }
.cart-panel .cart-panel-alert { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--main-color-soft); color: var(--main-color); font-size: 13px; }

.cart-panel .cart-panel-shipping { padding: 14px 24px; border-bottom: 1px solid var(--shop-line); font-size: 13px; text-align: center; }
.cart-panel .cart-panel-shipping p { margin: 0 0 8px; }
.cart-panel .cart-panel-progress { height: 6px; overflow: hidden; border-radius: 6px; background: var(--light-bg); }
.cart-panel .cart-panel-progress span { display: block; height: 100%; border-radius: inherit; background: var(--main-color); }
.cart-panel .cart-panel-shipping.is-earned .cart-panel-progress span { background: var(--conversion-color); }

.cart-panel .cart-panel-items { --panel-gutter: 24px; flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--panel-gutter); overscroll-behavior: contain; }
.cart-panel .cart-panel-item { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 18px 28px 18px 0; border-bottom: 1px solid var(--shop-line); }
.cart-panel .cart-panel-item.is-invalid { opacity: .85; }
/* Položka, ktorej doplnky panel práve ukazuje (po pridaní alebo po kliknutí). */
.cart-panel .cart-panel-item.has-addons { cursor: pointer; }
.cart-panel .cart-panel-item.is-focus { margin-inline: calc(var(--panel-gutter) * -1); padding-inline: var(--panel-gutter) calc(var(--panel-gutter) + 28px); background: var(--main-color-soft); box-shadow: inset 4px 0 0 var(--main-color); cursor: default; }
.cart-panel .cart-panel-item.is-focus .cart-panel-remove { right: var(--panel-gutter); }
.cart-panel .cart-panel-addons-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0; padding: 3px 10px; border: 1px solid var(--shop-line); border-radius: 999px; background: #fff; color: var(--second-color); font-size: 12px; font-weight: 600; }
.cart-panel .cart-panel-addons-toggle .icon { width: 12px; height: 12px; }
.cart-panel .cart-panel-item.has-addons:hover .cart-panel-addons-toggle, .cart-panel .cart-panel-addons-toggle[aria-pressed="true"] { border-color: var(--main-color); color: var(--main-color); }
.cart-panel .cart-panel-picture { display: block; border-radius: 8px; background: #fff; }
.cart-panel .cart-panel-picture img { display: block; width: 88px; height: 104px; object-fit: contain; }
.cart-panel .cart-panel-info { min-width: 0; }
.cart-panel .cart-panel-info h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.cart-panel .cart-panel-info h3 a { color: inherit; text-decoration: none; }
.cart-panel .cart-panel-info p { margin: 0 0 4px; color: var(--shop-muted); font-size: 13px; }
.cart-panel .cart-panel-info .cart-panel-badge { color: var(--main-color); font-weight: 600; }
.cart-panel .cart-panel-info .cart-panel-issue { color: var(--main-color); }
.cart-panel .cart-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cart-panel .cart-panel-quantity { display: inline-flex; align-items: center; border: 1px solid var(--shop-line); border-radius: 8px; }
.cart-panel .cart-panel-quantity form { display: contents; }
.cart-panel .cart-panel-quantity button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--second-color); }
.cart-panel .cart-panel-quantity button:disabled { opacity: .35; }
.cart-panel .cart-panel-quantity button .icon { width: 14px; height: 14px; }
.cart-panel .cart-panel-quantity > span { min-width: 28px; font-size: 14px; text-align: center; }
.cart-panel .cart-panel-fixed { font-size: 13px; }
.cart-panel .cart-panel-price { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cart-panel .cart-panel-price s { color: var(--shop-muted); font-size: 12px; font-weight: 400; }
.cart-panel .cart-panel-remove { position: absolute; top: 16px; right: 0; }
.cart-panel .cart-panel-remove button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--shop-muted); }
.cart-panel .cart-panel-remove button:hover { background: var(--light-bg); color: var(--second-color); }
.cart-panel .cart-panel-remove .icon { width: 15px; height: 15px; }
.cart-panel .cart-panel-fee { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--shop-line); font-size: 13px; }


.cart-panel .cart-panel-foot { padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--shop-line); background: var(--light-bg); }
.cart-panel .cart-panel-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 15px; text-transform: uppercase; }
.cart-panel .cart-panel-sum strong { font-size: 20px; text-transform: none; }
.cart-panel .cart-panel-sum.is-discount { margin-bottom: 6px; color: var(--conversion-color); font-size: 13px; }
.cart-panel .cart-panel-foot .t-btn { display: block; width: 100%; text-align: center; }

.cart-panel .cart-panel-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.cart-panel .cart-panel-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--light-bg); }
.cart-panel .cart-panel-empty-icon .icon { width: 28px; height: 28px; }
.cart-panel .cart-panel-empty p { margin: 0; font-size: 16px; font-weight: 600; }

/* Global - Cart side panel: doplnky práve pridaného produktu */
.cart-panel .cart-panel-addons { grid-area: addons; min-height: 0; overflow-y: auto; padding: 22px 24px; border-right: 1px solid var(--shop-line); background: var(--light-bg); overscroll-behavior: contain; }
.cart-panel .cart-panel-addons h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.cart-panel .cart-panel-addons-for { margin: 0 0 16px; color: var(--shop-muted); font-size: 13px; }
.cart-panel .cart-panel-addon-list { display: grid; gap: 8px; }
.cart-panel .cart-panel-addon { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--shop-line); border-radius: 10px; background: #fff; }
.cart-panel .cart-panel-addon.is-selected { border-color: var(--conversion-color); box-shadow: inset 0 0 0 1px var(--conversion-color); }
.cart-panel .cart-panel-addon > img { grid-row: 1 / span 2; width: 48px; height: 48px; object-fit: contain; }
.cart-panel .cart-panel-addon > div { display: contents; }
.cart-panel .cart-panel-addon strong { display: block; grid-column: 2 / -1; font-size: 13px; font-weight: 600; line-height: 1.35; }
.cart-panel .cart-panel-addon .cart-panel-addon-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; grid-column: 2; min-width: 0; font-size: 13px; }
.cart-panel .cart-panel-addon > button { grid-column: 3; }
.cart-panel .cart-panel-addon small { display: block; margin-top: 2px; color: var(--shop-muted); font-size: 12px; line-height: 1.4; }
.cart-panel .cart-panel-addon .cart-panel-addon-price { display: inline-block; margin-top: 2px; margin-right: 8px; font-weight: 600; }
.cart-panel .cart-panel-addon .cart-panel-addon-more { padding: 0; border: 0; background: none; color: var(--shop-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.cart-panel .cart-panel-addon .cart-panel-addon-more:hover { color: var(--main-color); }
.cart-panel .cart-addon-info { width: calc(100% - 32px); max-width: 520px; max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow: auto; border: 0; border-radius: 14px; background: #fff; color: var(--second-color); box-shadow: 0 24px 80px rgb(0 0 0 / 22%); }
.cart-panel .cart-addon-info::backdrop { background: rgb(0 0 0 / 35%); }
.cart-panel .cart-addon-info-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--light-bg); color: var(--second-color); }
.cart-panel .cart-addon-info-close .icon { width: 16px; height: 16px; }
.cart-panel .cart-addon-info h3 { margin: 0 40px 14px 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.cart-panel .cart-addon-info .cart-addon-info-foot { position: sticky; bottom: -28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px -28px -28px; padding: 16px 28px; border-top: 1px solid var(--shop-line); background: #fff; }
.cart-panel .cart-addon-info .cart-addon-info-foot strong { font-size: 16px; }
.cart-panel .cart-addon-info .cart-addon-info-foot .t-btn.white { border: 1px solid var(--shop-line); }
.cart-panel .cart-addon-info .cart-addon-info-text { font-size: 14px; line-height: 1.6; }
.cart-panel .cart-addon-info .cart-addon-info-text img { max-width: 100%; height: auto; }
.cart-panel .cart-panel-addon > button { display: inline-flex; white-space: nowrap; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--second-color); border-radius: 6px; background: #fff; color: var(--second-color); font-size: 13px; font-weight: 600; }
.cart-panel .cart-panel-addon > button[aria-pressed="true"] { border-color: var(--conversion-color); background: var(--conversion-color); color: #fff; }
.cart-panel .cart-panel-addon > button .icon { width: 14px; height: 14px; }
.cart-panel .cart-panel-addon-error { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--main-color-soft); color: var(--main-color); font-size: 13px; }
.cart-panel .cart-panel-addon-error button { padding: 0; border: 0; background: none; color: inherit; font-weight: 600; text-decoration: underline; }
.cart-panel .cart-panel-addon-warning { margin: 12px 0 0; color: var(--main-color); font-size: 12px; }
.cart-panel .cart-panel-info .cart-panel-addon-name { color: var(--second-color); }
/* Doplnky pri položke ako ikony s cenou, rovnaké ako `.op-addon-chip` v pokladni. */
.cart-panel .cart-panel-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.cart-panel .cart-panel-chips form { display: contents; }
.cart-panel .cart-panel-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 9px 3px 4px; border: 1px solid var(--shop-line); border-radius: 999px; background: #fff; color: var(--second-color); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.cart-panel .cart-panel-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: #fff; }
.cart-panel .cart-panel-chip-box { width: 22px; height: 22px; border-radius: 50%; background: var(--shop-line); }
.cart-panel .cart-panel-chip:hover { border-color: var(--conversion-color); }
.cart-panel .cart-panel-chip.is-on { border-color: var(--conversion-color); background: #e9f6ee; color: var(--conversion-color); box-shadow: 0 0 0 1px var(--conversion-color); }
.cart-panel .cart-panel-chip-remove { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 1px; border-radius: 50%; background: var(--conversion-color); color: #fff; font-size: 13px; line-height: 1; }

/* Mobil: jeden stĺpec, doplnky pod položkami, hlavička a súčet ostávajú pripnuté. */
@media (max-width: 767px) {
    .cart-panel, .cart-panel:has(.cart-panel-addons) { width: 100%; }
    .cart-panel-body, .cart-panel-body:has(> .cart-panel-addons) { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
    .cart-panel-body > * { flex-shrink: 0; }
    .cart-panel .cart-panel-head { position: sticky; top: 0; z-index: 1; background: #fff; }
    .cart-panel .cart-panel-items { flex: 1 0 auto; overflow: visible; }
    .cart-panel .cart-panel-addons { order: 1; overflow: visible; border-right: 0; border-top: 1px solid var(--shop-line); }
    .cart-panel .cart-panel-foot { position: sticky; bottom: 0; order: 2; margin-top: auto; }
}

@keyframes cart-panel-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes cart-panel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cart-panel[open] { animation: none; } }
@media (max-width: 389px) { .cart-panel .cart-panel-head, .cart-panel .cart-panel-shipping, .cart-panel .cart-panel-addons, .cart-panel .cart-panel-foot { padding-inline: 16px; } .cart-panel .cart-panel-items { --panel-gutter: 16px; } .cart-panel .cart-panel-item { grid-template-columns: 72px 1fr; } .cart-panel .cart-panel-picture img { width: 72px; height: 88px; } }

/* Poznámka k produktu v paneli (poznámka klienta 3. 11. 2026). */
.cart-panel-note-text { margin: 4px 0; color: var(--second-color); font-size: 13px; font-style: italic; overflow-wrap: anywhere; }
.cart-panel-note-open { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 4px 12px; border: 1px solid var(--shop-line, #e2e2e2); border-radius: 999px; background: #fff; color: var(--second-color); font-size: 13px; font-weight: 600; }
.cart-panel-note-open:hover { border-color: var(--second-color); }
.cart-panel-note-open .icon { width: 14px; height: 14px; }
.cart-panel-note-dialog form { display: grid; gap: 8px; }
.cart-panel-note-dialog label { padding-right: 28px; font-weight: 700; }
.cart-panel-note-dialog small { color: var(--main-color); }
.cart-panel-note-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--shop-line, #e2e2e2); border-radius: 6px; font-size: 16px; resize: none; }
.cart-panel-note-dialog em { color: var(--main-color); font-size: 12px; font-style: normal; font-weight: 600; }