/*
 * Cart, checkout, thank-you page and WooCommerce forms/buttons on these pages.
 * Spec: mockup 3 (cart, checkout desktop 1440 + mobile 390), style guide 2.1, 2.2, 2.7.
 * Tablet (768–1199) is derived: one column with the summary below. Tokens only.
 */

/* ── Slim header (cart / checkout) ─────────────────────────────────── */
.checkout-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

/* header.css places these in the main header's named grid areas; reset for the slim grid */
.checkout-header .header-logo,
.checkout-header .header-search {
  grid-area: auto;
  justify-self: stretch;
  padding-inline: 0;
}

.checkout-header__back {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.checkout-header__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-extrabold);
  text-align: center;
}

.checkout-header__logo,
.checkout-header__search,
.checkout-steps,
.checkout-header__phone,
.checkout-header__secure-text {
  display: none;
}

.checkout-header__aside {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.checkout-header__secure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.checkout-header__secure .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.checkout-header--cart .checkout-header__aside {
  visibility: hidden; /* keeps the title centred on phones */
}

@media (min-width: 768px) {
  .checkout-header {
    grid-template-columns: var(--logo-col) minmax(0, 1fr) auto;
    gap: var(--space-10);
    padding-block: var(--space-6);
    border-bottom: var(--border-hairline);
  }

  .checkout-header__back,
  .checkout-header__title {
    display: none;
  }

  .checkout-header__logo {
    display: block;
    width: var(--logo-w);
  }

  .checkout-header__search {
    display: block;
  }

  .checkout-steps {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-body-s);
    font-weight: var(--fw-bold);
    list-style: none;
  }

  .checkout-header__phone,
  .checkout-header__secure-text {
    display: inline;
  }

  .checkout-header--cart .checkout-header__aside {
    visibility: visible;
    font-family: var(--font-heading);
    font-size: var(--fs-body-s);
    font-weight: var(--fw-bold);
  }

  .checkout-header__phone {
    color: inherit;
    text-decoration: none;
  }
}

/* Tablet: smaller logo; the checkout keeps only the lock so the steps fit */
@media (min-width: 768px) and (max-width: 1199px) {
  .checkout-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-6);
  }

  .checkout-header__logo {
    width: var(--logo-w-mobile);
  }

  .checkout-header:not(.checkout-header--cart) .checkout-header__phone,
  .checkout-header__secure-text {
    display: none;
  }
}

/* Steps: 1 Количка — 2 Данни и доставка — 3 Готово */
.checkout-steps__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted); /* AA contrast (subtle is for large/decorative text only) */
  white-space: nowrap;
}

.checkout-steps__step + .checkout-steps__step::before {
  content: "";
  width: var(--step-line);
  height: var(--border-w-strong);
  background: var(--color-border);
}

.checkout-steps__step.is-done,
.checkout-steps__step.is-done a {
  color: var(--color-muted);
}

.checkout-steps__step.is-done + .checkout-steps__step::before,
.checkout-steps__step.is-current::before {
  background: var(--color-ink);
}

.checkout-steps__step.is-current span {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-tile);
  background: var(--tile-yellow);
  color: var(--color-ink);
  transform: rotate(var(--tile-rotate-badge));
}

/* ── Page head ("Количка  3 продукта") ─────────────────────────────── */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.page-head__title {
  margin: 0;
}

.page-head__count {
  color: var(--color-muted);
  font-size: var(--fs-body-m);
}

/* ── Cart layout ───────────────────────────────────────────────────── */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  padding-block: var(--space-9) var(--space-13);
}

.cart-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow-gap);
  align-items: start;
}

@media (min-width: 1200px) {
  .cart-page {
    grid-template-columns: minmax(0, 1fr) var(--cart-summary-w);
  }
}

.cart-page__main,
.woocommerce-cart-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.cart-page__back {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.cart-page__back:hover {
  text-decoration: underline;
}

/* Free delivery bar */
.free-ship {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-input);
  background: var(--tint-teal);
}

.free-ship__text {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
}

.free-ship__text b {
  font-family: var(--font-heading);
}

