/* ============================================================
   asound cart v2 — CSS (baza: cart_redesign/.../ekstrakcja_makiety/cart.css)
   Scope: .ck (korzeń koszyka renderowany przez cart.blade.php /
   cart-empty.blade.php). Tokeny NIE są globalne — żyją na .ck.
   Koszyk jest CELOWO ZAWSZE JASNY (brak dark-mode).

   Różnice wobec cart.css z makiety:
     - @container ck (…)  ->  @media (…)   (wariant B z komentarza makiety)
     - pominięte reguły shella sklepu (.site-topbar/.site-head/.site-nav/
       .site-icons/.icon-btn/.bag-count/.lang-chip) — dostarcza je theme
     - dołożone style dla markupu WooCommerce (dl.variation / dl.tc-epo-metadata,
       notices, kupon zastosowany, blokada .blockUI podczas AJAX-a)
   Uwaga na minifier WP-Rocket: wyłącznie płaskie selektory (jak checkout-v2.css),
   bez zagnieżdżeń CSS.
   ============================================================ */

/* ============ TOKENY .ck ============ */
.ck{
  --b50:#F6F6F6; --b100:#E7E7E7; --b200:#D1D1D1; --b300:#B0B0B0; --b400:#888888;
  --b500:#6D6D6D; --b600:#5D5D5D; --b700:#4F4F4F; --b800:#454545; --b900:#3D3D3D; --b950:#000000;
  --red:#DA0E16; --red-h:#A50F15; --price:#1B2D31; --ok:#1B7F3B; --ok-bd:#BBDCC7;
  --hair:#F0F0F0; --hair2:#F5F5F5; --tile:#E9E9E9;
  font-family:'Noto Serif',serif;background:#fff;color:var(--b950);
  font-size:16px;line-height:1.5;
}
.ck *{box-sizing:border-box;}
.ck button{font:inherit;cursor:pointer;}
.ck[hidden]{display:none;}
.ck a{color:inherit;}
.ck :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(218,14,22,.18),0 0 0 1.5px var(--red);}
.ck .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.crt-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Ukryty (ale klikalny dla cart.js) przycisk "Zaktualizuj koszyk".
   NIE display:none — WooCommerce cart.js musi móc go kliknąć. */
.crt-update-btn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- H1 + kontynuuj zakupy --- */
.cart-top{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;padding:20px 20px 0;}
.cart-top h1{font-size:23px;font-weight:600;letter-spacing:.01em;margin:0;padding:0;}
.cart-top .count{font-size:14px;color:var(--b500);font-weight:400;}
.cart-top .continue{margin-left:auto;font-size:13px;color:var(--b600);text-decoration:underline;text-underline-offset:3px;display:inline-flex;gap:5px;align-items:center;padding:8px 0;}
.cart-top .continue svg{flex:none;}

/* --- layout --- */
.cart-body{display:block;padding:0 20px 28px;}
.cart-main{min-width:0;}
.cart-side{min-width:0;}

