/* WooCommerce cart, checkout, thank-you page and My Account in the design system.
   WooCommerce's own layout CSS stays (columns, notices, password toggle); colours, buttons, tables and forms
   are overridden here (Woo's default purple buttons were still visible). */

.woo-page { padding-bottom: var(--section-y); }
.woo-page__content > .woocommerce { font-size: var(--fs-body); }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.625rem 1.375rem; /* = .btn */
  border: 2px solid var(--c-ink); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink);
  font: 700 var(--fs-body)/1.1 var(--font-body); text-decoration: none; transition: background-color var(--t-fast) var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--c-grey-100); color: var(--c-ink); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order, .woocommerce .checkout-button,
.woocommerce a.button.wc-backward, .woocommerce button.button.woocommerce-form-login__submit, .woocommerce .woocommerce-ResetPassword button.button { /* the page's primary action */
  border-color: var(--c-black); background: var(--c-black); color: var(--c-yellow);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover, .woocommerce .checkout-button:hover,
.woocommerce a.button.wc-backward:hover, .woocommerce button.button.woocommerce-form-login__submit:hover, .woocommerce .woocommerce-ResetPassword button.button:hover { background: #262626; border-color: #262626; color: var(--c-yellow); }
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { opacity: 0.45; padding: 0.625rem 1.375rem; }
.woocommerce .checkout-button, .woocommerce #place_order { width: 100%; min-height: 56px; font-size: 1.0625rem; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message {
  margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5) var(--s-4) 3.2rem; border: 0; border-radius: var(--r-md);
  background: var(--c-grey-100); color: var(--c-text); font-size: var(--fs-small); list-style: none;
}
.woocommerce-message { background: #e8f5ec; }
.woocommerce-error { background: #fdecec; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 1rem; left: 1.2rem; color: var(--c-ink); }
/* WooCommerce's icon-font glyph for info notices reads as an empty window; info notices go without an icon. */
.woocommerce-info::before { content: none; }
.woocommerce-info { padding-left: var(--s-5); }
.cart-empty__more { margin: 0 0 var(--s-4); color: var(--c-text-muted); }
.cart-empty__more a { color: var(--c-ink); font-weight: 600; }
.woocommerce-message .button, .woocommerce-info .button { float: right; min-height: 36px; padding: 0.35rem 1rem; font-size: var(--fs-small); }

/* Tables (cart, order review, order details) */
.woocommerce table.shop_table { border: 0; border-radius: var(--r-card); border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 0 0 1px var(--c-border); background: var(--c-white); }
.woocommerce table.shop_table th { padding: var(--s-3) var(--s-4); background: var(--c-grey-50); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); }
.woocommerce table.shop_table td { padding: var(--s-4); border-top: 1px solid var(--c-grey-200); }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { background: none; font-size: var(--fs-body); text-transform: none; letter-spacing: 0; color: var(--c-text); }
.woocommerce table.shop_table .order-total th, .woocommerce table.shop_table .order-total td { font-family: var(--font-heading); font-size: 1.25rem; }
.woocommerce table.shop_table td.product-name a { font-weight: 700; text-decoration: none; }
.woocommerce table.shop_table td.product-name dl.variation { margin: var(--s-1) 0 0; color: var(--c-text-muted); font-size: var(--fs-small); }
.woocommerce table.shop_table td.product-name dl.variation dt, .woocommerce table.shop_table td.product-name dl.variation dd { display: inline; margin: 0; }
.woocommerce table.shop_table td.product-name dl.variation dd p { display: inline; }
.woocommerce table.cart img { width: 72px; border-radius: var(--r-sm); }
.woocommerce a.remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--c-text-muted) !important; font-weight: 400; }
.woocommerce a.remove:hover { background: #fdecec; color: var(--c-alert) !important; }
.woocommerce .quantity .qty { width: 72px; min-height: 44px; text-align: center; }
.woocommerce table.cart td.actions { background: var(--c-grey-50); }
.woocommerce table.cart td.actions .coupon .input-text { width: 180px; min-height: 44px; margin-right: var(--s-2); padding: 0.55rem 0.9rem; border: 1px solid #d4d4d4; border-radius: var(--r-pill); }
.woocommerce table.cart td.actions .coupon .button { white-space: nowrap; }
/* "Aktualizovat košík" is a secondary action (enabled only after a quantity change): a text button, not a full-width
   pill that looks disabled. */
.woocommerce table.cart td.actions button[name="update_cart"] { min-height: 44px; padding-inline: 0; border: 0; background: none; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 0.2em; }
.woocommerce table.cart td.actions button[name="update_cart"]:hover { background: none; }
@media (max-width: 768px) {
  /* Phones: the voucher field and its button share one row while both fit; on narrower screens (small phones,
     zoomed or larger text) the button drops under the field instead of being squeezed below its one-line label. */
  .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: var(--s-2); width: 100%; }
  .woocommerce table.cart td.actions .coupon::before, .woocommerce table.cart td.actions .coupon::after { content: none; } /* Woo's clearfix would be empty flex items, each adding a gap */
  .woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 9rem; width: 0; min-width: 0; margin: 0; } /* width 0: the table sizes cells by content; the row decides */
  .woocommerce table.cart td.actions .coupon .button { flex: 1 0 auto; }
  .woocommerce table.cart td.actions button[name="update_cart"] { width: auto; margin-top: var(--s-2); }
}

