/* ==========================================================================
   Shrifal — Ecommerce Extension Styles
   Additive styles for cart, checkout, filters, and account pages.
   ========================================================================== */

.chip-filter {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid var(--line, #e2d9c8);
  background: #fff;
  color: var(--ink, #2b2118);
  font-size: 12.5px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}
.chip-filter:hover { border-color: var(--anar, #8B1E2C); color: var(--anar, #8B1E2C); text-decoration: none; }
.chip-filter.on { background: var(--anar, #8B1E2C); border-color: var(--anar, #8B1E2C); color: #fff; }

.payment-option { cursor: pointer; transition: all .2s ease; }
.payment-option:has(input:checked) { border-color: var(--anar, #8B1E2C) !important; background: rgba(139,30,44,0.04); }

.save-pill {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #2e7d32; color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; letter-spacing: .02em;
}
.product-card { position: relative; }

.badge-tag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .03em;
}
.b-best { background: var(--gold, #c9a227); color: #fff; }
.b-premium { background: var(--ink, #2b2118); color: #fff; }

.cart-line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line, #eee); }
.cart-line img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.cart-line-info { flex-grow: 1; }
.cart-line-name { font-weight: 600; font-size: 14px; }
.cart-qty-btn { width: 24px; height: 24px; border: 1px solid var(--line, #ddd); background: #fff; border-radius: 6px; font-size: 13px; line-height: 1; }
.qty-val { display: inline-block; min-width: 22px; text-align: center; font-size: 13px; }

.sr-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; }
.sr-item:hover { background: #f7f3ea; }

.toast-error { border-color: rgba(192, 67, 46, 0.5) !important; }

.max-width-600 { max-width: 600px; }

@media (max-width: 767px) {
  .cart-page-line img { width: 60px; height: 60px; }
  .chip-filter { font-size: 11.5px; padding: 6px 14px; }
}