:root{
  --bg: oklch(97.5% 0.005 120); --bg-warm: oklch(95% 0.008 122); --card: oklch(92% 0.011 124);
  --ink: oklch(20% 0.025 130); --ink-soft: oklch(40% 0.020 130); --ink-mute: oklch(56% 0.015 130);
  --line: oklch(88% 0.013 125);
  --rose: oklch(44% 0.050 130); --rose-deep: oklch(36% 0.048 132); --rose-soft: oklch(93.5% 0.022 130);
  --gold: oklch(79% 0.085 88);
  --serif: "DM Serif Display", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-0.015em}
h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
em{font-style:italic;font-family:var(--serif)}
a{color:var(--rose-deep);text-decoration:none}
a:hover{color:var(--ink)}
p{color:var(--ink-soft);text-wrap:pretty}
.container{max-width:1220px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);font-weight:500;display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose)}

/* NAV */
nav.top{border-bottom:1px solid color-mix(in oklab, var(--bg) 12%, transparent);background:var(--ink)}
nav.top .back{color:color-mix(in oklab, var(--bg) 75%, transparent);font-size:.85rem}
nav.top .back:hover{color:var(--bg)}
nav.top .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;max-width:1220px;margin:0 auto}
.brand-logo{display:block;height:72px;width:auto}

/* PAGE HEAD */
main{padding:56px 0 88px}
.head{max-width:640px}
.head h1{margin-top:16px}
.head p{margin-top:16px;font-size:1.05rem}

/* BUTTONS (shared: variant cards, place order, cart/account buttons) */
.btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #place_order{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:16px 28px;border-radius:999px;
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;border:none;transition:all .2s ease;max-width:100%;text-align:center;
  background:var(--rose);color:#fff !important;
  border:1px solid color-mix(in oklab, var(--rose-deep) 40%, transparent);
}
.btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #place_order:hover{
  background:var(--rose-deep);transform:translateY(-1px);
}
.btn-ghost{background:transparent;color:var(--ink) !important;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:transparent}
.arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* VARIANT PICKER (Krok 1) */
.panel{background:var(--bg-warm);border:1px solid var(--line);border-radius:18px;padding:32px;margin-top:32px}
@media (max-width:600px){.panel{padding:24px 20px}}
.panel-head{display:flex;align-items:baseline;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.panel-head h2{font-size:1.35rem}
.panel-head .step{font-family:var(--serif);font-style:italic;color:var(--rose-deep);font-size:1rem}
.panel-head--step2{max-width:640px;margin:40px 0 0}
.variants{display:flex;flex-direction:column;gap:12px}
.variant{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .2s,box-shadow .2s;position:relative}
.variant:hover{border-color:var(--rose)}
.variant input{margin-top:5px;accent-color:var(--rose-deep);flex:none}
.variant .name{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.25rem;line-height:1.2}
.variant .meta{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:4px}
.variant .dep{margin-left:auto;text-align:right;font-family:var(--serif);font-size:1.35rem;white-space:nowrap}
.variant .dep small{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px}
.variant:has(input:checked){border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}
.badge-rec{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--rose-deep);background:var(--rose-soft);padding:3px 9px;border-radius:999px}
.pay-note{font-size:.82rem;color:var(--ink-mute);margin-top:14px;text-align:center}