/* --- karta pozycji --- */
.ck .items{border:1px solid var(--b100);border-top:2px solid var(--b950);margin-top:16px;background:#fff;}
.ck .item{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--hair);}
.ck .items > :last-child{border-bottom:none;}
.ck .it-thumb{width:72px;height:72px;flex:none;background:var(--tile);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ck .it-thumb img{display:block;width:100%;height:100%;object-fit:contain;}
.ck .it-col{flex:1;min-width:0;}
.ck .it-head{display:flex;gap:14px;align-items:flex-start;}
.ck .it-info{min-width:0;flex:1;}
.ck .it-name{font-size:14.5px;font-weight:500;line-height:1.35;margin:0;}
.ck .it-name a{text-decoration:none;}
.ck .it-name a:hover{text-decoration:underline;text-underline-offset:2px;}
.ck .it-var{font-size:12.5px;color:var(--b500);margin-top:3px;}
.ck .it-unit{font-size:12px;color:var(--b500);margin-top:6px;font-variant-numeric:tabular-nums;}
.ck .it-unit[hidden]{display:none;}
.ck .it-total{margin-left:auto;text-align:right;flex:none;}
.ck .it-total .now{font-size:15.5px;font-weight:600;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ck .it-total s{display:block;font-size:12.5px;color:var(--b500);font-weight:400;text-decoration-color:var(--red);font-variant-numeric:tabular-nums;}
.ck .it-bottom{display:flex;align-items:center;gap:8px 16px;margin-top:12px;flex-wrap:wrap;}

/* meta pozycji: warianty (dl.variation) + opcje EPO (dl.tc-epo-metadata) */
.ck .it-meta{margin-top:3px;}
.ck .it-meta dl{margin:0;padding:0;display:block;font-size:12.5px;color:var(--b600);}
/* WC core cart-item-data.php oraz szablon EPO wypisuja dwukropek same
   (echo wp_kses_post( $data['key'] ) . ':'), wiec BRAK dt:after --
   wczesniejsza regula dawala podwojny dwukropek w metadanych pozycji. */
.ck .it-meta dt{float:left;clear:left;margin:0 4px 0 0;padding:0;font-weight:400;color:var(--b500);}
.ck .it-meta dd{margin:0 0 2px;padding:0;overflow:hidden;color:var(--b600);}
.ck .it-meta dd p{margin:0;padding:0;}
.ck .it-meta dl.variation dd{color:var(--b500);}
.ck .it-meta dl.tc-epo-metadata dd{color:var(--b600);}
.ck .it-meta .amount{color:var(--price);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ck .it-meta .backorder_notification{font-size:12.5px;color:var(--red);margin-top:4px;}

/* --- stepper ilości --- */
.ck .crt-qty{display:flex;border:1px solid var(--b200);background:#fff;}
.ck .crt-qty button{width:44px;height:44px;background:#fff;border:none;font-size:18px;font-weight:500;color:var(--b700);display:flex;align-items:center;justify-content:center;padding:0;}
.ck .crt-qty button:hover{background:var(--b50);}
/* Wrapper izolujacy input od legacy steppera z bundla Vite (patrz komentarz
   w cart.blade.php). display:contents => element znika z layoutu, wiec
   .crt-qty pozostaje 3-elementowym flexem [minus][input][plus]. */
.ck .crt-qty-shield{display:contents;}
.ck .crt-qty input{width:48px;height:44px;border:none;border-left:1px solid var(--hair);border-right:1px solid var(--hair);text-align:center;font:inherit;font-size:15px;font-weight:500;color:var(--b950);font-variant-numeric:tabular-nums;border-radius:0;appearance:none;-webkit-appearance:none;margin:0;padding:0;background:#fff;}
.ck .it-links{display:flex;gap:4px 16px;flex-wrap:wrap;order:3;width:100%;}
.ck .it-links a{background:none;border:none;padding:10px 0;font-size:12.5px;color:var(--b500);text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;}
.ck .it-links .remove{background:none;border:none;padding:10px 0;font-size:12.5px;color:var(--b500);text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;}
.ck .it-links .remove:hover{color:var(--red);}

/* --- pasek „Cofnij” (bez timeoutu) --- */
.ck .undo{display:flex;gap:10px;align-items:center;padding:17px 16px;border-bottom:1px solid var(--hair);background:var(--b50);font-size:13px;color:var(--b700);line-height:1.5;}
.ck .undo svg{flex:none;color:var(--b500);}
.ck .undo .txt{flex:1;min-width:0;}
.ck .undo .restore-item{background:none;border:none;padding:10px 0;font-size:13px;font-weight:600;color:var(--red);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}

/* --- podsumowanie (buybox) --- */
.ck .cart_totals{margin:0;}
.ck .buybox{border:1px solid var(--b100);border-top:2px solid var(--b950);padding:20px;margin-top:18px;background:#fff;}
.ck .buybox-h{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--b500);margin:0 0 6px;}
.ck .buybox dl{margin:0;padding:0;}
.ck .sumrow{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13px;}
.ck .sumrow dt{color:var(--b500);margin:0;padding:0;}
.ck .sumrow dt .sub{display:block;font-size:11.5px;color:var(--b400);}
.ck .sumrow dd{margin:0 0 0 auto;padding:0;text-align:right;font-weight:500;color:var(--b950);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ck .sumrow dd .free{color:var(--ok);font-weight:600;}
.ck .sumrow.save dd{color:var(--red);}
.ck .sumrow.coupon dd{color:var(--red);}
.ck .sumrow.coupon .woocommerce-remove-coupon{display:block;font-size:11.5px;font-weight:400;color:var(--b500);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.ck .sumtotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--b100);margin-top:10px;padding-top:12px;gap:12px;}
.ck .sumtotal .lbl{font-size:13px;color:var(--b500);}
.ck .sumtotal .lbl small{display:block;font-size:11.5px;color:var(--b400);font-variant-numeric:tabular-nums;}
.ck .sumtotal .amt{font-size:24px;font-weight:600;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ck .sumtotal .amt .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit;}

/* --- kupon (reveal) --- */
.ck .reveal-link{background:none;border:none;padding:10px 0 0;font-size:13.5px;color:var(--b600);text-decoration:underline;text-underline-offset:3px;display:inline-flex;gap:6px;align-items:center;min-height:44px;}
.ck .reveal-link svg{transition:transform .15s;}
.ck .reveal-link[aria-expanded="true"] svg{transform:rotate(45deg);}
.ck .reveal-body{display:none;}
.ck .reveal-body.open{display:block;}
.ck .coupon-form{display:flex;gap:8px;margin-top:6px;}
.ck .coupon-form input{flex:1;min-width:0;height:44px;border:1px solid var(--b200);border-radius:0;background:#fff;padding:0 12px;font:inherit;font-size:16px;font-weight:500;color:var(--b950);appearance:none;-webkit-appearance:none;}
.ck .coupon-form input:focus{border-color:var(--b950);outline:none;}
.ck .coupon-form button{border:1px solid var(--b950);background:#fff;border-radius:9999px;padding:0 18px;height:44px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--b950);}
.ck .coupon-form button:hover{background:var(--b950);color:#fff;}
/* Komunikat bledu kuponu (cart.js: p.coupon-error-notice) wstawiany jest do
   .coupon, czyli POD wiersz .coupon-form -- nie jest flex-itemem. Ponizsze
   reguly to belt-and-braces, gdyby wtyczka wstrzyknela go do flexa. */
.ck .coupon{display:block;}
.ck .coupon-form > input{flex:1 1 auto;}
.ck .coupon-error-notice{flex:0 0 100%;width:100%;margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--red);}
.ck .coupon-form input.has-error{border-color:var(--red);}

/* --- CTA --- */
.ck .cta{margin-top:16px;width:100%;height:52px;border:none;border-radius:9999px;background:var(--red);color:#fff;font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;text-decoration:none;}
.ck .cta:hover{background:var(--red-h);color:#fff;}
.ck .cta-note{margin-top:9px;font-size:12px;color:var(--b500);text-align:center;line-height:1.5;}

/* --- płatności + trust --- */
.ck .payrow{margin-top:14px;border-top:1px solid var(--hair);padding-top:14px;}
.ck .payrow .lbl{font-size:12.5px;color:var(--b800);display:flex;gap:6px;align-items:center;}
.ck .payrow .lbl svg{color:var(--b600);flex:none;}
.ck .payrow .logos{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px;}
.ck .payico{height:22px;display:flex;align-items:center;border:1px solid var(--hair);background:#fff;padding:2px 5px;}
.ck .payico svg{display:block;height:100%;}
.ck .trust{margin-top:6px;border-top:1px solid var(--hair);padding-top:4px;}
.ck .trust-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--b800);padding:8px 0;border-bottom:1px solid var(--hair2);}
.ck .trust-row svg{flex:none;color:var(--b600);}
.ck .trust-row a{margin-left:auto;font-size:12.5px;color:var(--b500);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.ck .legal-line{display:flex;gap:8px;margin-top:12px;font-size:12.5px;color:var(--b600);line-height:1.55;}
.ck .legal-line svg{flex:none;margin-top:2px;color:var(--b400);}
.ck .legal-line a{text-decoration:underline;text-underline-offset:2px;}
.ck .legal-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--b500);}
.ck .legal-links a{text-decoration:underline;text-underline-offset:2px;}

/* --- sticky bar (mobile) --- */
.ck .ck-sticky{position:sticky;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--b100);box-shadow:0 -8px 32px rgba(0,0,0,.10);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;}
.ck .ck-sticky .tot{line-height:1.2;}
.ck .ck-sticky .tot small{display:block;font-size:11px;color:var(--b500);}
.ck .ck-sticky .tot b{font-size:17px;font-weight:600;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ck .ck-sticky .tot b .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit;}
.ck .ck-sticky .cta{margin:0;flex:1;height:48px;font-size:15px;}
/* Ukrycie gdy widoczne jest Podsumowanie (.cart-side) — pasek dubluje
   jego kwotę i CTA. Bez display:none (sticky w flow → zero skoku). */
.ck .ck-sticky.is-off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease, visibility 0s linear .2s;}

/* WCAG 2.4.11 / C43 — sticky bar nie może zasłaniać elementu z fokusem. */
html{scroll-padding-bottom:84px;}

/* --- pusty koszyk --- */
.ck-empty{padding:46px 20px 10px;text-align:center;}
.ck-empty .mark{display:inline-block;transform:rotate(180deg);color:var(--red);}
.ck-empty .mark img{display:block;height:46px;width:auto;}
.ck-empty h2{font-size:21px;font-weight:600;margin-top:18px;}
.ck-empty .wc-empty-cart-message{font-size:13.5px;color:var(--b600);max-width:46ch;margin:10px auto 0;line-height:1.6;background:none;border:none;padding:0;}
.ck-empty .cta{display:inline-flex;width:auto;padding:0 30px;margin-top:24px;}
.ck .also{margin:42px 0 0;border-top:1px solid var(--b100);padding:22px 16px 30px;text-align:left;}
.ck .also h3{font-size:15.5px;font-weight:600;margin-bottom:14px;}
/* M1 -- overflow poziomy na mobile. `1fr` to skrot od `minmax(auto,1fr)`,
   a `auto` jako minimum = MIN-CONTENT karty (x-product-card: przycisk
   .btn ma padding-inline 24px + ikone 24px, .price jest flexem) -- kolumny
   nie mogly zejsc ponizej tej wartosci i grid rozpychal dokument
   (390px viewport -> 469px PL / 505px DE). minmax(0,1fr) zdejmuje podloge. */
.ck .also-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;}
.ck .also-grid > *{min-width:0;}
.ck .also-grid .productCard{min-width:0;}
.ck .undo-empty{border:none;margin-top:6px;}
.ck .undo-empty .undo{border:1px solid var(--b100);margin-bottom:8px;}

/* --- notices / blokada AJAX --- */
.ck .woocommerce-message,.ck .woocommerce-info{border:1px solid var(--b100);border-left:4px solid var(--b950);background:var(--b50);padding:12px 16px;font-size:13.5px;margin:14px 0 0;list-style:none;}
.ck .woocommerce-error{border:1px solid var(--red);border-left:4px solid var(--red);background:#FFF1F2;padding:12px 16px;font-size:13.5px;margin:14px 0 0;list-style:none;}
.ck .blockUI.blockOverlay{background:#fff!important;opacity:.55!important;}

/* ============ BREAKPOINTY (makieta: container queries -> media) ============ */
@media (min-width:640px){
  .ck .it-thumb{width:96px;height:96px;}
  .ck .it-links{order:0;width:auto;margin-left:4px;}
}
/* Ponizej 700px kolumna ma ~171px przy viewporcie 390px. Zdejmujemy z karty
   to, co podbija jej min-content (padding 2x32px, padding przycisku,
   jednowierszowy blok ceny) -- WYLACZNIE w koszyku i tylko na waskim
   ekranie. Powyzej 700px karta wraca do oryginalnych proporcji. */
@media (max-width:699px){
  .ck .also-grid .productCard{padding:16px;gap:16px;}
  .ck .also-grid .productCard .btn{padding-inline:14px;}
  .ck .also-grid .productCard .price{flex-wrap:wrap;gap:6px;}
}
@media (min-width:700px){
  .ck .also{padding:26px 32px 40px;max-width:1160px;margin-left:auto;margin-right:auto;}
  .ck .also-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:860px){
  .cart-top{max-width:1160px;margin:0 auto;padding:24px 32px 0;}
  .cart-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:44px;align-items:start;max-width:1160px;margin:0 auto;padding:0 32px 56px;}
  .cart-side{position:sticky;top:24px;}
  .ck .ck-sticky{display:none;}
}

/* Mobile: para dt(float)+dd(overflow:hidden BFC) na wąskiej kolumnie (~132px)
   zostawia dd ~26px i word-break tnie wyrazy w środku („Mo/ntaż/na/ścia/nie").
   Poniżej 860px przechodzimy na przepływ inline: etykieta i wartość w jednym
   akapicie, łamanie po słowach; ::after wymusza osobną linię na każdą parę. */
@media (max-width:859px){
  .ck .it-meta dt{float:none;clear:none;display:inline;}
  .ck .it-meta dd{display:inline;overflow:visible;}
  .ck .it-meta dd::after{content:"";display:block;margin-bottom:2px;}
  .ck .it-meta dd p{display:inline;}
}

@media (prefers-reduced-motion: reduce){ .ck *{transition:none!important;} }