.free-ship__bar {
  position: relative;
  height: var(--free-ship-h);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.free-ship__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--color-ink);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Cart rows */
.cart-list {
  margin: 0;
  padding: 0 var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  list-style: none;
}

.cart-item {
  display: grid;
  grid-template-columns: var(--cart-thumb) minmax(0, 1fr) auto auto auto;
  grid-template-areas: "media info qty price remove";
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--cart-row-pad);
}

.cart-item + .cart-item {
  border-top: var(--border-hairline);
}

.cart-item__media {
  grid-area: media;
  position: relative;
  overflow: hidden; /* keeps the age tag's hidden label from widening the page */
  width: var(--cart-thumb);
  height: var(--cart-thumb);
  border-radius: var(--radius-image);
  background: var(--color-image-bg);
}

.cart-item__media img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cart-item__age {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  border-radius: var(--radius-tile-sm);
}

.cart-item__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.cart-item__brand {
  color: var(--color-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.cart-item__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}

.cart-item__name a {
  text-decoration: none;
}

.cart-item__name a:hover {
  text-decoration: underline;
}

/* WooCommerce's item data (variation, plugin fields): "Размер: 16 инча" on one line */
.cart-item .variation,
.order-summary .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.cart-item .variation dt,
.cart-item .variation dd,
.order-summary .variation dt,
.order-summary .variation dd {
  margin: 0;
}

.cart-item .variation dd p,
.order-summary .variation dd p {
  margin: 0;
}

.cart-item__stock {
  color: var(--color-text-2); /* AA: the green (#3F8A1A) is 4.3:1 on white; the dot stays green */
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.cart-item__qty {
  grid-area: qty;
}

.cart-item__qty .quantity {
  height: var(--stepper-m-h);
}

.woocommerce .quantity .qty,
.woocommerce form .quantity .input-text {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.cart-item__qty .quantity .qty {
  width: var(--stepper-m-val);
  font-size: var(--fs-body-m);
}

.cart-item__qty .quantity__btn {
  width: var(--stepper-m-btn);
  font-size: var(--fs-stepper-sign-m);
}

.cart-item__price {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: var(--option-min-w);
}

.cart-item__total {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-extrabold);
}

.cart-item__remove {
  grid-area: remove;
}

.cart-item__remove .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-round);
  color: var(--color-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cart-item__remove .remove:hover {
  background: var(--color-ghost-hover);
  color: var(--color-ink);
}

.cart-item__remove .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* "Обнови количката" is only needed without JS (checkout.js updates on change) */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.js .cart-actions__update {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.woocommerce-cart-form.processing,
.cart_totals.processing {
  opacity: var(--busy-opacity);
  pointer-events: none;
}

/* Undo "removed" notice from WooCommerce */
.restore-item {
  font-weight: var(--fw-bold);
}

/* ── Summary cards (cart "Обобщение", checkout "Вашата поръчка") ──── */
.cart-summary,
.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--summary-pad);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.cart-summary__title,
.checkout-summary__title {
  margin: 0;
  font-size: var(--fs-h4);
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-body-m);
}

.summary-rows__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.summary-rows__row dt,
.summary-rows__row dd {
  margin: 0;
}

.summary-rows__row dd {
  font-weight: var(--fw-bold);
  text-align: right;
}

.summary-rows__row--muted,
.summary-rows__row--muted dd {
  color: var(--color-muted);
  font-weight: var(--fw-regular);
}

.summary-rows .woocommerce-remove-coupon {
  margin-left: var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.summary-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-line);
}

.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.summary-total__label {
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-extrabold);
}

.summary-total__value {
  font-family: var(--font-heading);
  font-size: var(--fs-summary-total);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}

.checkout-summary .summary-total__value {
  font-size: var(--fs-total);
}

.summary-total__value small,
.summary-total__value .includes_tax {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}

