/**
 * My Account area — design layer for the whole WooCommerce account flow.
 *
 * No mockup existed for this area, so it is built from DESIGN-SYSTEM.md: the card
 * shell, teal buttons, ghost buttons, tokens and the site container. Styles the
 * default WC markup (login/register, dashboard, navigation, forms, order tables,
 * addresses) plus the light template overrides in woocommerce/myaccount/.
 *
 * Scoped under .woocommerce-account so generic WC class names never leak. Tokens
 * only — no raw hex/px for tokenized properties.
 */

/* ---- Page shell ---------------------------------------------------------- */
.woocommerce-account .site-main {
  margin-top: var(--space-7);
  margin-bottom: var(--space-9);
}
.woocommerce-account .entry__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 var(--space-6);
}

/* Two-column layout only when the account navigation is present (dashboard +
   endpoints). The logged-out login screen has no nav and stays single column. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
/* WooCommerce's clearfix pseudo-elements on the .woocommerce wrapper become stray
   grid items and break the two-column placement — remove them in this container. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
  content: none;
  display: none;
}

/* ---- Account navigation (card sidebar) ----------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  position: sticky;
  top: var(--anchor-offset);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--teal-50);
  color: var(--teal);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a .mya-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover .mya-ico {
  color: var(--teal);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
  background: var(--teal);
  color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a .mya-ico {
  color: #fff;
}
/* Logout row — always a full-width block at the bottom, styled as an outlined
   action so it reads as a deliberate button instead of a leftover menu item.
   flex-basis 100% also keeps it on its own line in the wrapped mobile row. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  flex: 1 0 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border: 1px solid var(--line);
  background: var(--page-bg);
  color: var(--muted);
  font-weight: 700;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a .mya-ico {
  width: 18px;
  height: 18px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover .mya-ico,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible .mya-ico {
  color: var(--danger);
}

/* ---- Content card -------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-weight: 800;
  color: var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 20px; }
/* Text links inside the panel. Button links (.button / .woocommerce-Button) are
   excluded — this rule is more specific than the button block below, so without
   the :not() their label would take the teal link colour on the teal fill. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button):not(.woocommerce-button) { color: var(--teal); }

/* ---- Dashboard (overridden template) ------------------------------------- */
.mya-hello {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.mya-hello strong { font-weight: 800; }
.mya-hello a { color: var(--teal); font-weight: 600; }
.mya-intro {
  color: var(--muted);
  margin: 0 0 var(--space-6);
  max-width: 62ch;
}
.mya-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.mya-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mya-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--teal-line);
  text-decoration: none;
}
.mya-card .mya-card__ico {
  width: 26px;
  height: 26px;
  color: var(--teal);
}
.mya-card .mya-card__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.mya-card .mya-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Forms (login, register, edit account, addresses, lost password) ----- */
.woocommerce-account form { margin: 0; }
.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
}
.woocommerce-account form label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.woocommerce-account form label.woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--muted);
}
.woocommerce-account .required { color: var(--green-600); border: 0; }
.woocommerce-account form .woocommerce-Input,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="number"],
.woocommerce-account form input[type="search"],
.woocommerce-account form select,
.woocommerce-account form textarea {
  width: 100%;
  padding: 11px var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-account form input:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.woocommerce-account form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}
/* Password fields: WC JS wraps the input and appends the reveal button. */
.woocommerce-account form .password-input {
  position: relative;
  display: block;
  width: 100%;
}
.woocommerce-account form .password-input input[type="password"],
.woocommerce-account form .password-input input[type="text"] {
  padding-right: 44px;
}
.woocommerce-account form .show-password-input {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  cursor: pointer;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7975' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.woocommerce-account form .show-password-input::after { content: none; }
.woocommerce-account form .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230e5551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.woocommerce-account form fieldset {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page-bg);
}
.woocommerce-account form fieldset legend {
  font-weight: 800;
  color: var(--ink);
  padding: 0 var(--space-2);
}
.woocommerce-account form em {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--muted);
  font-style: normal;
}
.woocommerce-account .clear { clear: both; }

