/*
 * /cart page. The imported page was captured with an empty cart; the bridge now fills it from the
 * browser cart with the same line markup the cart drawer uses (lib/cart.ts itemsTable). These rules
 * lay that markup out as a full-width page table instead of the drawer's narrow columns.
 */
#main-cart-items .drawer__cart-items-wrapper { overflow: visible; }
#main-cart-items table.cart-items { width: 100% !important; border-collapse: collapse; table-layout: fixed !important; }
/* Fixed layout takes column widths from the header row: image | product (rest) | total | quantity */
#main-cart-items .cart-items thead th:nth-child(1) { width: 132px !important; }
#main-cart-items .cart-items thead th:nth-child(2) { width: auto !important; }
#main-cart-items .cart-items thead th:nth-child(3) { width: 150px !important; }
#main-cart-items .cart-items thead th:nth-child(4) { width: 230px !important; }
#main-cart-items .cart-items thead th { padding: 0 0 14px; font-size: 12px; letter-spacing: .08em; color: #6b7078; border-bottom: 1px solid #e6e8eb; }
#main-cart-items .cart-item td { padding: 22px 0; vertical-align: top; border-bottom: 1px solid #eceef1; }
#main-cart-items .cart-item__media { width: auto !important; }
#main-cart-items .cart-item__image { width: 108px; height: auto; border-radius: 10px; background: #f4f5f7; }
#main-cart-items .cart-item__details { padding-left: 20px !important; padding-right: 20px !important; width: auto !important; }
#main-cart-items .cart-item__name { display: block; margin-bottom: 6px; font-size: 17px; line-height: 1.3; text-decoration: none; word-break: normal !important; }
#main-cart-items .cart-item__details .product-option { font-size: 14px; color: #4b5058; line-height: 1.5; }
#main-cart-items .cart-item__details dl { margin: 6px 0 0; }
#main-cart-items .cart-item__details dl .product-option { display: flex; gap: 4px; }
#main-cart-items .cart-item__details dt, #main-cart-items .cart-item__details dd { margin: 0; }
#main-cart-items .cart-item__totals { width: auto !important; white-space: nowrap; font-weight: 600; }
#main-cart-items .cart-item__quantity { width: auto !important; padding-left: 24px !important; }
#main-cart-items .cart-item__quantity-wrapper { display: flex; align-items: center; gap: 10px; }

#main-cart-footer .cart__blocks { width: min(460px, 100%) !important; margin-left: auto; }
#main-cart-footer .js-contents { display: block !important; }
#main-cart-footer .totals { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 16px; margin: 0 0 8px; }
#main-cart-footer .totals__total { margin: 0; font-size: 16px; white-space: nowrap; }
#main-cart-footer .totals__total-value { margin: 0; font-size: 22px; font-weight: 600; white-space: nowrap; }
#main-cart-footer .totals > p:last-child { flex-basis: 100%; text-align: right; }
#main-cart-footer .tax-note { display: block; text-align: right; margin: 0 0 18px; }
#main-cart-footer .cart__ctas { display: block !important; }
#main-cart-footer #lendl-rent-now-btn { min-height: 50px; border-radius: 10px !important; background: #c8102e !important; font-weight: 600; }
#main-cart-footer #lendl-rent-now-btn[disabled] { opacity: .5; }
#main-cart-footer .lendl-rent-note { max-width: none; }

@media (max-width: 749px) {
  #main-cart-items table.cart-items { table-layout: auto !important; }
  #main-cart-items .cart-items thead { display: none; }
  #main-cart-items .cart-item { display: grid !important; grid-template-columns: 88px 1fr; gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid #eceef1; }
  #main-cart-items .cart-item td { display: block; padding: 0 !important; border: 0; width: auto; }
  #main-cart-items .cart-item__media { grid-row: span 3; }
  #main-cart-items .cart-item__image { width: 88px; }
  #main-cart-items .cart-item__details { min-width: 0; }
  #main-cart-items .cart-item__totals { text-align: left; }
  #main-cart-items .cart-item__quantity { grid-column: 2; }
  #main-cart-footer .totals, #main-cart-footer .tax-note, #main-cart-footer .totals > p:last-child { justify-content: flex-start; text-align: left; }
}

