/* Minimal overrides so cart popup remains usable without legacy css/style.css */

.cart-btn{ position:relative; }
.cart-count{ display:none; }

/* Header cart badge – mobile-first */
.cart-btn .cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#0074d9; color:#fff;
  display:none; /* toggled to flex by JS when >0 */
  align-items:center; justify-content:center;
  font-size:12px; font-weight:700; line-height:1;
  border:2px solid #ffffff; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
@media (min-width: 480px){
  .cart-btn .cart-count{ min-width:22px; height:22px; font-size:12px; }
}

/* Provide basic popup container defaults if SimpleCart injects it */
#cartPopup{ position:fixed; inset:0; display:none; align-items:stretch; justify-content:flex-end; background:rgba(0,0,0,.35); z-index:1000; }
#cartPopup.active{ display:flex; }
#cartPopup .cart-modal{ width:min(430px, 90vw); height:100dvh; max-height:100dvh; background:#fff; border-radius:18px 0 0 18px; box-shadow:-8px 0 32px rgba(0,0,0,.12); display:flex; flex-direction:column; }
#cartPopup .cart-header{ display:flex; align-items:center; justify-content:space-between; padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); border-bottom:1px solid #e5e5e7; }
#cartPopup .cart-content{ flex:1; overflow:auto; overflow-x:hidden; padding:6px 10px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#cartPopup .cart-footer{ padding:8px 10px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #e5e5e7; display:flex; flex-direction:column; gap:8px; }
/* Compact summary row: total + savings in one line */
#cartPopup .summary{ border:1px solid #ededf0; border-radius:12px; background:#fafafb; padding:8px 10px; }
#cartPopup .summary-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#cartPopup .summary-label{ color:#6e6e73; font-size:13px; font-weight:700; letter-spacing:0; }
#cartPopup .summary-right{ display:inline-flex; align-items:baseline; gap:10px; }
#cartPopup .summary-total #cartTotal{ font-weight:900; font-size:18px; color:#1d1d1f; letter-spacing:-0.01em; }
#cartPopup .summary-savings{ color:#0a7f27; font-weight:700; font-size:12px; background:#f3faf6; border:1px solid #e4f2ea; padding:2px 8px; border-radius:999px; line-height:1.1; opacity:.85; }
#cartPopup .cart-overlay{ flex:1; cursor:pointer; }
#cartPopup .cart-checkout-btn{ height:46px; border:none; border-radius:12px; background:#0074d9; color:#fff; font-weight:700; }
#cartPopup .cart-continue-btn{ height:46px; border-radius:12px; border:1px solid #cdcdcf; background:#fff; }

