/* --- Cart dock wrapper --- */
/* Bottom drawer positioning */
.cart-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 60;
    /* existing visuals you already added can stay below */
    background: #fff;
    border: 1px solid #e4efe8;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    padding: 18px 18px calc(14px + env(safe-area-inset-bottom));
  }
  
  /* actually hide when we toggle the class in JS */
  .cart-dock.hidden {
    display: none;
  }
  
  /* optional: ensure scrollable content inside the dock doesn’t exceed viewport */
  #cartItems {
    max-height: min(38vh, 340px);
    overflow: auto;
  }
  /* header */
  .cart-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .cart-header h3 {
    margin: 0;
    font-size: 22px;
    color: #1f513c;
  }
  .cart-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* items */
  #cartItems .row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e9f2ed;
  }
  #cartItems .row:last-child { border-bottom: none; }
  #cartItems .name { font-weight: 600; color:#294b3b; }
  #cartItems .price { color:#6b7c74; }
  .qty-mini { display:flex; align-items:center; gap:10px; }
  .qty-mini button {
    width: 40px; height: 40px; border-radius: 12px;
    background:#edf4f0; border:1px solid #d8e7df; color:#2e8057;
    font-size:18px; font-weight:700; line-height:1; cursor:pointer;
  }
  .qty-mini span { min-width: 18px; text-align:center; }
  
  /* total + textarea */
  .cart-total {
    display:flex; align-items:baseline; gap:8px;
    margin-top: 6px; margin-bottom: 10px;
    color:#1f513c;
  }
  #orderComment {
    width:100%; min-height:90px; resize:vertical;
    border:1px solid #dbe9e2; border-radius:12px; padding:12px;
    outline:none; box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  }
  #orderComment:focus { border-color:#2e8057; }
  
  /* actions row */
  .actions {
    display:flex; align-items:center; gap:12px;
    margin-top: 12px;
  }
  
  /* primary button unchanged (assumes your theme) */
  .primary {
    flex:1;
    padding:14px 16px; border:none; border-radius:14px;
    background:#2e8057; color:#fff; font-weight:800; font-size:16px;
    cursor:pointer; box-shadow:0 6px 16px rgba(46,128,87,.25);
  }
  .primary:disabled { filter:grayscale(.35) brightness(.95); opacity:.75; cursor:not-allowed; }
  
  /* --- Icon buttons (minimize, trash) --- */
  .icon-btn {
    width:48px; height:48px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:14px; border:1px solid transparent;
    color:#2e8057; background:#eff6f2;
    cursor:pointer; transition:transform .12s ease, background .2s ease, border-color .2s ease;
  }
  .icon-btn svg { width:22px; height:22px; }
  .icon-btn:hover { transform:translateY(-1px); background:#e7f2ec; }
  .icon-btn:active { transform:translateY(0); }
  
  /* softer/ghost variants if needed */
  .icon-btn--ghost { background:#f6faf8; border-color:#e4efe8; }
  .icon-btn--soft  { background:#f0f6f3; border-color:#e1ede7; }
  
  @media (max-width: 520px) {
    .cart-dock { padding: 14px 14px 12px; border-radius: 14px 14px 0 0; }
    .icon-btn { width:44px; height:44px; border-radius:12px; }
    .primary { padding:12px 14px; border-radius:12px; }
  }

  #cartDock {
    background: #fff;
    border: 1px solid var(--accent-light);
    border-radius: 12px;
    padding: 14px;
    margin: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }