/* "Thêm vào giỏ hàng thành công" box (inc/cart-added.php): under the header, right edge on the header rail. */
.tw-cart-added {
  --tw-cart-added-rail: max(var(--container-gutter, 16px), calc((100vw - 1560px) / 2 + clamp(var(--space-6), 2.4vw, 40px)));
  position: fixed; z-index: 1000; top: var(--tw-cart-added-top, 96px); right: var(--tw-cart-added-right, var(--tw-cart-added-rail));
  box-sizing: border-box; width: min(400px, calc(100vw - 16px)); max-height: calc(100dvh - var(--tw-cart-added-top, 96px) - 16px); overflow-y: auto;
  padding: 20px 24px 24px; border-radius: 16px; background: var(--surface-card); color: var(--text-body);
  box-shadow: 0 12px 40px rgb(7 25 35 / .18), 0 2px 8px rgb(7 25 35 / .08);
  /* Slide In Right (0.3s) from just past the right edge of the screen; Slide Out Right + fade (0.4s) when it leaves.
     Only transform and opacity move, on a fixed box, so nothing else on the page reflows. */
  --tw-cart-added-out: calc(100% + var(--tw-cart-added-right, var(--tw-cart-added-rail)) + 24px);
  transform: translate3d(var(--tw-cart-added-out), 0, 0); will-change: transform, opacity; backface-visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.tw-cart-added.is-open { transform: translate3d(0, 0, 0); }
.tw-cart-added.is-leaving { transform: translate3d(var(--tw-cart-added-out), 0, 0); opacity: 0; transition: transform .4s cubic-bezier(.55, 0, .45, 1), opacity .4s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tw-cart-added, .tw-cart-added.is-leaving { transform: none; transition: opacity .2s linear; }
  .tw-cart-added:not(.is-open) { opacity: 0; }
}
.tw-cart-added-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle, #e5e7eb); }
.tw-cart-added-head h2 { margin: 0; font: var(--fw-bold) 18px/1.35 var(--font-sans); color: var(--text-heading); text-transform: none; }
.tw-cart-added-close { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px 0 0; border-radius: 50%; color: var(--text-strong); cursor: pointer; }
.tw-cart-added-close:hover, .tw-cart-added-close:focus-visible { background: var(--surface-sunken); }
.tw-cart-added-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 16px; }
.tw-cart-added-thumb { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-sunken); }
.tw-cart-added-thumb img, .tw-cart-added-more-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tw-cart-added-item p { margin: 0; }
.tw-cart-added-name { font: var(--fw-medium) 15px/1.4 var(--font-sans); }
.tw-cart-added-name a { color: var(--text-heading); }
.tw-cart-added-name a:hover { color: var(--text-link); }
.tw-cart-added-variation { margin-top: 4px !important; font-size: 13px; color: var(--text-muted); }
.tw-cart-added-price { margin-top: 6px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: var(--fw-bold) 16px/1.3 var(--font-sans); color: var(--teal-800); }
.tw-cart-added-price ins { text-decoration: none; }
.tw-cart-added-price del { order: 2; font-size: 13px; font-weight: var(--fw-regular); color: var(--text-muted); text-decoration: line-through; }
.tw-cart-added-cart { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 8px 24px; border: 1px solid var(--teal-700); border-radius: 999px; color: var(--teal-700); font: var(--fw-bold) 14px/1.2 var(--font-sans); text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.tw-cart-added-cart:hover, .tw-cart-added-cart:focus-visible { background: var(--teal-700); color: var(--white); }
.tw-cart-added-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle, #e5e7eb); }
.tw-cart-added-more h3 { margin: 0 0 12px; font: var(--fw-bold) 16px/1.35 var(--font-sans); color: var(--text-heading); text-transform: none; }
.tw-cart-added-more ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tw-cart-added-more a { display: grid; gap: 6px; color: var(--text-strong); }
.tw-cart-added-more-image { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-sunken); }
.tw-cart-added-badge { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border-radius: 999px; background: var(--teal-700); color: var(--white); font: var(--fw-bold) 11px/1.3 var(--font-sans); }
.tw-cart-added-more-name { overflow: hidden; font-size: 13px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.tw-cart-added-more a:hover .tw-cart-added-more-name { color: var(--text-link); }
.tw-cart-added-more-price { font: var(--fw-bold) 14px/1.3 var(--font-sans); color: var(--teal-800); }
@media (max-width: 767px) {
  .tw-cart-added { --tw-cart-added-out: calc(100% + 32px); right: 8px; width: calc(100vw - 16px); padding: 16px 16px 18px; border-radius: 12px; }
  .tw-cart-added-head h2 { font-size: 16px; }
  .tw-cart-added-item { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .tw-cart-added-cart { display: flex; }
}
/* While the AJAX add is on its way (assets/js/cart-added.js). */
.single_add_to_cart_button.loading { opacity: .7; cursor: progress; pointer-events: none; }