/* Vitamin Shop - woo-systemowe.css
   Koszyk, zamowienie i moje konto zmapowane na tokeny marki.

   GeneratePress nie stylizuje stron systemowych WooCommerce - to jedyny realny
   koszt wyboru tego motywu zamiast ciezszych alternatyw. Ten arkusz to splaca.
   Wszystko idzie przez var(--...), wiec tryb ciemny dziala automatycznie.

   Warunek ladowania: is_cart() || is_checkout() || is_account_page(). */

/* ---------- 1. PRZYCISKI WOOCOMMERCE ---------- */

/* CTA = zielen marki z czarnym tekstem, dokladnie jak w logo (8,3:1).
   Zielen #0FCA19 na bieli ma 2,2:1 i nigdy nie idzie pod tekst. */
.vs-motyw .woocommerce a.button,
.vs-motyw .woocommerce button.button,
.vs-motyw .woocommerce input.button,
.vs-motyw .woocommerce #respond input#submit,
.vs-motyw .wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border:2px solid transparent;
  border-radius:var(--r-sm);background:var(--brand);color:#0B0F0B;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.0625rem;
  line-height:1.15;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
  transition:background var(--dur-1) var(--ease);cursor:pointer;
}
.vs-motyw .woocommerce a.button:hover,
.vs-motyw .woocommerce button.button:hover,
.vs-motyw .woocommerce input.button:hover,
.vs-motyw .wc-block-components-button:hover{background:#0BB715;color:#0B0F0B}

.vs-motyw .woocommerce a.button:active,
.vs-motyw .woocommerce button.button:active{transform:scale(.97)}

/* Wariant glowny WooCommerce - u nas identyczny, zeby kasa nie miala dwoch
   roznych przyciskow obok siebie. */
.vs-motyw .woocommerce a.button.alt,
.vs-motyw .woocommerce button.button.alt,
.vs-motyw .woocommerce input.button.alt,
.vs-motyw .woocommerce #place_order{background:var(--brand);color:#0B0F0B}

/* Przycisk drugorzedny - np. aktualizacja koszyka */
.vs-motyw .woocommerce button.button[name="update_cart"],
.vs-motyw .woocommerce button.button:disabled{
  background:var(--surface-2);color:var(--ink);
}
.vs-motyw .woocommerce button.button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 2. KOMUNIKATY ---------- */

.vs-motyw .woocommerce-message,
.vs-motyw .woocommerce-info,
.vs-motyw .woocommerce-error,
.vs-motyw .wc-block-components-notice-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin:0 0 var(--s5);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:.9375rem;list-style:none;
}
.vs-motyw .woocommerce-message::before,
.vs-motyw .woocommerce-info::before,
.vs-motyw .woocommerce-error::before{content:none}

.vs-motyw .woocommerce-message{border-left-color:var(--brand);background:var(--brand-tint)}
.vs-motyw .woocommerce-info{border-left-color:var(--info)}
.vs-motyw .woocommerce-error{border-left-color:var(--danger);background:var(--hot-tint);color:var(--ink)}
.vs-motyw .woocommerce-error li{margin:0;padding:2px 0}

.vs-motyw .woocommerce-message .button,
.vs-motyw .woocommerce-info .button{margin-left:auto;min-height:40px;padding:8px 14px;font-size:.9375rem}

/* ---------- 3. TABELA KOSZYKA ---------- */

.vs-motyw .woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:var(--r-md);
  border-collapse:separate;border-spacing:0;overflow:hidden;width:100%;
}
.vs-motyw .woocommerce table.shop_table th,
.vs-motyw .woocommerce table.shop_table td{
  padding:var(--s4);border-bottom:1px solid var(--line-2);
  border-right:0;border-left:0;border-top:0;vertical-align:middle;
}
.vs-motyw .woocommerce table.shop_table thead th{
  background:var(--surface-2);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem;color:var(--slate);
}
.vs-motyw .woocommerce table.shop_table tbody tr:last-child td{border-bottom:0}
.vs-motyw .woocommerce table.shop_table img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm)}

