/* ============================================================
   CART PAGE
   ============================================================ */

.woocommerce-cart .container {
  max-width: var(--container-xl) !important;
}

.wc-block-components-sidebar-layout.wc-block-cart,
.wc-block-components-sidebar-layout.wc-block-cart.is-mobile,
.wc-block-components-sidebar-layout.wc-block-cart.is-large,
.wc-block-cart {
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: var(--space-10) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

.wc-block-cart__main,
.wc-block-components-main.wc-block-cart__main {
  min-width: 0 !important;
  width: 100% !important;
}

.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-cart__sidebar {
  position: sticky !important;
  top: calc(var(--header-height) + var(--space-6)) !important;
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-6) !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wc-block-cart__totals-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 400 !important;
  color: var(--color-silver-light) !important;
  letter-spacing: var(--tracking-wide) !important;
  margin-bottom: var(--space-5) !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.wc-block-cart-items {
  width: 100% !important;
  border-collapse: collapse !important;
}

.wc-block-cart-items__header {
  border-bottom: 1px solid var(--color-border) !important;
}

.wc-block-cart-items__header span {
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-text-faint) !important;
  font-family: var(--font-body) !important;
  padding: var(--space-3) 0 !important;
  display: block !important;
}

.wc-block-cart-items__row {
  border-bottom: 1px solid var(--color-border) !important;
}

.wc-block-cart-item__image,
.wc-block-cart-item__product,
.wc-block-cart-item__total {
  padding: var(--space-5) var(--space-3) !important;
  vertical-align: middle !important;
}

.wc-block-cart-item__image {
  width: 110px !important;
  padding-left: 0 !important;
}

.wc-block-cart-item__image img {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border) !important;
  display: block !important;
}

.wc-block-components-product-name {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  color: var(--color-silver-light) !important;
  margin-bottom: var(--space-2) !important;
  display: block !important;
  text-decoration: none !important;
}

.wc-block-components-product-name:hover {
  color: var(--color-silver) !important;
}

.wc-block-components-product-price {
  font-family: var(--font-display) !important;
  font-size: var(--text-md) !important;
  color: var(--color-silver) !important;
  letter-spacing: var(--tracking-wide) !important;
}

.wc-block-components-product-price__regular {
  color: var(--color-text-faint) !important;
  font-size: var(--text-sm) !important;
  margin-right: var(--space-2) !important;
}

.wc-block-components-product-price__value.is-discounted {
  color: var(--color-silver) !important;
}

.wc-block-components-product-metadata__description {
  display: none !important;
}

.wc-block-cart-item__prices {
  display: none !important;
}

.wc-block-components-product-metadata {
  font-size: var(--text-sm) !important;
  color: var(--color-text-muted) !important;
  margin-top: var(--space-2) !important;
}

.wc-block-components-product-metadata p,
.wc-block-components-product-metadata span {
  font-size: var(--text-sm) !important;
  color: var(--color-silver-dark) !important;
  letter-spacing: var(--tracking-wide) !important;
}

.wc-block-cart-item__quantity {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin-top: var(--space-3) !important;
}

.wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

.wc-block-components-quantity-selector__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 36px !important;
  background: none !important;
  border: none !important;
  color: var(--color-text-muted) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color var(--transition-fast) !important;
}

.wc-block-components-quantity-selector__button:hover {
  color: var(--color-silver-light) !important;
}

.wc-block-components-quantity-selector__input {
  width: 44px !important;
  height: 36px !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  border-left: 1px solid var(--color-border) !important;
  border-right: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  font-size: var(--text-base) !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.wc-block-cart-item__remove-link {
  background: none !important;
  border: none !important;
  color: var(--color-text-faint) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  transition: color var(--transition-fast) !important;
}

.wc-block-cart-item__remove-link:hover {
  color: var(--color-error) !important;
}

.wc-block-cart-item__remove-link svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

.wc-block-cart-item__total {
  text-align: right !important;
  padding-right: 0 !important;
}

/* Sale Badge – Silber-Gradient, schwarze Schrift */
.wc-block-components-sale-badge {
  background: var(--gradient-silver) !important;
  color: var(--color-bg) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-wide) !important;
  padding: var(--space-1) var(--space-2) !important;
  border-radius: var(--radius-sm) !important;
  margin-top: var(--space-1) !important;
  display: inline-block !important;
}

/* ─── Totals ─── */

.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--space-3) 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.wc-block-components-totals-item:last-child {
  border-bottom: none !important;
}

.wc-block-components-totals-item__label {
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-text-faint) !important;
  font-family: var(--font-body) !important;
}

.wc-block-components-totals-item__value {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  color: var(--color-silver-light) !important;
  letter-spacing: var(--tracking-wide) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: var(--text-sm) !important;
  color: var(--color-silver-light) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--text-2xl) !important;
}

.wc-block-cart__submit-button {
  display: block !important;
  width: 100% !important;
  background: var(--gradient-silver) !important;
  color: var(--color-bg) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) !important;
  text-align: center !important;
  margin-top: var(--space-4) !important;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal) !important;
}

.wc-block-cart__submit-button:hover {
  box-shadow: var(--shadow-glow-silver) !important;
  transform: translateY(-1px) !important;
  color: var(--color-bg) !important;
}

.wc-block-cart__payment-options {
  margin-top: var(--space-4) !important;
  border-top: 1px solid var(--color-border) !important;
  padding-top: var(--space-4) !important;
}

.wc-block-components-express-payment-continue-rule {
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-text-faint) !important;
  text-align: center !important;
  margin: var(--space-3) 0 !important;
}

.wc-block-components-panel__button {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--color-text-faint) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) 0 !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
}

/* ============================================================
   RESPONSIVE – TABLET (< 1024px)
   ============================================================ */

@media (max-width: 1023px) {
  .wc-block-components-sidebar-layout.wc-block-cart,
  .wc-block-components-sidebar-layout.wc-block-cart.is-mobile,
  .wc-block-cart {
    grid-template-columns: 1fr !important;
  }

  .wc-block-cart__sidebar {
    position: static !important;
  }
}

/* ============================================================
   RESPONSIVE – MOBILE (< 640px)
   [Bild 56px] | [Name + Qty links] | [Preis + Badge rechts]
   ============================================================ */

@media (max-width: 639px) {

  .wc-block-cart-items,
  .wc-block-cart-items tbody {
    display: block !important;
    width: 100% !important;
  }

  .wc-block-cart-items__header {
    display: none !important;
  }

  /* Row: 3 Spalten */
  .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 56px 1fr auto !important;
    grid-template-areas: "image product total" !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
  }

  /* Bild */
  .wc-block-cart-item__image {
    grid-area: image !important;
    width: 56px !important;
    padding: 0 !important;
    align-self: center !important;
  }

  .wc-block-cart-item__image img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--color-border) !important;
    display: block !important;
  }

  /* Info: Name + Qty linksbündig */
  .wc-block-cart-item__product {
    grid-area: product !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .wc-block-cart-item__wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .wc-block-components-product-name {
    font-size: var(--text-sm) !important;
    line-height: var(--leading-tight) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  .wc-block-cart-item__prices {
    display: none !important;
  }

  .wc-block-components-product-metadata {
    display: none !important;
  }

  /* Quantity-Zelle: align-self mit maximal möglicher Spezifität überschreiben */
  .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__wrap .wc-block-cart-item__quantity,
  .wc-block-cart-item__quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: auto !important;
    gap: var(--space-2) !important;
    margin-top: var(--space-2) !important;
    grid-column: unset !important;
    grid-row: unset !important;
    padding: 0 !important;
    vertical-align: unset !important;
  }

  /* WooCommerce setzt align-self: end via .is-medium/.is-small – alle Varianten überschreiben */
  .is-large .wc-block-cart-items__row .wc-block-cart-item__quantity,
  .is-medium .wc-block-cart-items__row .wc-block-cart-item__quantity,
  .is-small .wc-block-cart-items__row .wc-block-cart-item__quantity {
    align-self: auto !important;
    grid-column-start: unset !important;
    grid-row-start: unset !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  .wc-block-components-quantity-selector__button {
    width: 26px !important;
    height: 28px !important;
  }

  .wc-block-components-quantity-selector__input {
    width: 30px !important;
    height: 28px !important;
    font-size: var(--text-sm) !important;
  }

  .wc-block-cart-item__remove-link {
    width: 28px !important;
    height: 28px !important;
  }

  .wc-block-cart-item__remove-link svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Total: Preis + Badge rechtsbündig übereinander */
  .wc-block-cart-item__total {
    grid-area: total !important;
    padding: 0 !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: var(--space-1) !important;
  }

  .wc-block-cart-item__total .wc-block-components-product-price,
  .wc-block-cart-item__total .wc-block-formatted-money-amount {
    font-family: var(--font-display) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-silver) !important;
    letter-spacing: var(--tracking-wide) !important;
    white-space: nowrap !important;
  }

  .wc-block-cart-item__total .wc-block-components-sale-badge {
    background: var(--gradient-silver) !important;
    color: var(--color-bg) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px var(--space-2) !important;
    border-radius: var(--radius-sm) !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
  }
/* Gespartem Betrag im Sale Badge – schwarze Schrift */
  .wc-block-cart-item__total .wc-block-components-sale-badge .wc-block-formatted-money-amount,
  .wc-block-cart-item__total .wc-block-components-sale-badge .wc-block-components-formatted-money-amount {
    color: var(--color-bg) !important;
  }

  /* Sale Badge Betrag – gleiche Farbe wie Badge-Text */
  .wc-block-components-sale-badge .wc-block-formatted-money-amount,
  .wc-block-components-sale-badge .wc-block-components-formatted-money-amount {
    color: inherit !important;
    font-weight: inherit !important;
  }
}