/* Two-up rows (edit account first/last name, address fields). */
@media (min-width: 620px) {
  .woocommerce-account form .form-row-first {
    float: left;
    width: calc(50% - (var(--space-4) / 2));
  }
  .woocommerce-account form .form-row-last {
    float: right;
    width: calc(50% - (var(--space-4) / 2));
  }
  /* Every row that is not part of a two-up pair has to start a new line. Without
     the clear it flows into the gutter left between the two floats and collapses
     to a couple of characters wide — that is what broke "Názov spoločnosti"
     (form-row-wide) right after the first/last name pair. */
  .woocommerce-account form .form-row-wide,
  .woocommerce-account form .form-row:not(.form-row-first):not(.form-row-last),
  .woocommerce-account form .woocommerce-form-row:not(.form-row-first):not(.form-row-last),
  .woocommerce-account form fieldset,
  .woocommerce-account form h2,
  .woocommerce-account form h3,
  .woocommerce-account form > p:not(.form-row):not(.woocommerce-form-row) {
    clear: both;
  }
  /* Close the float context so the save button is not pulled up beside a pair. */
  .woocommerce-account .woocommerce-address-fields__field-wrapper::after,
  .woocommerce-account form.edit-account::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* ---- Buttons ------------------------------------------------------------- */
.woocommerce-account .button,
.woocommerce-account .woocommerce-button,
.woocommerce-account .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button[type="submit"]:hover {
  background: var(--teal-600);
  color: #fff;
  text-decoration: none;
}
.woocommerce-account .button:active,
.woocommerce-account button[type="submit"]:active { transform: translateY(1px); }

/* Secondary / row-action buttons (order actions, "add address"). */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account td .button.view,
.woocommerce-account .woocommerce-Address .edit {
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--teal);
  font-weight: 600;
  padding: 8px var(--space-4);
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account td .button.view:hover,
.woocommerce-account .woocommerce-Address .edit:hover {
  background: var(--teal-50);
  border-color: var(--teal-line);
  color: var(--teal-600);
}

/* ---- Login / register two-column ----------------------------------------- */
.woocommerce-account .u-columns.col2-set#customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
/* WooCommerce adds .col2-set::before/::after clearfix pseudo-elements; in a grid
   container they become stray grid items and break column placement. Kill them. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after,
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after {
  content: none;
  display: none;
}
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 {
  /* Neutralize WooCommerce's .col-1/.col-2 float+48% width so each fills its grid cell. */
  float: none;
  width: auto;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.woocommerce-account #customer_login > .u-column2 {
  background: var(--teal-50);
  border-color: var(--teal-line);
  box-shadow: none;
}
.woocommerce-account #customer_login h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.woocommerce-account .login-lead {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 var(--space-5);
}
.woocommerce-account .woocommerce-form-login__rememberme {
  margin-bottom: var(--space-3);
}
.woocommerce-account .lost_password {
  margin: var(--space-3) 0 0;
  font-size: 14px;
}
.woocommerce-account .lost_password a { color: var(--muted); }
.woocommerce-account .lost_password a:hover { color: var(--teal); }
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit { width: 100%; }

/* ---- Tables (orders, order details, downloads) --------------------------- */
.woocommerce-account .shop_table,
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
.woocommerce-account .shop_table thead th {
  background: var(--page-bg);
  text-align: left;
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.woocommerce-account .shop_table td,
.woocommerce-account .shop_table th[scope="row"] {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: middle;
}
.woocommerce-account .shop_table tbody tr:last-child td,
.woocommerce-account .shop_table tbody tr:last-child th { border-bottom: 0; }
.woocommerce-account .shop_table tbody tr:hover td,
.woocommerce-account .shop_table tbody tr:hover th { background: var(--teal-50); }
.woocommerce-account .shop_table .woocommerce-orders-table__cell-order-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.woocommerce-account .shop_table tfoot th,
.woocommerce-account .shop_table tfoot td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  font-weight: 600;
}

/* ---- Order view / details ------------------------------------------------ */
.woocommerce-account .order-info mark,
.woocommerce-account mark.order-number,
.woocommerce-account mark.order-status,
.woocommerce-account mark.order-date {
  background: var(--teal-50);
  color: var(--teal);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}
.woocommerce-account .woocommerce-customer-details address {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-style: normal;
  color: var(--ink);
  line-height: 1.6;
}

/* ---- Addresses ----------------------------------------------------------- */
/* Intro copy above the two cards ("The following addresses will be used…").
   Scoped to the edit-address endpoint so the dashboard greeting keeps ink. */
.woocommerce-edit-address .woocommerce-MyAccount-content > p:first-child {
  color: var(--muted);
  margin-bottom: var(--space-5);
}
.woocommerce-account .woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.woocommerce-account .woocommerce-Address {
  /* Neutralize WC's .col-1/.col-2 float+width so the grid controls the two cards. */
  float: none;
  width: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--bg);
}
.woocommerce-account .woocommerce-Address-title.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
/* The billing title can be long ("Fakturačná adresa, IČO, DIČ, IČDPH") — let it
   take the free space and wrap, while the edit pill keeps its size. */
.woocommerce-account .woocommerce-Address-title.title h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.woocommerce-account .woocommerce-Address-title.title .edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.woocommerce-account .woocommerce-Address .edit .wa-addr-ico {
  width: 15px;
  height: 15px;
}
.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  color: var(--ink);
  line-height: 1.7;
}

/* ---- Notices ------------------------------------------------------------- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  list-style: none;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* WooCommerce prints an icon-font glyph via ::before; the font is not loaded here,
   so it renders as a stray box — suppress it. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { display: none; }
.woocommerce-account .woocommerce-message { border-left-color: var(--green); }
.woocommerce-account .woocommerce-info { border-left-color: var(--teal); }
.woocommerce-account .woocommerce-error { border-left-color: var(--danger); }
.woocommerce-account .woocommerce-error { padding-left: var(--space-5); }
/* WooCommerce prints the action link *before* the notice text, which in this flex
   row lands it on its own line above the message — order:1 puts it back on the
   right of the text. */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
  order: 1;
  margin-left: auto;
  padding: 8px var(--space-4);
  white-space: nowrap;
}