.summary-total__vat {
  align-self: flex-end;
  margin-top: calc(var(--space-2) * -1);
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

/* Coupon */
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.coupon-form__input {
  flex: 1;
  min-width: 0;
  height: var(--stepper-m-h);
  padding-inline: var(--space-5);
  border: var(--border-field);
  border-radius: var(--radius-pill);
  background: var(--color-input-bg);
}

.coupon-form__btn {
  height: var(--stepper-m-h);
  padding-inline: var(--space-5);
}

.coupon-error-notice {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.cart-summary__cta {
  width: 100%;
}

.wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Payment badges */
.pay-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-badge {
  display: flex;
  align-items: center;
  height: var(--pay-badge-h);
  padding-inline: var(--space-2);
  border: var(--border-w-hair) solid var(--color-border);
  border-radius: var(--radius-tile);
  font-family: var(--font-heading);
  font-size: var(--pay-badge-fs);
  font-weight: var(--fw-extrabold);
}

/* Mobile bars (cart: Спестявате / Общо / Към поръчката) */
.mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .woocommerce-cart .entry-content,
  .woocommerce-checkout .entry-content {
    padding-block: var(--space-2) var(--space-8);
  }

  .woocommerce-cart .page-head {
    display: none; /* the header shows "Количка (3)" */
  }

  .cart-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    background: none;
  }

  .cart-item {
    grid-template-columns: var(--cart-thumb) minmax(0, 1fr) auto;
    grid-template-areas:
      "media info  remove"
      "media qty   price";
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .cart-item + .cart-item {
    border-top: 0;
  }

  .cart-item__brand,
  .cart-item__stock {
    display: none;
  }

  .cart-item__name {
    font-size: var(--fs-body-m);
  }

  .cart-item__remove {
    align-self: start;
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  }

  .cart-item__qty .quantity {
    height: var(--tap-min);
  }

  .cart-item__price {
    min-width: 0;
  }

  .cart-item__total {
    font-size: var(--fs-price-m);
  }

  .js .mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border-top: var(--border-hairline);
    background: var(--color-surface);
    box-shadow: var(--shadow-sticky);
  }

  .mobile-bar__row,
  .mobile-bar__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .mobile-bar__label {
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
  }

  .mobile-bar__value {
    font-family: var(--font-heading);
    font-size: var(--fs-total);
    font-weight: var(--fw-black);
  }

  .mobile-bar__value small {
    display: none;
  }

  .mobile-bar__btn {
    height: var(--mobile-bar-btn-h);
    font-size: var(--fs-btn-l);
    font-weight: var(--fw-extrabold);
  }

  .js body.woocommerce-cart {
    padding-bottom: calc(var(--mobile-bar-btn-h) + var(--space-14) + var(--space-6));
  }

  .js .woocommerce-cart .toast-region {
    bottom: calc(var(--mobile-bar-btn-h) + var(--space-14) + var(--space-6));
  }
}

/* ── WooCommerce form rows (checkout, account) ─────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.form-grid > .form-row,
.form-grid > .form-row-wide {
  grid-column: 1 / -1;
}

.form-grid > .form-row-first {
  grid-column: 1;
}

.form-grid > .form-row-last {
  grid-column: 2;
}

@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .form-grid > .form-row-first,
  .form-grid > .form-row-last {
    grid-column: 1;
  }
}

.form-row > label,
.form-row > legend,
.rating-input legend {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.form-row .required {
  color: var(--color-muted);
  text-decoration: none;
}

.form-row .optional {
  color: var(--color-muted);
  font-weight: var(--fw-regular);
}

.woocommerce-input-wrapper {
  display: block;
}

.form-row .input-text,
.form-row select,
.form-row textarea,
.woocommerce form .input-text {
  width: 100%;
  min-height: var(--btn-h-m);
  padding: var(--space-3) var(--space-4);
  border: var(--border-field);
  border-radius: var(--radius-input);
  background: var(--color-input-bg);
  color: var(--color-ink);
  font-size: var(--fs-body-m);
}

.form-row textarea {
  min-height: calc(var(--btn-h-m) * 1.7);
  resize: vertical;
}

.form-row .input-text:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  border-color: var(--color-ink);
}

.form-row .description {
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select {
  border-color: var(--color-error);
}

.form-row.woocommerce-invalid label {
  color: var(--color-error);
}

/* Single country (България): the field isn't needed on screen */
#billing_country_field,
#shipping_country_field {
  display: none;
}

