/* BF365 Cart page — Sprint CART-PAGE-BF365-REDESIGN-POLISH */
/* T3 — co chu theo bac chieu cao: sm 40/12 · md 44/14 · lg 52/16 · xl 56/16.
 * Nhung nut duoc ghim o file nay cao dung bac nhung co chu thi khong. Phan lon
 * KHONG co luat font-size nao cua theme: chung dang an theo `button{font-size:1rem}`
 * trong stylesheet inline cua Astra — 16px o desktop va 14,592px tu 921px tro xuong
 * (Astra dat html{font-size:91.2%}). Mot class don la (0,1,0), du thang type selector
 * (0,0,1) do, nen khong can !important moi.
 * Icon role va link-button KHONG ghim, dung pham vi da chot. */

/* ── Outer shell — align with shared BF365 container (cart page only) ─── */
body.woocommerce-cart #content.site-content,
body.woocommerce-cart.ast-separate-container #content.site-content,
body.woocommerce-cart.ast-plain-container #content.site-content {
  padding-left: 0;
  padding-right: 0;
}

body.woocommerce-cart .site-content > .ast-container,
body.woocommerce-cart .ast-container,
body.woocommerce-cart #primary,
body.woocommerce-cart .site-main,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .woocommerce {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  float: none;
  box-sizing: border-box;
}

body.woocommerce-cart .bf-cart.bf-container,
body.woocommerce-cart .bf-cart {
  width: 100%;
  max-width: var(--bf365-container-max);
  margin-inline: auto;
  padding-inline: var(--bf365-container-gutter-mobile);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body.woocommerce-cart .bf-cart.bf-container,
  body.woocommerce-cart .bf-cart {
    padding-inline: var(--bf365-container-gutter-tablet);
  }
}

@media (min-width: 1024px) {
  body.woocommerce-cart .bf-cart.bf-container,
  body.woocommerce-cart .bf-cart {
    padding-inline: var(--bf365-container-gutter-desktop);
  }
}

.woocommerce-cart .entry-header,
.woocommerce-cart .ast-archive-description {
  display: none;
}

.woocommerce-cart .woocommerce-notices-wrapper {
  width: 100%;
  max-width: var(--bf365-container-max);
  margin-inline: auto;
  margin-bottom: var(--bf-space-5);
  padding-inline: var(--bf365-container-gutter-mobile);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .woocommerce-cart .woocommerce-notices-wrapper {
    padding-inline: var(--bf365-container-gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce-notices-wrapper {
    padding-inline: var(--bf365-container-gutter-desktop);
  }
}

.bf-cart {
  padding-block: clamp(24px, 4vw, 48px);
}

.bf-cart__panel {
  border: 1px solid var(--bf-border-default);
  border-radius: 22px;
  background: var(--bf-surface-elevated);
  overflow: hidden;
}

.bf-cart--empty .bf-cart__header {
  text-align: center;
}

.bf-cart--empty .bf-cart__title {
  margin-bottom: var(--bf-space-2);
}

.bf-cart--empty .bf-cart__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-4);
  width: 100%;
  max-width: 440px;
  margin: var(--bf-space-2) auto 0;
  padding: clamp(32px, 6vw, 56px) 24px;
  border: 1px solid var(--bf-border-default);
  border-radius: 22px;
  background: var(--bf-surface-elevated);
  text-align: center;
  box-shadow: 0 10px 30px var(--bf-shadow-color);
}

.bf-cart__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-muted);
  color: var(--bf-text-muted-dark-ready);
}

.bf-cart--empty .cart-empty {
  margin: 0;
}

.bf-cart__title {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: var(--bf-weight-black);
  letter-spacing: -0.02em;
  color: var(--bf-text-primary);
  line-height: 1.15;
}

@media (min-width: 1100px) {
  .bf-cart__title {
    font-size: clamp(34px, 2.8vw, 40px);
    margin-bottom: var(--bf-space-8);
  }
}

.bf-cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-space-6);
  align-items: start;
}

@media (min-width: 1100px) {
  .bf-cart__layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: var(--bf-space-8);
    align-items: start;
  }

  .bf-cart__sidebar {
    margin-top: 0;
  }
}

