/* ================================================================
   SKLEP: KOSZYK, ZAMOWIENIE, PODZIEKOWANIE, KONTO

   Szablony zostaja te, ktore daje WooCommerce. Zmienia sie tylko
   warstwa wizualna, zeby sciezka zakupu wygladala jak reszta strony,
   a nie jak domyslny motyw. Kwoty ida monospacem z rownymi cyframi,
   bo w tabeli maja stac w kolumnie.
   ================================================================ */
:root{
  --um-bg2:color-mix(in srgb,#a100ff 7%,#04030a);
  --um-line-hi:color-mix(in srgb,#E7F6FF 24%,transparent);
  --um-acc2:#00a1fe;
  --um-acc2-lite:color-mix(in srgb,#00a1fe 42%,#E7F6FF);
  --um-loss:#ff6b81;
  --um-r:14px;
}

.woocommerce .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title{letter-spacing:-.035em}

/* kwoty zawsze rownej szerokosci, zeby kolumna sie nie chwiala */
.woocommerce .amount,
.woocommerce .woocommerce-Price-amount,
.woocommerce td.product-price,
.woocommerce td.product-subtotal{
  font-family:Consolas,ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--um-ink)}
.woocommerce del .woocommerce-Price-amount{color:var(--um-ink3);font-weight:400}

/* ---- komunikaty ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  border:1px solid var(--um-line);border-left-width:1px;border-radius:var(--um-r);
  background:var(--um-glass);color:var(--um-ink1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:1rem 1.2rem;list-style:none}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:var(--um-acc2-lite)}
.woocommerce-error{border-color:color-mix(in srgb,var(--um-loss) 45%,transparent);
  background:color-mix(in srgb,var(--um-loss) 10%,transparent)}
.woocommerce-message .button,.woocommerce-info .button{float:none;margin-left:.8rem}

/* ---- tabela koszyka ---- */
.woocommerce table.shop_table{
  border:1px solid var(--um-line);border-radius:22px;border-collapse:separate;border-spacing:0;
  background:linear-gradient(180deg,var(--um-glass),transparent);overflow:hidden}
.woocommerce table.shop_table th{
  font-family:Consolas,ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--um-ink3);padding:1rem 1.1rem;border:0;
  border-bottom:1px solid var(--um-line)}
.woocommerce table.shop_table td{
  padding:1.1rem;border:0;border-bottom:1px solid var(--um-line);vertical-align:middle;
  color:var(--um-ink1)}
.woocommerce table.shop_table tbody tr:last-child td{border-bottom:0}
.woocommerce table.shop_table td.product-name a{color:var(--um-ink);font-weight:600;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.015em}
.woocommerce table.shop_table td.product-name a:hover{color:var(--um-acc2-lite)}
/* dane terminu pod nazwa produktu */
.woocommerce table.shop_table td.product-name dl.variation{margin:.5rem 0 0;font-size:.78rem}
.woocommerce table.shop_table dl.variation dt{color:var(--um-ink3);font-weight:600;float:none;display:inline}
.woocommerce table.shop_table dl.variation dd{color:var(--um-ink1);display:inline;margin:0 .9rem 0 .25rem}
.woocommerce table.shop_table dl.variation dd p{display:inline;margin:0}
.woocommerce td.product-thumbnail img{width:56px;height:56px;object-fit:cover;
  border-radius:12px;border:1px solid var(--um-line)}
/* ---- usuwanie pozycji ---- */
.woocommerce a.remove{
  width:26px;height:26px;line-height:24px;border-radius:50%;
  border:1px solid var(--um-line);color:var(--um-ink3)!important;
  background:transparent!important;font-size:1rem;
  transition:border-color .3s var(--um-ez),color .3s var(--um-ez),background .3s var(--um-ez)}
.woocommerce a.remove:hover{
  color:var(--um-loss)!important;border-color:color-mix(in srgb,var(--um-loss) 55%,transparent);
  background:color-mix(in srgb,var(--um-loss) 12%,transparent)!important}

/* ---- pola liczby i tekstu ---- */
.woocommerce .quantity input.qty,
.woocommerce input[type="text"],.woocommerce input[type="email"],
.woocommerce input[type="tel"],.woocommerce input[type="password"],
.woocommerce input[type="number"],.woocommerce textarea,.woocommerce select,
.woocommerce .select2-container .select2-selection--single{
  background:color-mix(in srgb,#04030a 60%,transparent);
  border:1px solid var(--um-line);border-radius:var(--um-r);
  color:var(--um-ink1);padding:.75rem .9rem;line-height:1.3;
  transition:border-color .3s var(--um-ez),background .3s var(--um-ez)}
.woocommerce .quantity input.qty{padding:.6rem .4rem;text-align:center;
  font-family:Consolas,ui-monospace,monospace;font-variant-numeric:tabular-nums}
.woocommerce input:focus,.woocommerce textarea:focus,.woocommerce select:focus{
  border-color:var(--um-acc2-lite);outline:none;
  background:color-mix(in srgb,#04030a 40%,transparent)}
.woocommerce input::placeholder,.woocommerce textarea::placeholder{color:var(--um-ink3)}
.woocommerce label{color:var(--um-ink2);font-size:.84rem;font-weight:600}
.woocommerce .required{color:var(--um-loss);text-decoration:none}

/* ---- przyciski: glowny ma krew z projektu, reszta jest obwiedziona ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit{
  border-radius:var(--um-r);font-weight:700;letter-spacing:-.01em;
  padding:.95rem 1.5rem;border:1px solid var(--um-line);
  background:transparent;color:var(--um-ink1);
  transition:border-color .4s var(--um-ez),background .4s var(--um-ez),
             transform .3s var(--um-ez),box-shadow .45s var(--um-ez)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  border-color:color-mix(in srgb,var(--um-acc) 46%,transparent);
  background:color-mix(in srgb,var(--um-acc) 8%,transparent);
  color:var(--um-ink);transform:scale(1.015)}
/* Glowna akcja musi wygrac z ogolna regula przycisku wyzej, wiec ma
   ten sam ciezar selektora co ona. */
.woocommerce a.checkout-button.button.alt,
.woocommerce a.checkout-button.button,
.woocommerce #place_order,
.woocommerce button#place_order.button.alt{
  border:0;color:#fff;
  background:linear-gradient(120deg,var(--um-cta) 0%,var(--um-cta-deep) 55%,var(--um-cta) 100%);
  background-size:220% 100%;
  box-shadow:0 10px 28px -14px color-mix(in srgb,var(--um-cta) 92%,transparent),
             0 20px 60px -26px color-mix(in srgb,var(--um-acc) 85%,transparent);
  transition:background-position 1.1s var(--um-ez),transform .32s var(--um-ez),box-shadow .5s var(--um-ez)}
.woocommerce a.checkout-button.button:hover,.woocommerce #place_order:hover{
  background-position:100% 0;transform:scale(1.02);color:#fff}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.45;pointer-events:none}
/* ---- podsumowanie koszyka: karta, na duzym ekranie jedzie z trescia ---- */
.woocommerce .cart-collaterals .cart_totals{
  border:1px solid var(--um-line);border-radius:22px;padding:1.5rem;
  background:linear-gradient(180deg,var(--um-glass),transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.woocommerce .cart-collaterals .cart_totals h2{font-size:1.05rem;margin:0 0 1rem;letter-spacing:-.02em}
.woocommerce .cart-collaterals .cart_totals table.shop_table{border:0;background:none;border-radius:0}
.woocommerce .cart-collaterals .cart_totals th{padding:.8rem 0;letter-spacing:.14em}
.woocommerce .cart-collaterals .cart_totals td{padding:.8rem 0;text-align:right}
.woocommerce .cart-collaterals .cart_totals tr.order-total th,
.woocommerce .cart-collaterals .cart_totals tr.order-total td{border-bottom:0;padding-top:1.1rem}
.woocommerce .cart-collaterals .cart_totals tr.order-total .amount{font-size:1.6rem;letter-spacing:-.04em}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:block;width:100%;text-align:center;margin-top:.4rem}
@media(min-width:900px){
  .woocommerce-cart .cart-collaterals{float:none;width:auto}
  .woocommerce-cart .cart-collaterals .cart_totals{position:sticky;top:calc(var(--um-hdr) + 1rem)}
}

/* ---- kupon ---- */
.woocommerce .coupon{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.woocommerce .coupon input.input-text{flex:1 1 190px;min-width:0}
.woocommerce form.checkout_coupon{
  border:1px solid var(--um-line);border-radius:22px;background:var(--um-glass);padding:1.3rem}

/* ---- zamowienie: dwie kolumny i karty ---- */
.woocommerce form.checkout h3,
.woocommerce-checkout h3#order_review_heading{
  font-size:1.05rem;letter-spacing:-.02em;margin:2rem 0 1rem}
.woocommerce form.checkout .col2-set{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:900px){.woocommerce form.checkout .col2-set{grid-template-columns:1fr 1fr}}
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2{width:auto;float:none;padding:0}
.woocommerce .woocommerce-billing-fields,
.woocommerce .woocommerce-additional-fields,
.woocommerce .woocommerce-checkout-review-order{
  border:1px solid var(--um-line);border-radius:22px;padding:1.5rem;
  background:linear-gradient(180deg,var(--um-glass),transparent)}
.woocommerce .woocommerce-checkout-review-order table.shop_table{border:0;background:none;border-radius:0}
.woocommerce .woocommerce-checkout-review-order td,
.woocommerce .woocommerce-checkout-review-order th{padding:.8rem 0}
.woocommerce .woocommerce-checkout-review-order tr.order-total .amount{font-size:1.45rem;letter-spacing:-.04em}

/* ---- metody platnosci ---- */
.woocommerce #payment{background:none;border-radius:0}
.woocommerce #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.woocommerce #payment ul.payment_methods li{
  border:1px solid var(--um-line);border-radius:var(--um-r);padding:.9rem 1rem;
  background:var(--um-glass);list-style:none;
  transition:border-color .3s var(--um-ez),background .3s var(--um-ez)}
.woocommerce #payment ul.payment_methods li:hover{border-color:var(--um-line-hi)}
.woocommerce #payment ul.payment_methods li label{color:var(--um-ink1);font-weight:600;cursor:pointer}
.woocommerce #payment div.payment_box{
  background:color-mix(in srgb,#04030a 55%,transparent);
  border:1px solid var(--um-line);border-radius:var(--um-r);
  color:var(--um-ink2);font-size:.86rem;margin-top:.8rem}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce #payment .place-order{padding:0}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:1rem;color:var(--um-ink2);font-size:.84rem}
/* ---- po zakupie: podziekowanie i szczegoly zamowienia ---- */
.woocommerce .woocommerce-order>p:first-of-type,
.woocommerce .woocommerce-thankyou-order-received{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);font-weight:800;
  letter-spacing:-.03em;color:var(--um-ink);margin-bottom:1.4rem}
.woocommerce ul.order_details{
  display:flex;flex-wrap:wrap;gap:1px;
  background:var(--um-line);border:1px solid var(--um-line);border-radius:22px;
  overflow:hidden;margin:0 0 2rem;padding:0;list-style:none}
.woocommerce ul.order_details li{
  flex:1 1 160px;
  background:var(--um-bg2);padding:1.1rem 1.2rem;margin:0;border:0;float:none;
  font-family:Consolas,ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--um-ink3)}
.woocommerce ul.order_details li strong{
  display:block;margin-top:.45rem;font-size:1.05rem;letter-spacing:-.02em;
  text-transform:none;color:var(--um-ink);font-family:Consolas,ui-monospace,monospace}
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details,
.woocommerce .woocommerce-order-downloads{margin-bottom:2rem}
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-order-details__title{font-size:1.05rem;letter-spacing:-.02em;margin-bottom:1rem}
.woocommerce address{
  border:1px solid var(--um-line);border-radius:var(--um-r);padding:1.1rem;
  background:var(--um-glass);color:var(--um-ink1);font-style:normal;line-height:1.6}

/* ---- moje konto ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:.35rem;display:flex;flex-wrap:wrap;gap:.25rem;
  border:1px solid var(--um-line);border-radius:99px;background:var(--um-glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:.55rem 1.05rem;border-radius:99px;font-size:.9rem;font-weight:600;
  color:var(--um-ink2);transition:color .25s var(--um-ez),background .3s var(--um-ez)}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--um-ink);background:color-mix(in srgb,#ffffff 10%,transparent)}
.woocommerce-account .woocommerce-MyAccount-content{margin-top:1.6rem;width:auto;float:none}

/* ---- na telefonie tabela jest lista kart --------------------------
   WooCommerce zamienia wiersze na bloki, ale zostawia je z wyrownaniem
   do prawej i bez zawijania, wiec dluga nazwa produktu i dane terminu
   wypychaly tresc poza ekran. Tu kazdy wiersz moze sie zlamac. */
@media(max-width:921px){
  .woocommerce table.shop_table_responsive{display:block;width:100%;max-width:100%}
  .woocommerce table.shop_table_responsive tbody{display:block;width:100%}
  .woocommerce table.shop_table_responsive tr{
    display:block;border:1px solid var(--um-line);border-radius:var(--um-r);
    margin-bottom:.7rem;background:var(--um-glass);overflow:hidden}
  .woocommerce table.shop_table_responsive tr td{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
    gap:.3rem .9rem;padding:.7rem 1rem;text-align:right;min-width:0}
  .woocommerce table.shop_table_responsive tr td::before{
    font-family:Consolas,ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--um-ink3);float:none;flex:0 0 auto}
  /* nazwa produktu i dane terminu ida pelna szerokoscia, od lewej */
  .woocommerce table.shop_table_responsive td.product-name{display:block;text-align:left!important}
  .woocommerce table.shop_table_responsive td.product-name::before{display:block;margin-bottom:.35rem}
  .woocommerce table.shop_table dl.variation{display:flex;flex-wrap:wrap;gap:.1rem .9rem;margin-top:.5rem}
  .woocommerce table.shop_table dl.variation dd{margin:0 0 0 .25rem}
  /* miniatura zostaje mala i po lewej, a nie na pol ekranu */
  .woocommerce table.shop_table_responsive td.product-thumbnail{
    display:flex;justify-content:flex-start;padding-bottom:0}
  .woocommerce table.shop_table_responsive td.product-thumbnail::before{display:none}
  /* WooCommerce narzuca tu wlasny rozmiar i srodkowanie, wiec
     trzeba je przebic, zeby miniatura nie zajmowala pol karty. */
  .woocommerce table.shop_table_responsive td.product-thumbnail{text-align:left!important}
  .woocommerce td.product-thumbnail img{width:44px!important;height:44px!important;max-width:44px!important}
  .woocommerce table.shop_table_responsive td.actions{display:block;text-align:left!important}
  .woocommerce .coupon{gap:.5rem}
  .woocommerce .coupon input.input-text,
  .woocommerce .coupon .button,
  .woocommerce td.actions .button{flex:1 1 100%;width:100%}
  .woocommerce ul.order_details li{flex:1 1 100%}
  .woocommerce form.checkout .col2-set{gap:1.1rem}
  .woocommerce .woocommerce-billing-fields,
  .woocommerce .woocommerce-additional-fields,
  .woocommerce .woocommerce-checkout-review-order,
  .woocommerce .cart-collaterals .cart_totals{padding:1.1rem;border-radius:18px}
}