/* Cart: the products in a bordered table, the totals beside it, as on faberpet.ro. */
.pbly .cart {
  padding-block: var(--pbly-space-10) calc(var(--pbly-space-20) + var(--pbly-space-5));
}

.pbly .cart__title {
  margin-bottom: var(--pbly-space-5);
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-font-size-2xl);
  font-weight: var(--pbly-font-weight-bold);
  line-height: 1;
}

.pbly .cart__notices {
  display: grid;
  gap: var(--pbly-space-8);
}

.pbly .cart__notices:not(:empty) { margin-bottom: var(--pbly-space-8); }

.pbly .cart__layout[hidden] { display: none; }

.pbly .cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--pbly-space-10);
}

/* Products */
.pbly .cart-table {
  width: 100%;
  border: 1px solid var(--pbly-color-border-default);
  border-radius: var(--pbly-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  color: var(--pbly-color-text-muted);
  text-align: left;
}

.pbly .cart-table :is(th, td) {
  padding: var(--pbly-space-5);
  vertical-align: middle;
}

.pbly .cart-table th { font-weight: var(--pbly-font-weight-medium); }
.pbly .cart-table tbody td { font-weight: var(--pbly-font-weight-semibold); }

.pbly .cart-table__image { width: 1%; }

.pbly .cart-table__image a {
  position: relative;
  display: block;
  width: fit-content;
}

/* The 4% shade over product photos, as on the product cards. */
.pbly .cart-table__image a::after {
  position: absolute;
  inset: 0;
  border-radius: var(--pbly-radius-md-plus);
  background: color-mix(in srgb, var(--pbly-color-palette-black) 4%, transparent);
  content: "";
}

.pbly .cart-table__image img {
  display: block;
  max-width: none;
  width: var(--pbly-space-20);
  height: var(--pbly-space-20);
  border-radius: var(--pbly-radius-md-plus);
  object-fit: cover;
}

.pbly .cart-table__name a {
  color: var(--pbly-color-palette-green-link);
  text-decoration: none;
  transition: color 0.2s;
}

.pbly .cart-table__name a:hover { color: var(--pbly-color-action-hover); }

.pbly .cart-table__price,
.pbly .cart-table__total { white-space: nowrap; }

.pbly .cart-table__remove { width: 1%; }

.pbly .cart-table__remove-button {
  display: flex;
  flex: none;
  opacity: 1;
  transition: opacity 0.2s;
}

.pbly .cart-table__remove-button:hover { opacity: 0.6; }
.pbly .cart-table__remove-button img { max-width: none; }

/* Free delivery and minimum order */
.pbly .cart__notes {
  display: grid;
  gap: var(--pbly-space-1-5);
  margin-top: var(--pbly-space-6);
  padding-left: var(--pbly-space-1);
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-sm);
  font-weight: var(--pbly-font-weight-medium);
}

.pbly .cart__notes li {
  display: flex;
  align-items: center;
  gap: var(--pbly-space-2);
}

/* Totals */
.pbly .cart-totals__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pbly .cart-totals__table {
  width: 100%;
  color: var(--pbly-color-text-muted);
  text-align: left;
}

.pbly .cart-totals__table th {
  width: 40%;
  padding: var(--pbly-space-5);
  font-weight: var(--pbly-font-weight-medium);
  vertical-align: top;
}

.pbly .cart-totals__table td {
  padding: var(--pbly-space-2) var(--pbly-space-3);
  vertical-align: middle;
}

.pbly .cart-totals__checkout {
  width: 100%;
  margin-top: var(--pbly-space-4);
  padding: var(--pbly-space-5);
  line-height: 1;
}

/* Delivery options, also on the checkout page */
.pbly .shipping-options {
  display: grid;
  gap: var(--pbly-space-2);
}

.pbly .shipping-options__option { cursor: pointer; }
.pbly .shipping-options__option strong { white-space: nowrap; }

.pbly .shipping-options__option input {
  margin: 0 var(--pbly-space-1) 0 0;
  accent-color: var(--pbly-color-action-primary);
}

/* Empty cart */
.pbly .cart-empty { display: grid; gap: var(--pbly-space-8); }
.pbly .cart-empty[hidden] { display: none; }

.pbly .cart-empty__message {
  display: grid;
  justify-items: start;
  gap: var(--pbly-space-2);
  margin-top: var(--pbly-space-5);
  padding: var(--pbly-space-8);
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-palette-fog);
  color: var(--pbly-color-text-muted);
}

.pbly .cart-empty__message img { margin-bottom: var(--pbly-space-3); }

.pbly .cart-empty__title {
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-font-size-md);
  font-weight: var(--pbly-font-weight-bold);
}

.pbly .cart-empty__suggest {
  margin-top: var(--pbly-space-4);
  font-weight: var(--pbly-font-weight-semibold);
}

.pbly .cart-empty__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pbly-space-5);
}

.pbly .cart-page + .site-footer { margin-top: 0; }
.pbly .cart-page .popular-categories { padding-block: 0 var(--pbly-space-10); }