.bf-cart__main {
  min-width: 0;
}

.bf-cart__items {
  display: flex;
  flex-direction: column;
}

.bf-cart__items-body {
  display: flex;
  flex-direction: column;
}

.bf-cart__items-head {
  display: none;
}

@media (min-width: 1100px) {
  .bf-cart__items-head {
    display: grid;
    grid-template-columns: 44px 104px minmax(0, 1fr) 110px 100px 120px;
    column-gap: var(--bf-space-4);
    align-items: end;
    padding: 18px 22px var(--bf-space-3);
    border-bottom: 1px solid var(--bf-border-default);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-black);
    color: var(--bf-text-muted-dark-ready);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .bf-cart__head-product {
    grid-column: 3;
    text-align: left;
  }

  .bf-cart__head-price {
    grid-column: 4;
    text-align: right;
  }

  .bf-cart__head-quantity {
    grid-column: 5;
    text-align: center;
  }

  .bf-cart__head-subtotal {
    grid-column: 6;
    text-align: right;
  }
}

.bf-cart__item {
  display: grid;
  grid-template-columns: 36px 88px minmax(0, 1fr);
  grid-template-areas:
    "remove thumb product"
    "summary summary summary";
  gap: var(--bf-space-3) 14px;
  padding: 18px;
  border-bottom: 1px solid var(--bf-border-default);
  background: var(--bf-surface-elevated);
}

.bf-cart__items-body .bf-cart__item:last-child {
  border-bottom: 0;
}

@media (min-width: 1100px) {
  .bf-cart__item {
    grid-template-columns: 44px 104px minmax(0, 1fr) 110px 100px 120px;
    grid-template-areas: "remove thumb product price quantity subtotal";
    align-items: center;
    column-gap: var(--bf-space-4);
    row-gap: 0;
    padding: var(--bf-space-4) 22px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--bf-border-default);
  }

  .bf-cart__items-body .bf-cart__item:last-child {
    border-bottom: 0;
  }
}

.bf-cart__remove {
  grid-area: remove;
  align-self: center;
  justify-self: center;
}

/*
 * 44px at every width, not just from 1100px up.
 *
 * The desktop override below already asked for 44 - this only extends the size
 * it was always meant to have down to the widths where the button is actually
 * touched. Measured 40x40 on mobile, which is the one place a finger is doing
 * the aiming.
 *
 * Sized rather than haloed with a transparent ::before, unlike the hero slider
 * dots: those sit 8px apart so a 44px halo overlapped its neighbours and
 * elementFromPoint started returning the wrong dot. These live one per cart
 * card, hundreds of pixels apart, so growing the box itself is safe and the
 * visual change is 4px on a circle.
 */
.bf-cart__remove .remove,
.bf-cart__remove a.remove,
.bf-cart__remove .bf-cart__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-border-strong-dark-ready);
  background: var(--bf-surface-elevated);
  color: var(--bf-text-muted-dark-ready);
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bf-cart__remove-icon {
  display: block;
  font-size: 22px;
  line-height: 1;
}

/*
 * The 1100px override that used to sit here is gone: the base rule now sets
 * 44px, so it was restating the same two values.
 */

.bf-cart__remove .remove:hover,
.bf-cart__remove a.remove:hover,
.bf-cart__remove .bf-cart__remove-link:hover {
  color: var(--bf-color-red, #dc2626);
  border-color: var(--bf-color-red, #dc2626);
  background: var(--bf-color-red-soft);
}

.bf-cart__thumb {
  grid-area: thumb;
}

.bf-cart__thumb img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--bf-border-default);
  background: var(--bf-surface-media);
}

@media (min-width: 1100px) {
  .bf-cart__thumb img {
    width: 104px;
    height: 104px;
    border-radius: 16px;
  }
}

.bf-cart__product {
  grid-area: product;
  min-width: 0;
  max-width: 100%;
}

.bf-cart__product-link {
  display: block;
  margin-bottom: 6px;
  font-weight: var(--bf-weight-bold);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.4;
  color: var(--bf-text-primary);
  text-decoration: none;
  word-break: normal;
  overflow-wrap: break-word;
}

