/* Bela Mia - cart drawer layout + free-shipping bar. Ships as a FILE because RUCSS
   empties an inline <style>: the drawer is empty at render so its selectors look unused. */

/* A column that cannot overflow. The list flexes into whatever is left, the footer is
   fixed, and nothing is pushed past the bottom of the screen. The previous min-height
   of 44vh forced the list to 396px on a 900px-tall screen and pushed "continue shopping"
   79px below the fold - measured 2/9/2026. A plain floor does the job without that. */
.woofc-area .woofc-area-top{display:flex !important;flex-direction:column !important;overflow:hidden !important;}
.woofc-area .woofc-area-mid.woofc-items{flex:1 1 auto !important;min-height:200px !important;overflow-y:auto !important;}
.woofc-area .woofc-area-bot{flex:0 0 auto !important;padding-bottom:14px !important;}

/* Promo badge keeps its place but stops eating three lines. */
.woofc-area .bela-promo-badge{margin:8px 0 !important;padding:8px 12px !important;font-size:12.5px !important;line-height:1.35 !important;}

/* Free shipping: it was a 13px sentence wrapping over two lines above a thin 8px rail,
   with the one number that matters buried mid-sentence. Give it hierarchy. */
.woofc-area .bela-fsb{padding:10px 12px !important;border-radius:14px !important;
  background:linear-gradient(180deg,#fffaf7,#fff1ec) !important;border:1px solid #f2dcd3 !important;}
.woofc-area .bela-fsb__text{font-size:12.5px !important;line-height:1.4 !important;color:#6d5b55 !important;margin:0 0 8px !important;}
.woofc-area .bela-fsb__text strong{font-size:14.5px !important;font-weight:700 !important;color:#b3506b !important;}
.woofc-area .bela-fsb__text strong .amount{font-size:inherit !important;color:inherit !important;}
.woofc-area .bela-fsb__track{height:10px !important;border-radius:99px !important;background:#f3e2e8 !important;overflow:hidden !important;}
.woofc-area .bela-fsb__fill{background:linear-gradient(90deg,#e0a5b5,#b3506b) !important;border-radius:99px !important;transition:width .45s ease !important;}
.woofc-area .bela-fsb--done{background:linear-gradient(180deg,#f6fbf7,#e9f5ec) !important;border-color:#cfe6d5 !important;}
.woofc-area .bela-fsb--done .bela-fsb__track{background:#d8eedd !important;}
.woofc-area .bela-fsb--done .bela-fsb__fill{background:linear-gradient(90deg,#7bbf8a,#3f8a4f) !important;}
.woofc-area .bela-fsb--done .bela-fsb__text strong{color:#3f8a4f !important;}

/* Checkout is the point of the drawer. */
.woofc-area .woofc-action{padding-top:8px !important;}

/* The upsell carousel is 191px - more than the cart contents were getting. Show it only
   where the screen can actually afford it: never on a phone, and not on a short laptop
   window where it is what pushes "continue shopping" off. It stays on the cart page. */
@media(max-width:767px){.woofc-area .woofc-suggested{display:none !important;}}
@media(max-height:1000px){.woofc-area .woofc-suggested{display:none !important;}}
@media(min-width:768px) and (min-height:1001px){
  .woofc-area .woofc-suggested{margin-top:8px !important;}
  .woofc-area .woofc-suggested-heading{font-size:12.5px !important;margin-bottom:4px !important;}
}

/* Continue shopping must never be the control that falls off the bottom. */
.woofc-area .woofc-continue{margin:10px 0 0 !important;font-size:13px !important;}

/* The upsell pagination was a row of ten dots taking a whole line. */
.woofc-area .woofc-suggested .slick-dots{margin:4px 0 0 !important;padding:0 !important;line-height:1 !important;}
.woofc-area .woofc-suggested .slick-dots li{width:8px !important;height:8px !important;margin:0 3px !important;}
.woofc-area .woofc-suggested .slick-dots li button{width:8px !important;height:8px !important;}