/**
 * ds_giftwrap — panel opakowań (wysuwany z prawej), przycisk na karcie, bloki przy liniach koszyka.
 * Kolor akcentu: --dsgw-color (konfiguracja). Bez zależności od motywu.
 *
 * @author    Dynamite Studio <biuro@dynamite-studio.pl>
 * @copyright 2026 Dynamite Studio
 * @license   Proprietary — moduł komercyjny Dynamite Studio
 */
:root { --dsgw-color: #903851; --dsgw-ink: #2d272b; --dsgw-muted: #847d82; --dsgw-line: #e9e9e9; --dsgw-soft: #faf8f6; }

.dsgw-open { overflow: hidden; }
.dsgw[hidden] { display: none !important; }
.dsgw { position: fixed; inset: 0; z-index: 100000; }
.dsgw__backdrop { position: absolute; inset: 0; background: rgba(27, 23, 26, .55); opacity: 0; transition: opacity .2s ease; }
.dsgw__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(523px, 100%); background: #fff; color: var(--dsgw-ink);
  display: flex; flex-direction: column; padding: 56px 40px 32px; overflow-y: auto; transform: translateX(100%); transition: transform .2s ease;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .12); outline: none; box-sizing: border-box; }
.dsgw.is-open .dsgw__backdrop { opacity: 1; }
.dsgw.is-open .dsgw__panel { transform: none; }
.dsgw__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--dsgw-ink);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.dsgw__close:hover, .dsgw__close:focus-visible { background: var(--dsgw-soft); }
.dsgw__head { margin-bottom: 24px; }
.dsgw__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 28px; line-height: 1.15; font-weight: 500; color: var(--dsgw-ink); }
.dsgw__title svg { flex: none; color: var(--dsgw-color); }
.dsgw__desc { margin: 0; color: var(--dsgw-muted); font-size: 15px; line-height: 1.5; }
.dsgw__h3 { margin: 24px 0 12px; font-size: 17px; font-weight: 600; }
.dsgw__loading, .dsgw__msg { margin: 16px 0; font-size: 15px; line-height: 1.5; }
.dsgw__msg--error { color: #b3261e; }
.dsgw__msg--ok { color: #1e7a3c; font-weight: 600; }
.dsgw__hint { color: var(--dsgw-muted); font-size: 14px; line-height: 1.5; }
.dsgw__done .dsgw-btn { margin-top: 8px; }

.dsgw__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.dsgw__tab { border: 1px solid var(--dsgw-line); background: #fff; color: #827b7b; border-radius: 5px; padding: 8px 18px; font-size: 15px; cursor: pointer; }
.dsgw__tab.is-active { border-color: var(--dsgw-ink); color: var(--dsgw-ink); font-weight: 500; }

.dsgw__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dsgw__item { display: flex; flex-direction: column; min-width: 0; }
.dsgw__media { aspect-ratio: 197 / 236; background: var(--dsgw-soft); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dsgw__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dsgw__name { margin: 14px 0 2px; font-size: 16px; line-height: 1.3; font-weight: 500; }
.dsgw__ctx { margin: 0; color: var(--dsgw-muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dsgw__row { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dsgw__price { font-weight: 500; font-size: 15px; }
.dsgw__add { flex: none; width: 40px; height: 40px; border: 0; border-radius: 5px; background: var(--dsgw-color); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; }
.dsgw__add:hover, .dsgw__add:focus-visible { filter: brightness(1.1); }
.dsgw__add.is-busy, .dsgw-btn.is-busy { opacity: .6; cursor: progress; }

.dsgw__yours { border: 1px solid var(--dsgw-line); border-radius: 8px; padding: 16px; background: var(--dsgw-soft); }
.dsgw__yours .dsgw__h3 { margin-top: 0; }
.dsgw__pkg + .dsgw__pkg { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dsgw-line); }
.dsgw__pkg-head { display: flex; align-items: center; gap: 12px; }
.dsgw__pkg-img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 4px; }
.dsgw__pkg-text { display: flex; flex-direction: column; gap: 2px; }
.dsgw__pkg-free { color: var(--dsgw-muted); font-size: 13px; }
.dsgw__pkg-items { margin: 8px 0; padding-left: 18px; font-size: 14px; }

.dsgw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 5px;
  background: var(--dsgw-color); color: #fff !important; font-size: 15px; text-decoration: none !important; cursor: pointer; }
.dsgw-btn--small { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* Przycisk na karcie produktu */
.dsgw-trigger { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0; padding: 12px 16px; border: 1px dashed var(--dsgw-color);
  border-radius: 6px; background: #fff; color: var(--dsgw-color); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.dsgw-trigger:hover, .dsgw-trigger:focus-visible { background: var(--dsgw-soft); }

/* Koszyk: bloki przy liniach (przeniesione skryptem na pełną szerokość linii) */
.dsgw-line-wrap { flex: 0 0 100%; width: 100%; clear: both; padding: 0 15px 8px; box-sizing: border-box; }
.cart-item .dsgw-line-wrap, .cart__item .dsgw-line-wrap, .product-line .dsgw-line-wrap { padding-left: 0; padding-right: 0; }
.dsgw-line { margin: 8px 0 4px; font-size: 14px; line-height: 1.45; color: var(--dsgw-ink); }
.dsgw-line--package { border: 1px solid var(--dsgw-line); border-radius: 6px; padding: 10px 12px; background: var(--dsgw-soft); }
.dsgw-line__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.dsgw-line__badge { background: var(--dsgw-color); color: #fff; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.dsgw-line__places { color: var(--dsgw-muted); font-size: 13px; }
.dsgw-line__slots { list-style: none; margin: 0 0 6px; padding: 0; }
.dsgw-line__slot { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--dsgw-line); }
.dsgw-line__slot:first-child { border-top: 0; }
.dsgw-line__slot--free { color: var(--dsgw-muted); font-style: italic; }
.dsgw-line__put { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.dsgw-line__select { max-width: 100%; min-height: 36px; border: 1px solid var(--dsgw-line); border-radius: 4px; padding: 0 8px; background: #fff; }
.dsgw-line__hint { color: var(--dsgw-muted); font-size: 13px; margin: 4px 0; }
.dsgw-line__actions { display: flex; gap: 14px; margin: 4px 0 0; }
.dsgw-line__gift { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; color: var(--dsgw-color); font-weight: 500; }
.dsgw-link { border: 0; background: none; padding: 0; color: var(--dsgw-color); text-decoration: underline; font-size: 13px; cursor: pointer; }
.dsgw-link--gift { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.dsgw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Linia opakowania: ilość wynika z zawartości — bez natywnych +/- */
.dsgw-pack-line .js-cart-line-product-quantity, .dsgw-pack-line .bootstrap-touchspin, .dsgw-pack-line .input-group-btn-vertical,
.dsgw-pack-line .dssc-qty, .dsgw-pack-line .qty, .dsgw-pack-line .product-line__quantity, .dsgw-pack-line .quantity-button { display: none !important; }
/* Tekst personalizacji pokazuje blok modułu — natywny link „Personalizacja” zbędny */
.dsgw-gw-line .customizations, .dsgw-gw-line [data-target^="#product-customizations-modal"],
.dsgw-gw-line [data-bs-target^="#product-customizations-modal"], .dsgw-gw-line .product-customization-modal__content { display: none !important; }

.dsgw-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(560px, calc(100% - 32px)); background: var(--dsgw-ink);
  color: #fff; padding: 12px 18px; border-radius: 6px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 100001; }
.dsgw-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dsgw-toast.is-error { background: #b3261e; }

.dsgw-order__list { padding-left: 18px; }

@media (max-width: 575px) {
  .dsgw__panel { padding: 56px 16px 24px; }
  .dsgw__title { font-size: 24px; }
  .dsgw__grid { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dsgw__panel, .dsgw__backdrop, .dsgw-toast { transition: none; }
}

/* 1.1.0 — zestaw z kreatora w koszyku: nagłówek, dodatki, dedykacja; przycisk kreatora na karcie opakowania */
.dsgw-line--set { border-color: var(--dsgw-color); }
.dsgw-line__set { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--dsgw-line); }
.dsgw-line__set-title { font-size: 15px; color: var(--dsgw-color); }
.dsgw-line__set-total { font-weight: 600; }
.dsgw-line__sub { margin: 6px 0 2px; color: var(--dsgw-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.dsgw-line__slot--extra .dsgw-line__slot-name::before { content: '+ '; color: var(--dsgw-muted); }
.dsgw-line__note { margin: 6px 0; }
.dsgw-line__note-text { margin: 0 0 4px; font-style: italic; overflow-wrap: anywhere; }
.dsgw-line__note-text .dsgw-line__sub { font-style: normal; }
.dsgw-line__note-edit summary { display: inline; list-style: none; }
.dsgw-line__note-edit summary::-webkit-details-marker { display: none; }
.dsgw-line__note-edit[open] summary { margin-bottom: 6px; display: inline-block; }
.dsgw-line__textarea { display: block; width: 100%; max-width: 420px; margin: 0 0 6px; padding: 6px 8px; border: 1px solid var(--dsgw-line); border-radius: 4px; font: inherit; box-sizing: border-box; }
.dsgw-trigger--build { text-decoration: none !important; }

/* 1.1.0 — okno pakowania z szablonów shell.tpl (neutralny wariant; motyw może nadpisać markup i style) */
.dsgw__what { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--dsgw-muted); }
.dsgw__what span { display: inline-flex; align-items: center; gap: 8px; }
.dsgw__what img { width: 24px; height: 24px; object-fit: contain; border-radius: 3px; background: var(--dsgw-soft); }
.dsgw__what b { color: var(--dsgw-ink); font-weight: 600; }
.dsgw__tab em { font-style: normal; color: var(--dsgw-muted); font-size: 13px; }
.dsgw__tab.is-active em { color: inherit; }
button.dsgw__media { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.dsgw-slots { display: inline-flex; gap: 4px; margin: 2px 0; }
.dsgw-slots > * { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--dsgw-color); }
.dsgw-slots > .is-full { background: var(--dsgw-color); }
.dsgw__done ol { list-style: decimal; margin: 8px 0 12px; padding-left: 20px; }
.dsgw__done ol li { padding: 4px 0; }
.dsgw__done ol li.is-free { color: var(--dsgw-muted); font-style: italic; }
.dsgw__done .dsgw__pkg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dsgw__item.is-added .dsgw__add { background: #1e7a3c; }
.dsgw__foot { position: sticky; bottom: -32px; margin: 16px -40px -32px; padding: 12px 40px; background: #fff; border-top: 1px solid var(--dsgw-line); }
.dsgw__foot-in { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.dsgw__zoom { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(27, 23, 26, .7); }
.dsgw__zoom-box { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 48px 56px 24px; background: #fff; border-radius: 8px; box-sizing: border-box; text-align: center; }
.dsgw__zoom-box img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.dsgw__zoom-box [data-dsgw-step] { position: absolute; top: 40%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--dsgw-soft); font-size: 24px; cursor: pointer; }
.dsgw__zoom-box [data-dsgw-step="-1"] { left: 8px; }
.dsgw__zoom-box [data-dsgw-step="1"] { right: 8px; }
@media (max-width: 575px) {
  .dsgw__foot { margin: 16px -16px -24px; padding: 12px 16px; bottom: -24px; }
  .dsgw__zoom-box { padding: 48px 16px 16px; }
}