/* Checkboxes (create account, newsletter, terms) */
.form-row .checkbox,
.check-row label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  cursor: pointer;
}

.form-row input[type="checkbox"],
.woocommerce-form__input-checkbox {
  flex: none;
  width: var(--check);
  height: var(--check);
  margin: 0;
  accent-color: var(--color-ink);
}

.create-account__hint {
  padding-left: calc(var(--check) + var(--space-3));
}

/* ── Buttons WooCommerce prints (login, account forms, notices) ────── */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h-m);
  padding-inline: var(--btn-pad-m);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-btn-m);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
}

.woocommerce .button:hover {
  background: var(--color-ink-hover);
}

/* ── Checkout layout ───────────────────────────────────────────────── */
.checkout-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow-gap);
  align-items: start;
}

@media (min-width: 1200px) {
  .checkout-page {
    grid-template-columns: minmax(0, 1fr) var(--checkout-summary-w);
  }

  .checkout-page__side {
    position: sticky;
    top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Guest notice sits over the left column */
  .guest-bar,
  .woocommerce-checkout .woocommerce-form-login {
    max-width: calc(100% - var(--checkout-summary-w) - var(--flow-gap));
  }
}

.checkout-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.checkout-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--summary-pad);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.checkout-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-h4);
}

.step-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-tile);
  height: var(--step-tile);
  border-radius: var(--radius-check);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-black);
}

.step-tile--teal   { background: var(--tile-teal);   transform: rotate(var(--tile-rotate-badge)); }
.step-tile--yellow { background: var(--tile-yellow); transform: rotate(var(--tile-rotate-age)); }
.step-tile--blue   { background: var(--tile-blue);   transform: rotate(var(--tile-rotate-badge)); }

.woocommerce-billing-fields,
.woocommerce-account-fields,
.woocommerce-additional-fields,
.woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Guest notice + login */
.guest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-input);
  background: var(--tint-blue);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
}

.guest-bar__login {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}

.woocommerce-form-login {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--summary-pad);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.woocommerce-form-login[style*="display: none"],
.woocommerce-form-login[hidden] {
  display: none;
}

/* Choice cards (delivery, stores, payment) */
.choice-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--radio) minmax(0, 1fr) auto;
  grid-template-areas:
    "radio title price"
    "radio sub   price";
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-4);
  border: var(--border-w-strong) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.choice-card:hover {
  border-color: var(--color-ink);
}

.choice-card:has(input:checked) {
  border-color: var(--color-ink);
  background: var(--color-selected-bg);
}

.choice-card input[type="radio"],
.pay-card > input[type="radio"] {
  grid-area: radio;
  width: var(--radio);
  height: var(--radio);
  margin: 0;
  border: var(--border-w-strong) solid var(--color-ink);
  border-radius: var(--radius-round);
  background: var(--color-surface);
  appearance: none;
  cursor: pointer;
}

.choice-card input[type="radio"]:checked,
.pay-card > input[type="radio"]:checked {
  background: var(--color-ink);
  box-shadow: inset 0 0 0 calc((var(--radio) - var(--radio-dot)) / 2 - var(--border-w-strong)) var(--color-surface);
}

.choice-card__title {
  grid-area: title;
  font-family: var(--font-heading);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-bold);
}

.choice-card__sub {
  grid-area: sub;
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

/* Delivery cards: 4 across on desktop (mockup 3) */
.ship-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.ship-card__price {
  grid-area: price;
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-extrabold);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .ship-cards {
    grid-template-columns: repeat(auto-fit, minmax(var(--ship-card-min-w), 1fr));
  }

  .ship-card {
    grid-template-columns: var(--radio) minmax(0, 1fr);
    grid-template-areas:
      "radio price"
      "title title"
      "sub   sub";
    align-content: start;
    gap: var(--space-2) var(--space-3);
    min-height: var(--ship-card-min-h);
  }

  .ship-card__price {
    justify-self: end;
  }

  .ship-card .choice-card__title {
    margin-top: var(--space-2);
  }
}

