/* =========================================================
   ZOOMAG PET CART v2 (CSS) — load once on /checkout/cart
   ========================================================= */

.zoomag-pet-cart{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  width: min(1320px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 34px;

  background:
    radial-gradient(900px 520px at 15% 0%, rgba(99, 102, 241, 0.10), transparent 55%),
    radial-gradient(900px 520px at 95% 15%, rgba(139, 92, 246, 0.10), transparent 55%),
    var(--pc-bg);

  min-height: 40vh;
  color: var(--pc-text);
}

.zoomag-pet-cart,
.zoomag-pet-cart *{ box-sizing: border-box; }

.pet-products-list{ display:flex; flex-direction:column; gap: 18px; }
.pet-product-card{
  display:grid;
  grid-template-columns: 210px 1fr 260px;
  gap: 22px;
  align-items:center;

  padding: 22px;
  background: var(--pc-surface);
  border-radius: var(--pc-radius-xl);
  border: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow-soft);
}

.pet-product-image-container{ width:210px; height:210px; }
.pet-product-image{
  width:100%; height:100%;
  object-fit:contain;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid var(--pc-border);
}

.pet-product-name{
  font-size: 21px;
  font-weight: 900;
  color: var(--pc-text);
  text-decoration:none;
  display:inline-block;
  margin-bottom: 10px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.pet-product-name:hover{ color: var(--pc-primary); }

.pet-price-block{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width: 240px;
}

.pet-total-price{
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: -0.4px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quantity-controls{
  display:flex !important;
  align-items:stretch;
  border: 2px solid var(--pc-border);
  border-radius: 16px;
  overflow:hidden;
  background:#f8fafc;
}
.quantity-btn{
  width: 50px !important;
  height: 50px !important;
  border:none !important;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color:#0f172a;
  font-size: 20px;
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pet-quantity-input{
  width: 82px !important;
  height: 50px !important;
  border:none !important;
  background:#f8fafc !important;
  text-align:center;
  font-size: 18px;
  font-weight: 900;
  outline:none;
}

/* Responsive */
@media (max-width: 1100px){
  .pet-product-card{ grid-template-columns: 190px 1fr 240px; }
  .pet-product-image-container{ width:190px; height:190px; }
}
@media (max-width: 900px){
  .pet-product-card{ grid-template-columns: 1fr; }
  .pet-product-image-container{ width: 240px; height: 240px; margin: 0 auto; }
  .pet-price-block{ text-align:left; min-width:unset; border-top: 1px dashed var(--pc-border); padding-top: 14px; }
}
@media (max-width: 520px){
  .zoomag-pet-cart{ width: calc(100% - 18px); }
}

/* =========================================================
   ZM CART PAGE styles (matches checkout/cart_list.twig .zm-*)
   ========================================================= */
#checkout-cart.zoomag-pet-cart{
  --zm-cart-bg:#f8fbff;
  --zm-cart-card:#ffffff;
  --zm-cart-text:#0f172a;
  --zm-cart-muted:#64748b;
  --zm-cart-border:#dde7f3;
  --zm-cart-primary:#6366f1;
  --zm-cart-primary-2:#8b5cf6;
  --zm-cart-danger:#ef4444;
  --zm-cart-shadow:0 14px 34px rgba(15,23,42,.08);
  color:var(--zm-cart-text);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(800px 420px at 100% 10%, rgba(139,92,246,.10), transparent 58%),
    var(--zm-cart-bg);
  border-radius: 26px;
  padding: 16px 14px 24px;
  margin: 16px auto 28px;
}
#checkout-cart .zm-cart{ max-width: 1320px; margin:0 auto; }
#checkout-cart .zm-cart__top{ display:flex; justify-content:flex-end; margin-bottom:10px; }
#checkout-cart .zm-cart__weight{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.18);
  font-weight:800; color:#312e81;
}
#checkout-cart .zm-cart__weight::before{ content:'⚖️'; }
#checkout-cart .zm-cart__items{ display:grid; gap:12px; }
#checkout-cart .zm-cart-item{
  background:var(--zm-cart-card);
  border:1px solid var(--zm-cart-border);
  border-radius:22px;
  box-shadow:var(--zm-cart-shadow);
  transition:opacity .2s ease, transform .2s ease;
}
#checkout-cart .zm-cart-item.is-updating{ opacity:.68; }
#checkout-cart .zm-cart-item--problem{
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 12px 28px rgba(239,68,68,.08);
}
#checkout-cart .zm-cart-item__main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:14px;
}
#checkout-cart .zm-cart-item__left{ display:flex; gap:12px; align-items:center; min-width:0; }
#checkout-cart .zm-cart-item__thumb{
  width:72px; height:72px; flex:0 0 72px;
  border-radius:16px; overflow:hidden; display:block;
  background:linear-gradient(135deg,#fff,#f1f5ff);
  border:1px solid var(--zm-cart-border);
}
#checkout-cart .zm-cart-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#checkout-cart .zm-cart-item__name{ min-width:0; }
#checkout-cart .zm-cart-item__name > a{
  color:var(--zm-cart-text); text-decoration:none; font-weight:800; line-height:1.22;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