/* FoxStack-priced lines (lib/cart.ts itemsTable): the plan under the name, or a button to choose one. */
.lendl-line-plan { color: #2b2f36 !important; font-size: 13.5px !important; }
.lendl-line-note { color: #6b7078 !important; font-size: 12.5px !important; }
.lendl-line-unpriced { color: #9aa0a8; font-weight: 500; }
.lendl-line-plan-btn {
  display: inline-flex; align-items: center; margin: 6px 0 2px; padding: 7px 12px; cursor: pointer;
  border: 1px solid #c8102e !important; border-radius: 999px !important; background: #fff !important; color: #c8102e !important;
  font: inherit; font-size: 13px !important; font-weight: 600; line-height: 1.3; text-align: left; letter-spacing: 0;
}
.lendl-line-plan-btn:hover { background: #fdecef !important; }
cart-drawer .lendl-line-plan-btn { font-size: 12.5px !important; }

/*
 * Cart drawer. Its rows came from the theme as four equal narrow columns, which clipped the monthly
 * price at the right edge once lines carried a plan. A slightly wider drawer, and each row laid out as
 *   [image] [name, plan, note]   [price]
 *   [image] [quantity · remove]
 */
cart-drawer .drawer__inner { width: min(500px, 100vw) !important; max-width: 100vw; }
cart-drawer .drawer__header, cart-drawer .drawer__contents, cart-drawer .drawer__footer { padding-left: 24px !important; padding-right: 24px !important; }
cart-drawer .drawer__cart-items-wrapper { overflow: visible; }
cart-drawer table.cart-items { width: 100% !important; display: block; }
cart-drawer table.cart-items thead { display: none !important; }
cart-drawer table.cart-items tbody { display: block; }
cart-drawer .cart-item {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) auto !important;
  grid-template-areas: "media details total" "media qty qty" !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important; row-gap: 10px !important;
  align-items: start; padding: 18px 0 !important; margin: 0 !important; border-bottom: 1px solid #eceef1;
}
cart-drawer .cart-item:last-child { border-bottom: 0; }
cart-drawer .cart-item > td { display: block !important; width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; grid-column: auto !important; grid-row: auto !important; }
cart-drawer .cart-item > .cart-item__media { grid-area: media !important; }
cart-drawer .cart-item__image { width: 84px !important; height: 84px !important; object-fit: contain; border-radius: 10px; background: #f4f5f7; }
cart-drawer .cart-item > .cart-item__details { grid-area: details !important; min-width: 0; }
cart-drawer .cart-item__name { display: block; margin: 0 0 4px !important; font-size: 15px !important; line-height: 1.3 !important; text-decoration: none; word-break: normal !important; }
cart-drawer .cart-item__details .product-option { margin: 0; font-size: 13px; line-height: 1.45; }
cart-drawer .cart-item__details dl { margin: 4px 0 0; }
cart-drawer .cart-item > .cart-item__totals { grid-area: total !important; display: block !important; text-align: right; white-space: nowrap; }
cart-drawer .cart-item__totals .price { font-size: 15px !important; font-weight: 600; line-height: 1.3; }
cart-drawer .cart-item__totals .price > span { display: block; font-weight: 400; }
cart-drawer .cart-item > .cart-item__quantity { grid-area: qty !important; }
cart-drawer .cart-item__quantity-wrapper { display: flex !important; align-items: center; gap: 12px; }
cart-drawer .cart-item__quantity quantity-input { width: 128px; min-height: 40px; }
cart-drawer .cart-item__error:empty, cart-drawer .cart-item__error:not(:has(.cart-item__error-text:not(:empty))) { display: none; }
cart-drawer .lendl-line-plan-btn { white-space: normal; }

cart-drawer .drawer__footer { box-shadow: 0 -10px 24px rgba(15, 18, 24, .06); }
cart-drawer .totals { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
cart-drawer .totals__total { margin: 0 !important; font-size: 16px !important; }
cart-drawer .totals__total-value { margin: 0 !important; font-size: 20px !important; font-weight: 600; white-space: nowrap; }
cart-drawer .lendl-rental-note { flex-basis: 100%; margin: 6px 0 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #5b5f66; }
cart-drawer .lendl-rent-now-btn { width: 100%; min-height: 48px; border-radius: 10px !important; background: #c8102e !important; color: #fff !important; font-weight: 600; border: 0 !important; cursor: pointer; }
cart-drawer .lendl-rent-now-btn[disabled] { opacity: .5; cursor: not-allowed; }
cart-drawer .lendl-rent-now-hint { margin: 8px 0 0; text-align: center; font-size: 12px; color: #6b7078; }

@media (max-width: 480px) {
  cart-drawer .drawer__header, cart-drawer .drawer__contents, cart-drawer .drawer__footer { padding-left: 16px !important; padding-right: 16px !important; }
  cart-drawer .cart-item { grid-template-columns: 64px minmax(0, 1fr) auto !important; column-gap: 12px !important; }
  cart-drawer .cart-item__image { width: 64px !important; height: 64px !important; }
}