/* Panels under the cards: only the one for the chosen kind (checkout.js) */
.delivery-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.js .delivery-panel {
  display: none;
}

.js .delivery-panel.is-active {
  display: grid;
}

.js .store-cards.is-active {
  display: grid;
}

.store-cards {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 768px) {
  .store-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Address fields are required when they're shown (delivery to an address) */
.delivery-panel[data-panel="address"] .kz-address-required:not(#billing_postcode_field) > label::after {
  content: " *";
  color: var(--color-muted);
}

.delivery-panel[data-panel="address"] .kz-address-required:not(#billing_postcode_field) .optional {
  display: none;
}

/* Payment cards */
.pay-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-card {
  display: grid;
  grid-template-columns: var(--radio) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-w-strong) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.pay-card:has(> input:checked) {
  border-color: var(--color-ink);
  background: var(--color-selected-bg);
}

.pay-card__label {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title icons"
    "sub   icons";
  align-items: center;
  gap: 0 var(--space-3);
  cursor: pointer;
}

/* One method only: WooCommerce hides its radio */
.pay-card > input[style*="display: none"] + .pay-card__label {
  grid-column: 1 / -1;
}

.pay-card__label .choice-card__title {
  font-size: var(--fs-h6);
}

.pay-card__label .choice-card__sub {
  font-size: var(--fs-small);
}

.pay-card__icons {
  grid-area: icons;
  display: flex;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.pay-card__icons img {
  max-height: var(--icon-size);
}

.payment_box {
  grid-column: 1 / -1;
  padding: var(--space-4);
  border: var(--border-dashed);
  border-radius: var(--radius-card);
  color: var(--color-text-2);
  font-size: var(--fs-small);
}

.payment_box p {
  margin: 0 0 var(--space-2);
}

/* ── Checkout summary ──────────────────────────────────────────────── */
.order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.order-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-summary__item {
  display: grid;
  grid-template-columns: var(--order-thumb) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.order-summary__thumb {
  position: relative;
  width: var(--order-thumb);
  height: var(--order-thumb);
  border-radius: var(--radius-tile-lg);
  background: var(--color-image-bg);
}

.order-summary__thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.order-summary__qty {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: calc(var(--space-2) * -1);
  min-width: var(--qty-bubble);
  height: var(--qty-bubble);
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: var(--badge-fs);
  font-weight: var(--fw-extrabold);
  line-height: var(--qty-bubble);
  text-align: center;
}

.order-summary__name {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}

.order-summary__price {
  font-family: var(--font-heading);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-extrabold);
}

/* Terms + "Потвърди поръчката" */
.place-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.place-order__btn {
  width: 100%;
  font-size: var(--fs-btn-l);
  font-weight: var(--fw-extrabold);
}

.place-order__note {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.woocommerce-terms-and-conditions-wrapper {
  font-size: var(--fs-small);
}

.woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
}

.woocommerce-privacy-policy-text p {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

.woocommerce-terms-and-conditions {
  max-height: var(--terms-max-h);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  overflow: auto;
  border: var(--border-field);
  border-radius: var(--radius-input);
}

/* Summary bar (phones only) */
.checkout-summary-bar {
  display: none;
}

@media (max-width: 1199px) {
  .checkout-page__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
}

@media (max-width: 767px) {
  .checkout-page {
    gap: var(--space-3);
  }

  .checkout-page__side {
    order: -1;
  }

  .checkout-section {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-card);
  }

  .checkout-section__title {
    font-size: var(--fs-h5);
  }

  .step-tile {
    display: none; /* mockup 3 mobile: plain section titles */
  }

  .guest-bar {
    margin-bottom: var(--space-3);
    padding: 0;
    background: none;
    color: var(--color-text-2);
  }

  .js .checkout-summary-bar {
    display: block;
  }

  .checkout-summary-bar__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-size: var(--fs-body-m);
    font-weight: var(--fw-bold);
    cursor: pointer;
  }

  .checkout-summary-bar__total {
    font-size: var(--fs-h5);
    font-weight: var(--fw-black);
  }

  .checkout-summary-bar__total small {
    display: none;
  }

  .js .checkout-summary:not(.is-open) {
    display: none;
  }

  .checkout-summary-bar__toggle[aria-expanded="true"] .checkout-summary-bar__caret {
    display: inline-block;
    transform: rotate(180deg);
  }

  /* Sticky place-order bar */
  .place-order {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border-top: var(--border-hairline);
    background: var(--color-surface);
    box-shadow: var(--shadow-sticky);
  }

  .place-order__btn {
    height: var(--mobile-bar-btn-h);
  }

  .place-order__note {
    display: none;
  }

  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: var(--fs-caption);
    text-align: center;
  }

  body.woocommerce-checkout:not(.woocommerce-order-received) {
    padding-bottom: calc(var(--mobile-bar-btn-h) + var(--space-14) + var(--space-6));
  }

  .woocommerce-checkout .toast-region {
    bottom: calc(var(--mobile-bar-btn-h) + var(--space-14) + var(--space-6));
  }
}

