/* ==== BBS CART ==== */

@media(max-width:767px){

  /* Astra turns each cell into a label/value pair with td::before. That is the
     cause of the doubled row height, so the labels go and the row is rebuilt. */
  .woocommerce-cart table.shop_table_responsive tr td::before,
  .woocommerce-cart table.shop_table tr td::before,
  .woocommerce-cart table.cart td::before{content:none!important;display:none!important;}

  .woocommerce-cart table.shop_table,
  .woocommerce-cart table.shop_table tbody{display:block!important;width:100%!important;border:0!important;}
  .woocommerce-cart table.shop_table thead{display:none!important;}

  .woocommerce-cart table.shop_table tr.cart_item{
    display:grid!important;
    grid-template-columns:78px 1fr auto;
    grid-template-areas:
      'thumb name remove'
      'thumb price price'
      'thumb qty subtotal';
    align-items:center;
    gap:6px 14px;
    padding:18px 0!important;
    margin:0!important;
    border:0!important;border-bottom:1px solid #E4E4E7!important;}

  .woocommerce-cart table.shop_table tr.cart_item td{
    display:block!important;width:auto!important;
    padding:0!important;margin:0!important;
    border:0!important;text-align:left!important;background:none!important;}

  .woocommerce-cart td.product-thumbnail{grid-area:thumb;align-self:start;}
  .woocommerce-cart td.product-thumbnail img{
    width:78px!important;height:78px!important;object-fit:contain;
    background:#F4F4F5;display:block;}

  .woocommerce-cart td.product-name{grid-area:name;}
  .woocommerce-cart td.product-name a{
    font-family:Archivo,sans-serif;font-weight:700;font-size:15px;line-height:1.3;
    color:#0C0C0E;text-decoration:none;}

  .woocommerce-cart td.product-price{grid-area:price;
    font-family:'Instrument Sans',sans-serif;font-size:13px;color:#71717A;}

  .woocommerce-cart td.product-quantity{grid-area:qty;}
  .woocommerce-cart td.product-quantity .quantity{display:inline-flex!important;border:1px solid #E4E4E7;}
  .woocommerce-cart td.product-quantity input.qty{
    width:52px!important;min-height:40px!important;height:40px!important;
    border:0!important;text-align:center;font-size:15px;background:#fff;padding:0!important;}

  .woocommerce-cart td.product-subtotal{grid-area:subtotal;text-align:right!important;
    font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:15px;color:#0C0C0E;}

  .woocommerce-cart td.product-remove{grid-area:remove;align-self:start;text-align:right!important;}
  .woocommerce-cart td.product-remove a.remove{
    position:static!important;width:auto!important;height:auto!important;
    font-size:0!important;line-height:1!important;
    background:transparent!important;color:#71717A!important;border-radius:0!important;}
  .woocommerce-cart td.product-remove a.remove::after{
    content:'Remove';font-family:'Instrument Sans',sans-serif;font-size:12px;font-weight:500;
    color:#71717A;border-bottom:1px solid #E4E4E7;padding-bottom:2px;white-space:nowrap;}
  .woocommerce-cart td.product-remove a.remove:hover::after{color:#0C0C0E;border-bottom-color:#0C0C0E;}

  /* Coupon and actions */
  .woocommerce-cart table.shop_table td.actions{
    display:block!important;padding:18px 0 0!important;border:0!important;}
  .woocommerce-cart .coupon{display:flex!important;flex-direction:column;gap:10px;
    width:100%!important;float:none!important;margin:0 0 12px!important;}
  .woocommerce-cart .coupon input#coupon_code{
    width:100%!important;min-height:50px!important;font-size:16px!important;
    border:1px solid #E4E4E7!important;border-radius:0!important;padding:0 14px!important;}
  .woocommerce-cart .coupon button,
  .woocommerce-cart td.actions > button{
    width:100%!important;float:none!important;min-height:50px!important;
    white-space:nowrap!important;font-size:15px!important;border-radius:0!important;}

  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals{width:100%!important;float:none!important;}
  .woocommerce-cart .cart_totals h2{font-size:18px!important;margin:24px 0 14px!important;}
  .woocommerce-cart .cart_totals table th,
  .woocommerce-cart .cart_totals table td{padding:12px 0!important;font-size:15px!important;}
  .woocommerce-cart .wc-proceed-to-checkout a.button{
    width:100%;text-align:center;min-height:54px;display:flex;align-items:center;justify-content:center;}
}