/* ==========================================================================
   Chowanki — Cart page (/cart/) button styling.
   Text content itself is swapped client-side by chowanki-cart.js, since the
   Cart block renders it via React rather than static server HTML — see the
   comment above chowanki_enqueue_cart_assets() in functions.php.
   This stylesheet is only enqueued on the cart page (see is_cart() in
   chowanki_enqueue_cart_assets()), so selectors here don't need extra
   page-scoping of their own.
   ========================================================================== */

/* Center the "Koszyk" page title. */
.wp-block-post-title {
  text-align: center !important;
}
/* On mobile the fixed header has no reserved space above it (body's
   padding-top is zeroed out for mobile in chowanki-menu.css, so the fixed
   header overlaps page content instead of pushing it down) — push the
   title down clear of the header here instead, using the same header-
   height custom property the rest of the site measures it with. */
@media (max-width: 760px) {
  .wp-block-post-title {
    margin-top: calc(var(--chowanki-header-height) + 6px) !important;
  }
}

/* Cart line items: clicking a product row shows a black border around it.
   The first attempt at this only reset `outline` on the <a> links
   (name/thumbnail), which didn't fix it — so the actual mechanism is
   probably `box-shadow` (a common way accessible component libraries like
   WooCommerce Blocks draw focus rings, since it doesn't affect layout and
   can follow rounded corners) and/or a wider ancestor than just the link
   itself is what's actually receiving focus. This resets both outline AND
   box-shadow on click/focus, with !important to beat the block's own
   component styles, on every element inside the cart AND checkout blocks
   (not just .wc-block-cart-items, in case that's not the exact wrapper)
   — no exceptions, so it can't be the wrong selector again. */
.wp-block-woocommerce-cart *:focus,
.wp-block-woocommerce-cart *:focus-visible,
.wp-block-woocommerce-cart *:focus-within,
.wp-block-woocommerce-cart *:active,
.wp-block-woocommerce-checkout *:focus,
.wp-block-woocommerce-checkout *:focus-visible,
.wp-block-woocommerce-checkout *:focus-within,
.wp-block-woocommerce-checkout *:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove the "Save X zł" sale badge on cart line items. */
.wc-block-components-product-badge.wc-block-components-sale-badge {
  display: none !important;
}

/* Remove each cart line item's product summary (the short description
   WooCommerce Blocks shows under the product name/price by default) —
   only the description text, not the whole metadata block, so selected
   variation attributes (size/color) would still show if this product ever
   has any. */
.wc-block-components-product-metadata__description,
.wc-block-cart-item__product-metadata .wc-block-components-product-metadata__description {
  display: none !important;
}

/* "Proceed to Checkout" button — teal background, pale-yellow text (the
   site's own badge colors, see the NOWOŚĆ badge in chowanki-shop.css),
   fully rounded. Both the block's own class and the generic core button
   class are targeted since which one actually carries the button styles
   can vary by WooCommerce version. */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wp-element-button,
.wp-block-woocommerce-proceed-to-checkout-block a.wp-block-button__link {
  background-color: #09ab9c !important;
  color: #fef2b8 !important;
  border-color: #09ab9c !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button__text {
  font-weight: 700 !important;
}
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wp-element-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a.wp-block-button__link:hover {
  background-color: #078a7d !important;
  color: #fef2b8 !important;
  border-color: #078a7d !important;
}

/* Coupon form "Zastosuj" (Apply) button — same teal/pale-yellow pair as the
   checkout button above, but a size step down and fully rounded per the
   request. Text sits in its own inner .wc-block-components-button__text
   div, so that gets the bold weight + color too rather than relying on
   inheritance alone. */
.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
  background-color: #09ab9c !important;
  border-color: #09ab9c !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  min-height: 0 !important;
}
.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button .wc-block-components-button__text {
  color: #fef2b8 !important;
  font-weight: 700 !important;
}
.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button:hover {
  background-color: #078a7d !important;
  border-color: #078a7d !important;
}

/* Empty-cart icon: WooCommerce Blocks normally shows its own built-in cart
   icon here via a ::before background-image on the "cart is empty" heading
   (triggered by its with-empty-cart-icon class). That's removed below, and
   a real <img> — the site's own "ikony_na_stronę" cart artwork from the
   Media Library — takes its place instead, added as its own Image block
   right before the heading in the Cart page's own saved content. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: none;
}
.chowanki-empty-cart-icon {
  margin: 0 auto 16px;
}
.chowanki-empty-cart-icon img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}

/* Order-summary totals rows (shipping and any other line) sometimes show an
   extra description sub-line beneath their value — e.g. the selected
   shipping method's name under "Wysyłka". Hidden everywhere in the order
   summary per request. */
.wc-block-components-totals-item__description {
  display: none !important;
}

/* Cart line-items table on mobile: the block's own table-layout:auto lets
   unbreakable content (the row total price, a multi-digit quantity value)
   dictate column widths, so on a narrow phone the total column can get
   pushed off past the right edge of the screen instead of shrinking with
   everything else — exactly the "price going outside the screen" problem.
   table-layout:fixed + width:100% instead forces every column to fit
   inside the viewport, and letting cell content wrap (rather than the
   block's default nowrap) means the price/product text reflows onto a
   new line instead of overflowing. */
@media (max-width: 600px) {
  .wp-block-woocommerce-cart-line-items-block table.wc-block-cart-items,
  .wc-block-cart-items {
    table-layout: fixed !important;
    width: 100% !important;
  }
  .wc-block-cart-items th,
  .wc-block-cart-items td {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .wc-block-cart-items .price,
  .wc-block-cart-item__total {
    white-space: normal !important;
  }
  .wc-block-cart-item__image {
    width: 64px !important;
  }
  .wc-block-cart-item__image img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Belt-and-braces: if anything inside still computes wider than the
     viewport, it scrolls inside its own box instead of pushing the whole
     page wider than the screen. */
  .wp-block-woocommerce-cart-items-block,
  .wp-block-woocommerce-cart {
    max-width: 100vw;
    overflow-x: auto;
  }
}