/* ----------------------------------------------------------------------------
 * shell.css -- the clone shell's own narrow-viewport sheet (T5 rework round 2).
 *
 * WHY THIS FILE EXISTS
 *   functions.php (wp_enqueue_scripts, priority 100) removes the Woo plugin's four default
 *   stylesheets from every non-mirrored surface:
 *       woocommerce-layout | woocommerce-smallscreen | woocommerce-general | woocommerce-inline
 *   One of them, woocommerce-smallscreen.css, is the sheet whose only job is to stack the Woo
 *   tables below 768px.  With it gone the cart table keeps its desktop column model and, at a
 *   375px viewport, the 300px product thumbnail plus five more columns push it to 656px:
 *       /cart/  clientWidth 375  scrollWidth 687   (measured, probe_shell375b.js)
 *   This file rebuilds that narrow-viewport behaviour INSIDE the clone's own surface.  It is NOT
 *   a copy of the plugin sheet and the plugin sheet is NOT re-enqueued: every rule below is
 *   written against the live markup the clone's Woo templates actually emit (captured in
 *   runtime/cache/t5r2/shell_markup.json), i.e. the `.shop_table_responsive` tables and the
 *   `data-title` attributes Woo's own templates already print on each cell.
 *
 * SCOPE
 *   Linked from header.php only, and header.php is only reached on the shell routes
 *   (/shop/, /cart/, /checkout/, /my-account/, /login/, /register/).  The 12 mirrored pages are
 *   served whole by inc/mirror.php and never load this file; the funnel screens (/build-your-box/)
 *   link only main.css + wizard.css.  Everything is inside `@media (max-width: 768px)`, the same
 *   breakpoint the removed sheet used, so no desktop geometry can change.
 *
 * WHAT IT DOES
 *   1. clamps media inside the shell tables so a thumbnail can never set the column width;
 *   2. turns every `.shop_table_responsive` row into a stacked card: the thead is hidden and each
 *      cell becomes a full-width line whose captured `data-title` is printed as its label;
 *   3. keeps the price columns (product-price / product-subtotal / data-title="Total") on their
 *      own line so the amount is never squeezed to the edge of the card;
 *   4. keeps the cart's coupon / update row and the totals block inside the card width.
 * -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* 1. media inside shell tables can never dictate a column width */
  .bb-shell-content table.shop_table img {
    max-width: 100%;
    height: auto;
  }
  .bb-shell-content table.shop_table td.product-thumbnail img {
    width: auto;
    max-width: 96px;
  }

  /* 2. stack the responsive tables: header row hidden, every cell a full-width line */
  .bb-shell-content table.shop_table_responsive {
    display: block;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
  }
  .bb-shell-content table.shop_table_responsive thead,
  .bb-shell-content table.shop_table_responsive tbody th {
    display: none;
  }
  .bb-shell-content table.shop_table_responsive tbody,
  .bb-shell-content table.shop_table_responsive tr,
  .bb-shell-content table.shop_table_responsive td {
    display: block;
    width: auto;
    max-width: 100%;
  }
  .bb-shell-content table.shop_table_responsive tr {
    border-bottom: 1px solid currentColor;
  }
  .bb-shell-content table.shop_table_responsive tr td {
    clear: both;
    text-align: right;
  }
  .bb-shell-content table.shop_table_responsive tr td::before {
    content: attr(data-title);
    float: left;
    padding-right: 8px;
    font-weight: 700;
    text-align: left;
  }
  /* cells Woo prints without a data-title keep the whole line for themselves */
  .bb-shell-content table.shop_table_responsive tr td.product-remove::before,
  .bb-shell-content table.shop_table_responsive tr td.product-thumbnail::before,
  .bb-shell-content table.shop_table_responsive tr td.actions::before {
    content: none;
  }
  .bb-shell-content table.shop_table_responsive tr td.product-remove,
  .bb-shell-content table.shop_table_responsive tr td.actions {
    text-align: right;
  }
  .bb-shell-content table.shop_table_responsive td input,
  .bb-shell-content table.shop_table_responsive td select,
  .bb-shell-content table.shop_table_responsive td textarea,
  .bb-shell-content table.shop_table_responsive td button,
  .bb-shell-content table.shop_table_responsive td .button {
    max-width: 100%;
  }

  /* 3. the amount columns and the totals block never leave the card */
  .bb-shell-content table.shop_table_responsive tr td.product-price,
  .bb-shell-content table.shop_table_responsive tr td.product-subtotal,
  .bb-shell-content table.shop_table_responsive tr td.product-total {
    white-space: nowrap;
    text-align: right;
  }
  .bb-shell-content .cart_totals,
  .bb-shell-content .cart-collaterals,
  .bb-shell-content .cross-sells,
  .bb-shell-content .wc-proceed-to-checkout {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-left: 0;
  }
  .bb-shell-content .wc-proceed-to-checkout a.checkout-button,
  .bb-shell-content .wc-proceed-to-checkout .button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 4. the cart's coupon / update row */
  .bb-shell-content table.shop_table_responsive tr td.actions .coupon {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
  }
  .bb-shell-content table.shop_table_responsive tr td.actions .coupon input[type="text"],
  .bb-shell-content table.shop_table_responsive tr td.actions .coupon .input-text {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 8px;
  }
  .bb-shell-content table.shop_table_responsive tr td.actions .coupon button {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}