/* ============================================================
   KK Cart UI — cart page styles
   ============================================================ */

body.woocommerce-cart {
  --kk-r: 18px;
  --kk-pill: 9999px;
  --kk-purple-soft: rgba(109, 40, 217, .06);
  --kk-purple-border: rgba(109, 40, 217, .22);
  --kk-sticky-top: 14px;
}

/* ── Cart count badges (used in shop header etc.) ─────────── */

.kk-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--kk-purple, #6D28D9);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  transition: transform .18s ease, background .18s ease;
}

.kk-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  vertical-align: top;
  position: relative;
  top: -4px;
  transition: transform .18s ease;
}

.kk-cart-badge[data-count="0"] {
  display: none !important;
}

/* ── Generic radius for our blocks ─────────────────────────── */

body.woocommerce-cart .kk-ecb-wrap,
body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .kk-cart-summary {
  border-radius: var(--kk-r) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

.kk-btn,
body.woocommerce-cart .coupon button.button {
  border-radius: var(--kk-r) !important;
  background-clip: padding-box !important;
}

body.woocommerce-cart input.qty,
body.woocommerce-cart form.woocommerce-cart-form .coupon input.input-text {
  border-radius: var(--kk-r) !important;
  background-clip: padding-box !important;
}

/* ── Buttons ───────────────────────────────────────────────── */

.kk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  text-decoration: none !important;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(109, 40, 217, .25);
  transition: transform .08s ease;
  border-radius: var(--kk-r) !important;
}
.kk-btn:active { transform: scale(.99); }

.kk-btn--primary {
  background: var(--kk-btn-bg, #6D28D9);
  color: #fff !important;
  border-color: rgba(109, 40, 217, .0);
}

.kk-btn--ghost {
  background: #fff;
  color: var(--kk-purple, #6D28D9) !important;
}

/* ── AJAX overlay ──────────────────────────────────────────── */

.kk-cart-updating-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 999 !important;
  background: rgba(255, 255, 255, .72) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--kk-r) !important;
  backdrop-filter: blur(2px);
}

.kk-cart-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(109, 40, 217, .18);
  border-top-color: var(--kk-purple, #6D28D9);
  animation: kk-spin .7s linear infinite;
}

@keyframes kk-spin { to { transform: rotate(360deg); } }

form.woocommerce-cart-form { position: relative !important; }
form.woocommerce-cart-form.kk-updating tbody {
  opacity: .5;
  pointer-events: none;
}

/* ── Empty cart: hide default Woo notices ──────────────────── */

body.woocommerce-cart.woocommerce-cart-empty .woocommerce-info,
body.woocommerce-cart.woocommerce-cart-empty .woocommerce-message,
body.woocommerce-cart.woocommerce-cart-empty .woocommerce-error,
body.woocommerce-cart.woocommerce-cart-empty .wc-empty-cart-message,
body.woocommerce-cart.woocommerce-cart-empty .woocommerce-notices-wrapper {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── Empty cart box ────────────────────────────────────────── */

.kk-ecb-wrap {
  margin: 16px 0 22px;
  padding: 16px;
  border: 1px solid rgba(109, 40, 217, .18);
  background: #fff;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
}

.kk-ecb-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.kk-ecb-desc {
  margin: 0 0 12px 0;
  opacity: .85;
  line-height: 1.35;
  text-align: center;
}

.kk-ecb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 24, 39, .06);
  flex-wrap: wrap;
}

.kk-ecb-sum { font-weight: 800; font-size: 14px; }

/* ── Cart form box ─────────────────────────────────────────── */

body.woocommerce-cart form.woocommerce-cart-form {
  margin: 0 0 14px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .10);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .06);
}

/* ── Hide subtotal column (we show single total only) ────── */

body.woocommerce-cart th.product-subtotal,
body.woocommerce-cart td.product-subtotal,
body.woocommerce-cart td[data-title="Проміжний підсумок"],
body.woocommerce-cart td[data-title="Subtotal"],
body.woocommerce-cart td[data-title="Підсумок"],
body.woocommerce-cart td[data-title="підсумок"],
body.woocommerce-cart td[data-title="subtotal"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  width: 0 !important;
}

body.woocommerce-cart td.product-subtotal::before,
body.woocommerce-cart td[data-title="Проміжний підсумок"]::before,
body.woocommerce-cart td[data-title="Subtotal"]::before {
  display: none !important;
  content: none !important;
}

/* ── Force product thumbnail ──────────────────────────────── */

body.woocommerce-cart table.woocommerce-cart-form__contents td.product-thumbnail {
  display: table-cell !important;
  visibility: visible !important;
  width: 80px !important;
  min-width: 72px !important;
  padding: 10px 8px 10px 0 !important;
}

