/* ============================================================
   Cart drawer — slide-in panel triggered from header cart icon
   and the product page "Thêm vào giỏ" button. Loaded once via
   storefront-cart-drawer link in design-foot partial.
   ============================================================ */

.shop-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
  z-index: 9998;
}
.shop-drawer-overlay.is-open { opacity: 1; visibility: visible; }

#shop-cart-drawer {
  position: fixed; top: 0; right: -440px; bottom: 0;
  width: 420px; max-width: 90vw;
  background: #fff; box-shadow: -6px 0 24px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column; z-index: 9999;
  transition: right .35s cubic-bezier(.22, .61, .36, 1);
  font-size: 14px; color: #13273F;
}
#shop-cart-drawer.is-open { right: 0; }

.shop-drawer-head {
  padding: 22px 24px 16px; border-bottom: 1px solid #eee;
  display: flex; align-items: center; gap: 10px; position: relative;
  color: #13273F;
}
.shop-drawer-head h3 {
  font-size: 16px; font-weight: 600; margin: 0; flex: 1; color: #13273F;
}
.shop-drawer-close {
  background: none; border: 0; font-size: 22px; line-height: 1;
  cursor: pointer; color: #13273F; padding: 4px 8px;
}

.shop-drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px; }
.shop-drawer-empty { text-align: center; color: #888; padding: 60px 0; }

.shop-drawer-line {
  display: flex; gap: 14px; padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
}
.shop-drawer-line img {
  width: 100px; height: 130px; object-fit: cover;
  background: #f3f3f3; flex: 0 0 100px;
}
.shop-drawer-line .line-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.shop-drawer-line .line-name {
  font-size: 14px; font-weight: 600; line-height: 1.3; color: #13273F;
}
.shop-drawer-line .line-price {
  font-size: 14px; font-weight: 700; color: #13273F;
}
.shop-drawer-line .line-meta {
  font-size: 13px; color: #888;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.shop-drawer-line .line-meta span strong {
  font-weight: 600; color: #13273F;
}
.shop-drawer-line .line-row {
  display: flex; justify-content: space-between; align-items: center;
}
.shop-drawer-line .qty-control {
  display: inline-flex; align-items: center; gap: 14px;
}
.shop-drawer-line .qty-btn {
  width: 24px; height: 24px; line-height: 1;
  background: #fff; border: 1px solid #ccc;
  cursor: pointer; font-size: 14px; color: #13273F;
}
.shop-drawer-line .qty-num {
  min-width: 20px; text-align: center; color: #13273F;
}
.shop-drawer-line .line-remove {
  background: #f4f4f4; border: 0; padding: 8px 22px;
  cursor: pointer; font-size: 13px;
  align-self: flex-start; margin-top: 6px; color: #13273F;
}

.shop-drawer-foot {
  padding: 16px 24px 22px; border-top: 1px solid #eee;
}
.shop-drawer-foot a {
  display: flex; justify-content: space-between; align-items: center;
  background: #13273F; color: #F4F0EA; text-decoration: none;
  padding: 16px 22px; font-weight: 600;
}
.shop-drawer-foot a:hover { background: #F4F0EA; color: #13273F; }
.shop-drawer-foot a.is-disabled {
  background: #aaa; pointer-events: none; color: #fff;
}