.bf-cart__product-link:hover {
  color: var(--bf-color-red, #dc2626);
}

.bf-cart__meta {
  margin-top: 6px;
}

.bf-cart__meta-line {
  margin: 0;
  font-size: var(--bf-text-sm);
  line-height: 1.45;
  color: var(--bf-text-muted-dark-ready);
  overflow-wrap: anywhere;
  word-break: normal;
}

.bf-cart__meta dl.variation {
  display: none;
}

.bf-cart__price {
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-base);
}

@media (min-width: 1100px) {
  .bf-cart__mobile-summary,
  .bf-cart__summary-row {
    display: contents;
  }

  .bf-cart__summary-label {
    display: none;
  }

  .bf-cart__summary-value.bf-cart__price {
    grid-area: price;
  }

  .bf-cart__summary-value.bf-cart__quantity {
    grid-area: quantity;
    justify-self: center;
  }

  .bf-cart__summary-value.bf-cart__subtotal {
    grid-area: subtotal;
  }
}

@media (max-width: 1099px) {
  .bf-cart__price::before,
  .bf-cart__quantity::before,
  .bf-cart__subtotal::before {
    display: none;
    content: none;
  }
}

@media (max-width: 767px) {
  .bf-cart__items-head {
    display: none !important;
  }

  .bf-cart__item {
    position: relative;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      "thumb product"
      "summary summary";
    gap: var(--bf-space-3) 14px;
    padding: var(--bf-space-4) var(--bf-space-12) var(--bf-space-4) var(--bf-space-4);
  }

  .bf-cart__items-body .bf-cart__item {
    border-bottom: 1px solid var(--bf-border-default);
  }

  .bf-cart__items-body .bf-cart__item:last-child {
    border-bottom: 0;
  }

  .bf-cart__remove {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    align-self: auto;
    justify-self: auto;
  }

  .bf-cart__thumb img {
    width: 80px;
    height: 80px;
  }

  .bf-cart__product-link {
    font-size: var(--bf-text-lg);
    font-weight: var(--bf-weight-black);
    line-height: 1.25;
    margin-bottom: var(--bf-space-2);
  }

  .bf-cart__meta dl.variation dd {
    display: inline;
    margin: 0;
  }

  .bf-cart__meta dl.variation dd::after {
    content: "";
    display: block;
    height: 6px;
  }

  .bf-cart__mobile-summary {
    grid-area: summary;
    display: grid;
    gap: 14px;
    margin-top: var(--bf-space-1);
    padding-top: var(--bf-space-4);
    border-top: 1px solid var(--bf-border-default);
  }

  .bf-cart__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-4);
  }

  .bf-cart__summary-label {
    flex: 0 0 auto;
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bf-text-muted-dark-ready);
    white-space: nowrap;
  }

  .bf-cart__summary-value {
    flex: 0 1 auto;
    text-align: right;
  }

  .bf-cart__summary-row--price .bf-cart__summary-value,
  .bf-cart__summary-row--subtotal .bf-cart__summary-value {
    font-size: var(--bf-text-lg);
    font-weight: var(--bf-weight-black);
    line-height: 1.2;
  }

  .bf-cart__summary-row--quantity .bf-cart__quantity .quantity {
    border-radius: 14px;
  }

  .bf-cart__summary-row--quantity .bf-cart__quantity .qty {
    width: 72px;
    height: 52px;
    min-height: 52px;
    font-size: var(--bf-text-base);
  }

  .bf-cart__coupon-input,
  .bf-cart__coupon-btn,
  .bf-cart__update {
    width: 100%;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tbody {
    display: block;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bf-space-4);
    padding: 10px 0;
    border-bottom: 1px solid var(--bf-border-default);
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent !important;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive th {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-semibold);
    line-height: 1.4;
    color: var(--bf-text-muted-dark-ready);
    text-align: left;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive td {
    display: block !important;
    flex: 0 0 auto;
    max-width: none;
    font-size: var(--bf-text-base);
    font-weight: var(--bf-weight-black);
    line-height: 1.4;
    text-align: right !important;
    white-space: nowrap;
  }

  /*
   * The shipping cell is prose, not a price, and must wrap.
   *
   * nowrap above is right for every other cell in this table - "2.468.000 ₫"
   * breaking across two lines looks broken. But the shipping row holds a whole
   * paragraph (method label + estimate sentence + calculator link), and nowrap
   * forced it onto one unbreakable line: 441px inside a 356px table at 390px,
   * so 132px of it hung off the right edge.
   *
   * It never showed as a scrollbar because cart.css:~1212 puts overflow-x:clip
   * on six cart selectors at every width. The visible symptom was a sentence
   * cut off mid-word.
   *
   * There is already a `.bf-cart__totals-table .woocommerce-shipping-totals td
   * { white-space: normal }` rule at top level. It works on desktop and loses
   * here: (0,2,1) against the (0,4,1) mobile rule directly above. That is why
   * the overflow was mobile-only while desktop measured clean - the fix was
   * present and outranked. This selector is (0,5,1) and sits in the same media
   * query, so it wins where it has to.
   *
   * `.shipping` as well as `.woocommerce-shipping-totals` because the theme's
   * own cart-totals.php:46 fallback row carries only the short class.
   */
  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive .woocommerce-shipping-totals td,
  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive .shipping td {
    white-space: normal;
    /*
     * Wrapping alone did not shrink it. The row is a flex container and the
     * cell is `flex: 0 0 auto` with `max-width: none` from the rule above, so
     * its flex-basis resolves to max-content - the full unwrapped paragraph -
     * no matter what white-space says. Measured 436px in a 356px column after
     * the wrap fix landed, still 127px over.
     *
     * max-width bounds the basis; min-width: 0 lets it shrink past the
     * automatic minimum size that flex items get by default.
     */
    max-width: 100%;
    min-width: 0;
    /*
     * max-width alone still left 7px hanging off. The row is flex and the cell
     * inherits `flex: 0 0 auto` from the rule above, so shrink is 0: capping
     * the width at 100% of the row does nothing when the cell starts 81px in
     * behind the <th> and simply refuses to give any of it back.
     *
     * Same shape as the header-menu overflow noted in CLAUDE.md - flex-shrink
     * and min-width have to arrive together, neither is any use alone.
     */
    flex: 1 1 auto;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive td::before {
    display: none !important;
    content: none !important;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.cart-discount th {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.cart-discount td {
    align-self: center;
    white-space: normal;
    text-align: right !important;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.order-total {
    align-items: center;
    margin-top: var(--bf-space-1);
    padding-top: 14px;
    border-top: 1px solid var(--bf-border-default);
    border-bottom: 0;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.order-total th,
  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.order-total td {
    border-top: 0;
    padding-top: 0;
    font-size: 17px;
    font-weight: var(--bf-weight-black);
    color: var(--bf-text-primary);
    text-align: left;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.order-total th {
    white-space: nowrap;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table.shop_table_responsive tr.order-total td {
    font-size: 28px;
    font-weight: var(--bf-weight-black);
    color: var(--bf-color-red, #dc2626);
    text-align: right !important;
  }

  .woocommerce-cart .bf-cart__totals .bf-cart__totals-table .woocommerce-remove-coupon {
    display: inline;
    margin-left: var(--bf-space-1);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-bold);
    color: var(--bf-color-red, #dc2626);
    white-space: nowrap;
  }

  .bf-cart__totals-title {
    margin-bottom: var(--bf-space-3);
  }

  .bf-cart__trust-strip {
    margin-top: 14px;
    padding-top: var(--bf-space-3);
  }

}

@media (min-width: 768px) and (max-width: 1099px) {
  .bf-cart__item {
    grid-template-areas:
      "remove thumb product"
      "summary summary summary";
  }

  .bf-cart__mobile-summary {
    grid-area: summary;
    display: grid;
    gap: 14px;
    margin-top: var(--bf-space-1);
    padding-top: var(--bf-space-4);
    border-top: 1px solid var(--bf-border-default);
  }

  .bf-cart__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-4);
  }

  .bf-cart__summary-label {
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--bf-text-muted-dark-ready);
  }

  .bf-cart__summary-value {
    text-align: right;
    font-size: 17px;
    font-weight: var(--bf-weight-black);
  }
}

@media (min-width: 1100px) {
  .bf-cart__price {
    text-align: right;
    white-space: nowrap;
  }
}

.bf-cart__quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bf-border-default);
  border-radius: 11px;
  overflow: hidden;
  background: var(--bf-surface-input);
}

/*
 * 44px tall so the desktop field clears the tap-target floor - it measured
 * 61.7x40 at 1440px. Mobile already sits at 52px from the summary-row rule
 * further up, which is more specific and still wins, so this only moves the
 * width where the number is small enough to need it.
 */
.bf-cart__quantity .qty {
  width: 76px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  text-align: center;
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-base);
  background: transparent;
  -moz-appearance: textfield;
}

.bf-cart__quantity .qty::-webkit-outer-spin-button,
.bf-cart__quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bf-cart__subtotal {
  font-weight: var(--bf-weight-black);
  font-size: var(--bf-text-base);
}

@media (min-width: 1100px) {
  .bf-cart__subtotal {
    text-align: right;
    white-space: nowrap;
  }
}

.bf-cart__actions {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
  margin-top: 0;
  padding: 18px 18px var(--bf-space-5);
  border-top: 1px solid var(--bf-border-default);
  background: var(--bf-surface-muted);
}

@media (min-width: 1100px) {
  .bf-cart__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bf-space-3) var(--bf-space-4);
    padding: 18px 22px 22px;
  }

  .bf-cart__coupon-wrap {
    flex: 1 1 auto;
    min-width: min(100%, 360px);
  }

  .bf-cart__update {
    margin-left: auto;
  }
}

