/* cart-items.css -- THE CART ITEMS TABLE, AND ONLY THAT.
 *
 * Loaded only when the "Style the cart items table" setting is on. That setting exists because this
 * file is the one part of this plugin that restyles markup the plugin does not own: the items table
 * is the theme's, it is the piece a theme is most likely to have designed deliberately -- a full
 * bleed header band, its own quantity stepper, its own row rhythm -- and a card drawn around it at
 * the wrong moment fights all of that.
 *
 * Two storefronts here want these rules, because their themes leave the cart table plain and it
 * would otherwise sit unstyled beside cards that are not. A third has a designed cart and wants us
 * out of the way. That is a per-site answer, so it is a setting.
 *
 * TURNING IT OFF HAD TO MEAN NOT LOADING THIS, not overriding it afterwards. There is no CSS that
 * says "ignore my declarations and keep the theme's" -- `revert` and `unset` go back past the theme
 * to the browser's own defaults, so an override file would have had to guess a replacement value for
 * every property, and would have been wrong on the next theme. Not emitting the rules is the only
 * version that is actually true to what the setting says.
 *
 * Anything here that also applied to the TOTALS table stayed in layout.css, scoped to .cart_totals.
 * Nothing in this file may be written for `table.shop_table` unqualified again: on a cart page that
 * selector is two tables, and only one of them is this file's. */

/* THE CARD AROUND IT. Written here rather than joining the shared cards rule in layout.css: that
   list is the cards this plugin draws itself, and this one is a border put around somebody else's
   table. Declining that is the whole point of the setting this file sits behind, and a card drawn
   from the shared rule could not be declined without dropping the totals card with it. */
.wcdsd-styled .woocommerce-cart-form {
  background: #fff; border: 1px solid #e6eaee; border-radius: 12px;
  padding: 24px; margin: 0 0 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.wcdsd-styled .woocommerce-cart-form,
.wcdsd-styled .woocommerce-cart-form * { box-sizing: border-box; }

/* THE ITEMS TABLE IS THE THEME'S, NOT OURS, AND IT HAS TO BE ABLE TO FIT.
   The card above pads it like every other card, and that padding was briefly removed -- the theory
   being that 48px the theme's column widths were never told about was what pushed the last column
   past the card's edge. It was not. The overflow came from table-layout: fixed further down, which
   sizes columns from a list of the columns we happen to know about; a theme that adds one, a SKU
   column being the usual one, gets no width from us and the declared widths then add up past the
   table whatever the padding is. Auto layout fits the table to the width it is given, so the padding
   is free again -- and taking it away had cost two other storefronts the inset that made this look
   like a card at all, with the remove x and the subtotal pressed against the border.
   What stays is the safety net: a table that STILL will not fit -- a theme with genuinely fixed
   column widths, a phone -- scrolls in its own box rather than being clipped. Clipping loses the
   subtotal column silently, which is the one column nobody can do without. */
.wcdsd-styled .woocommerce-cart-form > table.shop_table {
  width: 100%;
  margin: 0;
  display: table;          /* some themes make it a block, which then ignores width */
}
/* Not scoped to phones. That was the one place the problem had been SEEN, not the only place it
   happens. No overflow: hidden alongside it -- the table no longer reaches the rounded corners, and
   hiding the overflow would clip rather than scroll. */
.wcdsd-styled .woocommerce-cart-form { overflow-x: auto; }


/* SPACED WITHOUT MAKING IT A FLEX CONTAINER, because in WooCommerce's own cart template this is a
   <td>. display:flex on a table cell takes it out of table layout, so it stops spanning its row and
   the table's columns are then sized from the rows that are left -- which is the stray cell and the
   overflowing subtotal reported on a third storefront.
   Inline-block children give the same row of buttons and work whether this is a cell or a div, which
   differs by theme and is not ours to decide.
   The coupon box is one of those children and is a div, so it may still be flex -- but the rule above
   it, .wcdsd-styled .coupon, carries one class fewer than the child rule here and would lose the tie
   it does not win on specificity. Hence the explicit inline-flex: laid out as a row inside itself,
   sitting on the button line as one item, rather than silently flattened into a stack. */
.wcdsd-styled .woocommerce-cart-form .actions {
  padding: 20px 0 0;
  text-align: left;
}
.wcdsd-styled .woocommerce-cart-form .actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 12px 0 0;
}
.wcdsd-styled .woocommerce-cart-form .actions > *:last-child { margin-right: 0; }
.wcdsd-styled .woocommerce-cart-form .actions > .coupon { display: inline-flex; margin-top: 0; }