.vs-motyw .woocommerce table.shop_table .product-name a{
  color:var(--ink);font-weight:600;text-decoration:none;
}
.vs-motyw .woocommerce table.shop_table .product-name a:hover{color:var(--brand-ink)}

/* Ceny w kolumnach: cyfry o rownej szerokosci, zeby kwoty sie nie przesuwaly */
.vs-motyw .woocommerce .amount,
.vs-motyw .woocommerce .price,
.vs-motyw .wc-block-formatted-money-amount{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:var(--ink);font-weight:600;
}

/* Usuwanie pozycji - okragly przycisk zamiast malego krzyzyka.
   44 px, bo to jedyny cel dotyku w wierszu koszyka, a przy 32 px sasiaduje
   ze zdjeciem produktu i palec trafia w nie zamiast w krzyzyk. */
.vs-motyw .woocommerce a.remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface-2);color:var(--slate);font-size:1.125rem;
  text-decoration:none;transition:background var(--dur-1),color var(--dur-1);
}
.vs-motyw .woocommerce a.remove:hover{background:var(--hot);color:var(--on-hot)}

/* ---------- 4. ILOSC ---------- */

.vs-motyw .woocommerce .quantity input.qty{
  min-height:44px;width:72px;padding:0 8px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ---------- 5. PODSUMOWANIE I KUPON ---------- */

.vs-motyw .cart_totals,
.vs-motyw .cross-sells{margin-top:var(--s7)}

.vs-motyw .cart_totals h2,
.vs-motyw .woocommerce-billing-fields h3,
.vs-motyw .woocommerce-shipping-fields h3,
.vs-motyw #order_review_heading{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.5rem;line-height:1.05;margin:0 0 var(--s4);color:var(--ink);
}

.vs-motyw .cart_totals table.shop_table{background:var(--surface)}
.vs-motyw .cart_totals .order-total .amount{font-size:1.5rem;color:var(--ink)}

.vs-motyw .woocommerce .coupon{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.vs-motyw .woocommerce .coupon label{display:none}

/* ---------- 6. POLA FORMULARZY ---------- */

/* 16px, nie mniej - ponizej tej wartosci iOS Safari przybliza cala strone
   przy fokusie i klient traci z oczu formularz zamowienia. */
.vs-motyw .woocommerce form .form-row input.input-text,
.vs-motyw .woocommerce form .form-row textarea,
.vs-motyw .woocommerce form .form-row select,
.vs-motyw .select2-container .select2-selection--single,
.vs-motyw .wc-block-components-text-input input{
  width:100%;min-height:48px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font-size:16px;font-family:'Barlow',sans-serif;
  transition:border-color var(--dur-1);
}
.vs-motyw .woocommerce form .form-row input.input-text:focus,
.vs-motyw .woocommerce form .form-row textarea:focus,
.vs-motyw .woocommerce form .form-row select:focus{
  border-color:var(--brand);outline:2px solid var(--brand);outline-offset:1px;
}
.vs-motyw .woocommerce form .form-row label{
  display:block;margin-bottom:6px;font-size:.875rem;font-weight:600;color:var(--ink);
}
.vs-motyw .woocommerce form .form-row .required{color:var(--danger);text-decoration:none}

/* Stan bledu - WooCommerce oznacza pole klasa woocommerce-invalid */
.vs-motyw .woocommerce form .form-row.woocommerce-invalid input.input-text,
.vs-motyw .woocommerce form .form-row.woocommerce-invalid select{
  border-color:var(--danger);
}
.vs-motyw .woocommerce form .form-row.woocommerce-validated input.input-text{
  border-color:var(--ok);
}

.vs-motyw .woocommerce form.checkout_coupon,
.vs-motyw .woocommerce form.login,
.vs-motyw .woocommerce form.register{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s6);background:var(--card);
}

/* ---------- 7. KASA ---------- */