.bf-cart__coupon-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bf-cart__coupon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .bf-cart__coupon {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--bf-space-3);
  }
}

.bf-cart__coupon-input {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-base);
  line-height: 1.2;
  background: var(--bf-surface-input);
  box-sizing: border-box;
}

.bf-cart__coupon-input:focus {
  outline: 2px solid var(--bf-color-red-soft);
  border-color: var(--bf-color-red, #dc2626);
}

.bf-cart__coupon-btn {
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  font-size: var(--bf-text-sm);
  padding: 0 var(--bf-space-5);
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .bf-cart__coupon-btn {
    width: auto;
  }
}

.bf-cart__update {
  align-self: flex-start;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  font-size: var(--bf-text-sm);
  padding: 0 22px;
  line-height: 1;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .bf-cart__update {
    width: auto;
  }
}

.bf-cart__update:disabled,
.bf-cart__update[disabled] {
  opacity: 0.68;
  cursor: not-allowed;
}

/* T2 bo sung: nut nay dung mot minh, khong dinh o nhap nao, nen no theo thang
 * chieu cao — 44. Truoc do no la 48 va nam CUNG MOT HANG voi .bf-cart__update da
 * ve 44 o T2, nen hai nut canh nhau lech 4px. Chi doi GIA TRI, khong them khai bao. */
.bf-cart__continue-shopping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--bf-space-5);
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  text-decoration: none;
  box-sizing: border-box;
}