/* Office / store lines on order pages */
.order-delivery {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body-s);
}

.order-delivery dt {
  color: var(--color-muted);
  font-weight: var(--fw-semibold);
}

.order-delivery dd {
  margin: 0;
  font-weight: var(--fw-bold);
}

/* ── Thank-you page ────────────────────────────────────────────────── */
.thankyou {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--specs-max-w);
  margin-inline: auto;
}

.thankyou__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--summary-pad);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.thankyou__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--thankyou-tile);
  height: var(--thankyou-tile);
  border-radius: var(--radius-tile-lg);
  background: var(--tile-lime);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  transform: rotate(var(--tile-rotate-badge));
}

.thankyou__title {
  margin: 0;
}

.thankyou__lead {
  margin: 0;
  color: var(--color-text-2);
  font-size: var(--fs-body-l);
}

.thankyou__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--fact-min-w), 1fr));
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: var(--border-hairline);
}

.thankyou__fact dt {
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.thankyou__fact dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
}

.thankyou__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

/* WooCommerce order details (thank-you page, "Детайли" in the account) */
.woocommerce-order-details,
.woocommerce-customer-details {
  padding: var(--summary-pad);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h4);
}

.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: var(--space-3) 0;
  border-bottom: var(--border-hairline);
  text-align: left;
  vertical-align: top;
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
  text-align: right;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
}

/* "Общо" row (marked in inc/checkout.php; payment and note rows can follow it) */
.woocommerce-table--order-details tfoot tr:has(.order-total-value) th,
.woocommerce-table--order-details tfoot tr:has(.order-total-value) td {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-black);
}

.woocommerce-table--order-details .wc-item-meta {
  margin: var(--space-1) 0 0;
  padding: 0;
  color: var(--color-muted);
  list-style: none;
}

.woocommerce-customer-details address {
  padding: var(--space-4);
  border: var(--border-chip);
  border-radius: var(--radius-input);
  color: var(--color-text-2);
  font-style: normal;
  line-height: var(--lh-body);
}

.woocommerce-customer-details .col2-set,
.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--address-min-w), 1fr));
  gap: var(--space-4);
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
  margin: var(--space-2) 0 0;
}

/* Empty cart (full empty state comes in build step 8) */
.cart-empty.woocommerce-info {
  margin-bottom: var(--space-5);
}

.return-to-shop .button {
  margin-top: var(--space-2);
}

/* Password fields: WooCommerce's "show password" button as an eye icon */
.password-input {
  position: relative;
  display: block;
}

.password-input .input-text {
  padding-right: calc(var(--tap-min) + var(--space-2));
}

.show-password-input {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}

/* The icon is a masked pseudo-element so the button's focus ring stays visible */
.show-password-input::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-muted);
  -webkit-mask: url("../img/icon-eye.svg") center / var(--icon-sm) no-repeat;
  mask: url("../img/icon-eye.svg") center / var(--icon-sm) no-repeat;
}

.show-password-input.display-password::before {
  background: var(--color-ink);
}

/* Checkout errors: WooCommerce puts the list at the top of the form (full width) and a line under each field */
.checkout-page > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
}

.checkout-inline-error-message {
  margin: 0;
  color: var(--color-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}