#checkout-cart .zm-cart-item__name > a:hover{ color:var(--zm-cart-primary); }
#checkout-cart .zm-stock-mark{ color:#dc2626; font-weight:900; letter-spacing:.4px; }
#checkout-cart .zm-cart-item__warning{ margin:0 14px 14px; font-weight:700; }
#checkout-cart .zm-cart-item__opt{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
#checkout-cart .zm-cart-item__opt span{
  display:inline-flex; padding:4px 8px; border-radius:999px;
  background:#f8fafc; border:1px solid var(--zm-cart-border); color:var(--zm-cart-muted); font-size:12px;
}
#checkout-cart .zm-cart-item__right{
  display:flex; align-items:center; gap:12px; justify-content:flex-end;
}
#checkout-cart .zm-qty{
  display:flex; align-items:center;
  border:2px solid var(--zm-cart-border); border-radius:14px; overflow:hidden;
  background:#fff;
}
#checkout-cart .zm-qty__btn{
  width:42px; height:42px; border:0; margin:0;
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  color:#0f172a; font-size:22px; font-weight:900; line-height:1; cursor:pointer;
}
#checkout-cart .zm-qty__btn:hover{ filter:brightness(.98); }
#checkout-cart .zm-qty__btn:active{ transform:translateY(1px); }
#checkout-cart .zm-qty__btn:disabled{ opacity:.55; cursor:not-allowed; }
#checkout-cart .zm-qty__input{
  width:58px; height:42px; border:0; margin:0; text-align:center;
  font-size:16px; font-weight:900; color:var(--zm-cart-text); background:#fff;
}
#checkout-cart .zm-qty__input:focus{ outline:none; box-shadow: inset 0 0 0 2px rgba(99,102,241,.2); }
#checkout-cart .zm-cart-item__sum{ min-width:120px; text-align:right; }
#checkout-cart .zm-cart-item__price{ color:var(--zm-cart-muted); font-size:13px; }
#checkout-cart .zm-cart-item__total{ font-weight:900; font-size:18px; color:var(--zm-cart-text); }
#checkout-cart .zm-cart-item__remove{
  width:38px; height:38px; border-radius:12px; border:1px solid rgba(239,68,68,.2);
  background:rgba(239,68,68,.06); color:var(--zm-cart-danger);
  font-size:20px; font-weight:900; line-height:1; cursor:pointer;
}
#checkout-cart .zm-cart-item__remove:hover{ background:rgba(239,68,68,.12); }
#checkout-cart .zm-cart-item__remove:disabled{ opacity:.55; cursor:not-allowed; }
#checkout-cart .zm-divider{ height:1px; background:linear-gradient(90deg, transparent, var(--zm-cart-border), transparent); margin:14px 4px 12px; }
#checkout-cart .zm-cart__totals{
  display:grid; gap:8px; padding:4px;
}
#checkout-cart .zm-total{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--zm-cart-border); border-radius:14px;
  padding:10px 14px;
}
#checkout-cart .zm-total__k{ color:var(--zm-cart-muted); font-weight:700; }
#checkout-cart .zm-total__v{ color:var(--zm-cart-text); font-weight:900; }
#checkout-cart .zm-cart__actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-top:16px;
  padding:4px;
}
#checkout-cart .zm-cart-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:10px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  border:1px solid var(--zm-cart-border);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
#checkout-cart .zm-cart-btn:hover{ transform:translateY(-1px); filter:brightness(1.02); }
#checkout-cart .zm-cart-btn:active{ transform:translateY(1px); }
#checkout-cart .zm-cart-btn--ghost{
  background:#fff;
  color:var(--zm-cart-text);
}
#checkout-cart .zm-cart-btn--primary{
  color:#fff;
  border-color: transparent;
  background:linear-gradient(135deg, var(--zm-cart-primary), var(--zm-cart-primary-2));
  box-shadow:0 12px 26px rgba(99,102,241,.24);
}
#checkout-cart .zm-empty{
  background:#fff; border:1px solid var(--zm-cart-border); border-radius:20px;
  padding:28px 20px; text-align:center; font-weight:800; color:var(--zm-cart-muted);
}

