/* ==== 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{text-align:right!important;}
  .woocommerce-cart td.product-remove a.remove{
    position:static!important;display:inline-block!important;
    width:20px!important;height:20px!important;
    font-size:0!important;line-height:1!important;text-indent:-9999px!important;overflow:hidden!important;
    background-color:#71717A!important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M6%207l1%2013a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2l1-13%22%2F%3E%3Cpath%20d%3D%22M10%2011v6%22%2F%3E%3Cpath%20d%3D%22M14%2011v6%22%2F%3E%3C%2Fsvg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M6%207l1%2013a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2l1-13%22%2F%3E%3Cpath%20d%3D%22M10%2011v6%22%2F%3E%3Cpath%20d%3D%22M14%2011v6%22%2F%3E%3C%2Fsvg%3E")!important;
    -webkit-mask-size:contain!important;mask-size:contain!important;
    -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;mask-position:center!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;
    -webkit-tap-highlight-color:transparent!important;-webkit-appearance:none!important;appearance:none!important;}
  .woocommerce-cart td.product-remove a.remove:hover,
  .woocommerce-cart td.product-remove a.remove:focus{
    background-color:#0C0C0E!important;}
  .woocommerce-cart td.product-remove a.remove:focus,
  .woocommerce-cart td.product-remove a.remove:active,
  .woocommerce-cart td.product-remove a.remove:visited{
    border:0!important;box-shadow:none!important;outline:none!important;}

  /* 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;}
}


/* Delivery options: Astra ships a dynamic critical-CSS rule
   ("ul#shipping_method li:not(.elementor-widget-woocommerce-cart #shipping_method li)")
   whose :not() argument packs in an extra ID, out-specificity-ing a plain
   ".woocommerce-cart ul#shipping_method li" rule. Every override below needs
   !important to actually win, not just to be tidy. */
.woocommerce-cart ul#shipping_method{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:8px;}
.woocommerce-cart ul#shipping_method li{position:relative!important;margin:0!important;padding:12px 14px 12px 40px!important;text-indent:0!important;background:#fff;border:1px solid #E4E4E7;border-radius:4px;box-sizing:border-box;list-style:none!important;}
.woocommerce-cart ul#shipping_method li input[type=radio]{position:absolute!important;left:14px!important;top:14px!important;margin:0!important;width:16px!important;height:16px!important;accent-color:#0C0C0E;}
.woocommerce-cart ul#shipping_method li label{display:block!important;margin:0!important;padding:0!important;font-family:'Instrument Sans',sans-serif;font-size:14px;color:#0C0C0E;}
.woocommerce-cart ul#shipping_method .amount{float:right;font-weight:600;}
.woocommerce-cart ul#shipping_method .bbs-ship-note{display:block;margin-top:3px;font-size:12px;font-weight:400;color:#71717A;}