/* CART TABLE. The widths below are preferences, not a grid.
   This was table-layout: fixed, to stop the remove column absorbing the slack. Fixed layout takes
   its columns from the first row, so it only works if the columns are the ones we know about --
   remove, thumbnail, name, price, quantity, subtotal. A theme that adds one, and a SKU column is a
   common one to add, gets no width from us: the declared widths then add up past the table and the
   last column falls off the right edge. That is the overflowing subtotal reported on a third
   storefront, and the reason the actions row had to be pulled out of the table to escape it.
   Auto sizes the columns from what is in them, so an unexpected column is simply another column.
   The widths below still steer it -- a remove cell holding one small x does not take slack under
   auto either -- and a theme we have never seen is no longer laid out by a grid drawn for a
   different one. */
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table { border: none; margin: 0; width: 100%; table-layout: auto; }
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th {
  text-align: left; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
  color: #5c6670; border-bottom: 1px solid #eef1f4; padding: 0 8px 12px 0;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td {
  padding: 16px 8px 16px 0; border-bottom: 1px solid #f2f4f6; vertical-align: middle;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table img { width: 56px; height: auto; border-radius: 6px; }

.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-remove,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove {
  width: 34px; min-width: 34px; padding-left: 0; padding-right: 6px; text-align: left;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a.remove {
  font-size: 15px; width: 20px; height: 20px; line-height: 18px;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-thumbnail,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail { width: 74px; }
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-name,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name {
  width: auto; text-align: left; word-break: break-word;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-price,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-price,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-subtotal,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal {
  width: 110px; min-width: 110px; text-align: right; white-space: nowrap;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-quantity,
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity {
  width: 96px; min-width: 96px; text-align: center;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity input.qty {
  width: 64px; text-align: center;
}
/* A TABLE STAYS A TABLE.
   This row used to be pulled out of table layout -- tr and td set to display:block -- to stop the
   actions cell inheriting a narrow first column. It worked on the one theme it was written against,
   whose last row is a single colspan cell, and broke on a theme whose actions row carries a leading
   cell as well: that cell is no longer part of any row, so it renders as a stray box beside the
   buttons and the columns above it lose their sizing.
   The narrow column was a table-layout:fixed symptom, and is fixed where it comes from instead --
   see table-layout: auto on the table itself. Nothing here leaves the table formatting context, so
   a theme can arrange that row however it likes. */
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.actions {
  box-sizing: border-box;
  padding: 20px 0 0;
  border-bottom: none;
}
.wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table td.actions .button { white-space: nowrap; width: auto; }


/* ---------- phones ---------- */
@media (max-width: 768px) {

  /* cart: WooCommerce stacks the table, so the fixed columns have to go */
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive { table-layout: auto !important; }
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td {
    width: auto !important; padding: 10px 14px !important;
  }
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-name { text-align: left !important; }
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-name::before {
    float: none !important; display: block !important; margin: 0 0 4px !important;
  }
  /* these cells have no data-title, so the injected label is just a colon */
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-remove::before,
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.actions::before { display: none !important; }
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-remove {
    text-align: right !important; padding-bottom: 0 !important; border-bottom: 0 !important;
  }
  .wcdsd-styled.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-thumbnail { display: none !important; }

  /* cart totals: shipment label above the options, full width */
}

/* Matches the step-down the other cards take at this width, which layout.css applies to its own
   list. Kept in step by hand because the two lists are deliberately separate now. */
@media (min-width: 900px) {
  .wcdsd-styled .woocommerce-cart-form { padding: 18px; margin-bottom: 16px; }
}