/* ── Native WooCommerce checkout ([woocommerce_checkout]) ── */
.woocommerce-notices-wrapper{margin-top:24px}
.woocommerce-error,.woocommerce-message,.woocommerce-info{
  list-style:none;background:var(--bg-warm);border:1px solid var(--line);border-left:3px solid var(--rose);
  border-radius:8px;padding:16px 20px;margin:0 0 20px;font-size:.92rem;color:var(--ink)
}
.woocommerce-error{border-left-color:#b3453d}

form.checkout,.woocommerce-checkout{
  display:grid;grid-template-columns:1fr 1.05fr;gap:20px 40px;align-items:start;margin-top:8px;
}
#customer_details{grid-column:1;grid-row:1 / span 2;min-width:0}
#order_review_heading{grid-column:2;grid-row:1;font-size:1rem;color:var(--ink-mute);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0}
#order_review{grid-column:2;grid-row:2;min-width:0}
@media (max-width:960px){
  form.checkout,.woocommerce-checkout{grid-template-columns:1fr}
  #customer_details,#order_review_heading,#order_review{grid-column:1;grid-row:auto}
}

.col2-set,.woocommerce-billing-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper{display:block}
.col2-set .col-2:empty{display:none}
.woocommerce-billing-fields h3{font-size:1.2rem;margin-bottom:18px}
.woocommerce-additional-fields{margin-top:8px}
.woocommerce-additional-fields h3{font-size:1.1rem;margin-bottom:14px}

.form-row{margin-bottom:18px}
.form-row label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;margin-bottom:6px}
.form-row label .required{color:var(--rose-deep);text-decoration:none}
.form-row label .optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-mute)}
.form-row .input-text,.form-row select,.woocommerce-input-wrapper select{
  width:100%;background:var(--bg);border:none;border-bottom:1px solid var(--line);
  padding:10px 0;font-family:var(--sans);font-size:1rem;color:var(--ink);outline:none;
  border-radius:0;transition:border-color .2s;
}
.form-row .input-text:focus,.form-row select:focus{border-color:var(--rose)}
.form-row.woocommerce-invalid .input-text{border-color:#b3453d}
.select2-container .select2-selection--single{border:none !important;border-bottom:1px solid var(--line) !important;border-radius:0 !important;background:var(--bg) !important;height:auto !important;padding:10px 0 !important}
.select2-container .select2-selection__rendered{padding:0 !important;line-height:1.4 !important;color:var(--ink) !important}
.select2-container .select2-selection__arrow{height:38px !important}

/* Order review summary — same light-card language as the "Krok 1" variant
   picker (.panel), so the whole right-hand column reads as one consistent
   part of the page instead of a mismatched dark block. */
#order_review{
  background:var(--bg-warm);color:var(--ink);border:1px solid var(--line);
  border-radius:18px;padding:32px;position:sticky;top:24px;
}
@media (max-width:900px){#order_review{position:static}}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin-top:4px}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table tbody tr,
.woocommerce-checkout-review-order-table tfoot tr{
  display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--ink-soft);
}
.woocommerce-checkout-review-order-table tbody tr td,
.woocommerce-checkout-review-order-table tbody tr th,
.woocommerce-checkout-review-order-table tfoot tr td,
.woocommerce-checkout-review-order-table tfoot tr th{border:none;padding:0;font-weight:400;text-align:left}
.woocommerce-checkout-review-order-table .order-total{border-bottom:none !important;padding-top:18px;align-items:baseline}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th{color:var(--ink)}
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--ink)}

#payment{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
#payment ul.wc_payment_methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#payment ul.wc_payment_methods li{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:14px 16px}
#payment ul.wc_payment_methods li label{font-size:.92rem;color:var(--ink);display:flex;align-items:center;gap:10px}
#payment ul.wc_payment_methods li input[type="radio"]{accent-color:var(--rose)}
/* Stripe already draws its own card-like surface inside the iframe (we set
   colorBackground to white via the appearance filter in functions.php) —
   wrapping it in a second bordered/padded box here just double-pads it and
   makes the actual card fields feel cramped. Give it breathing room only,
   no redundant frame. */
#payment .payment_box{
  background:transparent;color:var(--ink);
  padding:4px 0 0;margin-top:10px;font-size:.92rem;
  width:100%;min-width:0;
}
#payment .payment_box p{color:var(--ink-soft)}
#payment .payment_box iframe{width:100% !important}
#payment .form-row.place-order{margin-top:20px;margin-bottom:0}
#payment #place_order{width:100%;margin-top:6px}
.woocommerce-terms-and-conditions-wrapper{font-size:.85rem;color:var(--ink-soft);margin-top:14px}
.woocommerce-terms-and-conditions-wrapper a{color:var(--rose-deep);text-decoration:underline}
.woocommerce-privacy-policy-text{font-size:.8rem;color:var(--ink-mute);margin-top:10px}
.woocommerce-privacy-policy-text a{color:var(--rose-deep)}

/* FOOTER */
footer{background:var(--ink);color:color-mix(in oklab, var(--bg) 60%, transparent);padding:28px 0;font-size:.82rem}
footer .inner{max-width:1220px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:color-mix(in oklab, var(--bg) 78%, transparent)}
footer a:hover{color:oklch(90% 0.035 132)}

/* ── Cart & My Account baseline (Koszyk / Moje konto) ── */
.woocommerce-cart table.shop_table,.woocommerce-account table.shop_table{width:100%;border-collapse:collapse;margin:24px 0}
.woocommerce-cart table.shop_table th,.woocommerce-cart table.shop_table td,
.woocommerce-account table.shop_table th,.woocommerce-account table.shop_table td{
  padding:14px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem;
}
.woocommerce-cart .cart-collaterals{background:var(--bg-warm);border:1px solid var(--line);border-radius:16px;padding:28px;margin-top:24px;max-width:420px}
.woocommerce-account form .form-row .input-text{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 0;font-family:var(--sans);font-size:1rem;color:var(--ink);outline:none}
.woocommerce-account .addresses .title h3{font-family:var(--serif);font-weight:400}