/* ==== BBS PAGE GUTTERS ==== */
/* Cart, checkout and account are plain WooCommerce shortcodes, not Elementor
   containers, so they never inherited the page gutters. One scale here. */
:root{--bbs-gutter:20px;--bbs-gutter-lg:40px;--bbs-section-y:56px;}

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content,
.woocommerce-order-received .site-content{
  padding-left:var(--bbs-gutter-lg);padding-right:var(--bbs-gutter-lg);
  padding-top:var(--bbs-section-y);padding-bottom:var(--bbs-section-y);}

/* Room for the fixed bottom nav on the pages that scroll to a footer */
@media(max-width:1024px){
  .woocommerce-cart .site-content,
  .woocommerce-checkout .site-content,
  .woocommerce-account .site-content{padding-bottom:calc(var(--bbs-section-y) + 66px);}
}

@media(max-width:767px){
  :root{--bbs-gutter-lg:20px;--bbs-section-y:32px;}
}

/* ==== BBS MOBILE REFINEMENTS ==== */
/* Loaded last. Mobile is the primary experience, so anything the theme sizes
   for desktop is brought back down here rather than left to inherit.

   Checkout is deliberately absent. It is owned end to end by
   bbs-checkout-ui.css, which is written mobile first and needs no !important
   corrections. An earlier version also overrode checkout here; the two files
   fought each other and the page broke on every WooCommerce AJAX refresh. */

@media(max-width:767px){

  /* ---- Cart page ---- */
  .woocommerce-cart table.shop_table{display:block;}
  .woocommerce-cart table.shop_table thead{display:none;}
  .woocommerce-cart table.shop_table tbody,
  .woocommerce-cart table.shop_table tr{display:block;width:100%;}
  .woocommerce-cart table.shop_table tr.cart_item{
    position:relative;display:grid;grid-template-columns:74px 1fr;gap:0 14px;
    padding:16px 0;border-bottom:1px solid #E4E4E7;}
  .woocommerce-cart table.shop_table td{border:0!important;padding:0!important;display:block;}
  .woocommerce-cart td.product-remove{position:absolute;top:16px;right:0;}
  .woocommerce-cart td.product-thumbnail{grid-row:1 / span 4;}
  .woocommerce-cart td.product-thumbnail img{width:74px!important;background:#F4F4F5;}
  .woocommerce-cart td.product-name{font-size:15px;font-weight:600;padding-right:28px!important;}
  .woocommerce-cart td.product-price,
  .woocommerce-cart td.product-subtotal{font-size:14px;color:#71717A;}
  .woocommerce-cart td.product-subtotal::before{content:'Subtotal: ';color:#71717A;}
  .woocommerce-cart td.product-quantity{margin:8px 0;}
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals{width:100%!important;float:none!important;}
  .woocommerce-cart .actions .button,
  .woocommerce-cart .wc-proceed-to-checkout .button{width:100%;text-align:center;}
  .woocommerce-cart .coupon{display:flex;gap:8px;width:100%;margin-bottom:14px;}
  .woocommerce-cart .coupon input{flex:1 1 auto;min-width:0;}

  /* ---- Account ---- */
  .woocommerce-account .bbs-dash-latest-row{gap:12px;}
  .woocommerce-account .bbs-dash-latest .button{width:100%;text-align:center;}

  /* ---- Inner pages ---- */
  .elementor-widget-text-editor h2{font-size:24px!important;line-height:1.18!important;}
  .elementor-widget-text-editor h3{font-size:18px!important;}
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p{font-size:16px!important;line-height:1.7!important;}

  /* Nothing should force a horizontal scrollbar */
  html,body{overflow-x:hidden;}
  img,video,iframe,table{max-width:100%;}
}