body.woocommerce-cart table.woocommerce-cart-form__contents td.product-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
}

/* ── Mobile cart layout ───────────────────────────────────── */

@media (max-width: 767px) {
  body.woocommerce-cart table.woocommerce-cart-form__contents,
  body.woocommerce-cart table.woocommerce-cart-form__contents tbody,
  body.woocommerce-cart table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
    display: block !important;
    width: 100% !important;
  }

  body.woocommerce-cart table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-columns: 72px 1fr auto !important;
    grid-template-areas: "img name remove" "img price qty" !important;
    gap: 4px 10px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
    align-items: center !important;
  }

  body.woocommerce-cart table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
  }

  body.woocommerce-cart table.woocommerce-cart-form__contents td::before {
    display: none !important;
    content: none !important;
  }

  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-thumbnail { grid-area: img !important; align-self: center !important; }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-name {
    grid-area: name !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding-top: 4px !important;
    align-self: end !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-name a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-price {
    grid-area: price !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #7c3aed !important;
    align-self: start !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-quantity {
    grid-area: qty !important;
    align-self: start !important;
    padding-top: 2px !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-remove {
    grid-area: remove !important;
    text-align: right !important;
    align-self: start !important;
    padding-top: 4px !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-remove a {
    color: #dc2626 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(220, 38, 38, .2) !important;
    background: #fff !important;
    line-height: 1 !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents td.product-quantity input.qty {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 36px !important;
    min-height: 36px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(17, 24, 39, .18) !important;
    background: #fff !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents thead { display: none !important; }
  body.woocommerce-cart table.woocommerce-cart-form__contents .actions {
    display: block !important;
    padding: 14px 0 0 0 !important;
    border: none !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents .actions td { display: block !important; padding: 0 !important; }
  body.woocommerce-cart table.woocommerce-cart-form__contents .coupon {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
  }
  body.woocommerce-cart table.woocommerce-cart-form__contents .coupon input { flex: 1 1 140px !important; }
}

/* ── Compact summary ──────────────────────────────────────── */

.kk-cart-summary {
  padding: 14px;
  box-sizing: border-box;
  width: 100%;
}

.kk-cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.kk-cart-summary__total-label { font-weight: 800; font-size: 15px; }
.kk-cart-summary__total-value { font-weight: 900; font-size: 18px; color: #7c3aed; }

.kk-cart-summary__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kk-cart-summary__actions .kk-btn {
  flex: 1 1 140px;
  min-width: 0;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  padding: 14px 10px;
  font-size: 15px;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .kk-cart-summary__actions { flex-direction: column; }
  .kk-cart-summary__actions .kk-btn { flex: none; width: 100%; }
}

/* ── Recommended products ─────────────────────────────────── */

.kk-rec-wrap {
  margin: 32px 0 0 0;
  --kk-rec-btn-c1: #0b0b10;
  --kk-rec-btn-c2: #2a0a4a;
  --kk-rec-btn-c3: #7c3aed;
  --kk-rec-btn-h: 62px;
  --kk-rec-btn-radius: 26px;
  --kk-rec-btn-font: 18px;
  --kk-rec-btn-inset-x: 16px;
  --kk-rec-btn-bottom: 16px;
  --kk-rec-price-minh: 34px;
  --kk-rec-grid-gap: 22px;
  --kk-rec-grid-gap-mobile: 14px;
}

.kk-rec-title {
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.kk-rec-grid {
  display: grid;
  align-items: stretch;
  gap: var(--kk-rec-grid-gap);
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
}

@media (min-width: 1750px) { .kk-rec-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (max-width: 1749px) { .kk-rec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 820px) and (max-width: 1099px) { .kk-rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 540px) and (max-width: 819px) { .kk-rec-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--kk-rec-grid-gap-mobile); } }
@media (max-width: 539px) { .kk-rec-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--kk-rec-grid-gap-mobile); } }
@media (max-width: 359px) { .kk-rec-grid { grid-template-columns: 1fr; } }

.kk-rec-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .07);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  text-align: center;
}

.kk-rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(124, 58, 237, .16);
  filter: brightness(1.01);
}

.kk-rec-card-img-wrap {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  background: #f8fafc !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  min-height: 120px;
}

.kk-rec-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  flex: 0 0 auto !important;
  transition: transform .28s ease !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.kk-rec-card:hover .kk-rec-card-img-wrap img { transform: scale(1.03) !important; }

.kk-rec-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 14px 12px 0;
}

.kk-rec-card-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  line-height: 1.25 !important;
  text-align: center !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  margin-bottom: 8px !important;
  font-size: clamp(14px, 2.2vw, 16px) !important;
  font-weight: 800 !important;
  color: #111827 !important;
  text-decoration: none !important;
  display: block;
}