@media (max-width: 900px){
  #checkout-cart.zoomag-pet-cart{ width:calc(100% - 16px); }
  #checkout-cart .zm-cart-item__main{ grid-template-columns:1fr; gap:12px; }
  #checkout-cart .zm-cart-item__right{ justify-content:space-between; flex-wrap:wrap; }
  #checkout-cart .zm-cart-item__sum{ min-width:0; text-align:left; }
  #checkout-cart .zm-cart__actions{ flex-direction:column; align-items:stretch; }
  #checkout-cart .zm-cart-btn{ width:100%; }
}
@media (max-width: 575.98px){
  #checkout-cart .zm-cart-item__thumb{ width:60px; height:60px; flex-basis:60px; }
  #checkout-cart .zm-cart-item__right{ gap:10px; }
  #checkout-cart .zm-qty__btn{ width:38px; height:38px; font-size:20px; }
  #checkout-cart .zm-qty__input{ width:50px; height:38px; font-size:15px; }
  #checkout-cart .zm-cart-item__total{ font-size:16px; }
}


/* =========================================================
   2026-02-26 ENHANCE: empty cart hero
   ========================================================= */
#checkout-cart .zm-empty-hero{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 26px 22px;
  border-radius: 24px;
  border: 1px solid var(--zm-cart-border);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}
#checkout-cart .zm-empty-hero__art{
  height: 200px;
  border-radius: 22px;
  border: 1px dashed rgba(99,102,241,.28);
  background: radial-gradient(240px 160px at 30% 20%, rgba(99,102,241,.18), transparent 60%),
              radial-gradient(240px 160px at 80% 70%, rgba(139,92,246,.16), transparent 60%),
              #ffffff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#checkout-cart .zm-empty-hero__icon{
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 12px 20px rgba(99,102,241,.18));
}
#checkout-cart .zm-empty-hero__paws{
  margin-top: 10px;
  font-size: 16px;
  color: rgba(100,116,139,.9);
}
#checkout-cart .zm-empty-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18);
  color: #312e81;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#checkout-cart .zm-empty-hero__title{
  margin: 10px 0 6px;
  font-weight: 1000;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.02em;
}
#checkout-cart .zm-empty-hero__subtitle{
  margin: 0 0 14px;
  color: var(--zm-cart-muted);
  font-weight: 700;
  line-height: 1.5;
}
#checkout-cart .zm-empty-hero__actions{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
#checkout-cart .zm-empty-hero__tips{
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
#checkout-cart .zm-empty-tip{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.22);
  color: #334155;
  font-weight: 700;
}
@media (max-width: 900px){
  #checkout-cart .zm-empty-hero{
    grid-template-columns: 1fr;
    text-align: center;
  }
  #checkout-cart .zm-empty-hero__actions{
    justify-content: center;
  }
}