/* Keep the cart shipping hint clearly readable on desktop and mobile. */
.ngp-cart-shipping-choice {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

/* Product metadata and explanatory text in the cart should not fall below
   a comfortable reading size. */
body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-totals-item__description {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media (max-width: 600px) {
    .ngp-cart-shipping-choice {
        font-size: 15px !important;
    }
}


/* Below the minimum order value, explain the reason directly in the cart
   before the customer reaches checkout. */
.ngp-cart-minimum-notice {
    margin: 0 0 16px;
    padding: 14px 15px;
    border: 1px solid #f1c36d;
    border-radius: 7px;
    background: #fffaf0;
    color: #27343b;
    font-size: 15px;
    line-height: 1.55;
}

.ngp-cart-minimum-notice strong,
.ngp-cart-minimum-notice span {
    display: block;
}

.ngp-cart-minimum-notice strong {
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 750;
}

.ngp-cart-minimum-notice b {
    font-weight: 750;
}


/* Stable server-rendered minimum-order notice. It is intentionally outside the
   WooCommerce Blocks managed DOM so it cannot trigger React/Blocks rerenders. */
.ngp-cart-minimum-notice--server {
    max-width: 1100px;
    margin: 0 auto 18px;
    padding: 16px 18px;
    border: 1px solid #f0b35d;
    border-radius: 8px;
    background: #fff8ec;
    color: #17242d;
    font-size: 15px;
    line-height: 1.55;
}
.ngp-cart-minimum-notice--server strong,
.ngp-cart-minimum-notice--server span { display:block; }
.ngp-cart-minimum-notice--server strong { margin-bottom:4px; font-size:15px; }
@media (max-width: 640px) {
  .ngp-cart-minimum-notice--server { margin:0 14px 16px; font-size:15px; }
}

/* 0.57.23: the cart Block uses a wider alignwide layout than the ordinary
   page content. Let the minimum-order notice follow that same visual width. */
.ngp-cart-minimum-notice--server,
.ngp-cart-minimum-notice--dynamic {
    box-sizing: border-box;
    width: min(1100px, calc(100vw - 40px));
    max-width: none !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 640px) {
    .ngp-cart-minimum-notice--server,
    .ngp-cart-minimum-notice--dynamic {
        width: calc(100vw - 28px);
    }
}


/* 0.57.24: make the cart total helper/tax line as readable as the primary
   total instead of looking like disabled placeholder text. */
body.woocommerce-cart .wc-block-components-totals-item__description {
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    opacity: 1 !important;
}