/* Cart items layout */
.cart-item{ display:grid; grid-template-areas:
  "img main sideTop"
  "img qty  sideBottom"; grid-template-columns: 56px 1fr auto; gap:8px; align-items:center; padding:8px 8px; border-bottom:1px solid #f0f0f2; }
.cart-item.promo{ background:#fff8e6; }
.ci-img img{ width:56px; height:auto; border-radius:8px; display:block; }
.cart-item.promo .ci-img{ position:relative; cursor:pointer; }
.cart-item.promo .ci-img::after{
  content:"Змінити"; position:absolute; left:2px; bottom:2px;
  padding:2px 6px; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,.92); color:#0a7f27; border:1px solid #e5e5e7;
}
.ci-main .ci-title{ font-weight:600; font-size:14px; color:#1d1d1f; }
.ci-cover{ margin-top:4px; display:flex; align-items:center; gap:6px; }
.ci-cover .cover-label{ font-size:12px; color:#6e6e73; }
.ci-cover .cover-btn{ padding:6px 10px; border-radius:8px; border:1px solid #dcdcdf; background:#fff; font-size:12px; }
.ci-cover .cover-btn.active{ background:#1d1d1f; color:#fff; border-color:#1d1d1f; }
.ci-chip{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:#f2f2f7; color:#1d1d1f; font-size:12px; }
.ci-chip.digital{ background:#e8f3ff; color:#0b63ce; }
.qty-group{ display:inline-flex; align-items:center; border:1px solid #dcdcdf; border-radius:10px; overflow:hidden; }
.qty-group .qbtn{ width:28px; height:28px; line-height:28px; text-align:center; border:none; background:#fff; font-size:16px; }
.qty-group .qval{ width:34px; text-align:center; font-weight:600; }
.ci-price{ font-weight:700; color:#1d1d1f; }

/* Promo notice bar */
.cart-promo{ padding:10px 12px; background:#f7f7f9; border:1px solid #ededf0; border-radius:10px; margin:8px 8px 10px; }
.cart-promo .promo-bar{ height:6px; background:#e8e8ed; border-radius:999px; overflow:hidden; margin-top:8px; }
.cart-promo .promo-fill{ height:100%; background:#34c759; }

/* Promo CTA – mobile-first, elegant */
.cart-item.promo.promo-cta{ display:block; margin:8px 8px 10px; padding:10px 12px; border-radius:12px; background:#fffef5; border:1px solid #f6e9c6; }
.cart-item.promo.promo-cta .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cart-item.promo.promo-cta .cta-text{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; font-weight:600; font-size:12px; color:#1d1d1f; line-height:1.25; }
.cart-item.promo.promo-cta .cta-text::before{ content:""; width:18px; height:18px; display:inline-block; margin-right:2px; vertical-align:-4px; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 12h18"/><path d="M12 8v13"/><path d="M12 8c-1.5 0-3-1-3-2s1.5-2 3 0c1.5-2 3-1 3 0s-1.5 2-3 2z"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 12h18"/><path d="M12 8v13"/><path d="M12 8c-1.5 0-3-1-3-2s1.5-2 3 0c1.5-2 3-1 3 0s-1.5 2-3 2z"/></svg>') no-repeat center/contain; }
.cart-item.promo.promo-cta .cta-btn{ height:40px; padding:0 16px; border-radius:10px; border:1px solid #34c759; background:#fff; color:#0a7f27; font-weight:700; width:auto; min-width:120px; text-align:center; }
.cart-item.promo.promo-cta .cta-btn:active{ transform:scale(0.98); }

@media (max-width: 360px){
  .cart-item.promo.promo-cta .cta-btn{ flex:1 0 100%; }
}

/* Fit content on small screens – avoid horizontal scroll */
.ci-img img{ width:52px; }
.ci-main .ci-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
}
.ci-side-top, .ci-side-bottom{ min-width:0 !important; }
.ci-side-top .ci-trash{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; }
.ci-side-top .ci-trash{ background:transparent; border:none; padding:0; color:#6e6e73; -webkit-appearance:none; appearance:none; }
.ci-side-top .ci-trash svg{ display:none; }
.ci-side-top .ci-trash::before{ content:""; width:18px; height:18px; display:block; background:currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>') no-repeat center / contain; }
.ci-price{ white-space:nowrap; font-size:13px; }
.ci-price .ci-old{ color:#a0a0a5; text-decoration:line-through; margin-right:8px; font-weight:600; }
.ci-price .ci-new.ci-promo{ color:#d92d20;  font-weight:900; }
.qty-group .qbtn{ width:26px; height:26px; line-height:26px; }
.qty-group .qval{ width:28px; }

/* ===== Promo Picker (modal) ===== */
/* Promo Picker Modal - Clean & Modern */
.promo-picker{ 
  position:fixed; 
  inset:0; 
  z-index:3000; 
  display:flex; 
  align-items:flex-start; 
  justify-content:center; 
  padding:20px 16px; 
  overflow-y:auto;
}

.promo-picker .pp-overlay{ 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,.4); 
  backdrop-filter:blur(4px);
}

.promo-picker .pp-modal{ 
  position:relative; 
  width:100%; 
  max-width:480px; 
  background:#fff; 
  border-radius:20px; 
  box-shadow:0 20px 60px rgba(0,0,0,.15); 
  margin:auto;
  overflow:hidden;
}

.promo-picker .pp-head{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:20px 20px 16px; 
  border-bottom:1px solid #f0f0f0;
}

.promo-picker .pp-head h3{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:#1d1d1f;
  letter-spacing:-0.01em;
}

.promo-picker .pp-close{ 
  width:32px; 
  height:32px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  border:none; 
  border-radius:50%; 
  background:#f5f5f7; 
  color:#8e8e93; 
  font-size:18px; 
  cursor:pointer;
  transition:all .15s ease;
}

.promo-picker .pp-close:hover{
  background:#e8e8ed;
  color:#1d1d1f;
}

.promo-picker .pp-hint{ 
  padding:0 20px 16px; 
  color:#8e8e93; 
  font-size:14px; 
  line-height:1.4;
  margin:0;
}

.promo-picker .pp-grid{ 
  display:grid; 
  grid-template-columns:repeat(4, 1fr); 
  gap:12px; 
  padding:0 20px 20px;
}

.promo-picker .pp-item{ 
  border:1px solid #f0f0f0; 
  border-radius:12px; 
  padding:8px; 
  background:#fff; 
  cursor:pointer; 
  display:flex; 
  flex-direction:column; 
  gap:6px; 
  transition:all .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  position:relative;
}

.promo-picker .pp-item:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 8px 25px rgba(0,0,0,.08); 
  border-color:#e0e0e0;
}

.promo-picker .pp-item:active{ 
  transform:translateY(0); 
  transition-duration:.1s;
}

.promo-picker .pp-item.disabled{ 
  opacity:.4; 
  pointer-events:none; 
}

.promo-picker .pp-item img{ 
  width:100%; 
  aspect-ratio:2/3; 
  object-fit:cover; 
  border-radius:8px; 
  background:#f8f9fa;
}

.promo-picker .pp-name{ 
  font-size:11px; 
  font-weight:500; 
  color:#1d1d1f; 
  line-height:1.3; 
  display:-webkit-box; 
  -webkit-line-clamp:2; 
  line-clamp:2; 
  -webkit-box-orient:vertical; 
  overflow:hidden;
  text-align:center;
}

/* Responsive adjustments */
@media (max-width:479px){ 
  .promo-picker .pp-grid{ 
    grid-template-columns:repeat(3, 1fr); 
    gap:10px;
  }
  .promo-picker .pp-name{ 
    font-size:10px; 
  }
}

@media (min-width:600px){ 
  .promo-picker .pp-modal{ 
    max-width:560px; 
  }
  .promo-picker .pp-grid{ 
    grid-template-columns:repeat(5, 1fr); 
    gap:14px;
  }
  .promo-picker .pp-name{ 
    font-size:12px; 
  }
}

/* Close button – mobile-first aesthetics */
#cartPopup .cart-close{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e5e7; border-radius:12px; background:#f7f7f9; color:#1d1d1f; font-size:20px; line-height:1; padding:0; }
#cartPopup .cart-close:active{ transform:scale(0.98); }
#cartPopup .cart-close:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,116,217,.12); }

/* Checkout step (Step 2) – mobile-first styles */
#cartPopup .order-form{ display:flex; flex-direction:column; gap:12px; padding:4px 0; }
#cartPopup .qo-field{ display:flex; flex-direction:column; gap:6px; }
#cartPopup .qo-label{ font-size:13px; color:#1d1d1f; font-weight:600; }
#cartPopup .qo-input{ height:44px; border:1px solid #dcdcdf; border-radius:12px; padding:10px 12px; background:#fff; font-size:14px; color:#1d1d1f; caret-color:#1d1d1f; -webkit-user-select:text; user-select:text; }
#cartPopup .qo-input::placeholder{ color:#9b9ba0; opacity:1; }
#cartPopup .qo-input:focus{ outline:none; border-color:#0074d9; box-shadow:0 0 0 3px rgba(0,116,217,.12); }
#cartPopup .helper{ color:#6e6e73; font-size:12px; }
#cartPopup .error{ color:#d93025; font-size:12px; }

/* Delivery row and logo */
#cartPopup .qo-delivery{ display:flex; align-items:center; gap:10px; }
#cartPopup .qo-delivery .qo-delivery-logo img{ width:16px; height:16px; display:block; }

/* NP suggestions dropdown */
#cartPopup .np-fields{ display:flex; flex-direction:column; gap:10px; }
#cartPopup .np-suggest{ border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
#cartPopup .np-suggest{ z-index: 2000; }
#cartPopup .np-suggest .np-item{ padding:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#cartPopup .np-suggest .np-item:hover{ background:#f7f7f9; }

/* Step actions */
#cartPopup .order-form .back-btn{ height:46px; border-radius:12px; border:1px solid #cdcdcf; background:#fff; }
#cartPopup .order-form .order-submit{ height:46px; border:none; border-radius:12px; background:#0074d9; color:#fff; font-weight:700; }

@media (max-width: 360px){
  #cartPopup .cart-modal{ width:100vw; border-radius:0; }
  .cart-item{ grid-template-columns: 50px 1fr auto; gap:6px; padding:6px 6px; }
  #cartPopup .cart-content{ padding:6px 8px; }
  #cartPopup .totals{ padding:8px; gap:6px; }
}