.bf-cart__continue-icon {
  font-size: var(--bf-text-lg);
  line-height: 1;
}

@media (min-width: 1100px) {
  .bf-cart__continue-shopping {
    width: auto;
    margin-right: auto;
  }

  .bf-cart__actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 1099px) {
  .bf-cart__continue-shopping {
    order: 3;
  }
}

.bf-cart__sidebar {
  min-width: 0;
}

@media (min-width: 1100px) {
  .bf-cart__sidebar {
    min-width: 320px;
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

.bf-cart__sidebar .cart-collaterals {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-6);
}

.bf-cart__totals {
  width: 100%;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--bf-border-default);
  border-radius: 22px;
  background: var(--bf-surface-elevated);
  box-shadow: 0 10px 30px var(--bf-shadow-color);
}

@media (min-width: 1100px) {
  .bf-cart__totals {
    min-width: 340px;
  }
}

.bf-cart__totals-title {
  margin: 0 0 18px;
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-black);
  letter-spacing: -0.02em;
}

.bf-cart__totals-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.bf-cart__totals-table tbody {
  display: block;
}

.bf-cart__totals-table tr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bf-space-4);
  padding: var(--bf-space-3) 0;
  border-bottom: 1px solid var(--bf-border-default);
}

.bf-cart__totals-table tr:last-child {
  border-bottom: 0;
}