/* Cart totals */
.woocommerce .cart-collaterals .cart_totals { width: 100%; max-width: 440px; }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: var(--fs-h3); }
.woocommerce .cart_totals table.shop_table th { background: none; font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-text); }

/* Checkout */
.woocommerce-checkout .col2-set { display: grid; gap: var(--s-6); width: 100%; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
@media (min-width: 1024px) {
  form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 var(--s-12); align-items: start; }
  form.woocommerce-checkout > .col2-set { grid-column: 1; }
  form.woocommerce-checkout > #order_review_heading, form.woocommerce-checkout > #order_review { grid-column: 2; }
  form.woocommerce-checkout > #order_review_heading { grid-row: 1; margin-top: 0; }
  form.woocommerce-checkout > #order_review { grid-row: 2 / span 3; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  form.woocommerce-checkout > .col2-set { grid-row: 1 / span 4; }
}
.woocommerce-checkout h3, #order_review_heading { font-size: var(--fs-h3); }
.woocommerce form .form-row { margin: 0 0 var(--s-4); padding: 0; }
.woocommerce form .form-row label { margin-bottom: var(--s-1); font-size: var(--fs-small); font-weight: 600; }
.woocommerce form .form-row .required { color: var(--c-alert); text-decoration: none; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select { min-height: 48px; }
.woocommerce form .form-row .description { font-size: var(--fs-xs); color: var(--c-text-muted); }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--c-alert); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48.5%; }
@media (max-width: 599.98px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } }
#order_review { padding: var(--s-6); border-radius: var(--r-card-lg); background: var(--c-white); box-shadow: 0 0 0 1px var(--c-border), var(--shadow-md); }
#order_review table.shop_table { box-shadow: none; border-radius: 0; }
#order_review table.shop_table th, #order_review table.shop_table td { padding-inline: 0; background: none; }
.woocommerce-checkout #payment { border-radius: var(--r-md); background: var(--c-grey-50); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--c-grey-200); }
.woocommerce-checkout #payment div.payment_box { border-radius: var(--r-sm); background: var(--c-yellow-soft); color: var(--c-text); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--c-yellow-soft); }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: var(--fs-xs); color: var(--c-text-muted); }
.woocommerce-form-coupon-toggle .woocommerce-info { background: var(--c-surface-alt); }

/* Thank-you page */
.woocommerce-order { display: grid; gap: var(--s-6); }
.woocommerce-order .woocommerce-thankyou-order-received { margin: 0; padding: var(--s-5); border-radius: var(--r-card); background: #e8f5ec; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700; }
.woocommerce ul.order_details { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; padding: var(--s-5); border-radius: var(--r-card); background: var(--c-grey-50); list-style: none; }
.woocommerce ul.order_details li { margin: 0; padding: 0 var(--s-5) 0 0; border-right: 1px solid var(--c-border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); }
.woocommerce ul.order_details li:last-child { border: 0; }
/* Phones: the four items (order overview, bank details) wrap; dividers then dangled at row ends. A two-column grid
   without dividers instead. */
@media (max-width: 599.98px) {
  .woocommerce ul.order_details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce ul.order_details li { padding: 0; border: 0; overflow-wrap: anywhere; }
  .woocommerce ul.order_details::before, .woocommerce ul.order_details::after { display: none; } /* WooCommerce's clearfix would take the first cell */
}
.woocommerce ul.order_details li strong { margin-top: var(--s-1); font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--c-text); }
/* Thank-you page (and order view): one heading size for its sections under the "Objednávka přijata" H1; the
   order details and the billing address were full H2s next to a small "Naše bankovní spojení". */