.vs-motyw .woocommerce-checkout #payment{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.vs-motyw .woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--line);padding:var(--s5);
}
.vs-motyw .woocommerce-checkout #payment ul.payment_methods li{
  list-style:none;padding:6px 0;
}
.vs-motyw .woocommerce-checkout #payment ul.payment_methods label{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;cursor:pointer;
}
.vs-motyw .woocommerce-checkout #payment div.payment_box{
  background:var(--surface-2);color:var(--ink-2);border-radius:var(--r-sm);
  font-size:.875rem;
}
.vs-motyw .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--surface-2)}
.vs-motyw .woocommerce-checkout #payment .form-row.place-order{padding:var(--s5)}
.vs-motyw .woocommerce-checkout #place_order{width:100%;min-height:56px;font-size:1.1875rem}

/* Zgody w kasie - pole dotyku i czytelny opis */
.vs-motyw .woocommerce-terms-and-conditions-wrapper .form-row{margin-bottom:var(--s3)}
.vs-motyw .woocommerce-form__label-for-checkbox{
  display:flex;gap:10px;align-items:flex-start;font-size:.875rem;line-height:1.5;
}
.vs-motyw .woocommerce-form__input-checkbox{
  width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--brand);cursor:pointer;
}

/* ---------- 8. MOJE KONTO ---------- */

.vs-motyw .woocommerce-account .woocommerce{
  display:grid;gap:var(--s6);
}
@media(min-width:900px){
  .vs-motyw .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){
    grid-template-columns:250px minmax(0,1fr);gap:var(--s7);align-items:start;
  }
}
.vs-motyw .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card);
}
.vs-motyw .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line-2)}
.vs-motyw .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.vs-motyw .woocommerce-MyAccount-navigation li a{
  display:flex;align-items:center;min-height:48px;padding:0 var(--s4);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9375rem;
  transition:background var(--dur-1),color var(--dur-1);
}
.vs-motyw .woocommerce-MyAccount-navigation li a:hover{background:var(--surface)}
.vs-motyw .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--brand-tint);color:var(--brand-ink);
  box-shadow:inset 3px 0 0 var(--brand);
}
/* Wylogowanie odsuniete od reszty - to akcja niszczaca sesje */
.vs-motyw .woocommerce-MyAccount-navigation li--customer-logout a{color:var(--slate)}

.vs-motyw .woocommerce-MyAccount-content{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s6);background:var(--card);
}

/* ---------- 9. OKRUSZKI I NAGLOWKI ---------- */

.vs-motyw .woocommerce-breadcrumb{
  font-size:.8125rem;color:var(--slate);padding-block:var(--s4);
}
.vs-motyw .woocommerce-breadcrumb a{color:var(--slate);text-decoration:none}
.vs-motyw .woocommerce-breadcrumb a:hover{color:var(--brand-ink)}

/* ---------- 10. STAN PUSTY ---------- */

.vs-motyw .cart-empty,
.vs-motyw .woocommerce-info.cart-empty{
  text-align:center;padding:var(--s8) var(--s5);font-size:1.0625rem;
}
.vs-motyw .return-to-shop{text-align:center;margin-top:var(--s5)}

/* ---------- 11. TABELE NA TELEFONIE ---------- */

/* Tabela koszyka na waskim ekranie zamienia sie w karty - inaczej wychodzi
   poza ekran i uzytkownik nie widzi kwoty. */
@media(max-width:640px){
  .vs-motyw .woocommerce table.shop_table thead{display:none}
  .vs-motyw .woocommerce table.shop_table tr{
    display:block;padding:var(--s4);border-bottom:1px solid var(--line);
  }
  .vs-motyw .woocommerce table.shop_table td{
    display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
    padding:6px 0;border:0;text-align:right;
  }
  .vs-motyw .woocommerce table.shop_table td::before{
    content:attr(data-title);font-weight:600;color:var(--slate);
    font-size:.8125rem;text-align:left;
  }
  .vs-motyw .woocommerce table.shop_table td.product-remove::before{content:""}
  .vs-motyw .woocommerce table.shop_table td.product-thumbnail{justify-content:flex-start}
  .vs-motyw .woocommerce table.shop_table td.actions{display:block;text-align:left}
  .vs-motyw .woocommerce .coupon{width:100%}
  .vs-motyw .woocommerce .coupon input.input-text{flex:1;min-width:0}
}