.bf-cart__totals-table th,
.bf-cart__totals-table td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent !important;
  text-align: left;
  vertical-align: top;
}

.bf-cart__totals-table th {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--bf-weight-semibold);
  font-size: var(--bf-text-sm);
  line-height: 1.4;
  color: var(--bf-text-muted-dark-ready);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

.bf-cart__totals-table td {
  flex: 0 0 auto;
  max-width: 52%;
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-sm);
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

.bf-cart__totals-table .woocommerce-shipping-totals td {
  white-space: normal;
  max-width: 58%;
}

/*
 * Job #75c (05/10/2026) — freeship gap row (inc/cart.php,
 * bf365_render_freeship_gap_row(), hooked on woocommerce_cart_totals_after_shipping
 * / woocommerce_review_order_after_shipping). The row has a single <th>, no
 * <td> pair, so it takes the full flex width of .bf-cart__totals-table tr
 * above rather than splitting into a label/value pair like every other row.
 *
 * `background` needs !important: `.bf-cart__totals-table th, td { background:
 * transparent !important; }` above (every cell, so every row reads through to
 * the card surface) outranks a plain declaration regardless of selector
 * specificity - measured the tinted/green background rendering invisible
 * without it.
 */
.bf-cart__totals-table tr.bf-freeship-gap {
  padding-top: 0;
  border-bottom: 0;
}

.bf-cart__totals-table tr.bf-freeship-gap th {
  flex: 1 1 100%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.45;
  color: var(--bf-text-primary);
  background: var(--bf-surface-muted, #fff8e1) !important;
  white-space: normal;
}

.bf-cart__totals-table tr.bf-freeship-gap th strong {
  color: var(--bf-color-red);
}

.bf-cart__totals-table tr.bf-freeship-gap--done th {
  background: var(--bf365-success, #16a34a) !important;
  color: var(--bf-on-primary, #fff);
}

/*
 * The shipping calculator toggle had no rule of its own anywhere in the theme,
 * so it rendered as a bare WooCommerce link and measured 153x20 - a tap target
 * a third of the required height, on both mobile and desktop.
 *
 * inline-flex with min-height rather than padding alone, so the 44px is real
 * whether the label wraps to one line or two. Width is left to the content:
 * this is a text link inside a prose cell, and stretching it full-width would
 * read as a second button competing with "Tiến hành thanh toán".
 */
.bf-cart__totals-table .shipping-calculator-button,
.bf-cart__totals .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
}

/*
 * The add-to-cart confirmation carries a "Xem giỏ hàng" button pointing at the
 * cart, which is dead weight once the visitor is standing on it - three of them
 * stacked after adding three items, pushing the cart about 370px down on mobile.
 *
 * Done in CSS rather than on wc_add_to_cart_message_html because that filter
 * runs when the notice is BUILT, on the /?add-to-cart= request, where is_cart()
 * is false and nothing yet knows where the notice will be read. The HTML is
 * stored in the session and replayed on the cart page, and by the time the
 * button is wrong there is no PHP filter left looking at it.
 *
 * display:none also drops it from the tab order, so the keyboard path does not
 * stop at a link to the page it is already on. The sentence stays - that is how
 * the visitor knows the item went in. Top level, not inside a media query: the
 * button is equally redundant at 1440px.
 */
.woocommerce-cart .woocommerce-message .wc-forward,
.woocommerce-cart .woocommerce-message .button.wc-forward {
  display: none !important;
}

.bf-cart__totals-table td::before {
  display: none !important;
  content: none !important;
}

.bf-cart__totals-table .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-red, #dc2626);
  white-space: nowrap;
}

.bf-cart__totals-table tr.cart-discount th {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.bf-cart__coupon-label {
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-text-muted-dark-ready);
}

.bf-cart__coupon-code {
  font-weight: var(--bf-weight-bold);
  color: var(--bf-text-primary);
  word-break: break-word;
}

.bf-cart__totals-table .order-total th,
.bf-cart__totals-table .order-total td {
  padding-top: var(--bf-space-2);
  font-size: 17px;
  font-weight: var(--bf-weight-black);
  color: var(--bf-text-primary);
  border-top: 1px solid var(--bf-border-default);
}

.bf-cart__totals-table .order-total td {
  font-size: var(--bf-text-xl);
  color: var(--bf-color-red, #dc2626);
}

.bf-cart__checkout {
  margin-top: 18px;
}

.bf-cart__trust-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0;
  padding: var(--bf-space-4) 0 0;
  border-top: 1px solid var(--bf-border-default);
  list-style: none;
}

.bf-cart__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.35;
  color: var(--bf-text-muted-dark-ready);
}