/* ---- Pagination (orders) ------------------------------------------------- */
.woocommerce-account .woocommerce-pagination {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.woocommerce-account .woocommerce-pagination .button {
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--teal);
}
.woocommerce-account .woocommerce-pagination .button:hover {
  background: var(--teal-50);
  border-color: var(--teal-line);
}

/* select2 (enhanced country/state selects) — align to input height. */
.woocommerce-account .select2-container .select2-selection--single {
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: var(--space-4);
  color: var(--ink);
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: static;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { font-size: 14px; }
  .woocommerce-account .u-columns.col2-set#customer_login,
  .woocommerce-account .woocommerce-Addresses.col2-set {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .woocommerce-account .woocommerce-MyAccount-content { padding: var(--space-5) var(--space-4); }
  /* Responsive order table → stacked rows (WC shop_table_responsive). */
  .woocommerce-account .shop_table_responsive thead { display: none; }
  .woocommerce-account .shop_table_responsive tbody tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: var(--space-2) 0;
  }
  .woocommerce-account .shop_table_responsive tbody tr td,
  .woocommerce-account .shop_table_responsive tbody tr th {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border: 0;
    padding: var(--space-2) var(--space-4);
    text-align: right;
  }
  .woocommerce-account .shop_table_responsive tbody td::before,
  .woocommerce-account .shop_table_responsive tbody th::before {
    content: attr(data-title);
    font-weight: 700;
    color: var(--muted);
    text-align: left;
  }
  .woocommerce-account .shop_table_responsive .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
  .woocommerce-account .form-row-first,
  .woocommerce-account .form-row-last { width: 100%; }
}

/* ============================ My Account → Produkty ============================ */
.cp-intro { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-item {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; background: #fff;
}
.cp-thumb {
  width: 56px; height: 56px; flex: none; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center;
}
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cp-name:hover { color: var(--teal); text-decoration: none; }
.cp-meta { font-size: 12.5px; color: var(--muted); }
.cp-price { font-size: 13px; font-weight: 700; color: var(--teal); }
.cp-price .amount { font-size: inherit; color: inherit; }

@media (max-width: 640px) {
  .cp-item { flex-wrap: wrap; }
}
.cp-item.is-unavailable .cp-thumb img,
.cp-item.is-unavailable .cp-name { opacity: .6; }
.cp-item .bio-unavailable { margin-top: 2px; }
.cp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Buy controls ------------------------------------------------------- */
.cp-buy {
  flex: none; display: flex; align-items: center; gap: 10px; position: relative;
}
.cp-buy.is-loading { opacity: .55; pointer-events: none; }

.cp-qty {
  display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: 9px; overflow: hidden; background: #fff;
}
.cp-qty-btn {
  width: 30px; height: 34px; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink); padding: 0;
}
.cp-qty-btn:hover { background: var(--teal-50); color: var(--teal); }
.cp-qty-input {
  width: 40px; height: 34px; border: 0; border-left: 1px solid var(--line);
  border-right: 1px solid var(--line); text-align: center; font-size: 14px;
  font-weight: 700; color: var(--ink); background: #fff; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.cp-qty-input:focus { outline: none; }
.cp-qty-input::-webkit-outer-spin-button,
.cp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Add-to-cart green, shared with the loop card, the quickview and .btn-cart. */
.cp-add {
  height: 34px; padding: 0 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.cp-add:hover { filter: brightness(1.08); }

.cp-in-cart {
  display: none; align-items: center; gap: 5px; font-size: 13px; font-weight: 700;
  color: var(--teal); white-space: nowrap; padding: 0 6px;
}
.cp-in-cart::before { content: "✓"; }

.cp-buy.is-in-cart .cp-add { display: none; }
.cp-buy.is-in-cart .cp-in-cart { display: inline-flex; }

/* Products sold in packaging tiers: same CTA as the product card, opens the
   shared quick-view modal (assets/js/quickview.js). */
.cp-choose {
  height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 16px; border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--teal); font-family: inherit;
  font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: .13s;
}
.cp-choose svg { width: 17px; height: 17px; flex: none; }
.cp-choose:hover { background: var(--teal); color: #fff; border-color: var(--teal); text-decoration: none; }

.cp-error { font-size: 12px; color: var(--tag-red); max-width: 190px; }
.cp-error:empty { display: none; }

@media (max-width: 640px) {
  .cp-buy { width: 100%; justify-content: flex-start; padding-left: 70px; }
  .cp-add,
  .cp-choose { flex: 1; }
  .cp-error { flex-basis: 100%; max-width: none; }
}