.woocommerce .wc-bacs-bank-details-heading, .woocommerce-order-details__title, .woocommerce-customer-details .woocommerce-column__title, .woocommerce-order h2 { font-size: var(--fs-h3); }
.woocommerce ul.wc-bacs-bank-details { padding: var(--s-5); border-radius: var(--r-card); background: var(--c-yellow-soft); }
.pay-qr { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; padding: var(--s-5); border-radius: var(--r-card-lg); background: var(--c-yellow); }
.pay-qr__img { width: 200px; height: 200px; border-radius: var(--r-md); background: var(--c-white); padding: 6px; image-rendering: pixelated; }
.pay-qr__title { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.pay-qr p { margin: 0; max-width: 38ch; }
.woocommerce-order-details, .woocommerce-customer-details { margin: 0; }
.woocommerce .woocommerce-customer-details address { padding: var(--s-5); border: 0; border-radius: var(--r-card); background: var(--c-surface-alt); font-style: normal; }

/* My Account */
.woocommerce-account .woocommerce { display: grid; gap: var(--s-8); }
.woocommerce-account:not(.logged-in) .woocommerce { gap: var(--s-3); } /* "Přihlášení" sits right above its form */
@media (min-width: 1024px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 240px minmax(0, 1fr); } }
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-navigation ul { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.6rem 1rem; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.woocommerce-MyAccount-navigation a:hover { background: var(--c-grey-100); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--c-yellow); }
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register, .woocommerce form.lost_reset_password {
  max-width: 480px; margin: 0; padding: var(--s-6); border: 0 !important; border-radius: var(--r-card-lg) !important; background: var(--c-white); box-shadow: 0 0 0 1px var(--c-border), var(--shadow-md);
}
.woo-page .woocommerce-account h2, .woocommerce-account .woo-page__content h2 { font-size: var(--fs-h3); }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 var(--s-4) 0 0; font-weight: 400 !important; }
.woocommerce-LostPassword { margin-top: var(--s-4); font-size: var(--fs-small); }
.woocommerce-account .woocommerce-orders-table .button { min-height: 36px; padding: 0.35rem 1rem; font-size: var(--fs-small); }

/* Optional checkout blocks: company invoice, postal voucher (toggled by checkout.js). */
.knk-volume-discount-note { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-yellow-soft); font-size: var(--fs-small); }
.woocommerce form .form-row.knk-toggle label { display: flex; gap: var(--s-2); align-items: flex-start; font-weight: 600; }
.woocommerce form .form-row.knk-toggle input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-black); flex: none; }
.woocommerce form .form-row.knk-early-request { margin-bottom: 0; }
.woocommerce form .form-row.knk-early-request label { font-weight: 400; font-size: var(--fs-small); line-height: 1.5; }
.knk-early-request__note { margin: var(--s-1) 0 var(--s-3) calc(20px + var(--s-2)); font-size: var(--fs-small); color: var(--c-text-muted); }
.knk-post-voucher, .knk-gift { margin-top: var(--s-5); }
.knk-post-voucher h3, .knk-gift h3 { margin-bottom: var(--s-2); }
.knk-post-voucher__note, .knk-gift__note { margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--c-text-muted); }
.knk-order-extra { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--c-surface-alt); }
.knk-order-extra p { margin: 0 0 var(--s-1); }
.thankyou-next { margin: var(--s-6) 0; padding: var(--s-5); border-radius: var(--r-card); background: var(--c-surface-alt); }
.thankyou-next__title { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.thankyou-next p { margin: 0; }
/* "„…“ byl přidán do košíku" shows on the cart page itself after buying a course; its "Zobrazit košík" button would
   lead to the same page. On other pages the button stays. */
.woocommerce-cart .woocommerce-message .wc-forward { display: none; }
/* The opt-out's explanation is a hint under its checkbox, not body text heavier than the field itself. */
.knk-marketing-opt-out__note { margin: calc(-1 * var(--s-2)) 0 var(--s-5); padding-left: 2.35rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-muted); }