/* Tablets: no photos in the table (as on faberpet.ro), the totals keep their column. */
@media (max-width: 64rem) {
  .pbly .cart-table__image { display: none; }
  .pbly .cart-totals__table th { width: auto; white-space: nowrap; }
  .pbly .cart-empty__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: each product becomes a card of label-value rows, the totals go under the products. */
@media (max-width: 47.9375rem) {
  .pbly .cart__title { margin-bottom: var(--pbly-space-10); }
  .pbly .cart__layout { grid-template-columns: minmax(0, 1fr); gap: calc(var(--pbly-space-12) + var(--pbly-space-1)); }

  .pbly .cart-table,
  .pbly .cart-table tbody,
  .pbly .cart-table tr,
  .pbly .cart-table td { display: block; }

  .pbly .cart-table thead { display: none; }

  .pbly .cart-table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pbly-space-4);
    padding: var(--pbly-space-3);
    text-align: right;
  }

  .pbly .cart-table tbody td[data-label]::before {
    flex: none;
    color: var(--pbly-color-text-primary);
    font-weight: var(--pbly-font-weight-bold);
    content: attr(data-label) ":";
  }

  .pbly .cart-table__image,
  .pbly .cart-table tbody .cart-table__image { display: block; width: auto; }
  .pbly .cart-table__image a {
  position: relative;
  display: block;
  width: fit-content;
}

/* The 4% shade over product photos, as on the product cards. */
.pbly .cart-table__image a::after {
  position: absolute;
  inset: 0;
  border-radius: var(--pbly-radius-md-plus);
  background: color-mix(in srgb, var(--pbly-color-palette-black) 4%, transparent);
  content: "";
}

.pbly .cart-table__image img { width: calc(var(--pbly-space-20) + var(--pbly-space-4)); height: calc(var(--pbly-space-20) + var(--pbly-space-4)); }
  .pbly .cart-table__remove { width: auto; }
  .pbly .cart-table tbody .cart-table__remove { justify-content: flex-end; }
  .pbly .cart-table__item + .cart-table__item { margin-top: var(--pbly-space-3); }

  .pbly .cart-totals__table,
  .pbly .cart-totals__table tbody,
  .pbly .cart-totals__table tr { display: block; }

  .pbly .cart-totals__table th { display: none; }

  .pbly .cart-totals__table td {
    display: flex;
    justify-content: space-between;
    gap: var(--pbly-space-4);
    padding: var(--pbly-space-2) var(--pbly-space-3);
    text-align: right;
  }

  .pbly .cart-totals__table td::before { content: attr(data-label) ":"; text-align: left; }
  .pbly .cart-totals__table tr:last-child td { padding-top: var(--pbly-space-4); }
  .pbly .shipping-options { justify-items: end; }

  .pbly .cart-empty__products { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------------------------------------------
   Theme additions, not in the prototype: what WooCommerce, FaberCore and the partner discount table add to the cart.
   --------------------------------------------------------------------------------------------------------------- */

/* WooCommerce prints its notices in a wrapper of its own; its notices join the grid of the notices area. */
.pbly .cart__notices .woocommerce-notices-wrapper { display: contents; }
.pbly .cart__notices:not(:has(.notice, .min-total-error)) { margin-bottom: 0; }

/* The minimum-order message FaberCore's script adds ("Valoarea minimă a comenzii …") looks like an error notice. */
.pbly .min-total-error {
  position: relative;
  padding: var(--pbly-space-4) var(--pbly-space-8) var(--pbly-space-4) calc(var(--pbly-space-10) + var(--pbly-space-4));
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-palette-red-light);
  color: var(--pbly-color-palette-red);
}

.pbly .min-total-error::before {
  position: absolute;
  top: var(--pbly-space-4);
  left: var(--pbly-space-6);
  width: var(--pbly-space-4);
  height: var(--pbly-space-6);
  background: url("../../icons/notice-error.svg") center / contain no-repeat;
  content: "";
}

/* The totals sit in the grid's second column; WooCommerce's wrapper around them takes no part in the layout. */
.pbly .cart-collaterals { display: contents; }

/* The partner's "Mențiuni" note under the product name. */
.pbly .cart-table__note {
  margin-top: var(--pbly-space-1);
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-sm);
  font-style: italic;
  font-weight: var(--pbly-font-weight-medium);
}

.pbly .cart-table__note strong { font-weight: var(--pbly-font-weight-bold); }

/* A delivery price is bold, as the prototype's <strong>. */
.pbly .shipping-options__option .woocommerce-Price-amount {
  font-weight: var(--pbly-font-weight-bold);
  white-space: nowrap;
}

/* Coupon (the prototype's checkout coupon, under the products). */
.pbly .cart-actions { margin-top: var(--pbly-space-6); }
.pbly .cart-actions__update[hidden] { display: none; }

.pbly .cart-coupon {
  display: grid;
  gap: var(--pbly-space-1);
  color: var(--pbly-color-text-muted);
}

.pbly .cart-coupon__label {
  font-size: var(--pbly-font-size-sm);
  font-weight: var(--pbly-font-weight-semibold);
}

.pbly .cart-coupon__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pbly-space-4);
}

.pbly .cart-coupon__row .form-field__input { line-height: var(--pbly-font-line-height-tight); }
.pbly .cart-coupon__apply { padding-inline: var(--pbly-space-10); line-height: 1; }

/* Partner discount table: an accordion in the look of the category page's filters button. */
.pbly .cart-discounts { margin-top: var(--pbly-space-6); }

.pbly .cart-discounts__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pbly-space-3) var(--pbly-space-5);
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-palette-mint);
  color: var(--pbly-color-text-primary);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
  cursor: pointer;
  list-style: none;
}

.pbly .cart-discounts__summary::-webkit-details-marker { display: none; }
.pbly .cart-discounts__summary img { transition: transform 0.2s; }
.pbly .cart-discounts[open] .cart-discounts__summary img { transform: rotate(180deg); }

.pbly .cart-discounts__list {
  display: grid;
  gap: var(--pbly-space-2);
  padding: var(--pbly-space-4) var(--pbly-space-5);
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-sm);
  font-weight: var(--pbly-font-weight-medium);
}