.kk-rec-card-name:hover { color: #7c3aed !important; }

.kk-rec-card-price {
  min-height: var(--kk-rec-price-minh) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #7c3aed;
}

.kk-rec-card-price .woocommerce-Price-amount {
  color: #7c3aed !important;
  font-weight: 900 !important;
}

.kk-rec-card-foot {
  margin-top: auto !important;
  padding: 0 0 calc(var(--kk-rec-btn-bottom) + env(safe-area-inset-bottom, 0px)) 0;
}

.kk-rec-atc {
  margin-top: auto !important;
  width: calc(100% - (var(--kk-rec-btn-inset-x) * 2)) !important;
  margin-left: var(--kk-rec-btn-inset-x) !important;
  margin-right: var(--kk-rec-btn-inset-x) !important;
  height: var(--kk-rec-btn-h) !important;
  min-height: var(--kk-rec-btn-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.12 !important;
  overflow: hidden !important;
  font-size: var(--kk-rec-btn-font) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border-radius: var(--kk-rec-btn-radius) !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  float: none !important;
  clear: both !important;
}

.kk-rec-atc.kk-btn--primary {
  background: linear-gradient(135deg, var(--kk-rec-btn-c1) 0%, var(--kk-rec-btn-c2) 55%, var(--kk-rec-btn-c3) 120%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 12px 26px rgba(124, 58, 237, .22) !important;
}

.kk-rec-atc.kk-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(124, 58, 237, .30) !important;
  filter: brightness(1.05) saturate(1.05);
}

.kk-rec-atc.kk-btn--ghost {
  background: #fff !important;
  color: #7c3aed !important;
  border: 1px solid rgba(124, 58, 237, .24) !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, .06) !important;
}

.kk-rec-atc.kk-btn--ghost:hover {
  background: rgba(124, 58, 237, .04) !important;
  transform: translateY(-1px);
}

.kk-rec-atc:active { transform: scale(.99) !important; }

@media (min-width: 1100px) and (max-width: 1749px) {
  .kk-rec-wrap {
    --kk-rec-btn-h: 58px;
    --kk-rec-btn-font: 16px;
    --kk-rec-btn-inset-x: 14px;
    --kk-rec-btn-bottom: 14px;
    --kk-rec-btn-radius: 24px;
  }
}

@media (max-width: 819px) {
  .kk-rec-wrap {
    --kk-rec-btn-h: 52px;
    --kk-rec-btn-font: 15px;
    --kk-rec-btn-inset-x: 10px;
    --kk-rec-btn-bottom: 12px;
    --kk-rec-btn-radius: 22px;
  }
}

@media (max-width: 430px) {
  .kk-rec-wrap {
    --kk-rec-btn-h: 50px;
    --kk-rec-btn-font: 14px;
    --kk-rec-btn-inset-x: 8px;
    --kk-rec-btn-bottom: 10px;
    --kk-rec-btn-radius: 20px;
  }
  .kk-rec-card-img-wrap { min-height: 130px !important; }
  .kk-rec-card-body { padding-left: 8px !important; padding-right: 8px !important; padding-top: 10px !important; }
  .kk-rec-card-price { font-size: 17px !important; margin-bottom: 8px !important; min-height: 26px !important; }
  .kk-rec-card-name { font-size: 13px !important; margin-bottom: 6px !important; }
}

@media (max-width: 360px) {
  .kk-rec-wrap {
    --kk-rec-btn-h: 46px;
    --kk-rec-btn-font: 13px;
    --kk-rec-btn-inset-x: 6px;
    --kk-rec-btn-bottom: 8px;
    --kk-rec-btn-radius: 18px;
  }
  .kk-rec-card-img-wrap { min-height: 110px !important; }
  .kk-rec-card-price { font-size: 15px !important; }
  .kk-rec-card-name { font-size: 12px !important; }
}

/* ============================================================
   v3.1.0 — optimistic UI helpers
   ============================================================ */

/* Row being optimistically removed: hidden immediately by JS via display:none.
   This rule is a safety net + smooth fallback if JS uses opacity instead. */
tr.cart_item.kk-row-removing {
  pointer-events: none;
}

/* Summary block is "stale" between optimistic action and server confirmation.
   Subtle dim — we don't show a full overlay because the row is already gone
   visually and the user shouldn't feel anything's blocking them. */
.kk-cart-summary.kk-summary-stale {
  opacity: .6;
  transition: opacity .15s ease;
  pointer-events: none;
}