.bf-cart__trust-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-muted);
  color: var(--bf-color-red, #dc2626);
}

.bf-cart__trust-icon svg {
  width: 16px;
  height: 16px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.bf-cart__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: 0 18px;
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-black);
  white-space: nowrap;
  box-sizing: border-box;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.bf-cart__checkout-btn:focus-visible {
  outline: 2px solid var(--bf-color-red-dark, #b91c1c);
  outline-offset: 2px;
}

.woocommerce-cart .bf-cart__coupon .bf-btn,
.woocommerce-cart .bf-cart__update.bf-btn {
  min-height: unset;
}

.woocommerce-cart .button,
.woocommerce-cart .button.alt,
.woocommerce-cart a.button {
  background-image: none;
  text-shadow: none;
  box-shadow: none;
}

/* WooCommerce .button/.alt specificity — mirrors global .bf-btn--primary (black → red hover). */
.woocommerce-cart .bf-btn--primary,
.woocommerce-cart .checkout-button {
  background-color: var(--bf365-black) !important;
  border-color: var(--bf365-black) !important;
  color: var(--bf365-white) !important;
}

.woocommerce-cart .bf-btn--primary:hover,
.woocommerce-cart .checkout-button:hover {
  background-color: var(--bf365-red) !important;
  border-color: var(--bf365-red) !important;
  color: var(--bf365-white) !important;
}

/*
 * Coupon ("Áp dụng mã") + update-cart ("Cập nhật giỏ hàng") buttons.
 * These carry .button, so WooCommerce/Astra's blue .woocommerce button.button
 * accent outranks their BF365 variant classes. Force BF365 black → red here.
 */
.woocommerce-cart .bf-cart__coupon-btn,
.woocommerce-cart .bf-cart__update {
  background-color: var(--bf365-black) !important;
  border-color: var(--bf365-black) !important;
  color: var(--bf365-white) !important;
  background-image: none !important;
  text-shadow: none !important;
}

.woocommerce-cart .bf-cart__coupon-btn:hover,
.woocommerce-cart .bf-cart__coupon-btn:focus-visible,
.woocommerce-cart .bf-cart__update:not(:disabled):not([disabled]):hover,
.woocommerce-cart .bf-cart__update:not(:disabled):not([disabled]):focus-visible {
  background-color: var(--bf365-red) !important;
  border-color: var(--bf365-red) !important;
  color: var(--bf365-white) !important;
}

/* Update cart disabled — muted gray, not blue, not-allowed. */
.woocommerce-cart .bf-cart__update:disabled,
.woocommerce-cart .bf-cart__update[disabled] {
  background-color: var(--bf-surface-muted) !important;
  border-color: var(--bf-border-default) !important;
  color: var(--bf-text-muted-dark-ready) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.bf-cart__empty-text,
.woocommerce-cart .cart-empty {
  margin: 0;
  font-size: 17px;
  font-weight: var(--bf-weight-semibold);
  line-height: 1.5;
  color: var(--bf-text-muted-dark-ready);
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.woocommerce-cart .bf-cart--empty .return-to-shop {
  margin: var(--bf-space-1) 0 0;
}

.woocommerce-cart .bf-cart--empty .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 220px;
  padding: 0 var(--bf-space-6);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-red, #dc2626);
  border-color: var(--bf-color-red, #dc2626);
  color: var(--bf-on-primary);
  font-weight: var(--bf-weight-black);
  font-size: var(--bf-text-base);
}

.woocommerce-cart .bf-cart--empty .return-to-shop .button:focus {
  outline: none;
}

.woocommerce-cart .return-to-shop .button:hover {
  background: var(--bf-color-red-dark, #b91c1c);
  border-color: var(--bf-color-red-dark, #b91c1c);
  color: var(--bf-on-primary);
}

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  border-radius: var(--bf-radius-md);
  margin-bottom: var(--bf-space-3);
}

@media (min-width: 1100px) {
  .bf-cart__sidebar .cross-sells {
    grid-column: 1 / -1;
  }
}

.woocommerce-cart,
.bf-cart,
.bf-cart__layout,
.bf-cart__item,
.bf-cart__totals,
.bf-cart__totals-table {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 1099px) {
  .bf-cart__totals .bf-cart__totals-table.shop_table_responsive th {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  .bf-cart__coupon {
    grid-template-columns: 1fr;
  }

  .bf-cart__coupon-btn,
  .bf-cart__update,
  .bf-cart__checkout-btn {
    width: 100%;
  }
}

/* ── Sticky checkout bar (mobile) ────────────────────────────────────────── */

/*
 * Named .bf-cart-stickybar, not .bf-stickybar as the mockup called it.
 * The mockup's comment claims it is "cùng component .bf-stickybar của trang
 * sản phẩm", but the real product bar is .bf-sticky-atc and always has been -
 * they were never one component. A cart-scoped name says which page it belongs
 * to instead of implying a shared one that does not exist.
 *
 * Height comes from --bf-stickybar-height so that if a bottom nav is ever
 * built, both bars are measured from the same token rather than two hard-coded
 * 64s that drift apart.
 *
 * Below 768px only. The desktop sidebar has been position: sticky since 1100px
 * (see .bf-cart__sidebar) so the total and the button already follow the
 * scroll there; a second fixed bar would be duplicate furniture.
 */
.bf-cart-stickybar {
  display: none;
}

@media (max-width: 767px) {
  .bf-cart-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    align-items: center;
    gap: var(--bf-space-3);
    min-height: var(--bf-stickybar-height);
    padding: 10px var(--bf-gutter-mobile);
    /*
     * The inset keeps the button clear of the iPhone home indicator. The
     * product bar next door still lacks this - fixed in the same pass below.
     */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bf-surface-elevated);
    border-top: 1px solid var(--bf-border-default);
    box-shadow: 0 -4px 20px var(--bf-shadow-color);
  }

  /*
   * [hidden] is what PHP prints and what the JS toggles, and it has to win:
   * the display:flex below is a class selector and would otherwise out-rank
   * the [hidden] attribute's UA rule, leaving a checkout button on the page
   * with an empty cart.
   */
  .bf-cart-stickybar[hidden] {
    display: none !important;
  }

  .bf-cart-stickybar.is-visible {
    display: flex;
  }

  .bf-cart-stickybar__info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bf-cart-stickybar__price {
    margin: 0;
    font-size: var(--bf-text-lg);
    font-weight: var(--bf-weight-black);
    line-height: 1.2;
    color: var(--bf-color-red, #dc2626);
  }

  .bf-cart-stickybar__price .amount {
    color: inherit;
  }

  .bf-cart-stickybar__meta {
    margin: 2px 0 0;
    font-size: var(--bf-text-xs);
    line-height: 1.3;
    color: var(--bf-text-muted-dark-ready);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bf-cart-stickybar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 44px;
    font-size: var(--bf-text-sm);
    padding: 0 var(--bf-space-4);
    white-space: nowrap;
  }

  /*
   * Room for the bar to sit over, so the last thing on the page stays readable.
   *
   * On the FOOTER, not on .bf-cart. The first attempt padded .bf-cart, which is
   * not what ends the page - the footer is - so the bar still covered the last
   * 37px of it, measured with the payment badges sitting at y=816 under a bar
   * whose top edge is y=779. Padding a block in the middle of the document
   * pushes the footer down and gains nothing.
   *
   * Measured from the same token as the bar plus the inset, rather than the
   * mockup's flat 96px, which is only right on the phone it was drawn on.
   */
  .woocommerce-cart .bf-site-footer {
    padding-bottom: calc(var(--bf-stickybar-height) + 20px + env(safe-area-inset-bottom, 0px));
  }
}